@charset "UTF-8";
/***** Custom variables ********/
/* bleu-vert */
/* orange */
/* vert */
/********* Custom theme ************/
#header {
  z-index: 1000;
}

article.fetedelarentree {
  text-align: justify;
  font-family: "Oxygen", sans-serif;
  font-size: 16px;
  line-height: 20px;
  background-color: #f4f1e1;
  color: #333333;
  clear: both;
}
@media (max-width: 576px) {
  article.fetedelarentree {
    text-align: center;
  }
}
article.fetedelarentree p {
  margin-bottom: 1.4rem;
}
article.fetedelarentree [class*=col-] p:last-child, article.fetedelarentree td p:last-child {
  margin-bottom: 0;
}
article.fetedelarentree p + ul {
  margin-top: calc(-1.4rem + 10px);
}
article.fetedelarentree ul {
  margin-bottom: 10px;
  list-style: none;
  margin-left: 25px;
}
article.fetedelarentree ol {
  margin-bottom: 10px;
}
@media (max-width: 576px) {
  article.fetedelarentree ul, article.fetedelarentree ol {
    text-align: left;
    display: inline-block;
  }
}
article.fetedelarentree ul li::before {
  content: "•";
  color: #333333;
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  font-size: 20px;
  line-height: 20px;
  float: left;
  margin-left: -20px;
  /* content: "•"; color: $color-standard-text; font-size: 25px; line-height: 25px; position: absolute; left: 0; top: 20%; transform: translateY(-20%); width: 10px; height: 10px; background-image: url('/assets/images/bullet.png'); background-size: cover; background-position: center; */
}
article.fetedelarentree ul li li::before {
  content: "-";
  line-height: 20px;
}
article.fetedelarentree ol li, article.fetedelarentree ul li {
  margin: 0 0 10px 0;
}
article.fetedelarentree ul ul, article.fetedelarentree ul ol, article.fetedelarentree ol ul, article.fetedelarentree ol ol {
  margin: 10px 0 0 0;
}
article.fetedelarentree img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}
article.fetedelarentree iframe {
  border: 0;
}
article.fetedelarentree a, article.fetedelarentree a:visited {
  text-decoration: underline;
  color: #285b94;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
article.fetedelarentree a:hover, article.fetedelarentree a:visited:hover {
  text-decoration: none;
  color: #285b94;
}
article.fetedelarentree .table {
  border-bottom: 1px solid #dee2e6;
}
article.fetedelarentree sup {
  line-height: 0;
  font-size: 65%;
  vertical-align: super;
}
article.fetedelarentree section {
  z-index: 1;
  position: relative;
}
article.fetedelarentree .container-bs {
  position: relative;
  z-index: 10;
}
@media (max-width: 768px) {
  article.fetedelarentree .container-bs {
    max-width: none;
    width: auto;
  }
}
article.fetedelarentree .row {
  margin-bottom: 0;
}

a {
  outline: none;
}

:focus {
  -moz-outline-style: none;
}

.fetedelarentree .btn {
  border-radius: 0;
  text-decoration: none;
  padding-right: 30px;
  padding-left: 30px;
  white-space: normal;
}
.fetedelarentree .btn:hover {
  text-decoration: none;
}
.fetedelarentree .btn.texte-petit {
  padding-right: 15px;
  padding-left: 15px;
}

/*------------------------------------------------------------------
    #Headers
------------------------------------------------------------------*/
/*------------------------------------------------------------------
    /#Headers
------------------------------------------------------------------*/
/*------------------------------------------------------------------
    #Modele de pages
------------------------------------------------------------------*/
/*------------------------------------------------------------------
    /#Modele de pages
------------------------------------------------------------------*/
/*------------------------------------------------------------------
    #Home
------------------------------------------------------------------*/
.splash-accueil {
  position: absolute;
  right: 0;
  top: -200px;
  width: 614px;
  height: 446px;
  z-index: 2;
  background: url(../../images/splash.png) no-repeat left top;
  background-size: cover;
  -webkit-transform-origin: center right;
          transform-origin: center right;
}
@media (max-width: 992px) {
  .splash-accueil {
    width: 450px;
    height: 327px;
    top: -120px;
    left: 50%;
    right: auto;
    margin-left: -225px;
  }
}

/*------------------------------------------------------------------
    /#Home
------------------------------------------------------------------*/
/*------------------------------------------------------------------
    #Contact
------------------------------------------------------------------*/
/*------------------------------------------------------------------
    /#Contact
------------------------------------------------------------------*/
/*------------------------------------------------------------------
    #Autres
------------------------------------------------------------------*/
.intro {
  background-color: #000;
  padding: 80px 0 100px 0;
  text-align: center;
  color: #fff;
  /* margin-top: -100px; */
}
@media (min-width: 992px) {
  .intro {
    margin-top: -140px;
    padding-top: 150px;
  }
}
.fetedelarentree_accueil .intro {
  margin-top: -100px;
  padding-top: 150px;
}
@media (min-width: 992px) {
  .fetedelarentree_accueil .intro {
    margin-top: -160px;
    padding-top: 180px;
  }
}
@media (min-width: 1200px) {
  .fetedelarentree_accueil .intro {
    margin-top: -220px;
    padding-top: 230px;
  }
}
@media (min-width: 1400px) {
  .fetedelarentree_accueil .intro {
    margin-top: -240px;
    padding-top: 270px;
  }
}

.js-support .wow {
  visibility: hidden;
}

/*** Surreal CMS ***/
/* Show les Wow et Collapse dans Surreal */
.is-cms .wow, .is-cms .collapse {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Show un outline quand un repeatable est sélectionné */
.is-cms .cms-repeatable[data-mce-selected=true] {
  outline: 1px dashed red;
}

.navbar-custom {
  padding: 0;
  margin-top: -50px;
  z-index: 101;
  transition: all 500ms ease-out;
  /*** Container du logo et du toggler ***/
  /*** Container du logo ***/
  /*** Container de la navigation principlae ***/
  /*** <ul> de la nav principale ***/
  /*** <li> de la nav principale, .nav-item ***/
  /*** <a> de la nav principale, .nav-link ***/
  /*** Bouton toggle ***/
}
@media (min-width: 992px) {
  .navbar-custom {
    padding: 0 25px;
  }
}
.navbar-custom.container-bs {
  max-width: 1140px;
}
@media (max-width: 992px) {
  .navbar-custom .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
  }
}
@media (max-width: 1200px) {
  .navbar-custom .navbar-brand img {
    width: 190px;
    height: auto;
  }
}
@media (max-width: 992px) {
  .navbar-custom .navbar-brand {
    width: 100%;
    margin: -10px 0 0 0;
    text-align: center;
  }
  .navbar-custom .navbar-brand img {
    width: 380px;
  }
}
@media (max-width: 320px) {
  .navbar-custom .navbar-brand {
    text-align: left;
  }
  .navbar-custom .navbar-brand img {
    width: 240px;
  }
}
.navbar-custom .logo-menu img {
  width: 370px;
  height: auto;
  max-width: none;
}
.fetedelarentree_accueil .navbar-custom .logo-menu {
  margin-top: -20px;
}
.fetedelarentree_accueil .navbar-custom .logo-menu img {
  width: 680px;
}
@media (max-width: 1400px) {
  .fetedelarentree_accueil .navbar-custom .logo-menu img {
    width: 660px;
  }
}
@media (max-width: 1200px) {
  .fetedelarentree_accueil .navbar-custom .logo-menu img {
    width: 530px;
  }
}
@media (max-width: 1024px) {
  .fetedelarentree_accueil .navbar-custom .logo-menu img {
    width: 500px;
  }
}
.navbar-custom .logo-menu a {
  padding: 0 !important;
}
.navbar-custom .navbar-collapse {
  justify-content: flex-end;
}
@media (max-width: 992px) {
  .navbar-custom .navbar-collapse {
    background-color: #79ccc8;
    height: 100vh !important;
  }
}
.navbar-custom .navbar-nav {
  list-style-type: none;
  margin-left: 0;
}
@media (min-width: 768px) {
  .navbar-custom .navbar-nav {
    display: flex;
  }
}
.navbar-custom .navbar-nav > li {
  padding: 0;
}
.navbar-custom .navbar-nav > li::before {
  display: none;
}
.navbar-custom .navbar-nav > li > a {
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  font-weight: 700;
}
@media (min-width: 992px) {
  .navbar-custom .navbar-nav > li > a {
    padding: 12px 10px 15px 10px;
    text-align: center;
    white-space: nowrap;
    color: #49a09c;
  }
}
@media (min-width: 1200px) {
  .navbar-custom .navbar-nav > li > a {
    font-size: 1.1rem;
    padding: 12px 20px 15px 20px;
  }
}
@media (min-width: 1200px) {
  .fetedelarentree_accueil .navbar-custom .navbar-nav > li > a {
    padding: 12px 10px 15px 10px;
  }
}
@media (min-width: 1400px) {
  .fetedelarentree_accueil .navbar-custom .navbar-nav > li > a {
    padding: 12px 20px 15px 20px;
  }
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li.show a {
  color: #fff;
  text-decoration: none;
}
@media (min-width: 992px) {
  .navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li.show a {
    color: #54beb9;
  }
  .navbar-custom .navbar-nav > li > a:hover::after, .navbar-custom .navbar-nav > li.show a::after {
    -webkit-transform: scale(5) translateX(0);
            transform: scale(5) translateX(0);
  }
}
@media (max-width: 992px) {
  .navbar-custom .navbar-toggler-container {
    position: absolute;
    top: 22px;
    right: 8px;
    /*width: 30%; text-align: right; margin: -40px 0 0 0;*/
  }
}
.navbar-custom .navbar-toggler {
  border: 0;
  border-radius: 0;
  background-color: #79ccc8;
  border: 2px solid #79ccc8;
  padding: 10px 13px;
  position: relative;
  z-index: 2;
}
.navbar-custom .navbar-toggler:focus {
  outline: none;
}
.navbar-custom .navbar-toggler:not(.collapsed) {
  background-color: #fff;
}
.navbar-custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-custom .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

/*** Nav collapse from right offcanvas-collapse - https://getbootstrap.com/docs/4.0/examples/offcanvas/ ***/
@media (max-width: 992px) {
  html, body {
    overflow-x: hidden;
    /* Prevent scroll on narrow devices */
  }
}
@media (max-width: 992px) {
  .navbar-collapse.offcanvas-collapse {
    top: 0px;
    /* Height of navbar */
    width: 100%;
    padding: 55px 0 25px 0;
    /*margin: 0; width: 99.4vw; margin-left: -49.9vw; left: 50%;*/
    position: absolute;
    left: 0;
    top: 0;
    overflow-y: auto;
    transition: -webkit-transform 0.25s ease-out;
    transition: transform 0.25s ease-out;
    transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
    -webkit-transform: translateX(150%);
            transform: translateX(150%);
    z-index: 1;
    /* position: absolute; left: 0; width: 110%; margin-right: -15px; margin-left: -15px; overflow-y: auto; transition: transform .3s ease-in-out; transform: translateX(100%); */
    /* position : fixed; bottom: 0; width: 100%; padding-right: 1rem; padding-left: 1rem; */
  }
  .navbar-collapse.offcanvas-collapse.collapse:not(.show), .navbar-collapse.offcanvas-collapse.collapsing {
    display: block;
  }
  .navbar-collapse.offcanvas-collapse.show {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
article.fetedelarentree .footer-menu {
  clear: both;
  position: relative;
  margin-top: 10px;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.5rem;
  background-color: #363636;
  padding: 20px 0;
}
article.fetedelarentree .footer-menu a, article.fetedelarentree .footer-menu a:visited {
  color: #79ccc8;
  text-decoration: none;
}
article.fetedelarentree .footer-menu a:hover, article.fetedelarentree .footer-menu a:visited:hover {
  color: #fff;
  text-decoration: underline;
}

.logo-footer img {
  width: 200px;
}
@media (max-width: 992px) {
  .logo-footer img {
    margin-bottom: -25px;
  }
}

/*
Pour icon - 23k supplementaire
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
*/
/****** Texte ******/
.texte-extra-jumbo {
  font-size: 4rem !important;
  line-height: 4.3rem !important;
}

.texte-tres-tres-jumbo {
  font-size: 3.5rem !important;
  line-height: 3.7rem !important;
}

.texte-tres-jumbo {
  font-size: 3rem !important;
  line-height: 3.3rem !important;
}

.texte-jumbo {
  font-size: 2.6rem !important;
  line-height: 3rem !important;
}

.texte-extra-gros {
  font-size: 2.2rem !important;
  line-height: 2.5rem !important;
}

.texte-tres-tres-gros {
  font-size: 1.8rem !important;
  line-height: 2.2rem !important;
}

.texte-tres-gros {
  font-size: 1.4rem !important;
  line-height: 1.8rem !important;
}

.texte-gros {
  font-size: 1.2rem !important;
  line-height: 1.6rem !important;
}

.texte-regulier {
  font-size: 1rem !important;
  line-height: 1.6rem !important;
}

.texte-moyen {
  font-size: 1.1rem !important;
  line-height: 1.5rem !important;
}

.texte-petit {
  font-size: 0.9rem !important;
  line-height: 1.3rem !important;
}

.texte-tres-petit {
  font-size: 0.8rem !important;
  line-height: 1.2rem !important;
}

.texte-tres-tres-petit {
  font-size: 0.7rem !important;
  line-height: 1.1rem !important;
}

@media (min-width: 992px) {
  .texte-gros-lg {
    font-size: 1.2rem !important;
    line-height: 1.3rem !important;
  }
}
@media (max-width: 576px) {
  .texte-extra-jumbo {
    font-size: 3rem !important;
    line-height: 3.3rem !important;
  }

  .texte-tres-tres-jumbo {
    font-size: 2.5rem !important;
    line-height: 2.9rem !important;
  }

  .texte-tres-jumbo {
    font-size: 2rem !important;
    line-height: 2.4rem !important;
  }

  .texte-jumbo {
    font-size: 2rem !important;
    line-height: 2.4rem !important;
  }

  .texte-extra-gros {
    font-size: 1.6rem !important;
    line-height: 2rem !important;
  }

  .texte-tres-tres-gros {
    font-size: 1.4rem !important;
    line-height: 1.8rem !important;
  }
}
.texte-tres-tres-gros-responsive {
  font-size: 1.8rem !important;
  font-size: 12vw !important;
  line-height: 1.3rem !important;
}

.texte-tres-gros-responsive {
  font-size: 1.4rem !important;
  font-size: 10vw !important;
  line-height: 1.3rem !important;
}

.texte-gros-responsive {
  font-size: 1.2rem !important;
  font-size: 8vw !important;
  line-height: 1.3rem !important;
}

.texte-moyen-responsive {
  font-size: 1.1rem !important;
  font-size: 6vw !important;
  line-height: 1.3rem !important;
}

.texte-tres-petit-responsive {
  font-size: 0.8rem !important;
  font-size: 4vw !important;
  line-height: 1.3rem !important;
}

.texte-tres-tres-petit-responsive {
  font-size: 0.8rem !important;
  font-size: 2vw !important;
  line-height: 2.2vw !important;
}

.line-height-point8 {
  line-height: 0.8rem !important;
}

.line-height-point85 {
  line-height: 0.85rem !important;
}

.line-height-point9 {
  line-height: 0.9rem !important;
}

.line-height-point95 {
  line-height: 0.95rem !important;
}

.line-height-1 {
  line-height: 1rem !important;
}

.line-height-1-1 {
  line-height: 1.1rem !important;
}

.line-height-1-2 {
  line-height: 1.2rem !important;
}

.line-height-1-3 {
  line-height: 1.3rem !important;
}

.texte-glyphicons {
  font-family: "Glyphicons Halflings";
}

.texte-cursif {
  font-family: "Parisienne", cursive !important;
  font-size: 1.7rem;
}

.texte-serif {
  font-family: "Quattrocento", Georgia, "Lucida Bright", Times !important;
  font-size: 1.7rem;
}

.ombrage-texte {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4) !important;
}

.ombrage-texte-glow {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) !important;
}

.ombrage-texte-fonce {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7) !important;
}

.ombrage-texte-glow-fonce {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7) !important;
}

