li.active-trail > a {
    color: #fff !important;
}

.page-node-18 #block-basedbootstrap-page-title .title span::before {
    right: 110%;
}

.page-node-18 #block-basedbootstrap-page-title .title span::after {
    left: 106%;
}

.page-node-31 #block-basedbootstrap-page-title .title span::before, .page-node-34 #block-basedbootstrap-page-title .title span::before, .page-node-19 #block-basedbootstrap-page-title .title span::before {
    right: 108%;
}

.page-node-31 #block-basedbootstrap-page-title .title span::after,.page-node-34 #block-basedbootstrap-page-title .title span::after, .page-node-19 #block-basedbootstrap-page-title .title span::after {
    left: 104%;
}

.page-node-45  #block-basedbootstrap-page-title .title::before, .page-node-45 #block-basedbootstrap-page-title .title::after {
    width: 98.8%;
}

.page-node-31  #block-basedbootstrap-page-title .title::before, .page-node-31 #block-basedbootstrap-page-title .title::after {
    width: 98.8%;
}

.page-node-44 #block-basedbootstrap-page-title .title span::before {
    right: 110%;
}

.page-node-44 #block-basedbootstrap-page-title .title span::after {
    left: 106%;
}

.page-node-46 #block-basedbootstrap-page-title .title span::before {
    right: 120%;
}

.page-node-46 #block-basedbootstrap-page-title .title span::after {
    left: 113%;
}

.page-node-43 #block-basedbootstrap-page-title .title span::before {
    right: 120%;
}

.page-node-43 #block-basedbootstrap-page-title .title span::after {
    left: 114%;
}

.page-node-33 .node.node--type-page.node--view-mode-full {
  background-color: #fff;
}

.page-node-33 .mainAuto {
  margin-top: 50px;
}

.page-node-33 #multiCollapseExample2 h1 {
  margin: 0 0;
}

.page-node-33 .counter::after {
  content: none;
  position: absolute;
}

.page-node-33 .mainAuto img {
  width: 98%;
}

.page-node-33 .rowBouton {
  color: #000;
  font-size: 17px;
  line-height: 25px;
  padding-bottom: 30px;
}

.page-node-33 .font-weight-800.m-b5.site-text-primary {
  color: #C28F2B;
  font-size: 58px;
}

.page-node-33 .m-b30.text-black.wt-icon-box-wraper.center.col-lg-4.col-md-12 {
  width: 33%;
  text-align: center;
}

.page-node-33 .col-lg-8.col-md-12 {
  width: 66%;
}

.page-node-33 #multiCollapseExample1,.page-node-33 #multiCollapseExample2 {
  display: flex;
}

.set-size.charts-container {
  display: flex;
  justify-content: space-between;
}

.pie-wrapper .pie {
  height: 100%;
  width: 100%;
  clip: rect(0, 1em, 1em, 0.5em);
  left: 0;
  position: absolute;
  top: 0;
}

.pie-wrapper.progress-45 .pie .left-side {
  transform: rotate(162deg);
}

.pie-wrapper.progress-45 .pie .half-circle {
  border-color: #C28F2B;
}

.pie-wrapper .pie .half-circle {
height: 78%;
  width: 79%;
  border: 0.1em solid #3498db;
  border-radius: 50%;
  clip: rect(0, 0.5em, 1em, 0);
  left: 0;
  position: absolute;
  top: 0;
}

.pie-wrapper.progress-45 .pie .right-side {
  display: none;
}

.pie-wrapper .shadow {
height: 78%;
  width: 79%;
  border: 0.1em solid #bdc3c7;
  border-radius: 50%;
}

.shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}


.pie-wrapper--solid.progress-12 {
  background: linear-gradient(to right, #C28F2B 50%, #000000 50%);
}

.pie-wrapper--solid.progress-12::before {
  background: #000000;
  transform: rotate(-210deg);
}



.set-size {
  font-size: 10em;
}

.pie-wrapper--solid.progress-98 {
  background: linear-gradient(to right, #C28F2B 50%, #000000 50%);
}

.pie-wrapper:nth-child(3n+1) {
  clear: both;
}

.pie-wrapper--solid {
  border-radius: 50%;
  overflow: hidden;
}

.pie-wrapper {
height: .92em;
  width: 1em;
  float: left;
  margin: 15px;
  position: relative;
}

.pie-wrapper--solid.progress-98::before {
  background: #C28F2B;
  transform: rotate(10.2deg);
}

.pie-wrapper--solid::before {
  border-radius: 0 100% 100% 0/50%;
  content: "";
  display: block;
  height: 100%;
  margin-left: 50%;
  transform-origin: left;
}

.pie-wrapper--solid .label {
  background: transparent !important;
}

.pie-wrapper .label {
  background: #000000;
  border-radius: 50%;
  bottom: 0.4em;
  color: #ecf0f1;
  cursor: default;
  display: block;
  font-size: 0.25em;
  left: 0.4em;
  line-height: 0.6em;
  position: absolute;
  right: 0.4em;
  text-align: center;
  top: 0.4em;
  padding-top: 30px;
}

.pie-wrapper .label .smaller {
  color: #bdc3c7;
  font-size: 0.45em;
  padding-bottom: 20px;
  vertical-align: super;
}

.pie-wrapper.pie-wrapper--solid.progress-12 .smaller {
  display: block;
}


.actuContent {
    padding: 0 3%;
}

.newsBody img {
    width: 100%;
    height: auto;
}

div#block-basedbootstrap-views-block-actualites-views-block-3 {
    margin-top: 100px;
}


.node--type-actualites .newsBody p {
    color: #576170 !important;
}

.node--type-actualites #block-basedbootstrap-page-title .title span {
    font-size: 30px;
    display: block;
}

