/* CM MABN - Components 2023 CSS Document */


[class^="icon-"].medium, [class*=" icon-"].medium {
    font-size: 2rem;
}

[class^="icon-"].big, [class*=" icon-"].big {
    font-size: 2.4rem;
}
/* =============================================================================
   Module search
   ========================================================================== */
#open_search {
    position: relative;
    background-color: #EEE;
    width: 60px;
    height: 60px;
    margin: 6px;
    border: none;
    cursor: pointer;
    transition: .2s ease;
    z-index: 111;
    border: 1px solid black;
}
#close_search {
    border: 1px solid black;
    display: none;
    position: absolute;
    top: 0;
    right: -2%;
    border: none;
    background: none;
    color: #EEE;
    cursor: pointer;
}
#close_search:hover{
    color: #DDD;
}
#close_search.active {
    display: block;
    z-index: 111;
}
#open_search:hover {
    background: #DDD;
}

#box_search {
    position: absolute;
    top: 6px;
    left: 0;
    width: calc(100% - 70px);
    height: 60px;
    display: none;
    background-color: #FFF;
    padding: 8px 20px;
    border-width: 1px 0 1px 4px;
    border-style: solid;
    border-color: #EEE #EEE #EEE var(--color4);
    z-index: 110;
}

#box_search.active {
    display: block;
}

#box_search .search-txt {
    height: 36px;
    padding: 0;
    border-width: 0 0 1px 0;
    border-color: #878787;
    border-style: solid;
    border-radius: 0;
    font-size: 1.6rem;
    letter-spacing: .5px;
    transition: none;
}

#box_search .search-txt:focus {
    outline: none;
    border-color: var(--color0);
}

    #box_search label {
        position: fixed;
        top: -100px;
    }

#form_search2{margin: 0 0 0 -20px;}
    #form_search2 .icon-search {display: inline-block; color: #212121;}
    #form_search2 .search-txt {
        display: inline-block;
        width: calc(100% - 30px);
    }


#showPWD{display: none;}

/* =============================================================================
   $GRDC : contentList / module & component
========================================================================== */
article.summary {
    margin-bottom: 20px;
}
article.summaryHome.elt_1 h2 {font-size: 2.26rem; line-height: 1.2;}
article.summaryHome.elt_2 h2 {font-size: 2.16rem; line-height: 1.2;}
article.summaryHome.elt_2 .metadata, article.summaryHome.elt_3 .metadata, article.summaryHome.elt_4 .metadata { margin-top: 8px;}

article.summary h2, article.summaryHome h2,
article.summary .text,
article.summary figure, article.summaryHome figure,
article.summary .addBookmark, article.summaryHome .addBookmark, article.summaryHome .addLike, article.summary .addLike {cursor: pointer;}

article.summary h2 {font-size: 1.8rem; width: 100%; }