.sans-ombrage {
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-filter: none !important;
          filter: none !important;
}

.slogan {
  font-size: 2.5rem !important;
  line-height: 1rem !important;
  font-family: "Parisienne", sans_serif !important;
  color: #e98e60 !important;
}

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.texte-rouge {
  color: #cf0915 !important;
}

.texte-blanc {
  color: #fff !important;
}
article .texte-blanc a, article .texte-blanc a:visited {
  color: #fff;
}
article .texte-blanc a:hover, article .texte-blanc a:visited:hover {
  color: #fff;
}
article .texte-blanc ul li::before {
  color: #fff;
}

.texte-noir {
  color: #000 !important;
}

.texte-couleur, .texte-bleu {
  color: #79ccc8 !important;
}
article .texte-couleur ul li::before, article .texte-bleu ul li::before {
  color: #79ccc8 !important;
}

.texte-vert {
  color: #d4de23 !important;
}

.texte-vert-fonce {
  color: #78c851 !important;
}

.texte-orange {
  color: #e98e60 !important;
}

.texte-pale {
  color: #ccc !important;
}

.texte-fonce {
  color: #333 !important;
}

.texte-couleur-regulier {
  color: #333333 !important;
}

.texte-gris {
  color: #888888 !important;
}

.sans-cesure {
  -webkit-hyphens: none !important;
      -ms-hyphens: none !important;
          hyphens: none !important;
}