.node--type-actualites #block-basedbootstrap-page-title .title {
padding: 45px 15px 38px 15px;
  line-height: 35px;
  width: 85%;
}

.node--type-actualites #block-basedbootstrap-page-title .title::after,.node--type-actualites #block-basedbootstrap-page-title .title::before {
  width: 99%;
}

.node--type-actualites #block-basedbootstrap-page-title .title span::before {
    right: 98%;
}

.node--type-actualites #block-basedbootstrap-page-title .title span::after, .node--type-actualites #block-basedbootstrap-page-title .title span::before {
  top: 37%;
}

.node--type-actualites #block-basedbootstrap-page-title .title span::after {
    left: 98%;
}

.node--type-actualites div#main {
    background-color: #EDEFF1;
}

.node--type-actualites .news {
    background-color: #fff;
    width: 1140px;
    margin: 0 auto 100px;
        padding: 0 0 50px;
}

.node--type-actualites .newsImage {
    margin-top: 0px;
    margin-right: 0;
    position: relative;
    overflow: hidden;
}

.node--type-actualites .newsImage:hover img {
    scale: 1.2;
    transition: 1s;
}

.node--type-actualites .newsImage img {
    transition: 1s;
}

.node--type-actualites .newsTitle a {
    color: #000000;
    font-size: 25px;
    font-weight: 500;
    font-family: 'Geometos Neue', sans-serif;
}

.node--type-actualites .newsTitle {
    margin-top: 15px;
        margin-bottom: 20px;
}

body{
   font-family: 'Montserrat', sans-serif;
}

body #presentationLeft div span:first-child {
font-family: 'Geometos Neue', sans-serif;
}

.newsBody p {
    margin-top: 0;
}

.diaporamaSlogan {
    font-family: 'Geometos Neue', sans-serif;
}

.partenaires {
    margin: -16px 0 0;
    background-color: #fff;
    padding: 25px 0;
}

.partenaires > div{
    display: flex;
    justify-content: space-between;
    width: 1140px;
    margin: 0 auto;
}

.partenairesLeft {
    width: 40%;
    font-size: 22px;
    text-transform: uppercase;
    font-family: 'Geometos Neue', sans-serif;
    color: var(--green2);
}

.partenairesRight {
    width: 60%;
    display: flex;
    justify-content: space-between;
}

.partenairesRight img {
    width: AUTO;
    height: 35px;
    margin-right: 16px;
}


.breadcrumb li::after {
  content: "\F280";
  font-size: 10px;
  font-family: 'Bootstrap-icons';
  position: relative;
  top: 1px;
  margin: 0 4px;
}

.breadcrumb li:last-child::after {
  content: none;
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
}

.breadcrumb li {
  display: inline-block;
  color: #fff;
  font-size: 14px;
}

.breadcrumb {
  text-align: center;
}

.row.region.region-top-header {
  position: relative;
}

#navbar-top {
    background-color: transparent;
}

div#block-basedbootstrap-navigationprincipale ul.sf-menu .sf-sub-indicator {
    right: 0em;
        display: none;
}

.page-node-18 #block-basedbootstrap-page-title {
    background: linear-gradient(to right, #00000091 100%, transparent 0%), url(/sites/default/files/images/banner-team3.jpg);
}

ul#superfish-main {
    float: right;
}

ul#superfish-main ul li {
padding: 15px 0;
}

ul#superfish-main ul.sf-menu .sf-sub-indicator {
    opacity: 0.75;
}

body {
  padding-top: 0px !important;
  margin: 0;
}

#block-basedbootstrap-views-block-diaporama-views-block-1 .view-content {
    visibility: hidden;
}

#block-basedbootstrap-views-block-diaporama-views-block-1 .view-content.slick-initialized {
    visibility: visible;
}

#webform-submission-newsletter-node-43-add-form #edit-actions-submit--2 {
  display: none;
}
#webform-submission-newsletter-add-form, .webform-submission-newsletter-form, #webform-submission-newsletter-node-43-add-form {
  display: flex;
  width: 92%;
}

#webform-submission-newsletter-add-form #edit-actions-submit, .webform-submission-newsletter-form #edit-actions-submit{
  background-image: url('/sites/default/files/images/send.webp');
  font-size: 0px;
  width: 51px;
  height: 47px;
  border: none;
  background-size: 43%;
  background-repeat: no-repeat;
  background-color: #000000;
  background-position: center;
  position: relative;
  left: 10px;
}

#webform-submission-newsletter-node-43-add-form #edit-actions--3{
  background-image: url('/sites/default/files/images/send.webp');
  font-size: 0px;
  width: 66px;
  height: 47px;
  border: none;
  background-size: 43%;
  background-repeat: no-repeat;
  background-color: #000000;
  background-position: center;
  position: relative;
  left: 10px;
}


#webform-submission-newsletter-add-form #webform-submission-newsletter-add-form, .webform-submission-newsletter-form #webform-submission-newsletter-add-form, #webform-submission-newsletter-node-43-add-form{
  width: 90%;
  display: flex;
}