article.summary .tag {
    font-size: 1.3rem; 
    margin: 0 0 5px 0; 
    border-radius: 0; 
    border: none; 
    position: relative; 
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

article.summaryHome .tag { 
    border: 1px solid rgba(255,255,255,.6);
    padding: 3px 8px;
    background: rgba(0,0,0,0.4);
    font-size: 1.1rem; 
    font-weight: 600;
    margin: 0 0 8px 0;
    letter-spacing: .5px;
    text-transform: uppercase;
}

article figure {min-width: 180px; overflow: hidden;}
article.summary figure {}
article figure img{width: 100%; transition: transform .2s;}
article:hover figure img{transform: scale(1.1);}
article p{font-size: 1.36rem;}

article .tag.color0 {
    color: #000;
    border-color: var(--color0);
}
article.summary .tag.color1 {
    color: var(--color1);
    border-color: var(--color1);
}
article.summary .tag.color2 {
    color: var(--color2b);
    border-color: var(--color2b);
}
article.summary .tag.color3 {
    color: var(--color3);
    border-color: var(--color3);
}
article.summary .tag.color4 {
    color: var(--color4);
    border-color: var(--color4);
}

article.summary .text {
    margin-top: 10px;
    line-height: 1.4;
    width: 100%;
}

article .corps{ 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    width: 100%;
}

.primaryList article .corps{padding: 0 10px; margin: 10px 0 0 0;}
.primaryList article h2 {
    font-size: 2.26rem;
    line-height: 1.2;
}

article .metadata {
    font-size: 1.36rem;
    color: #000;
    margin: 20px 0 0 0;
}

article .metadata > li{ 
    margin-right: 10px !important;
}

.like-counter{font-size: 1.1rem;}
/* liste de contenu */
.ContentListComponent .contentList {
    flex-wrap: wrap;
    justify-content: space-between;
}
.ContentListComponent .contentList article.summary .tag{display: none;}

.secondaryList.column {
    padding: 0 !important;
    border-radius: 6px;
}

.secondaryList > article > figure {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.secondaryList > article > .corps {
    margin-top: 25px;
    padding: 0 25px;
}

/* Bookmark */
.addBookmark {
    cursor: pointer;
    border: none;
    background: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

    .addBookmark:hover .toolTip,
    .addBookmark:focus-visible .toolTip{
        visibility: visible;
    }
    /*
    .addBookmark em {
        font-size: 1.4rem !important;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        vertical-align: super;
        line-height: 16px;
    }
*/

.ico-bookmark::before {
    vertical-align: top;
    -webkit-text-stroke: 1.5px #1F284D;
    color: transparent;
}
.addBookmark.active .icon-bookmark::before {
    -webkit-text-stroke: 1.5px #1F284D; /* largeur et couleur du contour */
    color: #1F284D;
}

.addBookmark:hover em {
    text-decoration: underline;
}

.ContentDetailComponent .detail .toolBox .icoCBN {
    line-height: 40px;
    font-size: 2.5rem;
}

/* =============================================================================
$GRDC : contentDeail / component
========================================================================== */
.ContentDetailComponent h1.is-big-heading {
    padding: 0 60px;
    margin: 10px 0 20px 0;
    color: var(--color-primary);
    font-weight: 700;
}

.ContentDetailComponent .headline {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
}

.ContentDetailComponent .is-very-small-heading {color: var(--color-dark-grey);}

.ContentDetailComponent .color1 .headline {color: var(--color1);}
.ContentDetailComponent .color2 .headline {color: var(--color2b);}
.ContentDetailComponent .color3 .headline {color: var(--color3);}
.ContentDetailComponent .color4 .headline {color: var(--color4);}

.ContentDetailComponent .accroche {
    font-size: 2.2rem;
    margin-bottom: 40px;
}

.ContentDetailComponent .accroche p {
    font-size: 2rem;
    line-height: 1.8;
}
.ContentDetailComponent .detail h2 {
    margin-top: 40px;
    font-size: 2.2rem;
}

.ContentDetailComponent .detail h2.rel {
    font-size: 3rem;
}


.ContentDetailComponent .detail.color1 h2, .ContentDetailComponent .detail.color1 p a{
    color: var(--color1);
}
.ContentDetailComponent .detail.color2 h2, .ContentDetailComponent .detail.color2 p a {
    color: var(--color2b);
}
.ContentDetailComponent .detail.color3 h2, .ContentDetailComponent .detail.color3 p a {
    color: var(--color3);
}
.ContentDetailComponent .detail.color4 h2, .ContentDetailComponent .detail.color4 p a {
    color: var(--color4);
}

.ContentDetailComponent .detail .mainContent {
    padding: 30px 80px;
    position: relative;
}

@media screen and (max-width: 768px){
    .ContentDetailComponent .detail .mainContent {
        padding: 20px 0;
    }
        .ContentDetailComponent .detail .mainContent .is-narrow {
            padding: 0 !important;
            width: calc(100% - 80px);
        }
        .ContentDetailComponent .detail .sticky {
            width: 80px;
        }
}

.ContentDetailComponent .detail .mainContent .is-narrow{padding: 0 100px 0 40px; }
.ContentDetailComponent .detail .mainContent p {
    margin: 20px 0;
    line-height: 1.7;
}
.ContentDetailComponent .detail .mainContent p.is-very-small-heading {
    font-size: 1.2rem;
}

.ContentDetailComponent .detail .mainImage, .ContentDetailComponent .detail .galerieContent {
    width: 100%;
    position: relative;
    margin: auto;
}
.ContentDetailComponent .detail .mainImage img {width: 100%;}
    .ContentDetailComponent .detail .mainImage::before, .ContentDetailComponent .detail .galerieContent::before {
        content: '';
        width: 80%;
        height: 65%;
        background-color: #888;
        display: block;
        position: absolute;
        top: -10px;
        left: -10px;
    }
.ContentDetailComponent .detail.color1 .mainImage::before, .ContentDetailComponent .detail.color1 .galerieContent::before {
    background-color: var(--color1);
}
.ContentDetailComponent .detail.color2 .mainImage::before, .ContentDetailComponent .detail.color2 .galerieContent::before {
    background-color: var(--color2b);
}
.ContentDetailComponent .detail.color3 .mainImage::before, .ContentDetailComponent .detail.color3 .galerieContent::before {
    background-color: var(--color3);
}
.ContentDetailComponent .detail.color4 .mainImage::before, .ContentDetailComponent .detail.color4 .galerieContent::before {
    background-color: var(--color4);
}
.ContentDetailComponent .detail figcaption {font-size: 1.2rem;}

.ContentDetailComponent .detail .imageContent{width: 300px; margin: 20px; position: relative;}

.ContentDetailComponent .detail .imageContent.is-float-left {

    margin: 20px 20px 20px 0;
}

.ContentDetailComponent .detail .imageContent.is-float-right {
   
    margin: 20px 0px 20px 20px;
}


.ContentDetailComponent .detail.color1 .imageContent::before {
    background-color: var(--color1);
}

.ContentDetailComponent .detail.color2 .imageContent::before {
    background-color: var(--color2b);
}

.ContentDetailComponent .detail.color3 .imageContent::before {
    background-color: var(--color3);
}

.ContentDetailComponent .detail.color4 .imageContent::before {
    background-color: var(--color4);
}
.ContentDetailComponent .detail .imageContent figcaption {
    font-size: 1.2rem;
}
.ContentDetailComponent .detail .insetComponent {
    padding: 10px;
    max-width: 90%;
    position: relative;
    margin: 30px auto;
    z-index: 2;
    background: #FFF;
}

.ContentDetailComponent .detail .textComponent {
    overflow: hidden;
}

.ContentDetailComponent .detail .insetComponent .border {
    border: 1px solid #EEE;
    padding: 20px;
    overflow: hidden;
}

    .ContentDetailComponent .detail .insetComponent p {
        margin: 5px 0;
        font-size: 1.4rem;
    }
    .ContentDetailComponent .detail .insetComponent .insetTitle {
        margin: 0 0 10px 0;
        font-weight: bold;
    }

.ContentDetailComponent .detail .textComponent ul {
    margin: 0 0 0 20px;
}
.ContentDetailComponent .detail .textComponent ul li{position: relative;}

    .ContentDetailComponent .detail .textComponent ul li::before, .ContentDetailComponent .detail .insetComponent ul li::before {
        content: '';
        font-family: 'icoCBN';
        padding: 0 5px 0 0;
        position: absolute;
        left: -20px;
        top: 0;
    }

    .ContentDetailComponent .detail .textComponent ul li::before, .ContentDetailComponent .detail .insetComponent ul li::before {
        content: '\e928';
    }

    .ContentDetailComponent .detail .textComponent ul li > ul li::before, .ContentDetailComponent .detail .insetComponent ul li > ul li::before {
        content: '\e919';
    }


    .ContentDetailComponent .detail .textComponent ol li, .ContentDetailComponent .detail .insetComponent ol li {
        list-style-type: decimal;
    }

    .ContentDetailComponent .detail .pdfComponent {
        padding: 20px;
        max-width: 90%;
        position: relative;
        margin: 30px auto;
        z-index: 2;
        background: #FFF;
    }
.ContentDetailComponent .detail .pdfCaption {
    font-size: 1.3rem;
}
.ContentDetailComponent .detail .pdfComponent img {
    max-width: 240px;
}
.ContentDetailComponent .detail p.chiffre {font-size: 3rem; 
}
.ContentDetailComponent .detail .pdfComponent::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 60px solid #FAFAFA;
    border-left: 60px solid transparent;
}
.ContentDetailComponent .detail .pdfComponent::before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 60px solid #EEE;
    border-right: 60px solid transparent;
}
.ContentDetailComponent .detail .moviePlayer, .ContentDetailComponent .detail .videoContent {
    text-align: center;
    margin: 0 0 30px 0;
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
}
.ContentDetailComponent .detail .moviePlayer iframe, .ContentDetailComponent .detail .videoContent iframe {
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

.ContentDetailComponent .detail .toolBox {
    padding: 10px;
}

.ContentDetailComponent .detail .toolBox .is-rounded {
    border-radius: 4px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #CCC;
    margin: 0 0 4px 0;
    cursor: pointer;
}
.ContentDetailComponent .detail .toolBox .is-rounded:hover {
    border: 1px solid var(--color-primary);
}
.ContentDetailComponent .toolBox .is-rounded button,
.ContentDetailComponent .toolBox .is-rounded .goToAnchor {
    line-height: 40px;
    position: relative;
    background: none;
    border: none;
}
.ContentDetailComponent .toolBox button {
    cursor: pointer;
}
.ContentDetailComponent .toolBox .is-rounded a:hover {
    text-decoration: none;
}


@media screen and (max-width: 480px) {
    .ContentDetailComponent .detail .sticky{width: 70px;}
    .ContentDetailComponent .detail .toolBox {
        padding: 0;
    }
}
.ContentDetailComponent .detail .toolBox .addBookmark em {
    line-height: 1;
    font-size: 1.1rem !important;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 40px;
}



.ContentDetailComponent .detail .textComoponent {
    overflow: hidden;
    position: relative
}


.ContentDetailComponent .detail .textComoponent.withImage figure{width: 40%;}

    .ContentDetailComponent .detail .question {
    font-weight: 600;
}
.ContentDetailComponent .detail .answer{
    margin: 8px 0 8px 30px !important;
    font-style: italic;
    display: inline-block;
}

.ContentDetailComponent .box.is-narrow {
    padding: 0 140px;
}

@media screen and (max-width: 768px) {
    .ContentDetailComponent .box.is-narrow {
        padding: 0;
    }
}
.ContentDetailComponent h2.hyphen {
    font-size: 2.2rem;
    font-weight: 600;
}

.ContentDetailComponent .citation {
    font-style: italic;
    text-align: center;
    position: relative;
    margin: 40px 60px;
    padding: 1px 0;
}
    .ContentDetailComponent .citation .txt{}

.ContentDetailComponent .color1 .citation .txt{color: var(--color1);}
.ContentDetailComponent .color2 .citation .txt {color: var(--color2b);}
.ContentDetailComponent .color3 .citation.txt {color: var(--color3);}
.ContentDetailComponent .color4 .citation.txt {color: var(--color4);}

.ContentDetailComponent .citation::before {
    content: '';
    height: 20px;
    width: 2px;
    background: #1F284D;
    position: absolute;
    bottom: calc(100% + 10px);
    transform: translate(50%, 50%);
    left: 50%;
}

.ContentDetailComponent .citation::after {
    content: '';
    height: 20px;
    width: 2px;
    background: #1F284D;
    position: absolute;
    top: calc(100% - 10px);
    transform: translate(50%, 50%);
    left: 50%;
}

.ContentDetailComponent .citation .nom{font-size: 1.2rem;}

.ContentDetailComponent .galerieContent .item{text-align: center;}
.ContentDetailComponent .galerieContent img {display: inline-block
    
}
/* module : GRDC_List_Model1 - mosaique accueil */
.GRDC_List_Model1 .grid {
    --col-padding: 1px;
    --col-margin-top: 0;
    --col-margin-bottom: 0;
}

/* home */
.GRDC_List_Model1 .summaryHome {
    position: relative;
    margin: 0;
    padding: 0;
}

.GRDC_List_Model1 .summaryHome figure {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

.GRDC_List_Model1 figure::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(33,33,33);
    background: linear-gradient(0deg, rgba(0,0,0,1) 2%, rgba(255,255,255,0) 100%);
    height: 65%;
    display: block;
    z-index: 1;
}
.GRDC_List_Model1 .summaryHome figure img {
    border-radius: 0;
}

.GRDC_List_Model1 .summaryHome .corps {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
    color: #FFF;
    width: calc(100% - 40px);
}
.GRDC_List_Model1 .summaryHome .corps h2 {
    width: 100%;
}


.GRDC_List_Model1 .summaryHome .corps * {
    color: #FFF;
    z-index: 2;
}
.GRDC_List_Model1 .summaryHome .corps .ico-bookmark::before {
    -webkit-text-stroke: 1.5px #FFF;
    z-index: 2;
}
.GRDC_List_Model1 .summaryHome .corps .addBookmark.active .icon-bookmark::before{
    color: #FFF;
}

.GRDC_List_Model1 .summaryHome .corps .addBookmark:hover .icon-bookmark::before {
    color: #ffffff69;
}

.GRDC_List_Model1 .summaryHome h2 {
    font-size: 1.6rem;
}

.GRDC_List_Model1 .metadata {
    font-size: 1.1rem;
}

@media screen and (max-width: 480px) {
    article.summaryHome.elt_1 h2, article.summaryHome.elt_2 h2 {
        font-size: 1.7rem;
    }
    .GRDC_List_Model1 .summaryHome figure img {
        height: 220px;
    }
}

/* module : GRDC_List_Model2 - meme rubrique */
.GRDC_List_Model2 .title {
    text-transform: uppercase;
}

.GRDC_List_Model2 li {
    background-color: #FFF;
    margin: 0 8px 10px 8px;
}

.GRDC_List_Model2 h2 a {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-primary)
}

/* Poll */
.GRDC_webPoll .question {
    font-size: 1.54rem;
    font-weight: 600;
    line-height: 2.2rem;
    text-align: center;
    padding: 0 20px;
}

.GRDC_webPoll .alert {
    margin: 10px 0;
    font-size: 1.2rem;
}

.GRDC_webPoll .reponse {
    font-size: 1.4rem;
}

.GRDC_webPoll .percent {
    font-size: 1.2rem;
    line-height: 1rem;
}

.GRDC_webPoll .total {
    margin: 16px 0;
    font-size: 1.4rem;
    text-align: right;
}

.pollComponent legend {
    font-weight: 700;
}

.pollComponent ul.poll_choices {
    margin: 0;
}
    .pollComponent ul.poll_choices li {
        display: flex;
        align-items: center;
        margin: 8px 0;
        border: 1px solid #dae0e7;
        border-radius: 4px;
        background: #fbfbfb;
    }

        .pollComponent ul.poll_choices li:hover {
            background-color: #f8f8f8;
        }

    .pollComponent ul.poll_choices input {
        cursor: pointer;
        display: block;
        margin: 10px;
    }

    .pollComponent ul.poll_choices label {
        cursor: pointer;
        display: block;
        flex-grow: 1;
        padding: 10px 0;
        font-size: 1.4rem;
        margin: 0;
    }


    .pollComponent ul.poll_choices input:checked + label {
        font-weight: 700;
        color: #3A3B41;
    }


.pollComponent p.reponse {
    margin: 10px 0 0;
    font-weight: 500;
}

.pollComponent .resconteneur {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .pollComponent .resconteneur .bar_container {
        flex-grow: 1;
        background: #f1f7ff;
        border-radius: 10px;
    }

.pollComponent .resultat {
    position: relative;
    height: 6px;
    min-width: 6px;
    border-radius: 10px;
    background: rgb(0,68,148);
    background: linear-gradient(90deg, rgba(0,68,148,1) 0%, rgba(18,93,181,1) 50%, rgba(50,124,210,1) 100%);
}

.percent {
    margin-left: 20px;
    text-align: right;
}

.pollComponent fieldset {
    margin-top: 12px;
}

/* =============================================================================
   $GRDC Linkbutton : module
   ========================================================================== */
.GRDC_linkButtonsImage{}
.GRDC_linkButtonsImage li{position: relative; margin: 0 0 20px 0; overflow: hidden;}
    .GRDC_linkButtonsImage p.text {
        position: absolute;
        padding: 5px 10px;
        color: #FFF;
        font-size: 1.3rem;
        background: rgba(0,0,0,0.6);
        bottom: 10px;
        left: 0;
        
    }

.GRDC_linkButtonsImage img {
    transition: transform .2s;
}
    .GRDC_linkButtonsImage li:hover img {
        transform: scale(1.1);
    }
/* =============================================================================
   $GSOC Contribution : module & form
   ========================================================================== */
.contributioncall {
    margin: 20px auto;
    width: 90%;
    background-color: #FFF;
    padding: 30px;
    border-radius: 6px;
}
.contributioncall h2{margin: 0 0 20px 0 !important;}
.rgpd-infos {font-size: 1.1rem;}
.contributioncall .information {
    margin: 0 !important;
    font-size: 1.1rem;
}
.contributioncall .information .strong{
    font-weight: bold;
}

/* =============================================================================
   $GSOC : module & component
   ========================================================================== */
/* commentaire */
.ContentDetailComponent .listComments {
}

.ContentDetailComponent .listComments .comment{
    background: #FFF; 
    border-radius: 6px;
    margin: 0 0 20px 0;
    padding: 10px 20px 20px 20px;
    overflow: hidden;
}

    .ContentDetailComponent .listComments .infoComment {
        border-bottom: 1px solid #dae0e7;
        margin: 0 0 8px 0;
    }
        .ContentDetailComponent .listComments .infoComment .avatar {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 100%;
            vertical-align: middle;
            background-color: #dae0e7;
            margin: 0 5px 0 0;
        }
      

    .ContentDetailComponent .listComments .dateComment {
        text-align: right;
        font-size: 1.3rem;
        color: #696969;
    }
    .ContentDetailComponent .listComments .textComment {
        font-size: 1.4rem;
    }
    .ContentDetailComponent .listComments .signaler {
        float: right;
        font-size: 1.3rem;
    }

#CommentForm .blocboutons{text-align: right;}
#CommentAlert{font-size: 1.36rem;}
.addComments {
    margin: 30px 0 0 0;}
.addComments h4{margin: 0 0 10px 0; font-weight: 500;}
    .addComments h4 [class^="icon-"]:before{vertical-align: middle;}
    .addComments .icoCBN {font-size: 2.3rem;}



/* star-rating  */
.GSOC_rating .title {
    display: block;
}

.GSOC_rating .star-rating a {text-indent: -9999px;}

.star-rating-control {height: 50px; text-align: center;}

.star-rating, .star-rating-on {
    display: inline-block;
    margin: 3px;
    cursor: pointer;
    border: none;
    background: none;
}

    .star-rating .ico-star{
        width: 34px;
        height: 34px;
        font-size: 3.4rem;
        text-align: center;
        -webkit-text-stroke: 2px #1F284D; /* largeur et couleur du contour */
        color: transparent; /* rend le remplissage de la police transparent */
    }

    .star-rating-on .ico-star,
    .star-rating-hover .ico-star{
        color: #1F284D;
    }

    .rating-cancel a, .star-rating a {
        display: block;
        width: 24px;
        height: 24px;
    }

.star-rating-readonly a {
    cursor: default !important
}

.star-rating {
    overflow: hidden !important;
}

/* GSOC_topMostView */
.GSOC_topMostView .topMost a {
    display: block;
    overflow: hidden;
}

.GSOC_topMostView .topMost a:hover {
    text-decoration: none;
}

.GSOC_topMostView .topMost > li {
    vertical-align: top;
    border-bottom: 1px solid #e5e5e5;
    white-space: nowrap;
}

.GSOC_topMostView .topMost .num {
    display: inline-block;
    width: 40px;
    font-size: 3rem;
    color: #fff;
    text-align: center;
    height: 65px;
    line-height: 65px;
    -webkit-transition: width .3s ease-in;
    -moz-transition: width .3s ease-in;
    -o-transition: width .3s ease-in;
    transition: width .3s ease-in;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.GSOC_topMostView .topMost li:hover .num, .GSOC_topMostView .topMost a:focus .num {width: 55px;}

.GSOC_topMostView .topMost .color-1 .num {background-color: #3C5A92;}
.GSOC_topMostView .topMost .color-2 .num {background-color: #4b6ca9;}
.GSOC_topMostView .topMost .color-3 .num {background-color: #587bbb;}
.GSOC_topMostView .topMost .color-4 .num {background-color: #698ccd;}
.GSOC_topMostView .topMost .color-5 .num {background-color: #7a9ddd;}

.GSOC_topMostView .topMost .objectlinker-text {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 40px);
    height: 100%;
    font-size: 1.3rem;
    white-space: normal;
    padding: 10px;
    color: #555;
}

.GSOC_topMostView .GetMostViewed {
    margin: 6px 0 0 0;
}

/* GSOC_Most_Liked */
.GSOC_Most_Liked a {
    display: block;
    overflow: hidden;
}

    .GSOC_Most_Liked a:hover {
        text-decoration: none;
    }

.GSOC_Most_Liked ol > li {
    vertical-align: top;
    border-bottom: 1px solid #e5e5e5;
    white-space: nowrap;
}

.GSOC_Most_Liked li .num {
    display: inline-block;
    width: 40px;
    font-size: 3rem;
    color: #fff;
    text-align: center;
    height: 65px;
    line-height: 65px;
    -webkit-transition: width .3s ease-in;
    -moz-transition: width .3s ease-in;
    -o-transition: width .3s ease-in;
    transition: width .3s ease-in;
}

.GSOC_Most_Liked li:hover .num, .GSOC_Most_Liked a:focus .num {
    width: 55px;
}

.GSOC_Most_Liked .color-1 .num {
    background-color: #1d9305;
}
.GSOC_Most_Liked .color-2 .num {
    background-color: #2ea915;
}
.GSOC_Most_Liked .color-3 .num {
    background-color: #3dbb23;
}
.GSOC_Most_Liked .color-4 .num {
    background-color: #4cc733;
}
.GSOC_Most_Liked .color-5 .num {
    background-color: #6bdd53;
}

.GSOC_Most_Liked .mostLikedText {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 40px);
    height: 100%;
    font-size: 1.3rem;
    white-space: normal;
    padding: 10px;
    color: #555;
}

.GSOC_Most_Liked .GetMostViewed {
    margin: 6px 0 0 0;
}


/* */
.GSOC_topMostRate::before {
    content: '\e92c';
    font-family: icoCMO;
    top: -5px;
    right: 0;
    position: absolute;
    font-size: 2.4rem;
    color: #354394;
}

.GSOC_topMostRate .title {
    position: relative;
    vertical-align: top;
    padding: 0 40px 0 0;
    font-family: OpenSans-Bold;
    font-size: 1.9rem;
}

.GSOC_topMostRate .topMost a {
    display: block;
    overflow: hidden;
}

.GSOC_topMostRate .topMost > div {
    vertical-align: top;
    border-bottom: 1px solid #e5e5e5;
    white-space: nowrap;
}

.GSOC_topMostRate .topMost .num {
    display: inline-block;
    width: 42px;
    font-size: 3.2rem;
    color: #fff;
    text-align: center;
    height: 65px;
    line-height: 65px;
    -webkit-transition: width .3s ease-in;
    -moz-transition: width .3s ease-in;
    -o-transition: width .3s ease-in;
    transition: width .3s ease-in;
}

.GSOC_topMostRate .topMost div:hover .num {width: 60px;}

.GSOC_topMostRate .topMost .color-1 .num {background-color: #354394;}
.GSOC_topMostRate .topMost .color-2 .num {background-color: #535fa4;}
.GSOC_topMostRate .topMost .color-3 .num {background-color: #6872af;}
.GSOC_topMostRate .topMost .color-4 .num {background-color: #7c85b9;}
.GSOC_topMostRate .topMost .color-5 .num {background-color: #9098c4;}

.GSOC_topMostRate .topMost .objectlinker-text {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 42px);
    height: 100%;
    font-size: 1.4rem;
    white-space: normal;
    padding: 10px 12px;
    background-color: #fff;
    color: #555;
}

.GSOC_topMost h4 {
    margin-bottom: 20px;
}

#plugBestRated {
    padding-top: 10px;
}

.rateAlert {
    font-style: italic;
    font-size: 1.3rem;
}

/* =============================================================================
   $GPRF : module & component
   ========================================================================== */
header .account{font-size: 1.3rem;}
header .account .icon-user {
    background-color: #FFF;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    color: rgb(0,68,148);
    vertical-align: baseline;
    display: inline-block;
    margin: 0 5px 0 0;
    font-size: 2rem;
    text-align: center;
    line-height: initial;
    }

/* dashboard profil */
.clientCard {
    padding: 20px 40px;
    overflow: hidden;
    background: #FFF;
    border-radius: 6px;
}

.clientCard .avatar {
    float: left;
    margin: 0 30px 0 0;
    text-align: center;
}

.clientCard .pic {
    display: block;
    width: 130px;
    height: 130px;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    text-align: center;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url(/files/fr/images/avatar_default.jpg);
}

.clientCard li {
    margin: 10px 0;
}

.clientCard li .strong {
    display: inline-block;
    margin: 0 10px 0 0;
}

.clientCard li span {
    display: inline-block;
}

.clientCard li .tooltipContainer {
    display: inline-block;
}

.clientCard li .tooltipContainer button {
    color: #333;
    text-transform: none;
    font-family: 'Roboto','Arial', sans-serif;
    font-size: inherit;
}

.GPRF_updateProfile .profil-container {
    padding: 20px 40px;
    overflow: hidden;
    background: #FFF;
    border-radius: 6px;
    text-align: center;
}

.GPRF_updateProfile #imageAvatar{margin: 5px auto;}
.GPRF_updateProfile #deleteAvatar {
    cursor: pointer;
}
.GPRF_updateProfile #deleteAvatar:hover {
    text-decoration: underline;
}

#loaderAvatar {
    margin: auto;
    max-width: 160px;
}
/* BookmarkedContentList */
.bookmarks_infos {
    margin-bottom: 40px;
    padding: 0 10px;
}

/* =============================================================================
   $GRDC Event : module  agenda
   ========================================================================== */
.GRDC_ContentEvent .modContent {
    position: relative;
    padding: 5px;
}
    .GRDC_ContentEvent .modContent::before {
        content: '';
        width: 2px;
        height: 100%;
        background-color: #CCC;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10px;
    }
    .GRDC_ContentEvent .date {
        display: block;
        color: rgba(18,93,181,1);
        position: relative;
        color: rgba(18,93,181,1);
        margin: 0 0 0 16px;
        padding: 5px;
    }
.GRDC_ContentEvent .date i{
    display: inline-block;
    margin: 0 10px 0 0;
}

.GRDC_ContentEvent .date::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #7a9ddd;
    position: absolute;
    top: calc(50% - 4px);
    bottom: 0;
    left: -14px;
    border-radius: 50%;
}

.GRDC_ContentEvent .date .ddDate {font-size: 2.2rem; line-height: 1;}
.GRDC_ContentEvent .date .mmyyDate {font-size: 1.3rem;}

.GRDC_ContentEvent .event {
    display: inline-block;
    font-size: 1.3rem;
    margin: 0 0 5px 55px;
}
    .GRDC_ContentEvent .event .description{font-weight: bold; font-size: 1.4rem;}
    .GRDC_ContentEvent .event .end {
        color: var(--color-grey);
        font-size: 1.2rem;
    }

/* =============================================================================
   $GRDC / NEWL : module & component
   ========================================================================== */
    .NewsLetterSmartSubscriptionComponent .wrapper,
    .NewsLetterSmartSubscriptionComponent #wrapper {
        z-index: unset;
    }

.GRDC_newsletterSubscribe #div-newsletter-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.GRDC_newsletterSubscribe .GRDC_newsletters {
    display: flex;
    width: calc(50% - 10px);
    margin: 16px 5px;
    border-radius: 6px;
    background-color: #FFF;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

    .GRDC_newsletterSubscribe .GRDC_newsletters .nl_illustration {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 130px;
        height: 110px;
        margin: 0;
        padding: 0;
    }

        .GRDC_newsletterSubscribe .GRDC_newsletters .nl_illustration svg {
            width: 90%;
            height: 90%;
        }

        .GRDC_newsletterSubscribe .GRDC_newsletters .nl_illustration img {
            width: 100%;
            height: auto;
        }

    .GRDC_newsletterSubscribe .GRDC_newsletters .nl_infos {
        flex-grow: 1;
        width: calc(100% - 140px);
        padding-left: 32px;
    }

    .GRDC_newsletterSubscribe .GRDC_newsletters .nwl-illustration {
        display: none;
    }

    .GRDC_newsletterSubscribe .GRDC_newsletters .nl_infos .nwl-title_wrapper .nwl-title {
        font-size: 1.8rem;
        line-height: 2.4rem;
        color: #006ea0;
    }

    .GRDC_newsletterSubscribe .GRDC_newsletters .nwl-description {
        margin-top: 8px;
        font-size: 1.4rem;
    }

        .GRDC_newsletterSubscribe .GRDC_newsletters .nwl-description p {
            margin-top: 8px;
            font-size: 1.4rem;
        }


        .GRDC_newsletterSubscribe .GRDC_newsletters .nwl-description a {
            display: inline-block;
            margin-top: 6px;
            color: #125db5;
            font-size: 1.2rem;
            font-weight: 700;
        }

            .GRDC_newsletterSubscribe .GRDC_newsletters .nwl-description a:hover {
                text-decoration: underline;
            }

.GRDC_newsletterSubscribe .preview-button i {
    display: inline-block;
    background: #d8ebff;
    color: #125db5;
    padding: 6px;
    font-size: 1.4rem;
    border-radius: 20px;
    margin-right: 8px;
}

.GRDC_newsletterSubscribe .GRDC_newsletters .action {
    margin-top: 16px;
}

.GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1.6rem;
    cursor: pointer;
}

    .GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper .toggle_switch {
        position: relative;
        display: inline-block;
        width: 40px;
    }

        .GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper .toggle_switch .under_toggle {
            position: relative;
            z-index: 0;
            width: 32px;
            height: 12px;
            border-radius: 7px;
            transition: position ease .5s,background-color ease .5s;
        }

        .GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper .toggle_switch .toggle {
            position: absolute;
            top: -2px;
            z-index: 1;
            width: 16px;
            height: 16px;
            border-radius: 10px;
            box-shadow: 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12), 0 1px 3px 0 rgba(0,0,0,.20);
            transition: position ease .5s,background-color ease .5s;
        }

    .GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper.off .toggle {
        right: 6px;
        left: 0;
        background-color: #fff;
    }

    .GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper.on .toggle {
        right: 6px;
        left: auto;
    }

    .GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper.on .toggle_switch .toggle {
        background-color: #004494;
    }

    .GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper.off .under_toggle {
        background-color: rgba(0,0,0,.38);
    }

    .GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper.on .under_toggle {
        background-color: #d8ebff;
    }

    .GRDC_newsletterSubscribe .GRDC_newsletters .toggle_wrapper .toggle_label {
        display: inline-block;
        line-height: 2rem;
        font-size: 1.4rem;
        font-weight: 700;
    }

.GRDC_newsletters .toggle_wrapper.on .toggle_label {
    color: #004494;
}

.overlay.gris {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9997;
    background-color: rgba(0,0,0,.55);
}

#preview {
    z-index: 9998;
    display: none;
    width: 760px;
    height: calc(100% - 100px);
    background-color: #FFF;
    opacity: 1;
    position: fixed;
    left: 50%;
    top: 60px;
    padding: 0;
    transform: translateX(-50%);
}

        #preview .top h2 {
            text-align: center;
            margin: 16px 0;
            font-size: 1.8rem;
        }

    #preview .contentPreview {
        margin: 0 auto;
        overflow-y: scroll;
        height: calc(100% - 100px);
        margin: 10px 20px;
        width: calc(100% - 36px);
        border: none;
    }

        #preview .contentPreview td, #preview .contentPreview h1 {
            border: initial;
            background-color: initial;
        }

        #preview .contentPreview ::before {
            background-color: initial;
        }

    #preview .closeBox {
        cursor: pointer;
        font-size: 2.2rem;
        border: none;
        background: none;
        position: absolute;
        right: 20px;
    }