.avec-cesure {
  -webkit-hyphens: auto !important;
      -ms-hyphens: auto !important;
          hyphens: auto !important;
}

a.lien-invisible, a.lien-invisible:visited {
  color: #333333 !important;
  text-decoration: none !important;
}

@media (min-width: 768px) {
  a.lien-invisible-md, a.lien-invisible-md:visited {
    color: #333333 !important;
    text-decoration: none !important;
  }
}

a.lien-blanc, a.lien-blanc:visited {
  color: #fff !important;
  text-decoration: underline !important;
}

a.lien-blanc:hover, a.lien-blanc:hover:visited {
  color: #fff !important;
  text-decoration: none !important;
}

.sans-souligne, .no-underline {
  text-decoration: none !important;
}

.gras, .texte-gras, .bold {
  font-weight: 600 !important;
}

.pas-de-gras, .texte-pas-de-gras, .no-bold {
  font-weight: 400 !important;
}

.minuscule, .texte-minuscule, .no-caps {
  text-transform: none !important;
}

.majuscule, .texte-majuscule, .caps {
  text-transform: uppercase !important;
}

.texte-italique {
  font-style: italic !important;
}

.texte-normal {
  font-style: normal !important;
}

.texte-transform-none {
  text-transform: none !important;
}

.texte-wrap {
  white-space: normal !important;
}