#webform-submission-newsletter-add-form #edit-actions-submit:hover, .webform-submission-newsletter-form #edit-actions-submit:hover,  #webform-submission-newsletter-node-43-add-form #edit-actions--3:hover {
  cursor: pointer;
}

#webform-submission-newsletter-add-form #edit-email, .webform-submission-newsletter-form  #edit-email, .webform-submission-newsletter-form #edit-email--2{
  background-color: #EDEFF1;
  border-color: #C28F2B;
  color: #000;
  height: 40px;
  width: 100%;
  font-size: 13px;
  line-height: 20px;
}

.endFooterCenter span {
  margin-bottom: 24px;
  letter-spacing: 1px;
  display: block;
}

#block-basedbootstrap-views-block-diaporama-views-block-1 .slick-slide {
    margin-bottom: -6px;
}

#endFooter p {
  color: var(--gold);
}

.endFooterLeft span {
  display: block;
  line-height: 23px;
}

.site-footer {
  background-color: var(--green2);
}

#copyright {
  padding: 40px 0;
  text-align: center;
  border-top: 1px solid #000000;
  color: var(--gold);
  font-size: 13px;
}

.endFooterRight span {
  display: block;
  line-height: 21px;
}

#endFooter > div {
  width: 33%;
}

#endFooter a {
  color: #A8AEBA;
  text-decoration: none;
}

#endFooter {
  display: flex;
  justify-content: space-between;
  width: 1140px;
  margin: 0 auto;
  padding: 40px 0;
}

#endFooter p {
    font-size: 20px;
    text-transform: uppercase;
    font-family: 'Geometos Neue', Arial, sans-serif;
}

#endFooter {
  background-color: var(--green2);
  color: #A8AEBA;
  font-size: 14px;
}

#block-basedbootstrap-social {
  background-color: var(--green);
  margin: -1px 0 0;
  padding: 30px 0;
}

.row.region.region-footer-fifth , .site-footer__bottom {
  margin: 0;
}

.site-footer {
  padding: 0;
}

#social a i{
  color: #C28F2B;
  opacity: 0.3;
  font-size: 28px;
  transition: .3s;
}

#social a i:hover{
  opacity: 1;
  transition: .3s;
}

#social {
display: flex;
  justify-content: space-evenly;
  width: 1140px;
  margin: 0 auto;
}

.documentTitle a span:nth-child(1) {
  width: 25px;
  font-size: 23px;
  align-content: center;
}

.documentTitle a span:nth-child(2) {
  align-content: end;
  padding-left: 4%;
}

.view-header .numberText span:nth-child(2) {
font-size: 43px;
  font-family: 'Geometos Neue', sans-serif;
}

.view-header .numberText::after {
  content: "";
  display: block;
  position: absolute;
  height: 90px;
  width: 3px;
  background-color: var(--green);
  right: 0;
  top: 41px;
}

.view-header .numberText {
border: none;
  width: 100%;
  color: var(--green);
  position: relative;
  top: -41px;
}

#block-basedbootstrap-views-block-documents-views-block-1 {
  background-color: #EDEFF1;
  padding: 50px 0 60px;
}

#block-basedbootstrap-views-block-documents-views-block-1 .view-documents-views {
display: flex;
  justify-content: space-between;
  width: 1140px;
  margin: 0 auto;
}

#block-basedbootstrap-views-block-documents-views-block-1 .view-header {
width: 38%;
  /*border-right: 4px solid var(--green);*/
  display: flex;
}

#block-basedbootstrap-views-block-documents-views-block-1 .view-content.row {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

#block-basedbootstrap-views-block-documents-views-block-1 .views-row {
width: 33%;
  border-right: 1px solid;
  padding-left: 3%;
  padding-right: 3%;
}

.document img {
  width: 70px;
  height: auto;
}

.documentTitle a {
text-decoration: none;
  color: var(--black);
  font-weight: bold;
  display: flex;
  margin-top: 9px;
  line-height: 16px;
  font-size: 14px;
}

.counter {
    font-size: 52px;
    line-height: 56px;
    color: var(--gold);
    position: relative;
    font-weight: 900;
    font-family: 'Geometos Neue', sans-serif;
    text-transform: uppercase;
}

.counter::after {
  content: "";
  position: absolute;
  height: 50px;
  width: 1px;
  top: 0px;
  right: -15px;
  background-color: #000000;
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

.numberText span {
  display: block;
}

#number {
  width: 1140px;
    width: 1140px;
    margin: 30px auto 40px;
  display: flex;
  justify-content: space-between;
  font-family: 'Geometos Neue', sans-serif;
}

.numberText {
  width: 30%;
  border-right: 4px solid var(--green);
  align-content: center;
}

.numberText span:nth-child(1) {
    font-size: 22px;
    text-transform: uppercase;
    font-family: 'Geometos Neue', sans-serif;
}

.numberText span:nth-child(2) {
font-size: 45px;
  line-height: 52px;
  color: var(--green);
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Geometos Neue', sans-serif;
  font-weight: 300;
}

.numberKeyContent:last-child .counter::after {
  content: none;
}

.numberKey {
  display: flex;
  justify-content: space-between;
  /*width: 70%;*/
  width: 100%;
}

.numberKeyContent {
  width: 33%;
  display: flex;
}

.numberKeyContent div {
  align-content: center;
  text-align: center;
  width: 100%;
}

