@import './root_green.css';

.the-gradient{
    background: rgb(244,240,239); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(244,240,239,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(244,240,239,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(244,240,239,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f0ef', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
.reverse-gradient{
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(244,240,239,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(244,240,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(244,240,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f0ef',GradientType=1 ); /* IE6-9 */
}

/************ CTA BOTTOM *************/
.cta-bottom{-webkit-box-shadow: 5px 5px 15px 2px rgba(0,0,0,0.16); box-shadow: 5px 5px 15px 2px rgba(0,0,0,0.16); background-color: #FFF; padding: 1.5rem; border-radius: 29px; margin-top: 2.5rem; margin-left:  2rem;}
a.btn-primary{color: var(--color-black-font) !important; text-decoration: none;}


/************ BODY *************/
body.site {padding: 0; border: none !important; font-family: 'Calibre', sans-serif; font-size: 16px; overflow-x: hidden; padding-top:  5.5em;}
header{position: fixed; top: 0}
h1{font-weight: bold !important; color: var(--color-gris-font); font-size: 2rem !important; margin-top: 1rem !important;}
.camera_caption_title h1{font-size: 1.6rem !important; margin-top: 1rem !important;}
h2{font-weight: bold !important; color: var(--color-black-font); font-size: 1.5rem !important;}
h3, h3 button {font-weight: medium !important; font-size: 1.2rem !important; color: var(--color-violet-font); padding-left: 0 !important;}
h4{font-size: 1.15rem !important; font-weight: medium;}

#flexicontent h1.contentheading{ display: none; }
#flexicontent .description{padding-top: 1.5rem !important; margin-top: -5.5rem}
.type-alias-accueil #flexicontent .description{padding-top: 0rem !important;}

ol, ul {padding-left: 0 !important;}
li{padding-left: 1rem;}
ol li {margin-bottom: .5em;}
ol li::marker{color: var(--color-violet-font);}


a.btn-primary,
.btn-primary{background: linear-gradient(90deg,#00a298 0%,#00a298 20%,#fdea00 100%); background-size: 300% 100%; border-color: var(--color-background) !important; color: #fff !important; border-radius: 28px !important; padding: .75em 1.5em .5em 1.5em !important; transition: all .4s ease-in-out;}
.btn-primary:hover{background-position: 95% 0 !important;}
.btn-primary:focus {box-shadow: none !important;}
.btn-second {border-color: var(--color-background); color: #000; border-radius: 28px;}
.btn-more-actions {font-weight: bold; color: var(--color-violet-font); text-decoration: none;}

.reference {font-weight: lighter; font-size: .8rem;}
.title-paragraph {color: var(--color-violet-font);}
.intro {font-weight: lighter; font-size: 1.5rem;}
.sous-intro{font-weight: lighter; font-size: 1.25rem;}

.violet {color: var(--color-violet-font) !important;}

/************ HEADER *************/
header{background-color: var(--color-background) !important; padding: .5em 0; position: fixed; width: 100%; z-index: 888; height:  5.5rem;}
.page-header {border-bottom: 2px solid var(--color-background);}

    /* Logo */
#logo {display: flex; justify-content: center;}
#logo img{height: 63px; width: auto;}

    /* Header nav */
#burger-menu{display: none;}
#burger-menu i::after{content: "\f0c9"; font-family: "Font Awesome 5 Pro", sans-serif; margin: 2rem; font-style: normal;}
#navmenu {border-left: #FFF solid 5px; padding-left: 5px; height: 100%; display: flex; align-items: center; } 
#navenu .nav-pills, #navmenu .nav-pills .active a {background-color: transparent;}
#navmenu a, #navmenu p {text-decoration: none; color: var(--color-black-font) !important; font-weight:lighter; font-size: 19px; opacity: .5;}
#navmenu .current > a {font-weight: 600; opacity: 1; }
#navmenu .nav {align-items: center; flex-wrap: nowrap;}
#navmenu .nav a:hover{color: var(--color-gris-font);}
#navmenu .nav li{margin: 0; position: relative; padding: 0; text-align: center;}
#navmenu .nav li.deeper::after{content: "\f078"; font-family: "Font Awesome 5 Pro", sans-serif; opacity: .3; position:  absolute; left: 50%; bottom: -.25em; transform: translate(-50%);}
#navmenu .nav li.deeper::after:hover{opacity: 1;}
#navmenu .nav li > a, #navmenu .nav li > p{padding: .7em 1em .5em 1em; font-weight: 400; display: block;}
#navmenu .nav li > a.cta{color: var(--color-violet-font) !important; border:  1px solid var(--color-violet-font); margin:  0 1em; border-radius:  2em; opacity: 1;}
#navmenu .nav li > a.cta:hover{color: #fff !important; background-color: var(--color-violet-font);}
#navmenu .nav li > ul{display: none; padding: 1rem !important; position: absolute; z-index: 888; margin: 0; list-style: none; width: max-content; background: #fff; opacity: 1; box-shadow: 0 .5rem 1rem rgba(0,0,0,.22); border-radius:  1rem; transition: all .3s ease;}
#navmenu .nav li > ul > li{margin: 0; padding: 0;}
#navmenu .nav li > ul > li > a{font-size: 1rem; cursor: pointer;}
#navmenu .nav li.deeper:focus > ul,
#navmenu .nav li.deeper:hover > ul{display: block; opacity: 1;}
#navmenu .nav-child > li a:hover{background-color: var(--color-background);}

.mod-languages {order: 1;}
.mod-languages i.fa-regular.fa-globe {font-family: 'Font Awesome 5 Pro'; font-style: inherit;}

    /* Login */

.btn-contact{background-color: #FFF !important; border-radius: 51px; box-shadow : 5px 5px 15px 2px rgba(0,0,0,0.16); padding: .25em 1em;}

/************ BANNIERE *************/
.type-alias-accueil .bannergroup{width: 100%; z-index: -1; height: 25rem;}
.banneritem{position: relative; height: 100%;}
.banneritem img {height: 100%; width: 100%; object-fit: cover;}
#hero-descritpion, .camera_caption {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 960px; padding: 2rem; background-color: rgba(255, 255, 255, .75); height: fit-content;}
.camera_caption > div {background: transparent !important; color: #212529 !important; }
.camera_wrap a {background: linear-gradient(90deg,#00a298 0%,#00a298 20%,#fdea00 100%) !important; background-size: 300% 100% !important;}
.camera_caption > div {padding: 0 !important;}
.hide {display: none;}
.camera_wrap {height: 25rem !important;} 
.camera_wrap img {width: auto !important; height: 25rem !important; min-width: 100%;}
.cameraContent .camera_caption_desc p {font-size: 16px!important;}
.cameraContent .camera_caption_desc a {font-size: 1rem !important;}
.cameraSlide.cameracurrent img {margin-top: 0 !important;}
.cameraappended {display: none !important;}
/************ MENU SIDEBAR *************/
.type-alias-accueil #menu-sidebar{display: none;}

#menu-sidebar{padding: 1em;}
#menu-sidebar{color: #000; text-decoration: none; }
#menu-defilant ul {margin: 0;}
#menu-defilant li {list-style: none; cursor: pointer; position: relative; margin-bottom: .75rem; line-height: 1.2; display: inline flow-root list-item;}
#menu-defilant li.o1 {opacity: 1;}
#menu-defilant li, #menu-defilant li a{transition: opacity .3s ease; opacity: .5; display: block;}
#menu-defilant li a.btn-primary{opacity: 1; display: block; padding: .3em .7em !important; color: white !important;}
#menu-defilant li.current, #menu-defilant li.current a{font-weight: 600; opacity: 1;}
#menu-defilant {position: fixed; width: 10%; text-align: end; padding-right: 1rem;}
#menu-defilant li.current span.barre {position: absolute; bottom: 50%; right: -1.75rem; width: 1.5rem; height: 0.1rem; overflow: hidden; background-color: var(--color-background);}
#menu-defilant li a {color: var(--color-black-font) !important; text-decoration: none;}
h2{position: relative;}
#content .description h2::before {
    content: "";
    border: solid 1px var(--color-background);
    width: 1.25rem;
    display: block;
    position: absolute;
    left: -2rem;
    bottom: 50%;
    transition: all .3s ease;
}
.pagenav::after {
    content: "";
    border: solid 1px var(--color-background);
    width: 0em;
    display: block;
    position: absolute;
    right: -2em;
    bottom: 50%;
    transition: all .3s ease;
}  
.pagenav.current::after {
    width:  1.5rem;
}
.pagenav.top{opacity: .5;}
.pagenav.top:hover{opacity: 1;}


/************ COMPONENT *************/
.body-component{position: relative;}

.type-alias-article .component {padding-top: 6rem;}
.type-alias-accueil .component {padding: 2rem 2rem 6rem 2rem;}
.component a:not(.btn-primary){color: var(--color-violet-font) !important;}
.component > .row{padding: .5rem 0;}

.accordion-item{background: transparent !important;}

.accordion-button,
.accordion-button:not(.collapsed){background-color: transparent !important; box-shadow: none !important;}
.accordion-button::after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; transform: rotate(-180deg) !important;}
.accordion-button.collapsed::after{transform: rotate(0deg) !important;}
.accordion-body li a {word-break: break-all;}
.chzn-container .chzn-results li.highlighted{background-color: #f4f0ef !important; background-image: none !important; color:  #000; font-weight: 600;}
.chzn-search{display: none;}
.chzn-results{margin-left: 0 !important;}

    /* Logo background */
.component::after {content: ''; position: fixed; bottom: 5vh; right: .5em; background-image: url('../images/logo-background.png'); width: 145px; height: 110px; background-size: 145px 110px; background-repeat: no-repeat; z-index: -1;}

#content {border-left: var(--color-background) solid 5px; padding: 0; position: relative;} 
#flexicontent > div ul,
#flexicontent > div ol,
#flexicontent > div{margin-left: 2rem;}

.contentheading {width: 105%; border-bottom: solid 4px rgba(244, 240, 239, .26); margin-bottom: 1.5rem; padding-bottom: 1.5rem; margin-left: -.9em; padding-left: 1em;}

.description h2:not(:first-child) {margin-top: 1.5em !important;}


        /* timeline */
/*.jmz-module{position: relative;}*/
#jmz-timeline-horizontal-wapper{background: none;}
#jmz-timeline-horizontal-wapper:before{content: ''; position: absolute; width: 100%; height: 1px; background: #8A1776; top: 42px;}
#jmz-timeline-dates{width: 100% !important;}
#jmz-timeline-dates li{background: none; margin-bottom: .5em;}
#jmz-timeline-dates li a{position: relative; font-size: 18px !important; font-family: 'Calibre', sans-serif !important; color: #3C3C3B !important; font-weight: 100;}
#jmz-timeline-dates li a.selected{font-weight: 700;}
#jmz-timeline-dates li a:after{content: ''; position: absolute; bottom: -.75em; left: 50%; transform: translate(-50%,0); background-color: white; border: 1px solid #E60065; width: 1em; height: 1em; border-radius: 3em; transition: all 0.15s ease-out;}
#jmz-timeline-dates li a.selected:after{background-color: #E60065;}
#jmz-timeline-issues{width: calc(800px * 8) !important}
#jmz-timeline-issues li{display: flex;}
#jmz-timeline-issues li h3.jmz-title{writing-mode: vertical-lr; transform: rotate(180deg); font-size: 4.5em !important; font-weight: bold; margin: 0;}
#jmz-timeline-issues li h3.jmz-title a{color: #CBCBCB !important;}



    /* Accordéon */
.field_section {margin-top: 2em;}
.field_section .fc-fieldgrp-value-box{position: relative; border: none; border-top: solid 2px var(--color-background); border-radius: 0;}
.field_titre-section{margin: 0 !important; max-width: 100% !important;}
.field_titre-section h3 {width: 100%;}
.field_titre-section, .field_titre-section .flexi.value{width: 100% !important;}
.field_titre-section .flexi.value{display: flex !important; justify-content: space-between;}
.field_texte-section{padding: 0 1em !important; margin-bottom: .5em !important;}
.accordion-button {color: var(--color-violet-font) !important;}
.accordion-button::after{color: var(--color-black-font);}
.accordion-button:focus{border: none !important; box-shadow: none !important;}
.accordion-item {border: 0 !important; border-top: solid 2px var(--color-background) !important;}
.accordion-button:focus {z-index: 0 !important;}

.type-alias-article #content {padding-top: 5.5rem; margin-top: -5.5rem; margin-bottom: 5.5rem;}

/************ ACCUEIL *************/
.type-alias-accueil #content {border-left: none; width: 100%;}
.type-alias-accueil h1.intro,
.type-alias-accueil .camera_caption_title{color: var(--color-black-font); margin-top: 0!important;}
.type-alias-accueil .description{margin: 0 !important;}
.type-alias-accueil .cta-bottom{margin-right: 2rem;}
.type-alias-accueil .component.container{max-width: 960px !important;}
.row-cta {display: flex; flex-direction: row; justify-content: space-between;}
.cta-page {width: 30%; background-color: #FFF; box-shadow: 5px 5px 15px 2px rgba(0,0,0,0.16); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between;}
.cta-page h2{margin-top: 0 !important;}
.cta-page-link {display: flex; justify-content: end; margin-bottom: 0;}
.cta-page-link a {text-decoration: none;}


/************ FORMULAIRE *************/
#formulaires {display: grid; grid-template-columns: 1fr 1fr; padding-top: 7.5rem; padding-left: 2rem;}
#formulaires #fox-container-m108, #formulaires #fox-container-m112{grid-row: 1;}
#formulaires #fox-container-m112 {grid-column: 2;}
form input, form textarea {background-color: var(--color-background) !important; border: none !important; border-radius: 0 !important;}
.form-txt, .form-txt label{font-style: italic; font-weight: lighter; font-size: .75rem; color: #000;}
label{font-size: 16px; color: var(--color-black-font) !important;}
#formulaires .controls a {color: var(--color-black-font) !important;}
#formulaires textarea:focus, #formulaires input[type="text"]:focus{box-shadow: none !important;}
.newsletter-invalid {border: 1px solid #dc3545 !important; color: #dc3545;}
.fox-item-dropdown .chosen-container-single {width: 100% !important;}
.convertforms form button.cf-btn {text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); background-color: #e6e6e6 !important;background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #bbbbbb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); line-height: 20px; border-radius: 28px !important; padding: .75em 1.5em .5em 1.5em !important; border-color: var(--color-background) !important; color: #333333 !important;}
.convertforms .cf-input {padding: 5px;}

/************ FOOTER *************/
footer {background-color: var(--color-background); color: var(--color-footer-font) !important;  width: 100%; position: fixed; bottom: 0;}
footer a {color: var(--color-footer-font) !important; text-decoration: none !important;}
footer p {margin: 5px 5px;}



/************ RESPONSIVE *************/
@media screen and (max-width: 1200px) and (min-width: 769px) {
    #navmenu .nav li > a, #navmenu .nav li > p {text-align: center;}
    #navmenu > ul li {max-width: 20%;}
    #navmenu .nav {justify-content: space-around;}
}

@media screen and (max-width: 990px) and (min-width: 768px) {
    #navmenu .nav li > a, #navmenu .nav li > p {padding: .7em .2em .5em .2em;}
}

@media screen and (max-width: 990px) {
    #formulaires {display: flex; flex-direction: column;}
    #formulaires .fox-container-module {margin-bottom: 4rem;}
    .row-cta {flex-direction: column;}
    .cta-page {width: 100%; margin: .5rem 0;}

    #jmz-timeline-dates li{width: 70px;}
    #jmz-timeline-horizontal-wapper #jmz-timeline-issues li .jmz-content {width: 50%;}
}


@media only screen and (min-width: 769px) and (max-width: 820px) {
    #navmenu a {font-size: 18px;}
    #menu-defilant{width:  101px; padding:  0;}
    #menu-defilant ul{display: flex; flex-direction: column;}
    .pagenav.current::after { width: 0rem; }
    #menu-defilant li.current, #menu-defilant li a,
    #menu-defilant li.current, #menu-defilant li.current a { font-weight: 400; opacity: .5; padding: 0; }
    #menu-sidebar{padding: 0;}


}
@media screen and (max-width: 768px) {
  ul.nav.menu.nav-pills.mod-list {
    overflow: scroll !important;
    max-height: 75% !important;
}
    #header{position: relative;}
    #navmenu{position: absolute; left: 100%; top: 0; border: none; transition: all .3s ease; width: 100%; height:  100vh; background-color: #fff; flex-direction: column; align-items: flex-start; padding: 5em 0 0 1.5em;}
    #navmenu.opened{left: 0%; }
    #burger-menu{display: block; position: absolute; right: 100%; top: 2rem;}
    .opened #burger-menu{right: 0%;}
    .opened #burger-menu i::after{content: "\f00d";}
    #navmenu .nav{flex-direction: column; align-items: flex-start; }
    #navmenu .nav li {text-align: initial;}
    #navmenu .nav li > a{font-weight: 500;}
    #navmenu .nav li > ul{box-shadow: none; display: block; position: relative; padding: 0 1rem !important; width: 100%;}
    #navmenu .nav li > ul > li > a{padding: .2rem 1rem; font-weight: 400;}
    #logo img {margin-left: 2rem; height: 3rem;}
    #menu-sidebar {display: none;}
    #navmenu .nav{order: 1;}
    #navmenu .mod-languages {order: 2; margin-top: 1em;}
    #navmenu div.mod-languages li.languages{display: flex; align-items: center;}
    #navmenu div.mod-languages li.languages > a{padding: 0 0 0 1em;}
    #navmenu div.mod-languages li.languages > ul.lang-inline{display: flex;}
    #navmenu div.mod-languages li.languages > ul.lang-inline a{padding: .2rem;}

    #jmz-timeline-dates li{width: unset;}
    #jmz-timeline-issues li h3.jmz-title{font-size: 3em !important;}
    #jmz-timeline-horizontal-wapper #jmz-timeline-issues li .jmz-content{max-width: 30vw;}

    body{color: var(--color-background)}
    #content{border-left: none; padding-right: 1rem;}
    #navmenu {border: none;}
    #menu-sidebar {
        position: fixed;
        top: 10rem;
        z-index: 5555;
        background: var(--color-background);
        width: 94%;
        padding: 0;
        height: 3rem;
        padding: 1rem;
        z-index: 777;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    #menu-defilant{
        width: auto;
        text-align: left;
        position: relative;

    }
    #menu-defilant ul{display: ruby;}
    #menu-defilant ul li{display: initial; padding: 0 .5rem }
    .pagenav:after{right: auto; bottom:  0;}
    #menu-defilant li.current, #menu-defilant li.current a{color: var(--color-violet-font) !important;}
    .slideshowck .camera_prev, .slideshowck .camera_next {opacity: 1 !important;}
    #hero-descritpion, .camera_caption {padding: 3rem;}
    #navmenu.opened .item-201, #navmenu.opened .item-202 {display: none;}
    #navmenu.opened .item-160 a, #navmenu.opened .item-190 a {color: var(--color-violet-font) !important; border:  1px solid var(--color-violet-font); margin:  0 1em; border-radius:  2em; opacity: 1;}
    #navmenu.opened .item-160 a:hover, #navmenu.opened .item-190 a:hover{color: #fff !important; background-color: var(--color-violet-font);}
    
    body form.mj-form .mj-embedded {display: flex !important; flex-direction: column; align-items: center;}
    h2.cta{display: none !important;}

    .btn-inscription {background: linear-gradient(90deg,#00a298 0%,#00a298 20%,#fdea00 100%); background-size: 300% 100%; border-radius: 28px; padding: .25em 1em; transition: all .4s ease-in-out;}
    .btn-inscription:hover, .btn-inscription:focus {background-position: 95% 0 !important;}
    .btn-inscription a.btn-primary {background: none; padding: unset !important;}
    .btn-inscription .btn-primary:hover, .btn-inscription .btn-primary:focus{background: none;}
}

@media screen and (max-width: 480px) {
    #content {width: 100%;}
    .accordion-body li {padding-left: 0;}
    #jmz-timeline-horizontal-wapper::before {top: 39px;}
    #jmz-timeline-dates {width: 110% !important;}
    #jmz-timeline-dates li{padding-left: .5rem;}
    #jmz-timeline-dates li a{font-size: 15px !important;}
    a.btn-primary, .btn-primary {padding: .5em .75em !important;}
    footer {font-size: 14px;}
}

@media screen and (max-width: 400px){
    .applications-pour-la-recherche .cta-bottom a.btn-primary {font-size: small;}
}


/* Masquer le bouton Subscribe spécifique */
a.btn-primary[href*="subscribe-to-our-newsletter"] {
    display: none !important;
}

/* pages oldstyle */

.itemid-367 .page-header, 
.itemid-367 .text-muted,
.itemid-367 .pagenavigation,
.itemid-367 .flexi.label,
.itemid-367 .float-end,
.itemid-368 .page-header, 
.itemid-368 .text-muted,
.itemid-368 .pagenavigation,
.itemid-368 .flexi.label,
.itemid-368 .float-end
{
    display: none!important;
}

.itemid-367 iframe#hs-form-iframe-0 {
    height: 650px !important;
}