.texte-nowrap {
  white-space: nowrap !important;
}

/****** Alignements ******/
.aligne-gauche {
  text-align: left !important;
}

.aligne-droite {
  text-align: right !important;
}

.aligne-centre {
  text-align: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
.aligne-centre img {
  margin: 0 auto;
}

/* Full width, sort du container - https://css-tricks.com/full-width-containers-limited-width-parents/ */
.full-width, .alignfull {
  width: 99.4vw;
  position: relative;
  margin-left: -49.9vw;
  left: 50%;
  /* margin-left: calc( -100vw/2 + 100%/2 ); margin-right: calc( -100vw/2 + 100%/2 ); max-width: 100vw; width: 100vw; width: calc( 100vw );*/
  /* width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; */
}
.full-width > .row, .alignfull > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 1200px) {
  .alignfull-xl {
    width: auto;
    max-width: 1000%;
    margin-right: calc(50% - 49.5vw) !important;
    margin-left: calc(50% - 49.5vw) !important;
  }
  .alignfull-xl > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 992px) {
  .alignfull-lg {
    width: auto;
    max-width: 1000%;
    margin-right: calc(50% - 49.5vw) !important;
    margin-left: calc(50% - 49.5vw) !important;
  }
  .alignfull-lg > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
.flottant-a-gauche {
  text-align: left;
  float: left;
  margin: 0 30px 30px 0;
  padding: 0;
}
@media (max-width: 576px) {
  .flottant-a-gauche {
    width: 100%;
    height: auto;
    float: none;
  }
}

.flottant-a-droite {
  text-align: right;
  float: right;
  margin: 0 0 30px 30px;
  padding: 0;
}
@media (max-width: 576px) {
  .flottant-a-droite {
    width: 100%;
    height: auto;
    float: none;
    margin-left: 0;
  }
}

.float-none {
  float: none !important;
}

.visibility-hidden {
  visibility: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

/****** Bordures ******/
.bordure {
  border: 1px solid #79ccc8 !important;
}

.bordure-haut {
  border-top: 1px solid #79ccc8 !important;
}

.bordure-droite {
  border-right: 1px solid #79ccc8 !important;
}

.bordure-bas {
  border-bottom: 1px solid #79ccc8 !important;
}

.bordure-gauche {
  border-left: 1px solid #79ccc8 !important;
}

.bordure-0 {
  border-width: 0px !important;
}

.bordure-2px {
  border-width: 2px !important;
}

.bordure-3px {
  border-width: 3px !important;
}

.bordure-4px {
  border-width: 4px !important;
}

.bordure-5px {
  border-width: 5px !important;
}

.bordure-6px {
  border-width: 6px !important;
}

.bordure-7px {
  border-width: 7px !important;
}

.bordure-8px {
  border-width: 8px !important;
}

.bordure-9px {
  border-width: 9px !important;
}

.bordure-10px {
  border-width: 10px !important;
}

.bordure-15px {
  border-width: 15px !important;
}

.bordure-20px {
  border-width: 20px !important;
}

.bordure-25px {
  border-width: 25px !important;
}

.bordure-30px {
  border-width: 30px !important;
}

.bordure-35px {
  border-width: 35px !important;
}

.bordure-40px {
  border-width: 40px !important;
}

.bordure-45px {
  border-width: 45px !important;
}

.bordure-50px {
  border-width: 50px !important;
}

.bordure-blanche {
  border-color: #FFF !important;
}

.bordure-noire {
  border-color: #FFF !important;
}

.bordure-invisible {
  border-color: transparent !important;
}

@media (max-width: 1200px) {
  .bordure-lg-0 {
    border: none !important;
  }
}
@media (max-width: 992px) {
  .bordure-md-0 {
    border: none !important;
  }
}
@media (max-width: 768px) {
  .bordure-sm-0 {
    border: none !important;
  }
}
@media (max-width: 576px) {
  .bordure-xs-0 {
    border: none !important;
  }
}
hr {
  color: #79ccc8;
  background-color: #79ccc8;
  height: 1px;
  clear: both;
  margin: 40px 0;
  border: 0;
}
hr.hr--gris-pale {
  color: #e0e0e0;
  background-color: #e0e0e0;
}
hr.hr--gris-moyen {
  color: #7f7f7f;
  background-color: #7f7f7f;
}

hr.hr-avec-icon {
  position: relative;
  margin: 65px 0;
}
hr.hr-avec-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: -50px;
  height: 100px;
  width: 100%;
  background: url(/images/icon-theme2-brun.svg) no-repeat center center;
  background-size: contain;
}

@media (min-width: 768px) {
  hr.hr-largeur-25 {
    max-width: 25%;
  }
}

@media (min-width: 768px) {
  hr.hr-largeur-50 {
    max-width: 50%;
  }
}

/****** Utiles ******/
/* Mise en page 2 colonnes */
@media (min-width: 992px) {
  .section-2-colonnes > .row > div[class*=col]:first-child {
    padding-right: 30px;
  }
}
@media (min-width: 1200px) {
  .section-2-colonnes > .row > div[class*=col]:first-child {
    padding-right: 40px;
  }
}

@media (min-width: 992px) {
  .section-2-colonnes > .row > div[class*=col]:last-child {
    padding-left: 30px;
  }
}
@media (min-width: 1200px) {
  .section-2-colonnes > .row > div[class*=col]:last-child {
    padding-left: 40px;
  }
}

/* Items répétables */
.liste-elements-repetables .cms-repeatable {
  border-top: 1px solid #e0e0e0;
  padding: 10px 0;
  position: relative;
}
.liste-elements-repetables .cms-repeatable h1, .liste-elements-repetables .cms-repeatable h2, .liste-elements-repetables .cms-repeatable h3, .liste-elements-repetables .cms-repeatable h4, .liste-elements-repetables .cms-repeatable h5 {
  margin-top: 0;
}

.liste-elements-repetables .cms-repeatable:last-child {
  border-bottom: 1px solid #e0e0e0;
}

.liste-elements-repetables .cms-repeatable::after {
  content: "";
  display: table;
  clear: both;
}

.liste-elements-repetables .cms-repeatable p:last-child, .liste-elements-repetables .cms-repeatable ul:last-child, .liste-elements-repetables .cms-repeatable ol:last-child,
.liste-elements-repetables .cms-repeatable .image-droite:last-child, .liste-elements-repetables .cms-repeatable .image-gauche:last-child {
  margin-bottom: 0;
}

.liste-elements-repetables .cms-repeatable.row {
  margin-right: 0;
  margin-left: 0;
}

.liste-elements-repetables .cms-repeatable.repeatable-sans-bordure {
  border-top: 0;
}

.liste-elements-repetables .cms-repeatable.repeatable-sans-bordure:last-child {
  border-bottom: 0;
}

/* Quand on veut creer un element repetable "gabarit", que les clients peuvent dupliquer
Le dernier itrem repetable est masqué et il sert de gabarit*/
.repeatable-avec-gabarit .cms-repeatable:last-child {
  display: none;
}

.is-cms .repeatable-avec-gabarit .cms-repeatable:last-child {
  opacity: 0.4;
  display: block;
  position: relative;
}
.is-cms .repeatable-avec-gabarit .cms-repeatable:last-child::before {
  content: "INACTIF";
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  background: red;
  color: white;
}

/* Pour un cas de liste-elements-repetables en 2 colonnes: empêche de voir une ligne de 2px sur mobile */
@media (max-width: 992px) {
  .liste-elements-repetables .col-lg-6:last-child {
    margin-top: -1px;
  }
}

/**** Tableau dont les cellules "stack" sur mobile, facile à éditer pour le client ****/
.table.table-borderless {
  border: none;
}

.tableau-adaptatif td {
  padding: 0;
}

@media (max-width: 767px) {
  .tableau-adaptatif td {
    display: block;
    width: 100%;
    height: auto;
  }
  .tableau-adaptatif td:last-child() {
    padding-bottom: 1rem;
  }
}
@media (min-width: 768px) {
  .tableau-adaptatif--2colonnes tr td, .tableau-adaptatif--3colonnes tr td, .tableau-adaptatif--4colonnes tr td {
    padding: 0 20px 20px 0;
  }
  .tableau-adaptatif--2colonnes tr td:last-child(), .tableau-adaptatif--3colonnes tr td:last-child(), .tableau-adaptatif--4colonnes tr td:last-child() {
    padding: 0;
  }

  .tableau-adaptatif--2colonnes tr td {
    width: 50%;
  }

  .tableau-adaptatif--3colonnes tr td {
    width: 33.333%;
  }

  .tableau-adaptatif--3colonnes tr td {
    width: 25%;
  }
}
.ombrage {
  -webkit-filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.5));
  transition: all 500ms ease-out;
}