.numberKey span {
  display: block;
}

.counterText {
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    color: #000;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}


.slick-prev.slick-arrow {
 left: 1%;
  z-index: 1;
}

.slick-arrow {
  background-color: var(--black);
  padding: 10px 7px 7px 10px;
  position: absolute;
  top: 43%;
}

.slick-next.slick-arrow {
  right: 1%;
}

.newsTitle {
/*height: 46px;*/
  display: flex;
}

.news {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 30px 30px 30px 30px;
  margin-right: 70px;
  position: relative;
  z-index: 1;
}

#block-basedbootstrap-views-block-actualites-views-block-1 {
  color: #fff;
  background-color: var(--green);
  padding: 75px 16px 50px;
}

#block-basedbootstrap-views-block-actualites-views-block-1 .view-header {
  color: var(--gold);
  text-transform: uppercase;
  text-align: center;
}

#block-basedbootstrap-views-block-actualites-views-block-1 .view-header span {
    font-size: 22px;
    text-transform: uppercase;
    font-family: 'Geometos Neue', sans-serif;
}

#block-basedbootstrap-views-block-actualites-views-block-1 .view-header .block-title {
  margin: 0 0 65px;
}

.block-title {
    font-family: 'Geometos Neue', sans-serif;
    font-size: 42px;
    line-height: 52px;
    font-weight: 400;
}

.newsDate {
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
        color: #C28F2B;
}

.newsTitle a {
text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    font-size: 20px;
    display: block;
    line-height: 26px;
    font-family: 'Geometos Neue', sans-serif;
}

.newsBody {
    font-family: 'Montserrat', sans-serif;
    line-height: 24px;
    margin-bottom: 24px;
    letter-spacing: 1px;
    font-weight: 400;
}

.newsImage {
  margin-top: 30px;
  margin-right: -65px;
  position:relative;
  overflow: hidden;
}

.path-frontpage .news:hover::after {
  width: 100%;
  left: 0;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
  z-index: -1;
}

.path-frontpage .news::after {
  content: '';
  position: absolute;
  left: 100%;
  bottom: 0px;
  top: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  background-color: #000000;
  transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}

.newsImage img {
  width: 100%;
  height: auto;
}

#presentationLeft div:nth-child(n+2)::after, .newsImage:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.2);
  position: absolute;
  width: 35%;
  height: 200%;
  left: -100%;
  top: -50%;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -moz-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}

#presentationLeft div:nth-child(n+2):hover::after, .newsImage:hover::after {
  left: 150%;
}

#presentationLeft div:nth-child(n+2) {
  position: relative;
  overflow: hidden;
}

#presentationLeft div:nth-child(4) {
  position: relative;
  top: 20px;
}

#presentationLeft div:nth-child(4) {
height: 249px;
  margin-top: 21px;
}

#presentationLeft {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#presentationLeft div:nth-child(1) {
  background-color: #fff;
  margin-bottom: 20px;
  padding-top: 29px;
}

#presentationLeft div span:first-child {
  font-size: 90px;
  line-height: 88px;
  font-weight: 900;
  opacity: 0.3;
  color: var(--black);
}

#presentationLeft span {
  display: block;
  text-align: right;
  padding-right: 8%;
  color: #000000;
  font-weight: bold;
}

#presentationLeft div span:nth-child(2) {
  font-size: 42px;
  line-height: 52px;
  color: #000;
  font-weight: 400;
}

#presentationLeft > div {
width: 46%;
  margin-left: 3%;
  margin-bottom: -20px;
}

#presentationLeft div img {
  width: 100%;
  height: 100%;
}

#block-basedbootstrap-presentation {
  background-color: #EDEFF1;
 padding: 45px 0 130px;
}

#presentation {
  display: flex;
  justify-content: space-between;
  width: 1140px;
  margin: 0 auto;
}

#presentation > div {
  padding: 0 15px;
  width: 50%;
}

#presentation #presentationRight {
padding: 4px 25px 0px;
  margin: 0px 10px;
}

#presentationRight img {
  width: 100%;
}

#presentationRight div:first-child p {
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 32px;
    color: var(--green);
    font-family: 'Geometos Neue', sans-serif;
}

#presentationRight > div:nth-child(3) p {
margin-bottom: 24px;
  letter-spacing: 1px;
  font-weight: 400;
  color: #000000;
  text-align: justify;
  font-size: 18px;
  line-height: 26px;
  font-family: 'Montserrat', sans-serif;
}

#presentationRight a {
font-size: 14px;
  text-decoration: none;
  font-weight: bold;
  transition: .3s;
  background-color: #000000;
  color: #C28F2B;
  padding: 10px 20px;
      font-family: 'Montserrat', sans-serif;
}

#presentationRight a:hover {
  background-color: #C28F2B;
  color: #000000;
}


.slick-current.slick-active .diaporamaTitle {
  animation: fadeInUp;
    animation-duration: 3s;
}

.slick-current.slick-active .diaporamaSlogan {
  animation: fadeInUp;
    animation-duration: 4s;
}

.slick-current.slick-active .diaporamaLine {
  animation: fadeInUp;
    animation-duration: 4s;
}

#block-basedbootstrap-views-block-diaporama-views-block-1 .view-footer {
  position: absolute;
      top: -78px;
  right: 0;
  height: 100%;
}

#socialDiapo {
  height: 100%;
  align-content: center;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  width: 45px;
}