/* =============================================================================
   Formulaires
   ========================================================================== */
.formGroup {
    margin-bottom: 16px;
}

.formGroup:last-child {
    margin-bottom: 0;
}

.formGroup .infos {
    margin-top: 4px;
}

form label {
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .5px;
}

form input[type=text], form input[type=date], form input[type=email], form input[type=password], 
form input[type=number], form input[type=search], form input[type=tel], form textarea, form select {
    margin-bottom: 20px;
    padding: 12px;
    font-size: 1.4rem;
    letter-spacing: .5px;
    border-radius: 4px;
    outline: 2px solid transparent;
    transition: .2s ease;
    display: block; /* Permet de supprimer une marge sous les champs Textarea présente sous certains navigateurs (Chrome / Firefox) */
}
form input[type=text].error, form input[type=date].error, form input[type=email].error, form input[type=password].error, 
form input[type=number].error, form input[type=search].error, form input[type=tel].error, form textarea.error, form select 
.ClientAreaChangePasswordComponent form input[type=password]#ctl00_txtMdp.error {
    border-color: var(--error-border-color);
}
.ClientAreaChangePasswordComponent form input[type=password]#ctl00_txtMdp ~ p.note {
    margin-bottom: 20px;
}


form input[type=text]:focus, form input[type=date]:focus, form input[type=email]:focus, form input[type=password]:focus, 
form input[type=number]:focus, form input[type=search]:focus, form input[type=tel]:focus, form textarea:focus, form select:focus {
    outline-color: var(--color2b);
    border-color: rgba(31, 40, 77, .5);
}