a.ombrage:hover {
  -webkit-filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.2));
  -webkit-transform: scale3d(1.02, 1.02, 1.02);
          transform: scale3d(1.02, 1.02, 1.02);
}

.rollover-bordure {
  position: relative;
  transition: all 500ms ease-out;
  display: inline-block;
}
.rollover-bordure::before {
  content: "";
  width: 110%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: -5%;
  border: 1px solid #79ccc8;
  transition: all 500ms ease-out;
  -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
          clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}
.rollover-bordure:hover::before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.rollover-bordure.rollover-bordure--rond::before {
  border-radius: 50%;
}
.rollover-bordure.rollover-bordure--blanc::before {
  border: 1px solid #fff;
}

.rollover-opacite, .rollover-opacite-fort, rollover-opacite-faible {
  transition: all 0.3s;
  opacity: 1;
}

.rollover-opacite:hover {
  opacity: 0.5;
}

.rollover-opacite-fort:hover {
  opacity: 0.3;
}

.rollover-opacite-faible:hover {
  opacity: 0.75;
}

.rollover-zoom {
  transition: all 0.3s;
}
.rollover-zoom:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.rollover-encadre-blanc {
  position: relative;
  display: inline-block;
  transition: all 0.3s;
}
.rollover-encadre-blanc::before {
  content: "";
  width: 88%;
  height: 76%;
  position: absolute;
  top: 8%;
  left: 6%;
  transition: all 0.3s;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  opacity: 1;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  border: 1px solid #fff;
}
.rollover-encadre-blanc:hover::before {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

.rollover-zoom-background {
  /** Appliquer sur un conteneur : a, div, span **/
  display: inline-block;
  overflow: hidden;
}
.rollover-zoom-background img {
  transition: all 0.3s;
}
.rollover-zoom-background:hover img {
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}

.invisible {
  visibility: hidden !important;
}

.is-cms .invisible {
  visibility: visible !important;
  opacity: 0.4;
}

.invisible-complet {
  display: none !important;
}

.is-cms .invisible-complet {
  display: block !important;
  opacity: 0.4;
}

.is-cms .invisible-dans-surreal {
  display: none !important;
}

.is-cms .visible-dans-surreal {
  display: block !important;
}

/* Show les Wow dans Surreal */
.is-cms .wow {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Show un outline quand un repeatable est sélectionné */
.is-cms .cms-repeatable[data-mce-selected=true] {
  outline: 1px dashed red;
}

/****** Listes ******/
ul.liste-espace-plus-grand li, ol.liste-espace-plus-grand li {
  margin-bottom: 20px;
}

ul.liste-sans-espace li, ol.liste-sans-espace li {
  margin-bottom: 0 !important;
}

p + ul.liste-sans-espace, p + ol.liste-sans-espace {
  margin-top: -1rem;
}

ul.liste-sans-bullet li::before {
  display: none;
}

ul.liste-sans-bullet li::before {
  display: none;
}

/****** Fonds ******/
.fond-blanc {
  background-color: #fff;
  color: #333333;
}

.fond-couleur {
  background-color: #79ccc8;
  color: #fff;
}

.fond-pale, .fond-gris-pale {
  background-color: #e0e0e0;
}

.fond-fonce, .fond-gris-fonce {
  background-color: #333;
}

.fond-brun-gris {
  background-color: #735e4d;
}

.fond-bleu {
  background-color: #79ccc8;
}

.fond-vert {
  background-color: #d4de23;
}

.fond-orange {
  background-color: #e98e60;
}

.fond-gris-fonce, .fond-fonce, .fond-bleu, .fond-couleur, .fond-brun-gris, .fond-orange {
  color: #fff;
}
article .fond-gris-fonce a, article .fond-gris-fonce a:visited, article .fond-fonce a, article .fond-fonce a:visited, article .fond-bleu a, article .fond-bleu a:visited, article .fond-couleur a, article .fond-couleur a:visited, article .fond-brun-gris a, article .fond-brun-gris a:visited, article .fond-orange a, article .fond-orange a:visited {
  color: #fff;
}
article .fond-gris-fonce a:hover, article .fond-gris-fonce a:visited:hover, article .fond-fonce a:hover, article .fond-fonce a:visited:hover, article .fond-bleu a:hover, article .fond-bleu a:visited:hover, article .fond-couleur a:hover, article .fond-couleur a:visited:hover, article .fond-brun-gris a:hover, article .fond-brun-gris a:visited:hover, article .fond-orange a:hover, article .fond-orange a:visited:hover {
  color: #fff;
}
article .fond-gris-fonce ul li::before, article .fond-gris-fonce h2, article .fond-gris-fonce h3, article .fond-fonce ul li::before, article .fond-fonce h2, article .fond-fonce h3, article .fond-bleu ul li::before, article .fond-bleu h2, article .fond-bleu h3, article .fond-couleur ul li::before, article .fond-couleur h2, article .fond-couleur h3, article .fond-brun-gris ul li::before, article .fond-brun-gris h2, article .fond-brun-gris h3, article .fond-orange ul li::before, article .fond-orange h2, article .fond-orange h3 {
  color: #fff;
}
article .fond-gris-fonce hr, article .fond-fonce hr, article .fond-bleu hr, article .fond-couleur hr, article .fond-brun-gris hr, article .fond-orange hr {
  color: #fff;
  background-color: #fff;
}

.fond-gris-pale h1, .fond-gris-pale h2, .fond-gris-pale h3, .fond-vert, .fond-vert h3,
.fond-jaune h1, .fond-jaune h2, .fond-jaune h3 {
  color: #333333 !important;
}

.fond-noir-opacite-5 {
  background-color: rgba(0, 0, 0, 0.05);
}

.fond-noir-opacite-10 {
  background-color: rgba(0, 0, 0, 0.1);
}

.fond-noir-opacite-15 {
  background-color: rgba(0, 0, 0, 0.15);
}

.fond-noir-opacite-25 {
  background-color: rgba(0, 0, 0, 0.25);
}

.fond-noir-opacite-50 {
  background-color: rgba(0, 0, 0, 0.5);
}

.fond-noir-opacite-75 {
  background-color: rgba(0, 0, 0, 0.75);
}

.fond-blanc-opacite-5 {
  background-color: rgba(255, 255, 255, 0.05);
}

.fond-blanc-opacite-10 {
  background-color: rgba(255, 255, 255, 0.1);
}

.fond-blanc-opacite-15 {
  background-color: rgba(255, 255, 255, 0.15);
}

.fond-blanc-opacite-25 {
  background-color: rgba(255, 255, 255, 0.25);
}

.fond-blanc-opacite-50 {
  background-color: rgba(255, 255, 255, 0.5);
}

.fond-blanc-opacite-75 {
  background-color: rgba(255, 255, 255, 0.75);
}

article [class*=fond-] p:last-child, article .bordure p:last-child {
  margin-bottom: 0;
}

.opacite-0 {
  opacity: 0;
}

.opacite-10 {
  opacity: 0.1;
}

.opacite-20 {
  opacity: 0.2;
}

.opacite-30 {
  opacity: 0.3;
}

.opacite-40 {
  opacity: 0.4;
}

.opacite-50 {
  opacity: 0.5;
}

.opacite-60 {
  opacity: 0.6;
}

.opacite-70 {
  opacity: 0.7;
}

.opacite-80 {
  opacity: 0.8;
}

.opacite-90 {
  opacity: 0.9;
}

/****** Boutons ******/
.btn {
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  font-size: inherit;
  line-height: inherit;
  text-transform: uppercase;
  display: inline-block;
  color: #FFF !important;
  border: 1px solid #333;
  background-color: #333;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 200ms ease-out;
}
.btn:hover {
  border: 1px solid light !important;
  color: #333 !important;
  background-color: #fff !important;
}

.btn__content {
  position: relative;
  z-index: 2;
}

.btn-blanc, a.btn.btn-blanc, .btn-blanc:visited, a.btn.btn-blanc:visited {
  color: #333 !important;
  background-color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-blanc:hover, a.btn.btn-blanc:hover, .btn-blanc:visited:hover, a.btn.btn-blanc:visited:hover {
  border: 1px solid transparent !important;
  color: #fff !important;
  background-color: #333 !important;
  /* transform: perspective(200px) rotateY(10deg); */
}

.btn-contour-blanc, a.btn.btn-contour-blanc, .btn-contour-blanc:visited, a.btn.btn-contour-blanc:visited {
  color: #FFF !important;
  border: 1px solid #FFF;
  background-color: transparent;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.2rem;
  transition: all 500ms ease-out;
}
.btn-contour-blanc::before, a.btn.btn-contour-blanc::before, .btn-contour-blanc:visited::before, a.btn.btn-contour-blanc:visited::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-transform: translate(101%, 0%);
          transform: translate(101%, 0%);
  transition: all 300ms ease-out;
  -webkit-clip-path: polygon(0 0, 1% 0, 1% 100%, 0% 100%);
          clip-path: polygon(0 0, 1% 0, 1% 100%, 0% 100%);
  transition: all 700ms ease-out;
}
.btn-contour-blanc::after, a.btn.btn-contour-blanc::after, .btn-contour-blanc:visited::after, a.btn.btn-contour-blanc:visited::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-transform: translate(101%, 0%);
          transform: translate(101%, 0%);
  transition: all 300ms ease-out;
  transition-delay: 0.2s;
}
.btn-contour-blanc:hover, a.btn.btn-contour-blanc:hover, .btn-contour-blanc:visited:hover, a.btn.btn-contour-blanc:visited:hover {
  border: 1px solid #fff !important;
  color: #333333 !important;
  text-shadow: none;
}
.btn-contour-blanc:hover::before, a.btn.btn-contour-blanc:hover::before, .btn-contour-blanc:visited:hover::before, a.btn.btn-contour-blanc:visited:hover::before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
}
.btn-contour-blanc:hover::after, a.btn.btn-contour-blanc:hover::after, .btn-contour-blanc:visited:hover::after, a.btn.btn-contour-blanc:visited:hover::after {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}
.btn-contour-blanc.wow.animated::before, a.btn.btn-contour-blanc.wow.animated::before, .btn-contour-blanc:visited.wow.animated::before, a.btn.btn-contour-blanc:visited.wow.animated::before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/****** Bouton avec une icon - Icon a gauche, a droite, au-dessus ou en-dessous ******/
.btn-avec-icon {
  text-decoration: none;
  background-color: transparent;
  border: 4px solid transparent;
  padding-top: 10px;
}
.btn-avec-icon:hover {
  border: 4px dashed #e0e0e0;
}
.btn-avec-icon:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.btn-avec-icon--gauche > span, .btn-avec-icon--droite > span {
  display: flex;
  align-items: center;
}
.btn-avec-icon--gauche img, .btn-avec-icon--droite img {
  display: inline-block;
  margin-right: 10px;
  width: auto;
  height: 40px;
  transition: all 500ms ease-out;
}