#socialDiapo a {
  text-align: center;
  -webkit-transform: rotate(-90deg) translateX(-50%) translateY(-50%);
  -ms-transform: rotate(-90deg) translateX(-50%) translateY(-50%);
  transform: rotate(-90deg) translateX(-50%) translateY(-50%);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  margin: 46px 0px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

#socialDiapo span {
  font-size: 29px;
  opacity: 0;
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

#socialDiapo a:hover span {
  top: -120%;
  opacity: 1;
}

#block-basedbootstrap-views-block-diaporama-views-block-1 {
  margin-top: -20px;
}

#diaporama {
  position: relative;
}

.diaporamaImage img {
 filter: brightness(.6);
height: 750px;
    object-fit: cover;
}

.diaporamaContent {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  position: absolute;
  z-index: 1;
  color: #fff;
  bottom: 35%;
  font-size: 24px;
  left: 3%;
  width: 100%;
}

.diaporamaContent > div {
    width: 1140px;
    margin: 0 auto;
}

.diaporamaTitle {
    text-transform: uppercase;
    margin-left: 6px;
    font-family: 'Geometos Neue', sans-serif;
    font-weight: 400;
}

.diaporamaLine {
  display: block;
  width: 65px;
  border-bottom: 2px solid var(--gold);
  margin-top: 13px;
  margin-left: 6px;
}

.diaporamaSlogan {
  transition: none;
  text-align: left;
  line-height: 82px;
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  letter-spacing: 0px;
  font-weight: 400;
  font-size: 72px;
}

body #navbar-main {
    background-color: transparent;
}

#mylogo_contact #mylogo a {
  font-size: 0;
}

.search span {
  display: block;
  align-content: center;
  width: 100%;
  text-align: center;
}

.search i {
  color: var(--gold);
  font-weight: bold;
}

.search {
  width: 3%;
  display: flex;
}

.clearfix.nav.navbar-nav {
  float: right;
  display: flex;
  justify-content: flex-end;
  flex-direction: inherit;
}

#my_menu li::marker {
  content: "";
}

#mylogo img {
  width: 100%;
}

#mylogo {
  width: 170px;
  position: relative;
  top: 12px;
}

#my_menu {
width: 81%;
}

#mylogo_contact {
  display: flex;
background-color: var(--green);
padding: 15px 2%;
border-top: 7px solid var(--gold);
position: fixed;
    width: 100%;
    z-index: 9;
}

ul#superfish-main ul {
    background-color: var(--gold);
    margin-top: 15px;
}

ul#superfish-main ul a {
color: var(--green);
    display: block;
    font-size: 15px;
    padding: 10px 10px;
    transition: .3s;
    text-transform: none;
}

ul#superfish-main ul li:hover a {
    background: var(--green);
    color: #fff;
    transition: .3s;
}

#mylogo_contact a {
text-decoration: none;
    color: var(--gold);
    font-size: 14px;
    transition: .3s;
    text-transform: uppercase;
    padding: 35px 12px;
    cursor: pointer;
    letter-spacing: 1px;
    margin: -10px 0;
    font-weight: 300;
}

#mylogo_contact a:hover {
  color: #fff;
  transition:.3s;
}

.layout-no-sidebars.page-view-frontpage.path-frontpage {
  margin: 0 0;
}

body {
    background: white;
}

a.visually-hidden-focusable, .view.view-frontpage.view-id-frontpage.view-display-id-page_1{
    display: none;
}

.path-frontpage h1.title {
    display: none;
}

:root {
    --gold: #C28F2B;
    --green: #000000;
    --green2: #000000;
    --black: #000000;
}

#page .responsive, #responsiveMenu {
	display:none;
}
/* ==========================================================================
   ACTUALITÉS SECTION — "Confident Minimalism" redesign
   These rules intentionally repeat some selectors above (.news, .newsTitle a,
   .newsDate, .newsBody, .block-title, etc.) — being lower in the file, they
   override the earlier versions for this section. Do not reorder.
   ========================================================================== */

/* Section background: white instead of solid navy */
#block-basedbootstrap-views-block-actualites-views-block-1 {
  color: #000000;
  background-color: #ffffff;
  padding: 90px 16px 70px;
}

/* Eyebrow + big title */
#block-basedbootstrap-views-block-actualites-views-block-1 .view-header {
  color: #C28F2B;
  text-transform: uppercase;
  text-align: center;
}

#block-basedbootstrap-views-block-actualites-views-block-1 .view-header span {
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Geometos Neue', sans-serif;
    font-weight: 400;
}

#block-basedbootstrap-views-block-actualites-views-block-1 .view-header .block-title {
  margin: 10px 0 70px;
  position: relative;
  display: block;
}

/* Big black title instead of gold-on-navy */
.block-title {
    font-family: 'Geometos Neue', sans-serif;
    font-size: 46px;
    line-height: 52px;
    font-weight: 700;
    color: #000000;
}

/* Signature gold underline beneath the section title */
#block-basedbootstrap-views-block-actualites-views-block-1 .view-header .block-title::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 3px;
  background-color: #C28F2B;
}