form input[type=submit] {
    padding: 12px 24px;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .5px;
    border-radius: 4px;
}

form .blocButtons {
    margin-top: 40px;
}
.GXCO_changePassword .field {
    position: relative;
}
.GXCO_changePassword .field p.error {
    position: absolute;
    top: calc(16.5px + 47px + 8px);
    right: 0;
    font-size: 1.4rem;
    color: var(--error-color);
}

form span.messageInputError {
    display: block;
    color: var(--error-color);
    margin-top: 4px;
}


/* Recherche */
#SearchForm label,
#SearchForm #q {
    margin-bottom: 0;
}

#results { 
    margin: 60px 0;
}

#filter {
    padding: 0;
}

#filter .typeFilter{
    padding: 10px;
}

#filter .title {
    font-size: 1.54rem;
    text-transform: uppercase;
}

#filter .blocFacette {
    margin: 20px 0 20px 10px;
}

#filter .nameFacette {
    font-size: 1.4rem;
}

#filter .blocFacette > .level1 {
    position: relative;
    margin: 10px 10px 20px;
    padding-left: 10px;
    font-size: 1.4rem;
}

#filter .blocFacette > .level1::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #ccc;
}

#filter .blocFacette .niv1 {
    margin-top: 5px;
}

#filter .blocFacette .niv2 {
    padding-left: 10px;
}