.btn-avec-icon--droite img {
  margin-left: 10px;
  margin-right: 0;
}

.btn-avec-icon--dessus img, .btn-avec-icon--dessous img {
  display: block;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: 60px;
  transition: all 500ms ease-out;
}

.btn-avec-icon--dessous img {
  margin-top: 10px;
  margin-bottom: 0;
}

/****** Bouton vedette ******/
.card, .card-img {
  border: none;
  border-radius: 0;
}

.is-cms .card-img-overlay {
  height: 50%;
}

.card.btn-vedette {
  text-decoration: none;
  background: none;
  border: none;
  transition: all 0.3s;
  max-width: 450px;
  color: #fff;
  text-align: center;
  font-size: 1.3rem;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  margin-right: 20px;
  margin-left: 20px;
}
.card.btn-vedette img {
  transition: all 0.3s;
}
.card.btn-vedette:hover {
  color: #fff;
}
.card.btn-vedette:hover .card-body::before {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.card.btn-vedette:hover .card-img-top::before {
  -webkit-transform: translate(-10%, 32%) scale(1.5);
          transform: translate(-10%, 32%) scale(1.5);
}
.card.btn-vedette:hover img {
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}
.card.btn-vedette:hover .card-text::before {
  -webkit-transform: translateX(5px);
          transform: translateX(5px);
}

.card.btn-vedette .card-img-top {
  overflow: hidden;
  border-radius: 0;
  position: relative;
  -webkit-filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.7));
          filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.7));
  border: 10px solid #fff;
  /* Pour les images du template qui seront remplacées par le client (SurrealCMS), Conteneur responsive pour la photo. Vient faire un crop, vient masquer la photo, pour toujours garder le même ratio de photo. https://stackoverflow.com/questions/26918335/css-responsive-div-when-height-is-set-in-pixels */
}
.card.btn-vedette .card-img-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 150%;
  height: 180%;
  background: url(/images/courbe-bleu-fonce.svg) no-repeat left top;
  background-size: cover;
  -webkit-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
  opacity: 0.7;
  transition: all 200ms ease-out;
}
.card.btn-vedette .card-img-top::after {
  content: "";
  display: block;
  padding-top: 67.5%;
  /* hauteur divisé par largeur de l'image = ratio de l'image (proportion) à mettre en padding) */
}
.card.btn-vedette .card-img-top img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  /* (centered)  }*/
}