/* Card container: subtle border instead of navy card-on-navy */
.news {
  background-color: #ffffff;
  border: 1px solid #EDEFF1;
  padding: 0 0 25px;
  margin-right: 40px;
  position: relative;
  z-index: 1;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.news:hover {
  border-color: #000000;
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

/* Remove the old navy hover-slide overlay effect (no longer needed on white) */
.path-frontpage .news::after,
.path-frontpage .news:hover::after {
  content: none;
}

/* Image treatment */
.newsImage {
  margin: 0 0 20px;
  position: relative;
  overflow: hidden;
}

.newsImage img {
  width: 100%;
  height: auto;
  transition: transform .5s ease, filter .3s ease;
}

.news:hover .newsImage img {
  transform: scale(1.05);
}

/* Gold frame accent appears on hover */
.newsImage::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #C28F2B;
  opacity: 0;
  transition: opacity .3s ease;
}

.news:hover .newsImage::after {
  opacity: 1;
}

/* Date shown as a small gold pill/tag instead of plain gold text */
#block-basedbootstrap-views-block-actualites-views-block-1 .newsDate {
    display: inline-block;
    align-self: flex-start;
    width: fit-content;
    margin: 0 20px 12px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffffff;
    background-color: #C28F2B;
    padding: 4px 12px;
    border-radius: 2px;
}

/* Title: black by default, gold on hover */
.newsTitle {
  display: block;
  padding: 0 20px;
}

.newsTitle a {
  text-transform: none;
  color: #000000;
  text-decoration: none;
  font-size: 19px;
  line-height: 26px;
  display: block;
  font-family: 'Geometos Neue', sans-serif;
  font-weight: 700;
  transition: color .3s ease;
}

.news:hover .newsTitle a {
  color: #C28F2B;
}

/* Body excerpt */
.newsBody {
    font-family: 'Montserrat', sans-serif;
    line-height: 24px;
    margin: 12px 20px 0;
    letter-spacing: 0.2px;
    font-weight: 400;
    color: #576170;
}

/* Slick carousel arrows: black default, gold on hover — small confident detail */
#block-basedbootstrap-views-block-actualites-views-block-1 .slick-arrow {
  background-color: #000000;
  transition: background-color .3s ease;
}

#block-basedbootstrap-views-block-actualites-views-block-1 .slick-arrow:hover {
  background-color: #C28F2B;
}
/* ==========================================================================
   ACTUALITÉS — fix card row alignment (equal height cards, aligned images)
   Append this AFTER the ACTUALITÉS redesign block.
   ========================================================================== */

/* Force the row of cards to stretch evenly and align to the top */
#block-basedbootstrap-views-block-actualites-views-block-1 .view-content,
#block-basedbootstrap-views-block-actualites-views-block-1 .views-row,
#block-basedbootstrap-views-block-actualites-views-block-1 .slick-track {
  display: flex !important;
  align-items: stretch !important;
}

/* Each card becomes a column flex container so content/image stack predictably
   SCOPED to the homepage ACTUALITÉS block only — do not make these bare
   .news / .newsImage selectors, or they leak into the full article page
   and other listings that reuse the same class names. */
#block-basedbootstrap-views-block-actualites-views-block-1 .news {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

/* Title area takes only the space it needs, doesn't push content around */
#block-basedbootstrap-views-block-actualites-views-block-1 .newsTitle {
  flex: 0 0 auto;
}

/* Body excerpt grows to fill remaining space so all cards' images align at the same Y position */
#block-basedbootstrap-views-block-actualites-views-block-1 .newsBody {
  flex: 1 1 auto;
}

/* Image always pinned to the bottom of the card, fixed height, cropped consistently — homepage cards only */
#block-basedbootstrap-views-block-actualites-views-block-1 .newsImage {
  flex: 0 0 auto;
  margin-top: auto;
  height: 220px;
  overflow: hidden;
}

#block-basedbootstrap-views-block-actualites-views-block-1 .newsImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure slick slides themselves stretch to match tallest card */
.slick-slide {
  height: auto !important;
  display: flex !important;
}

.slick-slide > div {
  width: 100%;
  display: flex;
}
/* ==========================================================================
   Full article view — hero image fix
   The .newsImage / .newsImage img rules elsewhere are tuned for the small
   homepage teaser cards (including a -65px right margin meant to create a
   slight overlap effect there). On the full article page that same rule
   clips the right edge of the large hero photo. These rules undo that for
   the full-article context and give the hero photo proper height control.
   ========================================================================== */

.node--view-mode-full .newsImage,
.page-node-type-actualites .newsImage,
.node--type-actualites .actuContent + .newsImage,
.node--type-actualites div.news > .newsImage {
  margin-top: 0;
  margin-right: 0;
  overflow: hidden;
  height: auto !important;
}

.node--view-mode-full .newsImage img,
.page-node-type-actualites .newsImage img,
.node--type-actualites div.news > .newsImage img {
  width: 100%;
  height: auto !important;
  object-fit: initial;
}

/* Inline images inserted inside the article body (like the second photo
   in this article) should stay natural width, not stretch full-bleed */
.node--view-mode-full .newsBody img,
.page-node-type-actualites .newsBody img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  margin: 20px 0;
}

/* ==========================================================================
   Footer font override
   The theme's own site-footer.css hardcodes font-family: "Helvetica Neue"
   directly on .site-footer, which wins over inherited body font settings.
   Force our brand fonts here explicitly.
   ========================================================================== */

.site-footer,
.site-footer * {
  font-family: 'Montserrat', sans-serif !important;
}