#filter .removeFacette {
    font-weight: 600;
}


/* Alertes */
.msgBox {
    margin: 20px 0;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 1.5rem;
}

.msgBox i {
    margin-right: 4px;
    font-size: 1.6rem;
}

.msgBox a {
    text-decoration: underline;
}

.msgBox.info [class^="icon-"], 
.msgBox.info [class*=" icon-"] {
    color: var(--color-info-darker);
}

.msgBox.danger [class^="icon-"], 
.msgBox.danger [class*=" icon-"],
.msgBox.error [class^="icon-"], 
.msgBox.error [class*=" icon-"] {
    color: var(--color-danger-darker);
}

.msgBox.warning [class^="icon-"], 
.msgBox.warning [class*=" icon-"] {
    color: var(--color-warning-darker);
}

.msgBox.success [class^="icon-"], 
.msgBox.success [class*=" icon-"] {
    color: var(--color-success-darker);
}


/* =============================================================================
   $GXCO : module & component
   ========================================================================== */
.GXCO_connectBox{position: relative;}
.GXCO_connectBox .help {
    background-color: rgb(0,68,148);
    color: #FFF;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
}

    .GXCO_connectBox .tooltip {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #212121;
        box-shadow: 0 0 4px 0 #999;
        background-color: #212121;
        opacity: 0.8;
        border-radius: 4px;
        padding: 5px 10px;
        color: #FFF;
        font-size: 1.2rem;
        z-index: 999;
    }