.card.btn-vedette .card-body {
  position: relative;
  display: block;
}
.card.btn-vedette .card-body::before {
  content: "EN SAVOIR PLUS";
  position: absolute;
  top: -80px;
  left: 0;
  z-index: 3;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  transition: all 250ms ease-out;
  opacity: 0;
}

.card.btn-vedette.btn-vedette--voir-la-carte .card-body::before {
  content: "VOIR LA CARTE";
}

.card.btn-vedette .card-text {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
}
.card.btn-vedette .card-text::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 15px;
  background: url(/assets/images/icon-chevron-right-white.svg) no-repeat left top;
  background-size: contain;
  transition: all 500ms ease-out;
  margin-left: -20px;
}

/****** Marges et paddings ******/
.coller {
  padding: 0 !important;
  margin: 0 !important;
}

/* Marges négatives */
.mt--70px {
  margin-top: -70px;
}

@media (min-width: 576px) {
  .ml-sm--40px {
    margin-left: -40px;
  }
}

/****** Photos ******/
/* Float d'images */
@media (min-width: 768px) {
  .image-gauche {
    float: left;
    margin: 0 40px 1.4rem 0;
    padding: 0;
  }
}

@media (min-width: 768px) {
  .image-droite {
    float: right;
    margin: 0 0 1.4rem 30px;
    padding: 0;
  }
}

@media (min-width: 768px) {
  .image-droite-verticale {
    float: right;
    margin: 1.4rem 0 1.4rem 30px;
    max-width: 50%;
  }
}

@media (min-width: 768px) {
  .image-gauche-verticale {
    float: left;
    margin: 1.4rem 40px 1.4rem 0;
    max-width: 50%;
  }
}

.image-droite-sans-marge-gauche {
  margin: 0 0 30px 0;
  padding: 0;
}
@media (min-width: 768px) {
  .image-droite-sans-marge-gauche {
    float: right;
  }
}

.image-gauche-sans-marge-droite {
  margin: 0 0 30px 0;
  padding: 0;
}
@media (max-width: 768px) {
  .image-gauche-sans-marge-droite {
    float: left;
  }
}