.site-footer h2,
.site-footer h3,
.site-footer .endFooterLeft p,
.site-footer .endFooterCenter p,
.site-footer .endFooterRight p,
#endFooter p {
  font-family: 'Geometos Neue', sans-serif !important;
}

/* ==========================================================================
   Geometos Neue Ultra weight (950) — relies on the weight-mapped @font-face
   already declared in the theme's fonts.css. Applied to the site's heaviest
   display numbers for maximum visual impact.
   ========================================================================== */

.counter,
#number .numberText span:nth-child(2) {
  font-family: 'Geometos Neue', sans-serif !important;
  font-weight: 950 !important;
}

/* ==========================================================================
   Geometos Neue Ultra — extended to headers site-wide
   ========================================================================== */

/* Top navigation menu */
#my_menu a,
ul#superfish-main a,
ul#superfish-main ul a {
  font-family: 'Geometos Neue', sans-serif !important;
  font-weight: 950 !important;
}

/* Section titles (e.g. "ACTUALITÉS", any .block-title) */
.block-title {
  font-family: 'Geometos Neue', sans-serif !important;
  font-weight: 950 !important;
}

/* ==========================================================================
   Diaporama slogan — Geometos Neue Ultra
   ========================================================================== */

.diaporamaSlogan {
  font-family: 'Geometos Neue', sans-serif !important;
  font-weight: 950 !important;
}

/* ==========================================================================
   Date badge — universal fix
   Ensures the gold date pill always has white, readable text regardless
   of page context (homepage cards, full article view, sidebars, etc.)
   ========================================================================== */

.newsDate {
  display: inline-block !important;
  align-self: flex-start;
  width: fit-content !important;
  background-color: #C28F2B !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  padding: 4px 12px !important;
  border-radius: 2px !important;
  margin: 0 0 12px !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE FIXES
   ========================================================================== */

/* --------------------------------------------------------------------
   1) CRITICAL: fix broken mobile navigation.
   The rule below (already present in the site's CSS) hides the mobile
   hamburger/off-canvas menu at ALL screen sizes, forcing the full desktop
   menu to stay visible and stack vertically on phones. Restrict it to
   desktop widths only, and explicitly hide the desktop menu on mobile.
   -------------------------------------------------------------------- */
@media (min-width: 992px) {
  #page .responsive, #responsiveMenu {
    display: none;
  }
}

@media (max-width: 991px) {
  /* Do NOT force #responsiveMenu to display:block — it's an off-canvas
     panel meant to stay hidden (usually positioned off-screen) until a
     JS-added class slides it into view on hamburger tap. Only ensure the
     desktop menu is hidden and the mobile logo/hamburger row shows. */
  #my_menu.desktop,
  #mylogo_contact.desktop {
    display: none !important;
  }
  #mylogo_contact.responsive {
    display: flex !important;
  }
}

/* --------------------------------------------------------------------
   2) Fixed-width (1140px) sections causing horizontal overflow on mobile.
   Make them fluid below the desktop breakpoint.
   -------------------------------------------------------------------- */
@media (max-width: 991px) {
  #number,
  .news,
  .partenaires > div,
  #presentation,
  #endFooter,
  #social,
  .capital,
  .capital.capitalBottom > div,
  .mainAuto,
  .approcheB,
  #vision,
  #mission > div,
  #history,
  #aboutUs,
  #process,
  #cycle > div,
  .emploi,
  .collapseElm,
  #webform-submission-contact-node-43-add-form,
  #block-basedbootstrap-views-block-documents-views-block-1 .view-documents-views,
  #block-basedbootstrap-views-block-direction-views-block-1 .view-content,
  .security,
  .politique,
  .page-node-41 #content > section,
  #block-basedbootstrap-views-block-actualites-views-block-2,
  .node--type-actualites .news,
  .diaporamaContent > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Let flex rows wrap instead of squeezing/overflowing */
  #number,
  .capital,
  .politique,
  #presentation,
  .flex-div,
  #aboutUs,
  #history,
  .security {
    flex-wrap: wrap !important;
  }

  #number .numberText,
  .capital > div,
  #presentation > div,
  .flex-div > div,
  #aboutUs > div,
  #history > div,
  .securityLeft,
  .securityRight.divFlex {
    width: 100% !important;
    border-right: none !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  /* Stat numbers: smaller size on mobile so they don't overlap neighboring columns */
  #number .numberText span:nth-child(2) {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
  #number .numberText span:nth-child(1) {
    font-size: 16px !important;
  }
  #number {
    text-align: center !important;
  }

  /* Homepage news card: remove desktop negative margins that push it off-screen */
  .news {
    margin-right: 0 !important;
  }

  .newsImage {
    margin-right: 0 !important;
  }
}

/* --------------------------------------------------------------------
   3) Hero slideshow text sizing for mobile
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .diaporamaSlogan {
    font-size: 34px !important;
    line-height: 1.3 !important;
  }
  .diaporamaTitle {
    font-size: 16px !important;
  }
  .diaporamaContent {
    left: 5% !important;
    width: 90% !important;
    bottom: 25% !important;
  }
  #socialDiapo {
    display: none;
  }
}

/* --------------------------------------------------------------------
   4) Hamburger menu icon — explicit fallback styling
   .icon-bar has no defined dimensions/background elsewhere, making it
   invisible. Give it a guaranteed visible appearance.
   -------------------------------------------------------------------- */