.GXCO_connectBox .targetToolTip {
    position: relative;
    margin: 0 0 5px 0;
}

/* =========================
    Chocolat
==============================*/
button[class^="chocolat-"],
button[class*="chocolat-"] {
    border: none;
}




[role="switch"] {
    margin: 2px;
    padding: 4px 4px 8px 8px;
    border: 0 solid #005a9c;
    border-radius: 5px;
    width: 15em;
    user-select: none;
}

    [role="switch"] .label {
        display: inline-block;
        padding: 0 20px 0 0;
    }

    [role="switch"] .switch {
        position: relative;
        display: inline-block;
        top: 6px;
        border: 2px solid rgb(0,51,148);
        border-radius: 12px;
        height: 20px;
        width: 40px;
    }

        [role="switch"] .switch span {
            position: absolute;
            top: 2px;
            left: 2px;
            display: inline-block;
            border: 2px solid black;
            border-radius: 8px;
            height: 12px;
            width: 12px;
            background: black;
        }

    [role="switch"][aria-checked="true"] .switch span {
        left: 21px;
        background: green;
        border-color: green;
    }

    [role="switch"] .on {
        display: none;
    }

    [role="switch"] .off {
        display: inline;
    }

    [role="switch"][aria-checked="true"] .on {
        display: inline;
    }

    [role="switch"][aria-checked="true"] .off {
        display: none;
    }

    [role="switch"]:focus,
    [role="switch"]:hover {
        padding: 2px 2px 6px 6px;
        border-width: 2px;
        outline: none;
        background-color: #def;
        cursor: pointer;
    }

        [role="switch"]:focus span.switch {
            background-color: white;
        }


/*=====================================
    Navigation carrousel
=========================================*/
button.LSButton {
    display: inline-block;
    position: relative;
    height: 10px;
    width: 10px;
    cursor: pointer;
    margin: 0 5px;
    overflow: hidden;
    background-color: #CCC;
    text-indent: 100%;
    white-space: nowrap;
    border-radius: 50%;
    border: none;
    z-index: 99;
    -webkit-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}

.lSPager li.active button.LSButton,
button.LSButton:hover,
button.LSButton:active {
    background-color: rgba(0, 32, 96, 1);
}

.lSAction{
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    width: 100px;
    padding: 0 5px;
}

.lSAction button {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: solid 1px rgb(0 0 0 / 50%);
    cursor: pointer;
}

.lSAction button img {
    display: block;
}