.image-aligne-centre {
  margin: 0 auto;
}

.img-not-fluid, article img.img-not-fluid {
  display: inline !important;
  height: auto;
  max-width: none !important;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.photo-background {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.image-cover {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  height: 100%;
  width: 100%;
}

/* Pour les images du template qui seront remplacées par le client (SurrealCMS), Conteneur responsive pour la photo. Vient faire un crop, vient masquer la photo, pour toujours garder le même ratio de photo. https://stackoverflow.com/questions/26918335/css-responsive-div-when-height-is-set-in-pixels */
div.image-recadre, span.image-recadre {
  overflow: hidden;
  position: relative;
}
div.image-recadre::after, span.image-recadre::after {
  content: "";
  display: block;
  padding-top: 67.5%;
  /* hauteur divisé par largeur de l'image = ratio de l'image (proportion) à mettre en padding) */
}
div.image-recadre img, span.image-recadre img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  /* (centered)  }*/
}

div.image-recadre.image-recadre--carre::after, span.image-carre.image-recadre--carre::after {
  padding-top: 100%;
}

/* Galerie de Thumbnails généré par VisualLightBox ou Surreal CMS */
/* Avec marges */
@media (min-width: 576px) {
  .cms-gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  }
}

.cms-gallery a {
  position: relative;
  display: block;
  margin: 5px;
}
@media (min-width: 576px) {
  .cms-gallery a {
    width: calc(50% - 10px);
  }
}
@media (min-width: 992px) {
  .cms-gallery a {
    width: calc(33.3333% - 10px);
  }
}
@media (min-width: 1200px) {
  .cms-gallery a {
    width: calc(25% - 10px);
  }
}

/* Sans marges
.cms-gallery {
    @include media(">=sm") { display: flex; flex-wrap: wrap; flex-direction: row; }
}
.cms-gallery a {
    position:relative; display: block;
    @include media(">=sm") { width: 50%; }
    @include media(">=lg") { width: calc(100% / 3); }
    @include media(">=xl") { width: calc(100% / 4); }
}
*/
.cms-gallery a::before {
  content: "";
  background: url(/assets/images/icon-zoom-in.svg) center center no-repeat rgba(0, 0, 0, 0.7);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 0.3s;
  opacity: 0;
}

.cms-gallery a:hover::before {
  opacity: 1;
}

.cms-gallery a::after {
  content: "";
  background: url(/assets/images/icon-zoom-in-thumb.png) right bottom no-repeat;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 1;
  top: 0px;
  right: 0px;
}
@media (min-width: 992px) {
  .cms-gallery a::after {
    bottom: 0px;
  }
}

.cms-gallery a:hover::after {
  opacity: 0;
}

.cms-gallery img {
  width: 100%;
}

/***** Bande parallax *****/
.parallax-section {
  position: relative;
  overflow: hidden;
}
@media (min-width: 576px) {
  .parallax-section {
    min-height: 400px;
  }
}
@media (max-width: 575px) {
  .parallax-section {
    min-height: 300px;
  }
}
.parallax-section .parallax-container, .parallax-section > .container {
  position: relative;
  z-index: 2;
}

.parallax-item {
  display: block;
  clear: both;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}
@media (min-width: 768px) {
  .parallax-item {
    height: 200%;
    background-size: cover;
  }
}
@media (max-width: 767px) {
  .parallax-item {
    height: 110%;
    background-size: cover;
  }
}

/* Paralax d'un <img> dans un container .parallax-section */
.parallax-item__img {
  width: auto;
  height: auto;
  position: relative;
  top: auto;
  left: auto;
}

.is-cms .collapse {
  display: block;
  height: auto !important;
}

.cercle-chiffre {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  color: #fff;
  background-color: #79ccc8;
  font-weight: bold;
  position: relative;
  display: inline-block;
  font-size: 25px;
  padding: 5px;
}
.cercle-chiffre .cercle-chiffre_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
}
.cercle-chiffre .cercle-chiffre_flex-item {
  flex: 1 1 auto;
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/
.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.animated.bounceIn, .animated.bounceOut {
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
}

.animated.flipOutX, .animated.flipOutY {
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
}

/* Pour les animations "above the fold", exemple photo-top ou header */
.animated_above_the_fold {
  visibility: visible !important;
  -webkit-animation-duration: 1.5s !important;
          animation-duration: 1.5s !important;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/* Pour scrollToTop */
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-150%, 0, 0) rotate(-90deg);
            transform: translate3d(-150%, 0, 0) rotate(-90deg);
    opacity: 0;
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(0);
            transform: translate3d(0, 0, 0) rotate(0);
    opacity: 1;
    visibility: visible;
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-150%, 0, 0) rotate(-90deg);
            transform: translate3d(-150%, 0, 0) rotate(-90deg);
    opacity: 0;
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(0);
            transform: translate3d(0, 0, 0) rotate(0);
    opacity: 1;
    visibility: visible;
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
          animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

@-webkit-keyframes zoomInSmall {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
            transform: scale3d(0.8, 0.8, 0.8);
  }
  100% {
    opacity: 1;
  }
}

@keyframes zoomInSmall {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
            transform: scale3d(0.8, 0.8, 0.8);
  }
  100% {
    opacity: 1;
  }
}
.zoomInSmall {
  -webkit-animation-name: zoomInSmall;
          animation-name: zoomInSmall;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
            transform: translate3d(0, 50%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
            transform: translate3d(0, 50%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
          animation-name: fadeInLeftBig;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
          animation-name: fadeInRightBig;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
          animation-name: fadeInUpBig;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
          animation-name: slideOutRight;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

/*Reveal from bottom
http://preview.themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266?_ga=2.90842778.1243656416.1511195396-2007491263.1510244343
<div class="mask-container"> 
    <div style="transform: translate(0px, 0px);">
        <h1>Salient Has</h1> 
    </div> 
</div>
*/
.mask-container {
  display: block;
  overflow: hidden;
  position: relative;
}
.mask-container > div {
  display: block;
  -webkit-transform: translateY(200%);
          transform: translateY(200%);
}
.mask-container.inview {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

/*# sourceMappingURL=styles.min.css.map */