.icon-bk-menu-mobile {
  cursor: pointer;
  padding: 8px;
  display: inline-block;
}

.icon-bk-menu-mobile .icon-bar {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background-color: #C28F2B;
  border-radius: 2px;
}

/* --------------------------------------------------------------------
   5) Documents / Rapports block — stack header + cards on mobile
   -------------------------------------------------------------------- */
@media (max-width: 991px) {
  #block-basedbootstrap-views-block-documents-views-block-1 .view-documents-views {
    flex-direction: column !important;
  }
  #block-basedbootstrap-views-block-documents-views-block-1 .view-header,
  #block-basedbootstrap-views-block-documents-views-block-1 .view-content.row {
    width: 100% !important;
  }
  #block-basedbootstrap-views-block-documents-views-block-1 .view-content.row {
    flex-wrap: wrap !important;
    margin-top: 20px;
  }
  #block-basedbootstrap-views-block-documents-views-block-1 .views-row {
    width: 100% !important;
    border-right: none !important;
    margin-bottom: 25px;
  }

  /* --------------------------------------------------------------------
     6) Partenaires row — stack label + logos, wrap logos
     -------------------------------------------------------------------- */
  .partenaires > div {
    flex-direction: column !important;
    align-items: center !important;
  }
  .partenairesLeft,
  .partenairesRight {
    width: 100% !important;
  }
  .partenairesRight {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px;
    margin-top: 16px;
  }
  .partenairesLeft {
    text-align: center !important;
    margin-bottom: 10px;
  }

  /* --------------------------------------------------------------------
     7) Large counter/stat numbers used elsewhere — scale down on mobile
     -------------------------------------------------------------------- */
  .counter {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }
  .capitalRight .counter {
    font-size: 70px !important;
  }
}

@media (max-width: 991px) {
  /* Push logo to the left and hamburger icon to the far right,
     the conventional/expected position for a mobile menu trigger */
  #mylogo_contact.responsive {
    justify-content: space-between !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   Hamburger icon — defensive, maximum-specificity fix
   ========================================================================== */
@media (max-width: 991px) {
  #mylogo_contact.responsive {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 20 !important;
  }

  #mylogo_contact.responsive .icon-bk-menu-mobile.responsive {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 21 !important;
    width: 32px !important;
    height: 26px !important;
    cursor: pointer !important;
  }

  #mylogo_contact.responsive .icon-bk-menu-mobile.responsive > div {
    display: block !important;
    width: 100% !important;
  }

  #mylogo_contact.responsive .icon-bk-menu-mobile.responsive .icon-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 28px !important;
    height: 4px !important;
    margin: 6px 0 !important;
    background-color: #C28F2B !important;
    border-radius: 2px !important;
  }
}

/* ==========================================================================
   Mobile menu panel — fix positioning/visibility
   #responsiveMenu relies on the "bounceInLeft"/"bounceOutRight" classes,
   which need the Animate.css library to slide in from off-screen. If that
   library isn't loaded, the panel is stuck in its off-screen starting
   position even when JS sets display:block. Force reliable positioning
   here instead, independent of any animation library.
   ========================================================================== */
#responsiveMenu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100vh !important;
  background-color: #000000 !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  padding: 70px 24px 40px !important;
  box-sizing: border-box !important;
}

#responsiveMenu .closemenu {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  color: #C28F2B;
  cursor: pointer;
}

#responsiveMenu #superfish-main-accordion,
#responsiveMenu #superfish-main {
  list-style: none;
  padding: 0;
  margin: 0;
}

#responsiveMenu #superfish-main-accordion > li,
#responsiveMenu #superfish-main > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#responsiveMenu #superfish-main-accordion a,
#responsiveMenu #superfish-main a {
  display: block;
  padding: 14px 0;
  color: #C28F2B !important;
  font-size: 18px;
  text-decoration: none;
}

#responsiveMenu #superfish-main-accordion ul a {
  color: #ffffff !important;
  font-size: 15px;
  padding: 10px 0 10px 16px;
}

#responsiveMenu .sf-sub-indicator {
  color: #C28F2B;
}

/* ==========================================================================
   Mobile menu — force every wrapper layer visible
   The Superfish accordion plugin likely relies on its own CSS to reveal
   the menu, which may not be loading. Force visibility at every level.
   ========================================================================== */
#responsiveMenu .block,
#responsiveMenu .block-superfish,
#responsiveMenu .content,
#responsiveMenu #superfish-main-accordion,
#responsiveMenu #superfish-main-accordion li,
#responsiveMenu #superfish-main-accordion a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Hide the little accordion toggle arrow link (not needed here) */
#responsiveMenu .sf-accordion-toggle {
  display: none !important;
}

/* Keep true submenus collapsed by default (still expandable on tap) */
#responsiveMenu ul.sf-hidden {
  display: none;
}

/* ==========================================================================
   Minimal Animate.css-style keyframes for the mobile menu open/close
   The theme's JS toggles "bounceInLeft"/"bounceOutRight" classes and
   likely waits for an animationend event to finish hiding the panel.
   If Animate.css isn't loaded, no animation ever runs, so that event
   never fires and the close button appears to do nothing. Define
   minimal versions here so the existing JS logic can complete.
   ========================================================================== */
@keyframes bounceInLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes bounceOutRight {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.bounceInLeft {
  animation-name: bounceInLeft;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}

.bounceOutRight {
  animation-name: bounceOutRight;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}