@font-face {
  font-family: "FunkyGlitz";
  src:
    url("@{theme-path}/css/font/FunkyGlitz.svg") format("svg"),
    url("@{theme-path}/css/font/FunkyGlitz.woff") format("woff"),
    url("@{theme-path}/css/font/FunkyGlitz.ttf") format("truetype"),
    url("@{theme-path}/css/font/FunkyGlitz.otf") format("opentype");
}

html {
  font-size: 62.5%; /* permet que 1em == 10px */
}

body {
  position: relative;
  font-family: @font-family-base;
  font-weight: 400;
  background: #00153d;
  color: @color-txt;
}

.ui-widget {
  font-family: @font-family-base !important;
}

.page-content-edit .ge-wrapper.ge-top .pull-right {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  > button {
    float: right;
  }
  > div {
    float: right;
  }
}

.mini-cookie-pop-in {
  right: 0% !important;
  cursor: pointer !important;
  font-weight: bold !important;
  bottom: 0px !important;
  @media @tablette {
    bottom: 60px !important;
  }
}

a.lien-evitement {
  background: @color-primary;
  display: inline-block;
  width: 100%;
  color: white;
  padding: 10px;
  position: absolute;
  left: -99999px;
  z-index: 100;
}
a.lien-evitement:focus {
  left: 0;
}

.container-md {
  > .affHistoPage,
  > .divLinkHautPage {
    display: none;
  }
}

#pwb-site-content a,
.identification-page a,
.page-content-edit p a {
  color: #f08583;
  font-weight: 600;
  text-decoration: underline;
  .transition(all 0.4s ease);
  &:hover {
    color: @color-third;
  }
  .material-icons {
    font-size: 14px;
    margin-left: 5px;
  }
}

#pwb-site-footer {
  background-color: transparent;
  ul li a {
    color: #ffffff;
    text-transform: uppercase;
  }
  @media @tablette {
    margin-bottom: 72px;
  }
}

div:not(.page-content-edit) p[style*="visibility: hidden"] {
  display: none;
}

/* Gestion Barre Admin */

#pwb-dockbar-admin {
  line-height: 0;
  z-index: 99;
  background: @color-second;
  .myDockBarre {
    background: transparent !important;
    ul {
      > li {
        height: 30px;
        &:hover {
          color: @color-second;
        }
        > a {
          &:hover {
            color: @color-second;
          }
        }
        &.myDockHelpOnLine {
          a {
            line-height: inherit;
          }
        }
        &.acces_spe_dock {
          > a {
            position: relative;
            padding-bottom: 0px;
            color: @color-second;
            border: solid 0px @color-primary;
            border-radius: 0px;
          }
        }
      }
    }
  }
  .subDockListe,
  .subDockListeSpe {
    border-color: @color-second;
    ul {
      > li {
        > a {
          color: @color-second;
          &:hover {
            color: white;
            background: @color-second;
          }
        }
      }
    }
  }
}

.color-hover-pwb-primary,
.zone-champ .color-hover-pwb-primary {
  color: @color-primary;
  &:hover {
    color: @color-second !important;
  }
}

#pwb-navbar-connexion {
  position: relative;
  z-index: 5;
  background-color: #00062d !important;
}
#pwb-site-header {
  position: relative;
  z-index: 4;
}
#pwb-site-body {
  position: relative;
  z-index: 3;
  @media @tablette {
    margin-top: 0;
  }
}

#pwb-site-body {
  // #pwb-site-container {
  //   padding-top: 150px;
  //   @media @tablette {
  //     padding-top: 120px;
  //   }
  //   @media @mobile {
  //     padding-top: 100px;
  //   }
  // }
}

body:not(.accueil-page) {
  #pwb-site-container {
    background-color: #f9f0ec;
    .row-container {
      img {
        border-radius: 40px;
      }
      table {
        img {
          border: 0px solid transparent;
          border-radius: 0;
        }
      }
    }
  }
}

#pwb-site-content {
  position: relative;
  overflow: hidden;
}

body:not(.accueil-page) {
  #pwb-site-content {
    position: relative;
    overflow: visible;
    background-image: url("@{theme-path}/img/fondCadriller.png");
  }
}

body.body-rwd #pwb-navbar-connexion {
  top: 0px !important;
  z-index: 10;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  @media @tablette {
    top: 0 !important;
    left: 0;
  }
}

body #pwb-navbar-connexion {
  //position: absolute;
  width: auto;
  left: auto;
  //right: calc(~'(100% - 1024px) / 2');
  //transform: translateX(-50%);
  //top: 30px !important;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;

  @media (max-width: 1024px) {
    top: 0px !important;
    padding-top: 0px !important;
  }
  .navbar-right {
    margin-right: 0px;
  }
  .navbar-left {
    margin-left: 0px;
  }

  .navbar-nav {
    display: flex;
    background: transparent;
    &:hover {
      background: @color-second;
      > li > a {
        color: #ffffff;
      }
    }
    > li.open {
      > a {
        color: @color-primary;
        background: transparent;
      }
    }
    > li > a {
      color: #ffffff;
      background: transparent;
      border: 0px;
      height: 100%;
      &.highlighted {
        color: @color-primary;
        background: transparent;
      }
      &:hover {
        color: @color-primary;
        background: #ffffff !important;
      }
      .pwb-theme-icon-sociaux {
        font-size: 18px;
      }
    }
    .dropdown-header {
      background: #ffffff;
      color: @color-primary;
    }
    .dropdown-menu {
      background: #ffffff;
      color: @color-primary;
      li {
        a {
          color: @color-primary;
          background: transparent;
          &:hover {
            color: @color-primary;
          }
        }
      }
    }
  }
}
#pwb-navbar-connexion .navbar-nav > .open > a,
#pwb-navbar-connexion .navbar-nav > .open > a:hover {
  color: @color-primary;
  background: transparent;
}
#pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li .dropdown-menu li a {
  position: relative;
}

#pwb-navbar-menu
  #pwb-navbar-menu-collapse
  .navbar-nav
  li
  .dropdown-menu
  li
  a:hover {
  color: @color-primary;
}

body #pwb-site-header {
  .logo1 {
    max-height: inherit;
    max-width: inherit;
    height: auto !important;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
}

body #pwb-site-header {
  background: transparent;
  position: relative;
  border-bottom: 0px solid transparent;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  padding: 15px 0;
  padding-top: 0;
  .bandeau1 {
    height: 110px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  @media (max-width: 1023px) {
    border-bottom: 0px;
  }
  #pwb-bandeau {
    position: relative;
    .pwb-bandeau-container {
      position: relative;
      max-width: 1024px;
      overflow: visible;
    }
  }
}

body.body-rwd #pwb-site-header {
  //padding-top: 30px;
  &:after {
    top: 30px;
  }
  @media @tablette {
    // padding-top: 45px;
    background: white;
  }
}

/* --- GESTION DES TITRES --- */
/* --- GESTION DES TITRES --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: none;
  margin-top: 0px !important;
}
span,
p {
  + h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 30px !important;
  }
}

h1 {
  font-size: 47px;
  color: @color-primary;
  margin-bottom: 40px;
  font-family: @font-family-title;
  font-weight: 400;
  @media screen and (max-width: 767px) {
    font-size: 36px;
    margin-bottom: 20px;
  }
}
h2 {
  font-size: 41px;
  color: @color-primary;
  font-family: @font-family-title;
  font-weight: 400;
  @media screen and (max-width: 767px) {
    font-size: 20px;
  }
}
h3 {
  font-size: 33px;
  color: @color-second;
  font-family: @font-family-title;
  @media screen and (max-width: 767px) {
    font-size: 24px;
  }
}
h4 {
  font-size: 28px;
  color: @color-fourth;
  font-family: @font-family-title-bis;
  font-weight: 700;
  @media screen and (max-width: 767px) {
    font-size: 18px;
  }
}
h5 {
  font-size: 23px;
  color: @color-second;
  font-family: @font-family-title-bis;
  font-weight: 700;
}
h6 {
  font-size: 23px;
  color: @color-fourth;
  font-family: @font-family-title-bis;
  font-weight: 700;
}

/* --- Login --- */

body.login-page {
  background: transparent;
  background-image: url("@{theme-path}/img/BGLoginPage.jpg") !important;
  background-size: cover;
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  }

  &::before {
    display: block;
    content: "";
    height: 85px;
    width: 85px;
    background-image: url("@{theme-path}/img/decoAvantages.png");
    position: absolute;
    right: 330px;
    top: 150px;
  }
}

.identification-page .one-container,
.activation-page .one-container,
.contact-webmaster-page .one-container,
.contact-webmaster-succes-page .one-container,
.mot-de-passe-oublie-page .one-container,
.mot-de-passe-oublie-succes-page .one-container,
.definition-login-page .one-container,
.creation-compte-erreur-page .one-container,
.creation-compte-succes-page .one-container,
.creation-compte-page .one-container,
.activation-confirmation-page .one-container {
  display: inline-block;
  background: #ffffff;
  // width: 100%;
  max-width: 450px;
  min-height: 410px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 60px;
  box-shadow: 0px 0px 100px 20px rgba(0, 0, 0, 0.15);
  border-radius: 224px 224px 0 0;
  position: relative;
  @media (max-width: 767px) {
    border: none;
    max-width: none;
    padding: 15px;
  }
  h1 {
    color: #364772;
    font-weight: 400;
    text-transform: none;
    font-size: 41px;
  }
  .btn-primary {
    background-color: @color-second;
    border-radius: 27px 0 27px 0;
    max-width: 50%;
    color: #ffffff;
    margin: 0 auto;
    display: block;
    margin-top: 25px;
    text-transform: uppercase;
    font-size: 15px;
    border: 2px solid @color-second;
    font-weight: 800 !important;
    &:hover {
      background-color: transparent;
      color: @color-second;
    }
  }
  .form-group-buttons {
    .btn-cancel.btn-half-width {
      display: none;
    }
    .btn-primary {
      width: 100%;
    }
  }
  .full-line-link {
    color: @color-primary;
  }
  .privacy-policy-desc {
    text-align: center;
    color: @color-primary;
    font-size: 14px;
    a {
      text-decoration: none;
    }
  }
  .control-label {
    color: #364772;
  }
  input {
    border: 2px solid #ffffff;
    border-radius: 30px;
    height: 40px;
    color: #ffffff;
  }
  &::after {
    display: block;
    content: "";
    background-image: url("@{theme-path}/img/decoContainerContenu.png");
    width: 139px;
    height: 51px;
    position: absolute;
    left: -130px;
    top: 55%;
  }
  &::before {
    display: block;
    content: "";
    height: 125px;
    width: 83px;
    background-image: url("@{theme-path}/img/decoHeader.png");
    position: absolute;
    right: -150px;
    bottom: 141px;
  }
}

body.login-page.securisation-page {
  #logoContainer {
    border: 0px;
  }
}

body.login-page .cookie-pop-in .btn-primary {
  display: inline-block;
  width: auto;
  height: auto;
}

body.body-sf.login-page {
  @media (max-width: 767px) {
    min-height: 100vh;
    border: 6px solid @color-primary;
    background: white;
    padding: 70px;
  }
  @media (max-width: 450px) {
    padding: 10px;
  }
  h1 {
    font-size: 41px;
    font-weight: 400;
    font-family: @font-family-title;
    text-transform: uppercase;
    color: #364772;
  }
  .row-container-login {
    border-radius: 40px 40px 40px 40px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 500px;
    margin: 60px auto 0;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.5);
  }
  .blocLoginPage {
    display: inline-block;
    position: absolute;
    top: 100px;
    padding-top: 50px;
    transform: translateX(-50%);
    @media (max-width: 767px) {
      width: 100vw;
      height: 100vh;
      border: 5px solid @color-primary;
      top: 0;
    }
  }
  #logoContainer {
    padding-top: 0px;
    background: rgba(255, 255, 255, 0);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding-bottom: 50px;
    border: 0px solid @color-primary;
    border-bottom: 0px solid @color-primary;
    img {
      margin-top: 30px;
      max-width: 85%;
    }
    @media (max-width: 767px) {
      border: none;
      max-width: none;
    }
  }
  .form-group-buttons {
    > input {
      // display: none;
    }
  }
  .control-label {
    color: #364772;
  }
  .form-group-login {
    .input-group {
      background: transparent;
      border: none;
      border: 2px solid @color-primary;
      border-radius: 40px;
      height: 40px;
      color: @color-primary;
      border: 2px solid #ffffff;
      background-color: #ebeff2;
      &:placeholder {
        color: @color-primary;
      }
      .input-group-addon {
        border: none;
        padding-left: 10px;
        padding-right: 10px;
        color: @color-primary;
        .pwb-theme-icon {
          display: none;
        }
      }
      .input-group-addon.vertical-line {
        display: none;
      }
      input {
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        border: none;
        height: 40px;
      }
    }
    #authentication_login {
      color: @color-primary;
      &:placeholder {
        color: @color-primary;
      }
    }
  }
  .form-group-password {
    .input-group {
      background: transparent;
      border: 2px solid #ffffff;
      border-radius: 40px;
      height: 40px;
      color: @color-primary;
      background-color: #ebeff2;
      &::placeholder {
        color: @color-primary;
      }
      .input-group-addon {
        border: none;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        padding-left: 10px;
        padding-right: 10px;
        color: @color-primary;
        .pwb-theme-icon {
          display: none;
        }
      }
      .input-group-addon.vertical-line {
        display: none;
      }
      input {
        border: none;
        height: 40px;
      }
    }
    #authentication_password {
      color: @color-primary;
      &:placeholder {
        color: @color-primary;
      }
    }
  }
}

body.login-page.maintenance-page {
  #pwb-site-header,
  #pwb-site-body {
    max-width: 550px;
  }
  #pwb-site-body {
    background: white;
    font-size: 18px !important;
    font-weight: 600;
  }
  #pwb-site-header {
    .logo1 {
      max-height: inherit;
      max-width: inherit;
      width: 200px !important;
      height: auto !important;
    }
  }
  #pwb-site-content {
    p {
      font-size: 20px !important;
    }
  }
}

#pwb-footer-default {
  ul li + li::before {
    // display: none;
    color: #ffffff;
  }
  ul li + li {
    margin-left: 5px;
  }
}

/* Background site */

body .background-site {
  background-position: top center;
  background-size: 2500px;
  font-family: @font-family-base;
  font-weight: 400;
  position: absolute;
  height: calc(~"100% - 223px");
  bottom: 0;
  width: 100%;
  height: 590px;
  z-index: -1;
  @media @tablette {
    height: 1440px;
  }
}
//
// body.login-page .background-site{
//   background-position: top center;
//   background-size: 2500px;
//   font-family: @font-family-base;
//   font-weight: 400;
//   position: absolute;
//   height: 100vh;
//   top: 0px;
//   width: 100%;
//   z-index: -1;
//   background-image: url('@{theme-path}/img/backgroundSiteIdentif.jpg');
//   background-position: center;
// }

// body.accueil-page.ete .background-site {
//   background-image: url('@{theme-path}/img/fondAvantageEte.jpg');
// }
//
// body.accueil-page.hiver .background-site {
//   background-image: url('@{theme-path}/img/fondAvantageHiver.jpg');
// }
//
// body.accueil-page.printemps .background-site {
//   background-image: url('@{theme-path}/img/fondAvantagePrintemps.jpg');
// }
//
// body.accueil-page.automne .background-site {
//    background-image: url('@{theme-path}/img/fondAvantageAutomne.jpg');
// }

/* Refonte */

#pwb-bandeau {
  // max-width: 1700px;
  .pwb-bandeau-container {
    // max-width: 1700px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    > a {
      display: inline-flex;
      flex-wrap: wrap;
      min-height: 130px;
      &::after {
        display: block;
        content: "";
        width: 189px;
        height: 154px;
        border-radius: 30px;
        position: absolute;
        top: -10px;
        left: -2px;
        background-image: url("@{theme-path}/img/encartLogo.png");
      }
      .bandeau1 {
        display: none;
      }
      .logo1 {
        width: 116px !important;
        height: auto !important;
        object-fit: contain;
        padding: 10px;
      }
    }
    #pwb-bandeau-custom-zone {
      position: relative !important;
      width: calc(~"100% - 160px");
      max-width: none;
      display: flex;
      justify-content: flex-end;
      right: auto;
      @media @tablette {
        width: 100%;
      }
      p {
        display: inline-flex;
        margin-bottom: 0px;
        a {
          margin: 0px;
          padding: 0px 10px;
          line-height: 50px;
          background: @color-second !important;
          border-radius: 10px !important;
          border: 2px solid @color-second !important;
          text-transform: uppercase;
          &:hover {
            background: white !important;
            color: @color-second!important;
          }
        }
      }
      form.search-form {
        position: relative;
        right: auto;
        max-height: none;
        margin-left: 10px;
      }
    }
  }
}

body:not(.page-content-edit) .row-container {
  padding: 15px;
  .row {
    margin: 0 auto;
    flex-wrap: wrap;
    display: flex;
    .column:not(.onglet) {
      display: inline-flex !important;
      flex-wrap: wrap;
      vertical-align: top;
      padding: 10px;
      // margin: 0px auto;
      float: none;
      .ge-content {
        width: 100%;
      }
    }
  }
}
.rechLocation {
  .row {
    display: block !important;
  }
}

body:not(.page-content-edit) .row-container:not(.container-full-not-row) {
  .row {
    width: 100%;
  }
}
body:not(.accueil-page) .row-container-container {
  position: relative;
  display: block;
  bottom: 125px;
  // box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 50px 40px;
  background-color: #ffffff;
  border-radius: 61px;
  border: 2px solid #00153c;
  .row-container {
    width: 100%;
    max-width: 100% !important;
    background: transparent;
  }
  #pwb-site-breadcrumb {
    max-width: 100%;
    margin: 0 auto;
    display: none;
  }

  @media (max-width: 1550px) {
    // width: calc(~'90vw');
    // max-width: 1400px;
  }
  @media @tablette {
    padding: 25px;
    margin-bottom: 15px;
  }
  @media @mobile {
    // width: calc(~'98vw');
    padding: 10px;
  }
  &::after {
    display: block;
    position: absolute;
    content: "";
    bottom: 60px;
    right: -40px;
    width: 83px;
    height: 125px;
    background-image: url("@{theme-path}/img/decoHeader.png");
  }
  &::before {
    display: block;
    position: absolute;
    content: "";
    top: 290px;
    left: -96px;
    width: 139px;
    height: 51px;
    background-image: url("@{theme-path}/img/decoContainerContenu.png");
  }
  &.sommaire {
    background-color: transparent;
    border-radius: 141px 141px 0 141px;
    padding: 50px 0;
    position: relative;
    max-width: 1250px;
    min-width: 1024px;
    @media @tablette {
      width: 100%;
      max-width: 100%;
      min-width: 100%;
    }
  }
}

@media (min-width: 1024px) {
  .row-container {
    // width: calc(~'90vw');
    // max-width: 1700px;
    @media (max-width: 1550px) {
      // width: calc(~'90vw');
      // max-width: 1400px;
    }
    @media (max-width: 1023px) {
      width: 100%;
      max-width: 768px;
    }
  }
}

/* Gestion Boutons */

a.boutonHome:link,
a.boutonHome:visited,
a.boutonHome:active,
a.boutonHome,
a.boutonContenu:link,
a.boutonContenu:visited,
a.boutonContenu:active,
a.boutonContenu,
a.boutonRond:link,
a.boutonRond:visited,
a.boutonRond:active,
a.boutonRond,
a.boutonRect:link,
a.boutonRect:visited,
a.boutonRect:active,
a.boutonRect,
a.boutonDegrade:link,
a.boutonDegrade:visited,
a.boutonDegrade:active,
a.boutonDegrade {
  font-family: "Lexend", sans-serif !important;
  border-radius: 0 10px 0 10px;
  text-transform: uppercase;
  font-weight: 700;
}

a.boutonHome:link,
a.boutonHome:visited,
a.boutonHome:active,
a.boutonHome {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 15px;
  background: @color-second!important;
  border: 2px solid @color-second!important;
  border-radius: 0 10px 0 10px;
  padding: 10px 25px;
  color: white !important;

  text-decoration: none !important;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  &:hover {
    background: transparent !important;
    color: @color-second!important;
  }
}

a.boutonContenu:link,
a.boutonContenu:visited,
a.boutonContenu:active,
a.boutonContenu {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 15px;
  background: #00153d;
  border: 2px solid @color-primary;
  border-radius: 0 10px 0 10px;
  padding: 10px 25px;
  color: white !important;

  text-decoration: none !important;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  &:hover {
    background: transparent !important;
    color: @color-primary!important;
  }
}

a.boutonRond:link,
a.boutonRond:visited,
a.boutonRond:active,
a.boutonRond {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 15px;
  background: transparent !important;
  border: 2px solid @color-second;
  border-radius: 0 10px 0 10px;
  padding: 10px 25px;
  color: @color-second !important;

  text-decoration: none !important;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  &:hover {
    background: @color-second!important;
    color: white !important;
  }
}

a.boutonRect:link,
a.boutonRect:visited,
a.boutonRect:active,
a.boutonRect {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 15px;
  background: @color-third;
  border: 2px solid @color-third;
  border-radius: 0 10px 0 10px;
  padding: 10px 25px;
  color: #ffffff !important;

  text-decoration: none !important;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  &:hover {
    background: transparent !important;
    color: @color-third!important;
  }
}

a.boutonDegrade:link,
a.boutonDegrade:visited,
a.boutonDegrade:active,
a.boutonDegrade {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 15px;
  background: transparent !important;
  border: 2px solid @color-fourth !important;
  border-radius: 0 10px 0 10px;
  padding: 10px 25px;
  color: #363636 !important;
  text-transform: uppercase;
  text-decoration: none !important;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  &:hover {
    background: #363636 !important;
    color: #ffffff !important;
  }
}

/* Pastilles (Btn Back Office) */

.page-content-edit
  .ge-canvas.ge-editing
  .column
  > .ge-tools-drawer
  .ge-details
  .btn-group-details {
  a:nth-child(1),
  a:nth-child(2),
  a:nth-child(3) {
    border: none;
    margin: 2px;
    border-radius: 20px;
    width: 25px;
    height: 25px;
    overflow: hidden;

    &.active {
      border-color: white;
      box-shadow: none;
    }
  }
}

//primary
.page-content-edit
  .ge-canvas.ge-editing
  .column
  > .ge-tools-drawer
  .ge-details
  .btn-group-details
  a:nth-child(1) {
  background-color: @color-primary !important;
  color: @color-primary !important;
  border: 2px solid @color-primary;
}
//second
.page-content-edit
  .ge-canvas.ge-editing
  .column
  > .ge-tools-drawer
  .ge-details
  .btn-group-details
  a:nth-child(2) {
  background-color: @color-second !important;
  color: @color-second !important;
  border: 2px solid @color-second;
}
//third
.page-content-edit
  .ge-canvas.ge-editing
  .column
  > .ge-tools-drawer
  .ge-details
  .btn-group-details
  a:nth-child(3) {
  background-color: @color-third !important;
  color: @color-third !important;
  border: 2px solid @color-third;
}

/* Gestion Accordeons + Onglets */

/* Accordions */

div:not(.page-content-edit) div[id^="accordion"] {
  > .ge-content {
    // display: none;
  }
}

#accordion {
  .row.panel {
    background-color: transparent;
  }
  .row {
    padding-left: 15px;
    padding-right: 15px;
    .panel-collapse {
      > .ge-content {
        padding: 40px 0 !important;
        &:empty {
          display: none;
        }
      }
    }
    .collapse {
      padding: 0px 30px !important;
      display: none !important;
      background: #ffffff;
      border-radius: 30px;
    }
    .collapsing {
      display: block !important;
      padding: 0px 30px !important;
      background: #ffffff;
      border-radius: 0 0 30px 30px;
      .ge-content {
        margin-top: 10px;
      }
    }
    .collapse.in {
      display: block !important;
      padding: 0px 30px !important;
      background: #ffffff;
      border-radius: 0 0 30px 30px;
      .ge-content {
        margin-top: 10px;
      }
    }
  }
}

.panel-heading:first-child {
  margin-top: 0;
}
.panel-heading {
  margin-top: 30px !important;
  margin-bottom: 0px !important;
  position: relative;
  &:after {
    content: "";
    position: absolute;
    right: 30px;
    top: 50%;
    width: 8px;
    height: 2px;
    transform: translateY(-50%) rotate(0deg);
    display: block;
    background: white;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
  }
  &:before {
    content: "";
    position: absolute;
    right: 30px;
    top: 50%;
    width: 8px;
    height: 2px;
    transform: translateY(-50%) rotate(90deg);
    display: block;
    background: white;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
  }
  &.active {
    &:after {
      transform: translateY(-50%) rotate(180deg);
    }
    &:before {
      transform: translateY(-50%) rotate(0deg);
    }
  }
}
.panel-heading:first-child {
  margin-top: 0;
}
.page-content-edit {
  .panel-heading {
    margin-bottom: 0px !important;
    &:before {
      transform: translateY(-50%) rotate(0deg);
      height: auto;
    }
  }
  .panel-collapse {
    margin-bottom: 40px !important;
  }
}

.panel-group-wrap {
  margin-top: 0 !important;
  margin-bottom: 0px;

  .panel {
    margin: 0 !important;
    box-shadow: none;

    .panel-heading {
      padding: 10px 30px !important;
      background-color: @color-primary;
      border-bottom: 0px solid transparent;
      margin-bottom: 20px;
      border-radius: 30px 30px;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      &.color-primary {
        background-color: @color-primary;
        .panel-title #ArrowAccordion .st0 {
          fill: @color-primary;
        }
      }
      &.color-second {
        background-color: @color-second;
        .panel-title #ArrowAccordion .st0 {
          fill: @color-second;
        }
      }

      > .ge-content > p {
        margin: 0 !important;
      }

      .panel-title {
        font-family: @font-family-base;
        font-size: 21px;
        color: white;
        border-radius: 6px;
        margin-top: 0px !important;
        text-transform: uppercase;
        > a {
          padding: 10px 0;
          width: 100%;
          display: inline-block;
          height: 100%;
          position: relative;
          color: white !important;
          text-decoration: none !important;
          font-weight: 700 !important;
        }
      }
      &.active {
        background: @color-second;
        border-radius: 30px 30px 0 0;
        .panel-title {
          color: white;
          > a {
            color: white !important;
          }
        }
      }
    }

    .panel-collapse {
      padding: 0;

      img {
        // width        : 100%;
        height: auto;
        //margin-bottom: 20px;
      }
      img.ui-icon {
        width: 16px;
      }
      // .contentBoutonContenu(color, @brand-third, @brand-third, @brand-third, #fff, @brand-third); // style par défaut du bouton contenu de variable.less, changer les paramètres si besoin (couleur texte, couleur fond, couleur bordure, hover couleur texte, hover couleur fond, hover couleur bordure)
    }
  }
}

.panel-group-wrap .panel .panel-heading .panel-title #ArrowAccordion {
  position: absolute;
  right: 30px;
  width: 30px;
  bottom: 0px;
  height: 0px;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  display: none;
  .st0 {
    fill: @color-primary;
  }
}
// .panel-group-wrap .panel .panel-heading.even .panel-title #ArrowAccordion {
//   .st0 {
//     fill: @color-second;
//   }
// }

.panel-group-wrap .panel .panel-heading.active #ArrowAccordion {
  height: 15px;
  transform: translateY(calc(~"100% - 2px"));
}

.panel-group-wrap .panel .panel-heading.active .panel-title > a {
  color: white !important;
  position: relative;
}

.panel-group-wrap .panel {
  .color-primary {
    background: @color-primary !important;
    .panel-title {
      #ArrowAccordion {
        .st0 {
          fill: @color-primary!important;
        }
      }
    }
  }
  // .color-second {
  //   background: @color-second !important;
  //   .panel-title {
  //     #ArrowAccordion {
  //       .st0 {
  //         fill: @color-second!important;
  //       }
  //     }
  //   }
  // }
  // .color-third {
  //   background: @color-primary !important;
  //   .panel-title {
  //     #ArrowAccordion {
  //       .st0 {
  //         fill: @color-primary!important;
  //       }
  //     }
  //   }
  // }
  // .color-fourth {
  //   background: @color-second !important;
  //   .panel-title {
  //     #ArrowAccordion {
  //       .st0 {
  //         fill: @color-second !important;
  //       }
  //     }
  //   }
  // }
}

// #accordion div.panel-collapse {
//   p {
//     font-size: 16px;
//     line-height: 21px;
//     color: #9f9f9f;
//     font-weight: 500;
//     b {
//       font-weight: 700;
//       color: #949494;
//     }
//   }
// }

.page-content-edit div.panel-heading {
  position: relative;
  display: block !important;
  counter-increment: accordion;
  box-sizing: border-box;
  padding: 0;
  margin: 32px 0 0;
  // padding: 15px !important;
  &::before {
    position: absolute;
    top: -28px;
    width: 100%;
    left: 0;
    content: "titre accordion n°" counter(accordion);
    background-color: #4c2780;
    color: #ffffff;
    box-sizing: border-box;
    padding: 4px 0;
    margin: 0;
  }
}

.page-content-edit div.panel-collapse {
  position: relative;
  display: block !important;
  counter-increment: corpsAccordion;
  box-sizing: border-box;
  padding: 0;
  margin: 32px 0 0;

  &::before {
    position: absolute;
    top: -28px;
    width: 100%;
    left: 0;
    content: "Corps accordion n°" counter(corpsAccordion);
    background-color: #d9771c;
    color: #ffffff;
    box-sizing: border-box;
    padding: 4px 0;
    margin: 0;
  }
}

.page-content-edit .panel {
  border: none;
  margin: 14px 14px 33px;

  .panel-collapse {
    border: 1px solid red;
  }

  .panel-collapse:before {
    content: "contenu à dérouler";
    display: block;
    width: 100%;
    height: 10px;
    font-size: 18px;
    color: red;
  }
}

.page-content-edit .collapse {
  display: block !important;
}

/* --- ___ Onglets ___ --- */

.row-container-menu-onglet {
  padding: 0px !important;
  + .row-container {
    background-color: #ffffff !important;
    margin-bottom: 00px;
    border-radius: 0 40px 40px 40px;
    padding: 50px 15px !important;
    border: 1px solid @color-second;
    .row {
      #bloc-bandeau-img:first-child {
        border-right: 1px solid #ededed;
      }
      #bloc-bandeau-img.color-second {
        #img {
          padding: 0;
        }
        img {
          border-radius: 0 20px 0 0;
        }
        p {
          margin: 0;
        }
        #txt {
          background-color: @color-second;
          color: #ffffff;
          padding: 30px;
          h1,
          h2,
          H3,
          h4,
          H5,
          H6,
          p {
            color: #ffffff;
          }
          h1,
          h2,
          H3,
          h4,
          H5,
          H6 {
            margin-bottom: 50px;
          }
        }
      }
      #bloc-bandeau-img.color-primary {
        #img {
          padding: 0;
        }
        img {
          border-radius: 0 20px 0 0;
        }
        p {
          margin: 0;
        }
        .row-container {
          padding: 0;
          .bloc-carre {
            padding: 0;
          }
        }
        #txt {
          background-color: @color-primary;
          color: #ffffff;
          padding: 30px;
          h1,
          h2,
          H3,
          h4,
          H5,
          H6,
          p {
            color: #ffffff;
          }
          h1,
          h2,
          H3,
          h4,
          H5,
          H6 {
            margin-bottom: 50px;
          }
        }
      }
    }
  }
}

body {
  counter-reset: section;

  div.onglet {
    display: none !important;
    > .row-container {
      padding-top: 10px;
    }
  }

  div.onglet.onAir {
    display: block !important;
  }
}
// onglets
.page-content-edit div.onglet {
  position: relative;
  display: block !important;
  counter-increment: section;
  box-sizing: border-box;
  padding: 10px 0px 10px 0px;
  margin: 32px 0px 0px 0px;
  padding: 15px !important;

  &::before {
    position: absolute;
    top: -28px;
    width: 100%;
    left: 0;
    content: "Onglet n°" counter(section);
    background-color: #b20382;
    color: #ffffff;
    box-sizing: border-box;
    padding: 4px 0px 4px 0px;
    margin: 0px 0px 0px 0px;
  }
}
// customisation Onglets
//-------------------------------------------------------------------
div.menu-onglet {
  border-bottom: 0px solid #e9e9e9;
  padding: 0px !important;
  .ge-content {
    padding: 0 !important;
    @media (max-width: 767px) {
      padding: 0 10px 10px 10px !important;
    }

    ul {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      border-bottom: 0px solid #ebebeb;
      margin-bottom: 0px;
      padding-left: 0px;
      list-style-type: none;
      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.05);
      &::-webkit-scrollbar {
        width: 4px;
        height: 8px;
        background-color: transparent;
      }
      &::-webkit-scrollbar-track {
        width: 2px;
        -webkit-box-shadow: inset 0 0 2px #aaa;
        border-radius: 0px;
        background-color: #f5f5f5;
      }
      &::-webkit-scrollbar-thumb {
        width: 2px;
        border-radius: 0px;
        -webkit-box-shadow: inset 0 0 2px #aaa;
        background-color: @color-second;
      }
      @media (max-width: 767px) {
        flex-direction: column;
        border: none;
      }

      li {
        font-size: 25px;
        cursor: pointer;
        color: #ffffff;
        background-color: @color-primary;
        font-weight: 600;
        text-align: center;
        transition: 300ms;
        margin: 0 0px;
        padding: 24px 40px;
        border-radius: 0px 0px 0 0;
        border-bottom: 0px solid black;
        font-family: @font-family-base;
        line-height: 18px;
        text-transform: uppercase;
        &:first-child {
          border-radius: 40px 0 0 0;
        }
        &:last-child {
          border-radius: 0 40px 0 0;
        }
        + li {
          margin-left: 4px;
          @media @mobile {
            margin-left: 0px;
          }
        }
        @media (max-width: 1023px) {
          font-size: 14px;
          padding: 10px;
        }

        @media (max-width: 767px) {
          text-align: center;
          width: 100%;
          border: none;
          font-size: 20px;
          margin: 0 0 0px 0;
          border: none;
          border-radius: 0px;
        }

        &:hover {
          // box-shadow: 0 0 0px 0px #ef7b88 inset;
          transition: 300ms;
          background-color: @color-second;
          color: white;
          transform: scale(1.04);
        }
      }

      li.onAir {
        border-bottom: 0px solid @color-primary;
        color: white;
        background-color: @color-second;
        font-weight: 400;
        @media @mobile {
          transform: scale(1);
        }
        &:hover {
        }

        @media (max-width: 767px) {
          // background-color: #ef7b88;
        }
      }
    }
  }
  &.onglet-voyage {
    .ge-content {
      ul {
        justify-content: flex-start;
      }
    }
  }
}

/*  Onglet sur le téco */

.row-container.sideMenu,
#sideMenuContent {
  padding-top: 0px;
  margin-top: 30px;
  .row > .column {
    padding-top: 10px;
  }
  .row-container {
    .row {
      margin: 0;
      > .column {
        padding: 0;
      }
    }
  }
}

@media (min-width: 768px) {
  body:not(page-content-edit) .row-container.sideMenu {
    display: inline-block;
    float: left;
    width: 20%;
    margin: 30px 0;
  }

  body:not(page-content-edit) .row-container#sideMenuContent {
    display: inline-block;
    width: 80%;
    margin: 30px 0;
    padding-left: 50px;
  }

  .row-container#sideMenuContent .column {
    padding-top: 0px;
  }

  .row-container.sideMenu div.menu-onglet .ge-content ul {
    display: inline-block;
    border-right: 2px solid @color-primary;
    border-bottom: none;
    width: 100%;
  }

  .row-container.sideMenu div.menu-onglet .ge-content ul li {
    margin: 0;
    border: none;
    border-radius: 0px;
    font-size: 15px;
    position: relative;
  }
  .row-container.sideMenu div.menu-onglet .ge-content ul li.onAir {
    background: @color-primary;
    color: white;
  }
  .row-container.sideMenu div.menu-onglet .ge-content {
    padding: 0 !important;
  }
}

.pictoAnimation {
  max-width: 30px;
  height: auto;
  display: inline-block;
  margin-right: 15px;
  img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767px) {
  .row-container.sideMenu div.menu-onglet .ge-content ul li {
    border: 1px solid transparent;
    &.onAir {
      border-bottom: 1px solid @color-second;
    }
  }
}

/* Gestion Menu */

/* --- MENU BASIQUE --- */

#pwb-site-header,
#pwb-navbar-connexion,
#pwb-navbar-connexion .navbar-nav > li > a,
#pwb-navbar-connexion .navbar-toggle-moncompte.collapsed,
#pwb-navbar-connexion .navbar-toggle-moncompte.collapsed a {
  background: transparent;
  color: #ffffff;
}

#pwb-navbar-menu * {
  .transition(all 0.4s ease);
}

#pwb-navbar-menu {
  margin-top: 0px;
  @media @tablette {
    margin-top: 0;
  }
  &.navbar-default .navbar-nav .dropdown-menu > .open > a {
    background: @color-primary;
  }
  .container-md {
    position: relative;
    @media (max-width: 1023px) {
      padding: 0;
    }
    > .navbar-header {
      margin: 0;
    }
  }

  #pwb-navbar-menu-collapse {
    position: relative;
    z-index: 99;
    bottom: 0px;
    background: transparent;
    @media (max-width: 1023px) {
      background: transparent;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    .navbar-nav {
      margin: 0 0;
      li {
        &:hover {
          color: @color-primary;
        }
      }
      > li > a {
        color: #ffffff;
        border-bottom: 2px solid transparent;
        padding: 5px 2px;
        margin-right: 15px;
        font-family: "Montserrat", arial, sans-serif;
        font-weight: 700;
        font-size: 18px;
        text-transform: capitalize;

        &:hover {
          border-color: #ffffff;
          border-bottom: 2px solid #ffffff;
          background-color: transparent;
          color: @color-second;
        }
        @media (max-width: 1023px) {
          background: rgba(0, 0, 0, 0.3);
          margin-right: 0;
          padding: 20px 15px;
          text-align: center;
          &:hover {
            background: rgba(0, 0, 0, 0.3);
          }
        }
      }
      li {
        position: relative;
        &.active-menu {
          a {
            color: #242d51;
            font-weight: 600;
          }
          .active-menu {
            background: rgba(190, 74, 79, 0.5);
            > a:hover {
              background: rgba(190, 74, 79, 1);
            }
          }
        }
      }
      li .dropdown-menu {
        background-color: rgba(51, 51, 51, 0.8);
        min-width: 100% !important;
        text-align: center;
        margin-top: 0px !important;
        li {
          a {
            color: white;
            padding: 15px 25px;
            font-weight: 700;
            &:hover {
              color: @color-primary!important;
            }
            &.active {
              background-color: rgba(190, 74, 79, 0.5);
              &:hover {
                background: rgba(190, 74, 79, 1);
              }
            }
          }
          .dropdown-menu {
            background-color: rgba(51, 51, 51, 0.95);
            top: 0px !important;
            @media (max-width: 1350px) {
            }
          }
        }
      }
      li:last-child {
        a {
          margin-right: 0px;
        }
        .dropdown-menu {
          left: 1px !important;
        }
      }
    }
  }
}
#pwb-navbar-menu #pwb-navbar-menu-collapse {
  right: 50px;
  @media @tablette {
    right: 0;
  }
}

#pwb-bandeau .pwb-bandeau-container #pwb-bandeau-custom-zone form.search-form {
  bottom: 0px;
}

#afficher-formulaire-btn.glyphicon-remove {
  top: 60px;
}

/* --- MENU BURGER --- */
// #pwb-site-header,
// #pwb-navbar-connexion,
// #pwb-navbar-connexion .navbar-nav > li > a,
// #pwb-navbar-connexion .navbar-toggle-moncompte.collapsed,
// #pwb-navbar-connexion .navbar-toggle-moncompte.collapsed a {
// /* Fond du menu */
//   background: #041b8c;
//   color: #ffffff;
//
// }
//
// #pwb-navbar-connexion{
//   display: flex;
//     flex-direction: row;
//     align-items: center;
//     height: 60px;
// }
//
// #pwb-navbar-connexion {
//   .navbar-header-right {
//     .navbar-nav > li > a,
//     .navbar-toggle-moncompte.collapsed,
//     #pwb-navbar-connexion .navbar-toggle-moncompte.collapsed a,
//     li.acces-rapide-avantages > a .pictoEtoile {
//       color: @color-second;
//       fill: @color-second !important;
//     }
//   }
// }
//
//
// #pwb-navbar-menu .navbar-toggle-menu {
//   @media @tablette {
//     padding-left: 0px !important;
//     @media (max-width: 480px) {
//       padding-left: 0px !important;
//     }
//   }
// }
//
//
// #pwb-bandeau-custom-zone {
//
// }
//
// @media @tablette {
//   #pwb-bandeau-custom-zone .btn_header {
//     display: none !important;
//   }
// }
//
// @media screen and (min-width: 1023px) {
// #pwb-bandeau-custom-zone .btn_header {
//   left: inherit;
//   position: relative;
//   right: 40px;
//   top: 0px;
//   border: 0px solid @color-primary;
//   border-radius: 40px;
//   width: 51px;
//   height: 51px;
// }
// #pwb-bandeau-custom-zone div.btn-recherche {
//   right: 97px;
// }
// }
// @media (max-width: 480px) {
// #pwb-navbar-menu .container {
//   padding-left: 0px;
//   padding-right: 0px;
// }
// #pwb-navbar-menu .navbar-header {
//   margin: auto;
// }
// #pwb-navbar-menu-collapse {
//   margin: auto;
// }
// }
// @media (min-width: 1023px) {
// #pwb-navbar-menu {
//   margin-top: -52px;
//   margin-bottom: 12px;
//   max-width: 500px;
//   .container-md {
//     width: auto !important;
//
//   }
// }
// }
// @media (width: 1023px) {
// #pwb-navbar-menu {
//   margin-top: -0px;
//   margin-bottom: 0px;
// }
// }
// @media (width: 1024px) {
// #pwb-navbar-menu-collapse {
//   background: transparent;
// }
// }
// /*@keyframes AnimeSousMenu {
//    from {
//     transform: scaleY(0);
//     opacity: 0;
//     display: block;
//     height: auto;
//    }
//    to {
//     transform: scaleY(1) !important;
//     opacity: 1 !important;
//     height: inherit !important;
//    }
// }
// */
// @media screen and (min-width: 1023px) {
// #pwb-navbar-menu {
//   opacity: 0;
//   position: absolute;
//   right: calc(~'((100vw - 1024px) / 2)');
//   top: -50vw;
//   z-index: 1;
//   margin-top: 0;
//   -moz-transition: 0.3s all ease;
//   -webkit-transition: 0.3s all ease;
//   -o-transition: 0.3s all ease;
//   transition: 0.3s all ease;
// }
//
// #pwb-navbar-menu #pwb-navbar-menu-collapse {
//   width: 100%;
//   padding: 0px 0px!important;
//   -moz-transition: 0.3s all ease;
//   -webkit-transition: 0.3s all ease;
//   -o-transition: 0.3s all ease;
//   transition: 0.3s all ease;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse.navbar-collapse.navbar-right.collapse.in {
//   right: 15px;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav {
//   width: 100%;
//   margin: 0px;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li {
//   width: 100%;
//   text-align: center;
//   padding: 0px !important;
//   text-transform: inherit;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li a {
//   padding: 10px 30px 10px 30px!important;
//   font-family: @font-family-base;
//   font-size: 22px !important;
//   line-height: 26px;
//   text-align: left;
//   color: white !important;
//   text-transform: inherit;
//   font-weight: 700;
//   border-bottom: 0px solid transparent!important;
//   -webkit-transition: all 0.4s ease;
//   -o-transition: all 0.4s ease;
//   transition: all 0.4s ease;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li a:hover {
//   color: @color-third !important;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li a.active {
//   background-color: transparent !important;
//   color: @color-third !important;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li a.menu_on {
//   color: @color-third !important;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li .dropdown-menu {
//   position: relative;
//   width: 100% !important;
//   background-color: transparent !important;
//   display: block !important;
//   height: 0px;
//   overflow: hidden;
//   box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
//   -webkit-transition: all 0.4s ease;
//   -o-transition: all 0.4s ease;
//   transition: all 0.4s ease;
//   transform: scaleY(0) !important;
//   &:after {
//     content: '';
//     position: absolute;
//     z-index: 101;
//     left: 30px;
//     top: 0;
//     width: 1px;
//     height: 100%;
//     background: @color-third;
//     opacity: 0.3;
//   }
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li .dropdown-menu > li > a {
//   padding: 2px 5px !important;
//   font-family: @font-family-base;
//   font-size: 16px !important;
//   padding-left: 50px !important;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li .dropdown-menu > li > a:hover {
//   background-color: transparent;
//   color: @color-third !important;
// }
// #pwb-navbar-menu #pwb-navbar-menu-collapse .navbar-nav li .dropdown-menu.menu_open {
//   transform: scaleY(1) !important;
//   opacity: 1 !important;
//   height: inherit !important;
// }
// #pwb-navbar-menu .navbar-toggle-menu {
//   color: #000 !important;
// }
// #pwb-navbar-menu.open {
//   z-index: 999;
//   right: calc(~'((100vw - 1024px) / 2)');
//   top: 110px;
//   margin-top: 0px;
//   background: rgba(red(@color-primary), green(@color-primary), blue(@color-primary),0.6);
//   backdrop-filter: blur(4px);
//   max-width: 500px;
//   border-radius: 0;
//   padding: 20px 0px;
//   opacity: 1;
// }
// }
// @media screen and (min-width: 1023px) and screen and (min-width: 1024px) {
// #pwb-navbar-menu {
//   position: fixed;
//   background-color: rgba(255, 255, 255, 0.95);
//   border-right: 1px solid @color-primary;
//   height: 100pc;
//   top: 0px;
//   left: -305px;
//   padding-top: 200px;
//   width: 305px;
//   z-index: 99;
// }
// #pwb-navbar-menu > .container {
//   padding: 0px;
// }
// }
// @media screen and (min-width: 1023px) and screen and (max-width: 1023px) {
// #pwb-navbar-menu #pwb-navbar-menu-collapse {
//   position: fixed;
//   top: 0px;
//   right: -305px;
//   max-width: 305px;
//   height: 100pc !important;
//   display: block !important;
//   background-color: rgba(255, 255, 255, 0.95);
//   border-left: 1px solid @color-primary;
// }
// }
// @media screen and (max-width: 1023px) {
// #pwb-navbar-menu.navbar-default .navbar-nav > li > a {
//   text-transform: none;
// }
// #pwb-navbar-menu .navbar-toggle-menu {
//   position: relative;
// }
// }
// @media screen and (min-width: 1023px) {
// #pwb-bandeau-custom-zone {
//   max-width: 100%;
//   width: 150px;
//   text-align: right;
// }
// #pwb-bandeau-custom-zone .btn_header {
//   max-width: 100%;
//   text-align: right;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   .toggle-nav {
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     width: 100%;
//     right: 0;
//     height: 100%;
//     text-align: center;
//     padding: 0px 7.5px;
//   }
// }
//
// }
//
// #pwb-bandeau-custom-zone {
// z-index: 9991;
// }
// #pwb-bandeau-custom-zone #pwb-bandeau-custom-zone .burger-lines {
// z-index: 9;
// }
// #pwb-bandeau-custom-zone .toggle-nav {
// cursor: pointer;
// user-select: none;
// padding: 0;
// background: none;
// border: none;
// font-family: @font-family-base;
// font-style: italic;
// font: menu;
// color: @color-primary;
// width: 28px;
// border-radius: 25px;
// background: transparent;
// background-size: cover;
// background-repeat: no-repeat;
// -webkit-transition: all 0.4s ease;
// -o-transition: all 0.4s ease;
// transition: all 0.4s ease;
// // &:after {
// //   content: 'Menu';
// //   position: absolute;
// //   left: 50%;
// //   bottom: 0px;
// //   padding-top: 7px;
// //   transform: translate(-50%, 100%);
// //   color: @color-primary;
// //   font-size: 15px;
// //   font-weight: 600;
// //   text-transform: uppercase;
//
// //   @media screen and (max-width: 1023px) {
// //     display: none;
// //   }
// // }
// }
// #pwb-navbar-menu .pwb-front-icon-burger {
//   @media screen and (max-width: 1023px) {
//     &:after {
//         content: 'Menu';
//         font-family: @font-family-base;
//         position: absolute;
//         left: -4px;
//         bottom: 0px;
//         padding-top: 7px;
//         color: @color-primary;
//         font-size: 12px;
//         font-weight: 600;
//         text-transform: uppercase;
//     }
//   }
// }
//
// #pwb-bandeau-custom-zone .toggle-nav:hover,
// #pwb-bandeau-custom-zone .toggle-nav:focus {
//   outline: 0;
// }
//
// #pwb-bandeau-custom-zone .toggle-nav:hover ,
// #pwb-bandeau-custom-zone .toggle-nav:focus {
//   &:after {
//     color: @color-third;
//   }
//   .burger-lines {
//       background-color: @color-third;
//   }
// }
//
// #pwb-bandeau-custom-zone .toggle-nav:hover .burger-lines:before,
// #pwb-bandeau-custom-zone .toggle-nav:hover .burger-lines:after,
// #pwb-bandeau-custom-zone .toggle-nav:focus .burger-lines:before,
// #pwb-bandeau-custom-zone .toggle-nav:focus .burger-lines:after {
//   background-color: @color-third;
// }
//
// #pwb-bandeau-custom-zone .toggle-nav.open {
//
//   .burger-lines {
//     background: transparent;
//     &:after, &:before {
//       background: red;
//     }
//   }
// }
//
//
// #pwb-bandeau-custom-zone .toggle-nav.open .burger-lines:before,
// #pwb-bandeau-custom-zone .toggle-nav.open .burger-lines:after {
//   transition: top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
//   top: 0;
//   width: 28px;
// }
//
// #pwb-bandeau-custom-zone .toggle-nav.open .burger-lines:before {
//   transform: rotate3d(0, 0, 1, 45deg) scale(1.1);
// }
//
// #pwb-bandeau-custom-zone .toggle-nav.open .burger-lines:after {
//   transform: rotate3d(0, 0, 1, -45deg) scale(1.1);
// }
//
// #pwb-bandeau-custom-zone .burger-lines {
//   display: block;
//   cursor: pointer;
//   margin-right: 12px;
//   user-select: none;
//   transition: all 300ms ease;
//   width: 28px;
//   height: 4px;
//   border-radius: 0px;
//   background-color: @color-primary;
//   position: relative;
//   top: 0px;
//   z-index: 9;
// }
//
// #pwb-bandeau-custom-zone .burger-lines:before,
// #pwb-bandeau-custom-zone .burger-lines:after {
//   content: '';
//   display: inline-block;
//   width: 28px;
//   height: 4px;
//   border-radius: 0px;
//   background-color: @color-primary;
//   position: absolute;
//   left: 0;
//   transform-origin: 50% 50%;
//   transition: top 300ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
// }
//
// #pwb-bandeau-custom-zone .burger-lines:before {
// top: 6px;
// }
//
// #pwb-bandeau-custom-zone .burger-lines:after {
// top: -6px;
// }
//
// @keyframes animeMenuClose {
//   from {
//     -webkit-transform: scale(10);
//     -ms-transform: scale(10);
//     transform: scale(10);
//     opacity: 1;
//   }
//   50% {
//     opacity: 1;
//   }
//   to {
//     -webkit-transform: scale(0.1);
//     -ms-transform: scale(0.1);
//     transform: scale(0.1);
//     opacity: 0;
//   }
// }
//
// @media screen and (min-width: 1023px) {
//   #pwb-bandeau-custom-zone .toggle-nav {
//     z-index: 5;
//     position: relative;
//   }
// }
//

#zoneSearch {
  position: relative;
  bottom: 0px;
}

#pwb-bandeau-custom-zone form.search-form {
  position: absolute;
  right: 130px;
  width: 300px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  bottom: auto;
  top: 0px;
  .input-group {
    background-color: transparent;
    border: 2px solid #ffffff;
    border-radius: 30px;
    overflow: hidden;
    .form-control {
      background-color: transparent;
    }
  }
}

// #pwb-bandeau-custom-zone form.search-form.show-form {
//   display: flex;
//   max-height: 1000px;
// }

// #afficher-formulaire-btn {
//   background: transparent;
//   position: absolute;
//     right: -15px;
//     top: -10px;
//     border: 0px;
//     height: 51px;
//     z-index: 999;
//     @media @tablette{
//       right: 0;
//       top: 0;
//     }
//   &.glyphicon-remove {
//     content: "\e014" !important;
//     font-size: 28px;
//     color: @color-second;
//   }
//   &.pwb-theme-icon-search {
//     &:before {
//       content: '\f002' !important;
//       font-weight: 600;
//       font-family: 'Font Awesome 6 Free';
//       font-size: 16px;
//       color: #ffffff;
//     }
//   }
// }

#search-form {
  display: inline-flex;
  align-items: center;
  @media @tablette {
    display: none;
  }
  .input-group {
    background-color: #001b3e !important;
    .pwb-theme-icon-search:before {
      content: "";
      background-image: url("@{theme-path}/img/loupe.png");
      width: 18px;
      height: 18px;
      color: transparent !important;
    }
    .form-control {
      border: 0px;
      box-shadow: none;
      height: 50px;
      width: 262px;
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
    }
  }
  .input-group-btn {
    width: auto;
    button.btn {
      background-color: transparent !important;
      border: 0px solid transparent;
    }
  }
}

#pwb-bandeau-custom-zone form .form-control::-webkit-input-placeholder {
  color: #fff !important;
  font-size: 18px;
  font-family: @font-family-base;
}
#pwb-bandeau-custom-zone form .form-control::-moz-placeholder {
  color: #fff !important;
  font-size: 18px;
  font-family: @font-family-base;
}
#pwb-bandeau-custom-zone form .form-control:-ms-input-placeholder {
  color: #fff !important;
  font-size: 18px;
  font-family: @font-family-base;
}
#pwb-bandeau-custom-zone form .form-control:-moz-placeholder {
  color: #fff !important;
  font-size: 18px;
  font-family: @font-family-base;
}

#pwb-bandeau-custom-zone form .input-group-btn > .btn span:before {
  color: transparent !important;
}

/* Gestion Sticky Menu */

@media (max-width: 1023px) {
  #pwb-bandeau {
    display: block !important;
    .pwb-bandeau-container {
      > a {
        display: none;
      }
    }
  }
}
#pwb-bandeau-custom-zone {
  width: 500px;
  top: 0 !important;
  @media @tablette {
    display: block !important;
  }
}

.sticky-menu {
  position: fixed;
  z-index: 9998;
  right: 20px;
  top: 150px;
  width: auto;
  @media (max-width: 1560px) {
    //width: 210px;
  }
  @media @tablette {
    top: auto !important;
    bottom: 0px;
    width: 100%;
    height: 72px;
    padding: 0px;
    border-left: none;
    border-top: 0px solid @color-primary;
    right: 0;
  }
  .stickyBtn {
    background: linear-gradient(
      112deg,
      rgba(38, 45, 82, 1) 0%,
      rgba(78, 43, 134, 1) 100%
    );
    padding: 8px 15px;
    border-radius: 40px;
    border-right: 0px;
    display: inline-block;
    position: absolute;
    right: 0px;
    float: none;
    width: 68px;
    height: 68px;
    margin-bottom: 10px;
    transition: all 0.3s ease-out;
    overflow: hidden;
    top: 80px;
    @media @tablette {
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
      border-radius: 0px;
    }
    + .stickyBtn {
      top: 160px;
      + .stickyBtn {
        top: 240px;
        + .stickyBtn {
          top: 320px;
        }
      }
    }
    @media (max-width: 1560px) {
      padding: 8px 10px;
    }
    @media @tablette {
      width: 25%;
      min-width: 25%;
      left: auto;
      border-radius: 0px;
      height: 100%;
      position: relative;
      float: left;
      top: 0 !important;
      right: 0;
    }
    &:hover {
      width: 260px;
      @media @tablette {
        width: 25%;
      }
      .title {
        opacity: 1;
        right: auto;
        transition: all 1s ease-out;
      }
    }
    .picto {
      display: inline-block;
      margin-right: 0px;
      position: absolute;
      right: 0px;
      top: 0px;
      height: 68px;
      width: 68px;
      transition: all 0.3s ease-out;
      background: transparent;
      border-radius: 40px;
      @media @tablette {
        top: 5px;
        border: 0px solid white;
      }
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        @media @tablette {
          top: 0%;
          max-height: 100%;
          transform: translateX(-50%);
        }
      }
      // @media (max-width: 1560px) {
      //   margin-right: 5px;
      // }
      @media @tablette {
        position: absolute;
        bottom: 34px;
        left: 50%;
        height: 30px;
        transform: translateX(-50%);
      }
    }
    .title {
      font-family: @font-family-base;
      display: inline-block;
      color: #ffffff;
      font-size: 20px;
      font-weight: 600;
      text-shadow: none;
      text-align: left;
      transition: all 0.3s ease-out;
      opacity: 0;
      line-height: 20px;
      position: absolute;
      top: 50%;
      right: auto;
      left: 15px;
      width: calc(~"260px - 74px");
      transform: translateY(-50%);
      @media (max-width: 1560px) {
        font-size: 13px;
      }
      @media @tablette {
        opacity: 1;
        top: auto;
        bottom: 10px;
        position: absolute;
        display: block;
        width: 100%;
        text-align: center;
        left: 0;
        transform: none;
        max-width: calc(~"100%");
        min-width: 100%;
      }
      @media @tablette {
        line-height: auto;
      }
      @media @mobile {
        font-size: 10px;
      }
    }
  }
  .stickyBtn:last-child {
    margin-bottom: 0px;
  }
}

.accueil-page {
  .sticky-menu {
    .stickyBtn {
      // width: 260px;

      @media @tablette {
        width: 25% !important;
      }
      .title {
      }
    }
  }
}

.bloc-arrondi {
  border-radius: @border-radius;
}

body:not(.page-content-edit) #bandeau-image {
  height: 330px;
  position: relative;
  overflow: hidden;
  padding: 15px 25px;
  > .row {
    height: 100%;
  }
  img {
    object-fit: cover;
    width: 1px;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  &.container-full {
    width: 1700px !important;
    max-width: calc(~"100% + 100px") !important;
    margin-left: -50px;
    padding: 15px 0px;
  }
}

body:not(.page-content-edit) #bandeau-image-title {
  position: relative;
  width: 100%;
  height: 400px;
  margin-bottom: 40px;
  padding: 0;
  > .row {
    height: 100%;
    #title {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        display: inline-block;
        position: relative;
        z-index: 2;
        padding: 10px 30px;
        margin: 0 0 0 20px;
        max-width: calc(~"100% - 60px");
        &:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.8);
          left: 0;
          top: 0;
          z-index: -1;
        }
      }
    }
    #image {
      position: relative;
      overflow: hidden;
      z-index: 1;
      width: 100%;
      height: 100%;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
      }
    }

    .bloc-radius {
      &#image {
        border-radius: @border-radius;
      }
    }
  }
}

/* Slider */

#containerSliderHP {
  padding: 20px 0;
  position: relative;
  background-repeat: no-repeat;
  background-position: top left;
  max-height: 450px;
  @media @tablette {
    margin-top: 0;
  }
  &::after {
    display: block;
    content: "";
    background-image: url("@{theme-path}/img/fondSliderHiver.png");
    background-position: top center;
    width: 30%;
    height: 646px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: -1;
  }
  &::before {
    display: block;
    content: "";
    background-image: url("@{theme-path}/img/fondSliderTouteSaisons.png");
    background-position: top left;
    width: 70%;
    height: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0;
    // animation: moveRightLeftNeige 2s linear infinite;
  }
}

#sliderHP * {
  .transition(all 0.4s ease);
}

#sliderHP {
  .zoneModule {
    height: auto !important;
    .carousel-inner {
      width: 100%;
      left: 0%;
      overflow: visible;
      .item > img,
      .item.active > img,
      .item.active.next > img {
        display: none;
      }
      .item,
      .item.active {
        background-size: 0px !important;
        @media (max-width: 1023px) {
          background-size: cover !important;
        }
      }
      .item.active {
        z-index: 9979;
      }
    }
  }
  .carousel-caption {
    position: relative;
    left: 0%;
    right: 0%;
    bottom: 0%;
    top: 0%;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 450px;
    @media (max-width: 1023px) {
      height: 100%;
      padding-bottom: 0;
      padding-top: 0;
      bottom: 0;
    }
    h1,
    h1 a {
      color: #ffffff;
      font-family: @font-family-title;
      font-size: 40px;
      text-align: left;
      text-decoration: none;
      margin-bottom: 20px;
      font-weight: 400;
      @media @tablette {
        font-size: 30px;
        color: @color-primary;
      }
    }
    p {
      font-weight: 400;
      font-size: 18px;
      font-family: @font-family-base;
      text-align: left;
      color: #ffffff;
      @media @tablette {
        color: @color-primary;
      }
    }
    p:empty {
      display: none;
    }
    a.jssor-rwd-caption-link,
    a.jssor-rwd-caption-link:active,
    a.jssor-rwd-caption-link:link,
    a.jssor-rwd-caption-link:visited {
      display: inline-block;
      position: relative;
      z-index: 1;
      float: none;
      padding: 15px 45px;
      margin-top: 15px;
      cursor: pointer;
      overflow: hidden;
      font-size: 17px;
      font-family: @font-family-base;
      font-weight: 700;
      text-decoration: none;
      color: #ffffff;
      border-radius: 17px 0px 17px 0px;
      text-transform: uppercase;
      background-color: @color-second;
      border: 2px solid @color-second;
      .transition(all 0.4s ease);
      &:hover,
      &:focus {
        background-color: @color-primary;
        &:after {
          right: 0;
        }
      }
    }
    .wrapTxtSlider {
      position: relative;
      z-index: 9;
      right: 0%;
      top: 0%;
      right: 0;
      left: auto;
      width: 100%;
      max-width: 994px;
      height: 92%;
      padding-left: 30px;
      padding: 50px 30px;
      z-index: 9;
      border-radius: 160px 0 160px 0;
      background-color: transparent;
      text-align: left;
      @media @tablette {
        transform: translate(0);
        border-radius: 0;
        min-height: 350px !important;
      }
      .wrap-content {
        display: block;
        height: 100%;
        overflow: auto;
        position: absolute;
        padding: 15px;
        right: 0;
        left: auto;
        width: 65%;
        @media @tablette {
          max-width: 100%;
          width: 100%;
        }
        &::-webkit-scrollbar {
          width: 4px;
          background-color: transparent;
        }
        &::-webkit-scrollbar-track {
          width: 2px;
          -webkit-box-shadow: inset 0 0 2px #fff;
          border-radius: 0px;
          background-color: #fff;
        }
        &::-webkit-scrollbar-thumb {
          width: 2px;
          border-radius: 0px;
          -webkit-box-shadow: inset 0 0 2px #fff;
          background-color: @color-fourth;
        }
      }
      @media (max-width: 1023px) {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: none;
        min-height: auto;
      }
    }
    .containerImgDecoSlider {
      position: absolute;
      width: 270px;
      height: 349px;
      top: 0;
      right: auto;
      display: block;
      &::before {
        display: block;
        content: "";
        width: 355px;
        height: 304px;
        position: absolute;
        left: -105px;
        top: -30px;
        background-image: url("@{theme-path}/img/decoImgSlider.png");
        z-index: 10;
        @media @tablette {
          display: none;
        }
      }
      &::after {
        display: block;
        content: "";
        width: 170px;
        height: 100px;
        position: absolute;
        left: -44px;
        bottom: -17px;
        background-image: url("@{theme-path}/img/decoPointSlider.png");
        @media @tablette {
          display: none;
        }
      }
    }
    .containerImgSlider {
      position: absolute;
      height: 100%;
      max-height: 527px;
      width: 100%;
      max-width: 420px;
      right: 0px;
      bottom: 0px;
      border-radius: 210px 210px 0px 0px;
      overflow: hidden;
      border: 2px solid #ffffff;
      @media @tablette {
        border: 0px solid transparent;
      }
      .imgSlider {
        width: 1%;
        min-width: 101%;
        min-height: 100%;
        height: auto;
        position: absolute;
        left: 50%;
        top: 50%;
        right: auto;
        object-fit: cover;
        z-index: 2;
        transform: translate(-50%, -50%);
        @media (max-width: 1023px) {
          display: none;
        }
      }
    }
  }
  .carousel-control {
    width: 7.5%;
  }
}

#sliderHP .item.next {
  opacity: 1;
  display: block;
}

#sliderHP .carousel-indicators {
  left: auto;
  right: 0;
  bottom: 50px;
  width: 42%;
  max-width: 994px;
  margin-left: 0;
  z-index: 9988;
  margin-bottom: 0;
  transform: translateX(-50%);
  text-align: left;
  @media (max-width: 1023px) {
    left: 0%;
    bottom: 10px;
  }
}

#sliderHP .carousel-indicators li.active {
  background: @color-third;
  border: 2px solid @color-third;
}

#sliderHP .carousel-indicators li,
#sliderHP .carousel-indicators li.active {
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 50%;
  opacity: 1;
}
#sliderHP .carousel-indicators li {
  background-color: #ffffff;
  margin-right: 5px !important;
  border: 2px solid #ffffff;
  opacity: 1;
}
#sliderHP .carousel-indicators li:last-child {
  margin-right: 0px;
}

@keyframes moveRightLeft {
  0% {
    transform: translateX(50%);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(50%);
  }
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(-20%);
  }
  50% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(-20%);
  }
}

@keyframes moveRightLeftNeige {
  0% {
    transform: translateX(110%);
  }
  50% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(110%);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg); /* Début de la rotation */
  }
  to {
    transform: rotate(360deg); /* Fin de la rotation */
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

a.btnCSE {
  display: block;
  margin: 0 auto;
  background: transparent;
  .img {
    position: relative;
    display: block;
    border-radius: 100%;
    margin: 0 auto;
    max-width: 70%;
    border: 2px solid @color-primary;
    width: 250px;
    height: 250px;
    img {
      display: block;
      position: absolute;
      max-width: 200px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .txt {
    display: block;
    position: relative;
    margin-top: 10px;
    font-size: 20px;
    text-align: center;
    color: @color-primary;
  }
}

body:not(.page-content-edit) {
  a.btnAvantage {
  }
}

a.btnAvantage {
  display: block;
  margin: 0 auto;
  width: 236px;
  height: 320px;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  border-radius: 6px;
  border-radius: 20px;
  overflow: visible;
  &.show {
    pointer-events: auto;
  }
  * {
    .transition(all 0.4s ease);
  }
  .containerImg {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    img {
      border: 0px solid transparent;
    }
  }
  .title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 20px 10px;
    position: relative;
    bottom: 85px;
    left: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    border: 1px solid black;
  }
}

#containerAvantages {
  background-image: url("@{theme-path}/img/quadrillage.png");
  background-color: #ffffff;
  padding-top: 0px;
  padding-bottom: 0px;
  position: relative;
  width: 50%;
  max-width: 1250px;
  min-width: 1024px;
  > .row {
    position: relative;
    align-items: center;
    padding-top: 50px;
    &::before {
      display: block;
      content: "";
      height: 125px;
      width: 83px;
      background-image: url("@{theme-path}/img/decoHeader.png");
      position: absolute;
      right: 0;
      top: -113px;
    }
  }
  #containerTitre {
    position: relative;
    @media @tablette {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .etoile{
      position: absolute;
      
    }
  }
  h2 {
    color: @color-second;
    font-family: @font-family-title;
    font-weight: 400;
    font-size: 40px;
    margin-bottom: 40px;
    position: relative;
    &::after {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      top: 60px;
      width: 105px;
      height: 12px;
      background-image: url("@{theme-path}/img/decoTitreAvantages.png");
    }
    @media @tablette {
      padding-left: 0;
      br {
        display: none;
        text-align: center;
      }
    }
  }
  @media @tablette {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
  #containerBlocAvantages {
    .row-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  a.btnAvantage {
    border-radius: 0px;
    text-decoration: none !important;
    flex-direction: column;
    display: flex;
    width: 220px;
    max-height: 271px;
    .containerImg {
      overflow: hidden;
      border-radius: 0px;
      max-width: 212px;
      &::after {
        display: block;
        content: "";
        background:;
        position: absolute;
        width: 100%;
        height: 8px;
        top: 0px;
        border-radius: 20px 20px 0 0;
        transition: 0.5s;
      }
    }
    .title {
      background-color: #ffffff;
      padding: 2px 17px;
      color: #363636;
      font-family: "Josefin sans";
      transform: rotate(-15deg);
      bottom: 20px;
      text-align: center;
    }
    &.sport {
      width: 244px;
      max-width: 244px;
      .containerImg {
        width: 244px;
        max-width: 244px;
      }
    }
    &.droite {
      margin-left: auto;
      margin-right: 0;
    }
    &.gauche {
      margin-right: auto;
      margin-left: 0;
    }
    &.culture {
      &::after {
        display: block;
        content: "";
        position: absolute;
        left: -30px;
        top: 10px;
        width: 82px;
        height: 64px;
        background-image: url("@{theme-path}/img/decoCulture.png");
      }
    }
    &.vacances {
      &::after {
        display: block;
        content: "";
        position: absolute;
        left: -40px;
        top: 30px;
        width: 264px;
        height: 179px;
        background-image: url("@{theme-path}/img/decoVacances.png");
      }
    }
    &.chequeKdo {
      &::after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        top: -26px;
        width: 190px;
        height: 196px;
        background-image: url("@{theme-path}/img/decoChequeKdo.png");
      }
    }
    &:hover {
      .title {
        bottom: 80px;
        transform: rotate(0);
      }
    }
  }
}
#containerCSE {
  padding-top: 55px;
  padding-bottom: 55px;
  h2 {
    color: #ffffff;
    font-size: 43px;
    margin-bottom: 60px;
  }
  a.btnAvantage {
    width: 272px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    display: block;
    .containerImg {
      border-radius: 0px 25px 0 25px;
      border: 2px solid #ffffff;
    }
    .title {
      background-color: #ffffff;
      padding: 2px 10px;
      width: 160px;
      color: #363636;
      font-family: "Josefin sans";
      transform: rotate(-15deg);
      top: -10px;
      bottom: auto;
      position: absolute;
      text-align: center;
      left: 15%;
    }
    &.leRole {
      &::after {
        display: block;
        content: "";
        position: absolute;
        left: -30px;
        top: 120px;
        width: 83px;
        height: 125px;
        background-image: url("@{theme-path}/img/decoHeader.png");
      }
    }
    &.lesPV {
      &::after {
        display: block;
        content: "";
        position: absolute;
        right: -30px;
        top: 50px;
        width: 85px;
        height: 35px;
        background-image: url("@{theme-path}/img/decoLesPv.png");
      }
    }
    &:hover {
      .containerImg {
        border-radius: 25px 0 25px 0px;
      }
      .title {
        top: 60%;
        transform: rotate(0);
      }
    }
  }
}

#containerContact {
  position: relative;
  &::after {
    display: block;
    content: "";
    background-image: url("@{theme-path}/img/decoContactezNous.png");
    width: 260px;
    height: 155px;
    position: absolute;
    left: 0;
    top: 100px;
    @media @tablette {
      display: none;
    }
  }
  &::before {
    display: block;
    content: "";
    background-image: url("@{theme-path}/img/decoContactezNous2.png");
    width: 202px;
    height: 103px;
    position: absolute;
    right: 0;
    bottom: 100px;
    @media @tablette {
      display: none;
    }
  }
  h2 {
    color: #ffffff;
    font-weight: 800;
    font-size: 40px;
  }
  .form-horizontal {
    &::after {
      display: block;
      content: "";
      width: 152px;
      height: 138px;
      background-image: url("@{theme-path}/img/decoMessageContact.png");
      position: absolute;
      bottom: 135px;
      background-repeat: no-repeat;
      left: 210px;
      z-index: -1;
    }
    &::before {
      display: block;
      width: 152px;
      height: 138px;
      content: "";
      background-image: url("@{theme-path}/img/decoNomContact.png");
      position: absolute;
      right: 145px;
      background-repeat: no-repeat;
      top: 40px;
    }
  }
  input {
    border-radius: 30px;
    margin-bottom: 2px;
    height: 40px;

    padding: 25px 25px;
    color: @color-primary;
    font-weight: 600;
    &::placeholder {
      color: #104274;
      font-weight: 600;
    }
  }
  textarea {
    border-radius: 30px;
    margin-bottom: 20px;

    min-height: 181px;
    color: @color-primary;
    font-weight: 600;
    padding: 15px 25px;
  }
  .radio-checkbox-inline .responsive-label .control-label {
    display: none;
  }
  .form-group {
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 50%;
    color: #ffffff;
    @media @tablette {
      width: 100%;
    }
    .col-sm-5,
    .col-sm-4,
    .col-sm-7 {
      width: 100%;
    }
  }
  .form-horizontal .control-label {
    text-align: center;
    margin-bottom: 15px;
  }
  .form-horizontal {
  }
  .btn-primary {
    background-color: @color-third;
    color: @color-primary;
    padding: 10px 40px;
    border-radius: 30px;
    border: 2px solid #000000;
    &:hover {
      color: @color-third;
      background-color: @color-primary;
    }
  }
  .text-justify {
    color: #ffffff;
  }
}

#containerAvantagesContenu {
  .row {
    justify-content: center;
    .col-sm-4 {
      max-width: 29%;
    }
  }
  h2 {
    font-family: @font-family-title;
    text-transform: uppercase;
    font-size: 38px;
    margin-bottom: 50px;
  }
  a.btnAvantage {
    text-decoration: none !important;
    margin-bottom: 20px;
    background-color: transparent;
    height: auto;
    transition: 0.5s;
    .containerImg {
      overflow: hidden;
      border-radius: 20px;
      border-radius: 115px 115px 0 0;
      border: 1px solid #000000;
      max-height: 259px;
      img {
        border-radius: 0 !important;
      }
    }
    .title {
      width: 100%;
      position: relative;
      left: auto;
      bottom: 0px;
      color: #363636;
      font-size: 29px;
      font-family: @font-family-base, sans-serif;
      font-weight: 600;
      border-radius: 23px;
      padding: 10px 10px !important;
      border: 0px solid transparent;
      transition: 0.5s;
      z-index: 1;
      &::before {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        height: 100%;
        width: 0;
        background-color: @color-second;
        top: 0;
        z-index: -1;
        transition: 0.5s;
      }
    }
    &:hover {
      .containerImg {
        border-radius: 0;
      }
      .title {
        bottom: 0px;
        &::before {
          width: 100%;
        }
      }
    }
  }
  .color-primary {
    .btnAvantage {
      .title {
        background: @gradient-first;
      }
      .containerImg::after {
        background: @gradient-first;
      }
    }
  }
  .color-second {
    .btnAvantage {
      .title {
        background: @gradient-second;
      }
      .containerImg::after {
        background: @gradient-second;
      }
    }
  }
  .color-third {
    .btnAvantage {
      .title {
        background: @gradient-third;
      }
      .containerImg::after {
        background: @gradient-third;
      }
    }
  }
  .color-fourth {
    .btnAvantage {
      .title {
        background-color: @color-fourth;
      }
    }
  }
  .col-md-6:last-child {
    a.btnAvantage {
      .title {
        width: 248px;
      }
    }
  }
}

.page-content-edit #containerAvantages .btnAvantage:hover .containerImg::after {
  height: 8px !important;
}
.page-content-edit
  #containerAvantagesContenu
  .btnAvantage:hover
  .containerImg::after {
  height: 8px !important;
}

.page-content-edit {
  a.btnAvantage {
    .title {
      position: relative !important;
    }
  }
}

body:not(.page-content-edit) #rubriquePicto {
  background: @color-second;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span {
    color: white;
  }
}

#containerPicto {
  &::after {
    display: block;
    content: "";
    background-image: url("@{theme-path}/img/decoRapide.png");
    width: 280px;
    height: 288px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-position: bottom center;
    background-repeat: no-repeat;
  }
}
.btnPicto {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  .containerPicto {
    background-color: rgba(250, 250, 250, 1);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0, 5s;
    box-shadow: 0px 10px 20px rgba(30, 30, 30, 0.65);
    img {
      margin: 0 auto;
    }
  }
  .title {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
    text-decoration: none;
  }
  &.contact {
    .containerPicto {
      img {
        position: relative;
        left: 10px;
      }
    }
  }
  &.evenement {
    .containerPicto {
      img {
        position: relative;
        left: 10px;
      }
    }
  }
  &:hover {
    text-decoration: none !important;
    .title {
      text-decoration: none !important;
    }
    .containerPicto {
      background-color: rgba(250, 250, 250, 0.5);
    }
  }
}

.page-content-edit {
  .btnPicto {
    .title {
      color: @color-second;
    }
  }
}

/* Tableau */

.table-responsive {
  width: calc(~"100%") !important;
  margin-bottom: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  table {
    width: calc(~"100% - 1px") !important;
  }
  tr {
    td {
      text-align: center;
      padding: 5px 10px;
      // white-space: nowrap;
      border: 2px solid @color-primary !important;
      border-top: 2px solid @color-primary !important;
      border-bottom: 2px solid @color-primary !important;
      p {
        text-align: center;
      }
    }
  }
  tr:nth-child(2n + 1) {
    background-color: #ddd;
  }
  tr:nth-child(2n) {
    background-color: #eee;
  }
  tr:first-child {
    background-color: @color-primary !important;
    color: white !important;
    font-weight: bold;
    td,
    th {
      background-color: @color-primary !important;
      border: 2px solid @color-primary !important;
      padding-top: 10px;
    }
    td:not(:first-child) {
      border-left: 2px solid @color-primary !important;
    }
  }
}

.table-responsive-bis {
  width: calc(~"100%") !important;
  margin-bottom: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  table {
    width: calc(~"100% - 1px");
  }
  tr {
    td {
      text-align: center;
      padding: 5px 10px;
      border: 2px solid @color-primary;
      border-top: 2px solid @color-primary;
      border-bottom: 2px solid @color-primary;
      p {
        text-align: center;
      }
    }
  }
  tr:nth-child(2n + 1) {
    background-color: #ddd;
  }
  tr:nth-child(2n) {
    background-color: #eee;
  }
}

.page-content-edit .style-tab,
.page-content-edit .style-tab-bis {
  table {
    width: calc(~"100% - 1px") !important;
  }
  tr {
    td {
      text-align: center;
      padding: 5px 10px;
      // white-space: nowrap;
      border: 2px solid @color-primary !important;
      border-top: 2px solid @color-primary !important;
      border-bottom: 2px solid @color-primary !important;
      p {
        text-align: center;
      }
    }
  }
  tr:nth-child(2n + 1) {
    background-color: #ddd;
  }
  tr:nth-child(2n) {
    background-color: #eee;
  }
  tr:first-child {
    background-color: @color-primary !important;
    color: white;
    font-weight: bold;
    td,
    th {
      background-color: @color-primary !important;
      border: 2px solid @color-primary !important;
      padding-top: 10px;
    }
    td:not(:first-child) {
      border-left: 2px solid @color-primary !important;
    }
  }
}

.page-content-edit .style-tab-bis {
  tr:first-child {
    background-color: #ddd !important;
    color: #3e454d;
    font-weight: normal;
    td,
    th {
      background-color: #ddd !important;
    }
  }
}

/* GESTION PICTO FONTAWESOME */
.containerFApicto {
  position: relative;
  padding-left: 40px !important;
  padding-bottom: 0px !important;
  i:not(.material-icons) {
    position: absolute;
    width: 40px !important;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.removeI {
  padding-left: 0px !important;
  i {
    display: none;
  }
}

/* --------------------------------------------------------------------*/
/* -------------------------- bloc billetterie ------------------------*/
/* --------------------------------------------------------------------*/

#container-bloc-billetterie {
  height: 447px;
  @media screen and (max-width: 1024px) {
    margin-bottom: 10px;
  }

  &.color-primary div.content-txt-bloc-billetterie {
    background-color: @color-primary !important;
    a.boutonContenu:hover {
      color: @color-primary !important;
    }
  }
  &.color-second div.content-txt-bloc-billetterie {
    background-color: @color-second !important;
    a.boutonContenu:hover {
      color: @color-second !important;
    }
  }
  &.color-third div.content-txt-bloc-billetterie {
    background-color: @color-third !important;
    a.boutonContenu:hover {
      color: @color-third !important;
    }
  }

  div.content-bloc-billetterie {
    border: 1px solid #eeeeee;
    background-color: white;
    text-align: center;

    p.tag {
      font-size: 10px;
      letter-spacing: 1px;
      color: @color-primary;
      text-transform: uppercase;
      font-weight: 600;
      float: right;
      background-color: #eeeeee;
      padding: 9px 22px;
      margin-bottom: 0px;
    }

    div.content-img {
      width: 100%;
      height: 152px;
      display: inline-block;

      img {
        max-width: 189px;
        margin: auto;
      }
    }

    div.content-txt-bloc-billetterie {
      background-color: @color-primary;
      color: white;
      padding: 40px 25px;
      height: 262px;
      .boutonContenu:hover {
        background-color: #ffffff;
      }
    }

    p.title-bloc-billetterie {
      font-size: 16px;
      line-height: 18px;
      text-transform: uppercase;
      font-family: @font-family-base;
      letter-spacing: 4px;
      min-height: 35px;
      @media (max-width: 1023px) {
        font-size: 14px;
        letter-spacing: normal;
      }
    }

    p.prix {
      font-family: @font-family-base;
      font-weight: 900;
      letter-spacing: 3px;
      font-size: 40px;
      margin-top: 15px;
      margin-bottom: 17px;
      display: inline-block;
    }

    p.sous-titre-prix {
      font-family: @font-family-base;
      font-weight: bold;
      font-size: 13px;
    }

    a.boutonContenu {
      background-color: transparent;
      border: 1px solid white;
      margin-top: 18px;

      &:hover {
        background-color: white !important;
        color: @color-primary!important;
      }
    }
  }
}

/* -----------------------------------------------------------------------------------*/
/* ---------------------------------- voir tout --------------------------------------*/
/* -----------------------------------------------------------------------------------*/

div.content-bloc-voir-tout {
  height: 447px;
  text-align: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  position: relative;

  div.content-txt-voir-tout {
    width: 100%;

    p.title-bloc-billetterie {
      font-size: 16px;
      line-height: 18px;
      text-transform: uppercase;
      font-family: @font-family-base;
      letter-spacing: 4px;
      color: white;
      font-weight: bold;
      position: relative;
      z-index: 5;
      @media (max-width: 1023px) {
        font-size: 14px;
        letter-spacing: normal;
      }
    }

    a.boutonContenu {
      background-color: white;
      color: @color-primary!important;
      border: 1px solid white;
      margin-top: 18px;
      padding: 10px 52px;
      position: relative;
      z-index: 5;
      margin-right: 0px;
      @media (max-width: 1023px) {
        font-size: 11px;
      }

      &:hover {
        background-color: transparent;
        color: white !important;
      }
    }
  }

  &:after {
    content: "";
    background: @brand-primary;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

.page-content-edit div.content-bloc-voir-tout {
  display: block !important;

  p.title-bloc-billetterie {
    color: black !important;
    margin-top: 10px;
  }
  a.boutonContenu {
    border-color: black !important;

    &:hover {
      color: black !important;
    }
  }
}

#bloc-voyage-voir-tout {
  padding: 0px 27px;
  @media (min-width: 768px) {
    padding: 0 15px;
    width: 25%;
  }
  .ge-content {
    height: 100%;
  }

  div.content-bloc-voir-tout {
    height: 100%;
  }
}

/* -----------------------------------------------------------------------------------*/
/* -------------------------------- bloc et aussi ------------------------------------*/
/* -----------------------------------------------------------------------------------*/

#container-et-aussi {
  // padding: 0px;
  margin-top: 23px;

  .content-bloc-et-aussi {
    text-align: center;
    border: 1px solid #dcdcdc;
    height: 157px;
    display: flex;
    align-items: center;

    a {
      display: inline-block;
      width: 100%;
      height: 157px;
      padding: 10px;
      display: flex;
      align-items: center;
      background-color: transparent;
      .transition(all 0.2s ease);

      span.title {
        font-family: @font-family-base;
        color: @color-primary;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 3px;
        width: 100%;
        margin-bottom: 0px;
        position: relative;
      }

      &:hover {
        background-color: #dcdcdc;
      }
    }
  }
}

#container-et-aussi-width-picto {
  margin-top: 23px;

  .content-bloc-et-aussi {
    text-align: center;
    border: 1px solid #dcdcdc;
    height: 157px;

    a {
      display: inline-block;
      width: 100%;
      height: 157px;
      padding: 10px;
      padding-top: 64px;
      background-color: transparent;
      .transition(all 0.2s ease);

      span.title {
        font-family: @font-family-base;
        color: @color-primary;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 3px;
        margin: auto;
        margin-bottom: 0px;
        position: relative;

        #PictoComptoir {
          max-width: 52px;
          height: 58px;
          margin-bottom: -44px;
          position: absolute;
          left: -61px;
          top: -22px;
          fill: @color-primary !important;
        }
      }

      &:hover {
        background-color: #dcdcdc;
      }
    }
  }
}

// MDP HEADER
#bandeau {
  position: relative;
  padding-top: 0;
  margin-bottom: 30px;
  #title {
    position: absolute;
    // top: 50%;
    top: 50px;
    padding: 20px;
    z-index: 1;
    // transform: translateY(-50%);
    width: fit-content;
    padding-right: 30px;
    left: 15px;
    h1 {
      font-size: 25px;
      color: white;
      margin: auto;
      &:after {
        content: "";
        border-radius: 0 20px 20px 0;
        background-image: -moz-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -webkit-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -ms-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        box-shadow: 0px 13px 24px 0px rgba(3, 102, 226, 0.27);
        border: 4px solid #fefefe;
        width: 100%;
        position: absolute;
        height: 100%;
        left: 0;
        z-index: -1;
        top: 50%;
        transform: translateY(-50%);
        border-left: none;
      }
    }
  }
  #img {
    padding: 0;
    > .ge-content {
      height: 240px;
      position: relative;
      overflow: hidden;
      p {
        height: 100%;
        margin: auto;
        img {
          border-radius: 20px 20px 0 0;
          position: absolute;
          top: 0;
          object-fit: cover;
          width: 100%;
          height: 100%;
          max-height: 233px;
        }
      }
      &:after {
        content: "";
        background-image: url("https://assets.prowebce.net/Demo2024Zenith/imgModeleDePage/pageCulture/Vague_header_bis.png");
        background-repeat: no-repeat;
        width: 100%;
        height: 154px;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        bottom: -70px;
        background-size: 1024px;
        filter: drop-shadow(5px 0px 11px rgba(22, 25, 45, 0.5));
      }
    }
  }

  #blocFlexHeader {
    padding: 0 30px;

    #blocSub {
      h1 {
        font-family: @font-family-base;
        font-size: 32px;
        font-weight: 700;
        color: @color-fourth;
        margin: auto;
        margin-bottom: 20px;
      }
      p {
        color: @color-txt;
        font-size: 18px;
        font-weight: 500;
      }
    }

    #monDispo {
      width: 330px;
      min-height: 222px;
      position: absolute;
      right: 5%;

      z-index: 1;
      border-radius: 20px;
      background-image: -moz-linear-gradient(
        -51deg,
        rgba(
            red(@color-primary),
            green(@color-primary),
            blue(@color-primary),
            1
          )
          2%,
        rgba(
            red(@color-primary),
            green(@color-primary),
            blue(@color-primary),
            1
          )
          12%,
        rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
          47%,
        rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
          100%
      );
      background-image: -webkit-linear-gradient(
        -51deg,
        rgba(
            red(@color-primary),
            green(@color-primary),
            blue(@color-primary),
            1
          )
          2%,
        rgba(
            red(@color-primary),
            green(@color-primary),
            blue(@color-primary),
            1
          )
          12%,
        rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
          47%,
        rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
          100%
      );
      background-image: -ms-linear-gradient(
        -51deg,
        rgba(
            red(@color-primary),
            green(@color-primary),
            blue(@color-primary),
            1
          )
          2%,
        rgba(
            red(@color-primary),
            green(@color-primary),
            blue(@color-primary),
            1
          )
          12%,
        rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
          47%,
        rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
          100%
      );
      box-shadow: 0px 13px 24px 0px rgba(3, 102, 226, 0.27);
      border: 4px solid rgba(254, 254, 254, 1);
      padding: 20px;
      transform: translateY(-60%);

      h1 {
        color: white;
        font-size: 23px;
        text-align: center;
        margin-bottom: 30px;
        margin-top: 0;
      }

      table.cadrefin {
        width: 100%;
        border: none;
        font-family: @font-family-base;

        @media screen and (max-width: 1024px) {
          tr td {
            width: 50% !important;
            display: block !important;
            float: left !important;
          }
        }

        tr,
        td {
          border: none;
        }

        tr:nth-child(1) {
          display: none;
        }

        tr td:nth-child(1) {
          display: none;
        }

        tr:nth-child(2) {
          td {
            font-size: 18px;
            line-height: 29px;
            font-weight: bold;
            text-align: right;
            color: white;
            padding-bottom: 31px !important;
            @media screen and (max-width: 1024px) {
              font-size: 17px;
              line-height: 21px;
            }
            @media screen and (max-width: 420px) {
              font-size: 15px;
              line-height: 19px;
            }
          }

          td:nth-child(1) {
            opacity: 0;
          }
        }

        tr:nth-child(3) {
          td {
            // font-size: 26px;
            // line-height: 29px;
            font-weight: 400;
            text-align: right;
            color: white;
            vertical-align: bottom;
            @media screen and (max-width: 1024px) {
              font-size: 17px;
              line-height: 21px;
            }
            @media screen and (max-width: 768px) {
            }
          }
          td:nth-child(1) {
            font-weight: bold;
            text-align: left;
            // color: @color-primary;
          }
        }

        tr:nth-child(2),
        tr:nth-child(3) {
          td:nth-child(2) {
            border-right: 3px solid white !important;
            @media screen and (max-width: 420px) {
              border-right: 2px solid white !important;
            }
          }
          td {
            padding-right: 20px !important;
            padding-left: 20px !important;
          }
        }
        tr td:nth-child(1) {
          // display: none !important;
        }
        tr td {
          text-align: center !important;
        }
      }
    }
    @media @mobile {
      > .row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        #monDispo {
          max-width: 330px;
          position: relative;
          right: 0;
          left: 0;
          margin-bottom: 40px;
          text-align: center;
          transform: none;
        }
      }
    }
  }
}

#headerMDP {
  position: relative;
  padding-top: 0;
  margin-bottom: 30px;

  #title {
    position: absolute;
    top: 50%;
    padding: 20px;
    z-index: 1;
    transform: translateY(-50%);
    width: fit-content;
    padding-right: 30px;
    left: 15px;
    h1 {
      font-size: 25px;
      color: white;
      margin: auto;
      &:after {
        content: "";
        border-radius: 0 20px 20px 0;
        background-image: -moz-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -webkit-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -ms-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        box-shadow: 0px 13px 24px 0px rgba(3, 102, 226, 0.27);
        border: 4px solid #fefefe;
        width: 100%;
        position: absolute;
        height: 100%;
        left: 0;
        z-index: -1;
        top: 50%;
        transform: translateY(-50%);
        border-left: none;
      }
    }
  }
  #imgHeader {
    padding: 0;
    > .ge-content {
      height: 240px;
      position: relative;
      overflow: hidden;
      p {
        height: 100%;
        margin: auto;
        img {
          border-radius: 20px 20px 0 0;
          position: absolute;
          top: 0;
          object-fit: cover;
          width: 100%;
          height: 100%;
          max-height: 233px;
        }
      }
      &:after {
        content: "";
        background-image: url("https://assets.prowebce.net/Demo2024Zenith/imgModeleDePage/pageCulture/Vague_header_bis.png");
        background-repeat: no-repeat;
        width: 100%;
        height: 154px;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        bottom: -70px;
        background-size: 1024px;
        filter: drop-shadow(5px 0px 11px rgba(22, 25, 45, 0.5));
      }

      > h1 {
        position: absolute;
        top: 20%;
        font-size: 25px;
        color: white;
        padding: 20px;
        z-index: 1;
        &:after {
          content: "";
          border-radius: 0 20px 20px 0;
          background-image: -moz-linear-gradient(
            -51deg,
            rgba(
                red(@color-primary),
                green(@color-primary),
                blue(@color-primary),
                1
              )
              2%,
            rgba(
                red(@color-primary),
                green(@color-primary),
                blue(@color-primary),
                1
              )
              12%,
            rgba(
                red(@color-fourth),
                green(@color-fourth),
                blue(@color-fourth),
                1
              )
              47%,
            rgba(
                red(@color-second),
                green(@color-second),
                blue(@color-second),
                1
              )
              100%
          );
          background-image: -webkit-linear-gradient(
            -51deg,
            rgba(
                red(@color-primary),
                green(@color-primary),
                blue(@color-primary),
                1
              )
              2%,
            rgba(
                red(@color-primary),
                green(@color-primary),
                blue(@color-primary),
                1
              )
              12%,
            rgba(
                red(@color-fourth),
                green(@color-fourth),
                blue(@color-fourth),
                1
              )
              47%,
            rgba(
                red(@color-second),
                green(@color-second),
                blue(@color-second),
                1
              )
              100%
          );
          background-image: -ms-linear-gradient(
            -51deg,
            rgba(
                red(@color-primary),
                green(@color-primary),
                blue(@color-primary),
                1
              )
              2%,
            rgba(
                red(@color-primary),
                green(@color-primary),
                blue(@color-primary),
                1
              )
              12%,
            rgba(
                red(@color-fourth),
                green(@color-fourth),
                blue(@color-fourth),
                1
              )
              47%,
            rgba(
                red(@color-second),
                green(@color-second),
                blue(@color-second),
                1
              )
              100%
          );
          box-shadow: 0px 13px 24px 0px rgba(3, 102, 226, 0.27);
          border: 4px solid #fefefe;
          width: 100%;
          position: absolute;
          height: 100%;
          left: 0;
          z-index: -1;
          top: 50%;
          transform: translateY(-50%);
          border-left: none;
        }
      }
    }

    #blocFlexHeader {
      padding: 0 30px;

      #blocSub {
        h1 {
          font-family: @font-family-base;
          font-size: 32px;
          font-weight: 700;
          color: @color-fourth;
          margin: auto;
          margin-bottom: 20px;
        }
        p {
          color: @color-txt;
          font-size: 18px;
          font-weight: 500;
        }
      }

      #monDispo {
        width: 330px;
        min-height: 222px;
        position: absolute;
        right: 5%;

        z-index: 1;
        border-radius: 20px;
        background-image: -moz-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -webkit-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -ms-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        box-shadow: 0px 13px 24px 0px rgba(3, 102, 226, 0.27);
        border: 4px solid rgba(254, 254, 254, 1);
        padding: 20px;
        transform: translateY(-60%);

        h1 {
          color: white;
          font-size: 23px;
          text-align: center;
          margin-bottom: 30px;
          margin-top: 0;
        }

        table.cadrefin {
          width: 100%;
          border: none;
          font-family: @font-family-base;

          @media screen and (max-width: 1024px) {
            tr td {
              width: 50% !important;
              display: block !important;
              float: left !important;
            }
          }

          tr,
          td {
            border: none;
          }

          tr:nth-child(1) {
            display: none;
          }

          tr td:nth-child(1) {
            display: none;
          }

          tr:nth-child(2) {
            td {
              font-size: 18px;
              line-height: 29px;
              font-weight: bold;
              text-align: right;
              color: white;
              padding-bottom: 31px !important;
              @media screen and (max-width: 1024px) {
                font-size: 17px;
                line-height: 21px;
              }
              @media screen and (max-width: 420px) {
                font-size: 15px;
                line-height: 19px;
              }
            }

            td:nth-child(1) {
              opacity: 0;
            }
          }

          tr:nth-child(3) {
            td {
              // font-size: 26px;
              // line-height: 29px;
              font-weight: 400;
              text-align: right;
              color: white;
              vertical-align: bottom;
              @media screen and (max-width: 1024px) {
                font-size: 17px;
                line-height: 21px;
              }
              @media screen and (max-width: 768px) {
              }
            }
            td:nth-child(1) {
              font-weight: bold;
              text-align: left;
              // color: @color-primary;
            }
          }

          tr:nth-child(2),
          tr:nth-child(3) {
            td:nth-child(2) {
              border-right: 3px solid white !important;
              @media screen and (max-width: 420px) {
                border-right: 2px solid white !important;
              }
            }
            td {
              padding-right: 20px !important;
              padding-left: 20px !important;
            }
          }
          tr td:nth-child(1) {
            // display: none !important;
          }
          tr td {
            text-align: center !important;
          }
        }
      }
      @media @mobile {
        > .row {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          #monDispo {
            max-width: 330px;
            position: relative;
            right: 0;
            left: 0;
            margin-bottom: 40px;
            text-align: center;
            transform: none;
          }
        }
      }
    }
  }
}

.page-content-edit {
  #monDispo {
    > .ge-content {
      background-color: transparent;
    }
  }
  #headerMDP {
    #title {
      .ge-content {
        background-image: -moz-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -webkit-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -ms-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
      }
    }

    #imgHeader {
      #blocFlexHeader {
        #monDispo {
          > .ge-content {
            background-color: transparent;
          }
        }
      }
    }
  }
  #bandeau {
    #title {
      .ge-content {
        background-image: -moz-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -webkit-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
        background-image: -ms-linear-gradient(
          -51deg,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            2%,
          rgba(
              red(@color-primary),
              green(@color-primary),
              blue(@color-primary),
              1
            )
            12%,
          rgba(red(@color-fourth), green(@color-fourth), blue(@color-fourth), 1)
            47%,
          rgba(red(@color-second), green(@color-second), blue(@color-second), 1)
            100%
        );
      }
    }
  }
}

// MDP CULTURE - A DECOHER SI LE CLIENT VEUT LA PAGE COMME SUR LA DEMO COMMERCIALE

#blocHow_Use {
  // padding: 0 30px;
  > .row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }

  #blocUse {
    h1 {
      font-family: @font-family-base;
      font-size: 32px;
      font-weight: 700;
      color: @color-fourth;
      margin: auto;
      margin-bottom: 20px;
    }
    p {
      color: @color-txt;
      font-size: 18px;
      font-weight: 500;
    }

    #blocPicto_Use {
      > .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        .column {
          .ge-content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
          }
        }
      }
      div.blocPictoAncre {
        margin-right: 20px;
        a {
          width: 100%;
          height: 100%;
          position: relative;
          text-decoration: none;
          display: block;
          span.contentPicto {
            display: block;
            margin: auto;
            text-align: center;
            width: 111px;
            height: 111px;
            border-radius: 100%;
            position: relative;
            border: 4px solid @color-primary;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
            img {
              width: 100%;
              position: absolute;
              left: 0;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              margin: auto;
              -webkit-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;
            }
          }
          span.texteAncre {
            display: block;
            margin-top: 10px;
            text-align: center;
            color: @color-primary;
            font-size: 14px;
            font-weight: 700;
            font-family: @font-family-base;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
          }

          &:hover {
            span.contentPicto {
              border-color: rgba(
                red(@color-primary),
                green(@color-primary),
                blue(@color-primary),
                0.45
              );
              img {
                filter: opacity(0.5);
              }
            }
            span.texteAncre {
              color: rgba(
                red(@color-primary),
                green(@color-primary),
                blue(@color-primary),
                0.45
              );
            }
          }
        }
      }
      div.blocLiaison {
        text-align: center;
        color: @color-txt;
        font-size: 18px;
        font-weight: 700;
        font-family: @font-family-base;
      }

      .column:nth-child(2) {
        div.blocPictoAncre {
          a {
            span.contentPicto {
              border: 4px solid @color-third;
            }
            span.texteAncre {
              color: @color-third;
            }

            &:hover {
              span.contentPicto {
                border-color: rgba(
                  red(@color-third),
                  green(@color-third),
                  blue(@color-third),
                  0.45
                );
                img {
                  filter: opacity(0.5);
                }
              }
              span.texteAncre {
                color: rgba(
                  red(@color-third),
                  green(@color-third),
                  blue(@color-third),
                  0.45
                );
              }
            }
          }
        }
      }

      .column:nth-child(3) {
        > .ge-content {
          justify-content: flex-start;
        }
        div.blocPictoAncre {
          a {
            span.contentPicto {
              border: 4px solid @color-second;
            }
            span.texteAncre {
              color: @color-second;
            }

            &:hover {
              span.contentPicto {
                border-color: rgba(
                  red(@color-second),
                  green(@color-second),
                  blue(@color-second),
                  0.45
                );
                img {
                  filter: opacity(0.5);
                }
              }
              span.texteAncre {
                color: rgba(
                  red(@color-second),
                  green(@color-second),
                  blue(@color-second),
                  0.45
                );
              }
            }
          }
        }
      }
    }
  }

  #blocGris {
    background-color: rgba(204, 204, 204, 0.3);
    border-radius: 20px;
    padding: 25px;
    color: @color-txt;
    font-family: @font-family-base;
    transform: translateX(-10%);
    h2 {
      font-size: 16px;
      font-weight: 700;
      color: @color-txt;
    }
    p {
      font-size: 14px;
      font-weight: 400;
    }
  }

  @media @tablette {
    #blocUse {
      margin-bottom: 50px;
      #blocPicto_Use {
        > .row {
          .column {
            .ge-content {
              justify-content: space-around;
            }
          }
        }
      }
    }
    #blocGris {
      transform: none;
      max-width: 700px;
    }
  }

  @media @mobile {
    #blocUse {
      #blocPicto_Use {
        > .row {
          .column:nth-child(3) {
            margin-top: 30px;
          }
        }
      }
    }
  }
}

#ancre_boutique,
#offres_ancre,
#ancre_remboursement {
  h1 {
    color: @color-fourth;
    font-size: 32px;
    font-weight: 700;
    font-family: @font-family-base;
  }
}

div.blocAccessAll {
  margin: auto;
  max-width: 380px;
  min-height: 200px;
  text-align: center;
  border-radius: 20px;
  border-width: 4px;
  border: 4px solid rgb(254, 254, 254);
  background-image: -moz-linear-gradient(
    -51deg,
    rgb(0, 103, 228) 2%,
    rgb(0, 103, 228) 12%,
    rgb(239, 32, 107) 47%,
    rgb(247, 39, 23) 100%
  );
  background-image: -webkit-linear-gradient(
    -51deg,
    rgb(0, 103, 228) 2%,
    rgb(0, 103, 228) 12%,
    rgb(239, 32, 107) 47%,
    rgb(247, 39, 23) 100%
  );
  background-image: -ms-linear-gradient(
    -51deg,
    rgb(0, 103, 228) 2%,
    rgb(0, 103, 228) 12%,
    rgb(239, 32, 107) 47%,
    rgb(247, 39, 23) 100%
  );
  box-shadow: 0px 13px 24px 0px rgba(3, 102, 226, 0.27);
  padding: 20px 50px;
  padding-top: 40px;

  a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    span.contentImageAcess {
      img {
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
      }
    }
    span.textAccess {
      color: white;
      text-align: center;
      display: block;
      font-family: @font-family-base;
      font-weight: 700;
      font-size: 17px;
      -webkit-transition: all 0.3s ease-out;
      margin-top: 20px;
      transition: all 0.3s ease-out;
    }
    &:hover {
      span.contentImageAcess {
        img {
          transform: scale(1.2);
        }
      }
      span.textAccess {
        letter-spacing: 1px;
      }
    }
  }
}

#contentOffres {
  position: relative;
  z-index: 0;
  > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    max-width: 824px;
    margin: auto;
    .ge-content {
      height: 100%;
    }
  }

  div.blocOffres {
    max-width: 236px;
    margin: auto;
    min-height: 450px;
    height: 100%;
    border-radius: 118px 118px 12px 12px;
    box-shadow: 0px 13px 24px 0px rgba(3, 102, 226, 0.27);
    background-color: white;

    span.contentImage {
      display: block;
      max-width: 236px;
      height: 185px;
      position: relative;
      overflow: hidden;
      border-radius: 118px 118px 0 0;
      img {
        border-radius: 118px 118px 0 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
      }
    }
    h6 {
      color: #242d51;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      margin: 20px auto;
    }
    span.blocInfos {
      display: block;
      padding: 0 30px;
      text-align: center;
      position: relative;
      padding-bottom: 60%;
      span.prix {
        color: @color-txt;
        font-size: 35px;
        font-weight: 700;
        line-height: 30px;
        span.minPrice {
          display: block;
          font-size: 15px;
        }
      }
    }
    span.boutonContenu {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      font-weight: 700;
      text-transform: uppercase;
      max-width: 80%;
      bottom: 10%;
    }
    a.boutonContenu {
      position: absolute;
      bottom: 10%;
      text-align: center;
      left: 0;
      right: 0;
      margin: auto;
      background-color: @color-txt;
      max-width: 80%;
      padding: 10px 20px;
      border-radius: 12px;
      color: white;
      border: 1px solid @color-txt;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      &:hover {
        background-color: white;
        color: @color-txt;
      }
    }
  }
  &:after {
    content: "";
    background-image: url("https://assets.prowebce.net/Demo2024Zenith/imgModeleDePage/pageCulture/img_bandeau_OffresCSE.png");
    background-repeat: no-repeat;
    width: 881px;
    height: 86px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    bottom: 30%;
  }

  @media @tablette {
    div.blocOffres {
      span.blocInfos {
        padding-bottom: 75%;
      }
    }
  }
}

#ancre_remboursement {
  margin-top: 60px;
  max-width: 964px !important;
  > .row {
    background-color: #efefef;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  h1 {
    margin-bottom: 10px;
  }
}

.page-content-edit {
  #blocHow_Use,
  #contentOffres,
  #ancre_remboursement {
    > .row {
      .ge-tools-drawer {
        width: 100%;
      }
    }

    #blocUse {
      h1 {
        font-family: @font-family-base;
        font-size: 32px;
        font-weight: 700;
        color: @color-fourth;
        margin: auto;
        margin-bottom: 20px;
      }
      p {
        color: @color-txt;
        font-size: 18px;
        font-weight: 500;
      }

      #blocPicto_Use {
        > .row {
          .ge-tools-drawer {
            width: 100%;
          }
        }

        .column:nth-child(2) {
          div.blocPictoAncre {
            a {
              span.contentPicto {
                border: 4px solid @color-primary;
              }
              span.texteAncre {
                color: @color-primary;
              }
            }
          }
        }
        .column:nth-child(3) {
          div.blocPictoAncre {
            a {
              span.contentPicto {
                border: 4px solid @color-third;
              }
              span.texteAncre {
                color: @color-third;
              }
            }
          }
        }

        .column:nth-child(4) {
          div.blocPictoAncre {
            a {
              span.contentPicto {
                border: 4px solid @color-second;
              }
              span.texteAncre {
                color: @color-second;
              }
            }
          }
        }
      }
    }
  }

  div.blocAccessAll {
    a {
      &:hover {
        span.contentImageAcess {
          img {
            transform: none;
          }
        }
        span.textAccess {
          letter-spacing: inherit;
        }
      }
    }
  }
}

//MDP VOYAGES - A DECOHER SI LE CLIENT VEUT LA PAGE COMME SUR LA DEMO COMMERCIALE

#ancre_boutique {
  margin-top: 50px;
  h1 {
    display: inline-block;
    vertical-align: baseline;
    span.contentImageLogo {
      display: inline-block;
      vertical-align: middle;
      margin-left: 20px;
    }
  }
}

#contentBoutique {
  max-width: 969px !important;
  border: 1px solid #cccccc;
  border-radius: 20px;
  padding: 30px 40px;
  #blocFonctionnement {
    margin-bottom: 30px;

    h5 {
      color: #5739ff;
      margin: 20px auto;
      font-size: 17px;
      font-weight: 700;
    }

    #contentInfosCommande {
      > .row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
      }
      .ge-content {
        height: 100%;
      }

      div.blocFonctionnement {
        background-color: #efefef;
        padding: 20px;
        border-radius: 20px;
        max-width: 197px;
        margin: auto;
        min-height: 292px;
        height: 100%;
        span.blocInfos {
          display: block;
          width: 100%;
          height: 100%;
          position: relative;
          padding-bottom: 45%;
          span.contentImageLogo {
            display: block;
            margin: auto;
            text-align: center;
            width: 85px;
            height: 85px;
            border-radius: 100%;
            position: relative;
            border: 4px solid @color-primary;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
            margin-bottom: 20px;
            img {
              width: 100%;
              width: 100%;
              position: absolute;
              left: 0;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              margin: auto;
              -webkit-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;
            }
          }
          span.blocTexte {
            span.titre {
              display: block;
              text-align: center;
              margin-bottom: 20px;
              color: @color-primary;
              font-size: 15px;
              font-weight: 700;
            }
            span.texte {
              text-align: center;
              display: block;
              font-size: 12px;
              color: @color-txt;
            }
            a {
              color: @color-txt;
              font-weight: 700;
            }
          }

          a.boutonContenu {
            position: absolute;
            bottom: 10px;
            left: 0;
            font-size: 10px;
            right: 0;
            margin: auto;
            background-color: @color-txt;
            max-width: 90%;
            text-align: center;
            color: white;
            text-transform: uppercase;
            border-radius: 8px;
            border: 1px solid @color-txt;
            &:hover {
              background-color: white;
              color: @color-txt;
            }
          }
        }
      }

      .column:nth-child(2) {
        div.blocFonctionnement {
          span.blocInfos {
            span.contentImageLogo {
              border: 4px solid @color-third;
            }
            span.blocTexte {
              span.titre {
                color: @color-third;
              }
            }
          }
        }
      }

      .column:nth-child(3) {
        div.blocFonctionnement {
          span.blocInfos {
            span.contentImageLogo {
              border: 4px solid @color-second;
            }
            span.blocTexte {
              span.titre {
                color: @color-second;
              }
            }
          }
        }
      }
    }
  }

  #blocService {
    margin-bottom: 30px;
    #contentInfosServices {
      border: 4px solid rgb(254, 254, 254);
      border-radius: 20px;
      background-image: -moz-linear-gradient(
        31deg,
        rgb(113, 28, 255) 0%,
        rgb(63, 83, 255) 58%,
        rgb(13, 138, 255) 100%
      );
      background-image: -webkit-linear-gradient(
        31deg,
        rgb(113, 28, 255) 0%,
        rgb(63, 83, 255) 58%,
        rgb(13, 138, 255) 100%
      );
      background-image: -ms-linear-gradient(
        31deg,
        rgb(113, 28, 255) 0%,
        rgb(63, 83, 255) 58%,
        rgb(13, 138, 255) 100%
      );
      box-shadow: 1px 1px 24px 0px rgba(44, 104, 255, 0.27);
      padding: 40px !important;
      margin-top: 20px;

      > .row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
      }
      div.blocService {
        position: relative;
        span.blocInfos {
          span.contentImageLogo {
            display: block;
            margin: auto;
            position: relative;
            text-align: center;
            width: 50px;
            height: 50px;
            img {
              width: 100%;
              position: absolute;
              left: 0;
              right: 0;
              margin: auto;
            }
          }

          span.blocTexte {
            display: block;
            text-align: center;
            color: white;
            span.titre {
              font-weight: 700;
              font-size: 14px;
              display: block;
              margin: 15px auto;
            }
            span.texte {
              display: block;
              font-size: 12px;
              font-weight: 400;
              span.textPetit {
                font-size: 10px;
                display: block;
                margin-top: 10px;
              }
            }
          }
        }
      }

      .column {
        position: relative;
        border-right: 2px solid rgba(254, 254, 254, 0.5);

        &:last-child {
          border-right: 0;
        }
      }
    }

    @media @tablette {
      .column {
        margin-bottom: 40px;
        &:nth-child(2) {
          border-right: 0 !important;
        }
      }
    }
    @media @mobile {
      .column {
        border-right: 0 !important;
      }
    }
  }
}

#blocOffres {
  margin-bottom: 20px;
  #contentOffresVoyage {
    > .row {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
    }
    .ge-content {
      height: 100%;
    }
    div.blocOffres {
      padding: 20px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #efefef;
      border-radius: 20px;
      height: 100%;
      span.contentImageLogo {
        width: 100%;
        display: block;
        height: 131px;
        margin: auto;
        position: relative;
        img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          object-fit: cover;
        }
      }

      a.boutonContenu {
        margin-top: 20px;
      }
    }

    div.blocAccessAll {
      padding: 40px 20px;
    }
  }

  @media @tablette {
    .column {
      margin-bottom: 20px;
    }
  }
}

#contentAvantage {
  margin: 20px auto 30px auto;
  #blocAvantagesVoyage {
    > .row {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
    }
  }
  #advantageLigne,
  #advantageAgence {
    > .ge-content {
      background-color: #efefef;
      border-radius: 20px;
      padding: 20px 25px;
      height: 100%;
    }
    h6 {
      font-weight: 700;
      font-size: 16px;
      color: #701dff;
      margin-top: 0;
      margin-bottom: 20px;
    }
    ul {
      padding-left: 15px;
      li {
        color: @color-txt;
        font-size: 12px;
        font-weight: 400;
        padding-left: 10px;
        margin-bottom: 10px;

        b {
          font-weight: 700;
        }

        &::marker {
          content: url("https://assets.prowebce.net/Demo2024Zenith/imgModeleDePage/pageVoyage/picto_validation.png");
          width: 13px;
          height: 13px;
        }
      }
    }
  }

  #advantageAgence {
    h6 {
      color: #ee206e;
    }
  }
}

#contentOffresCSE {
  margin-top: 40px;
  h1 {
    color: @color-fourth;
    font-size: 32px;
    font-weight: 700;
    font-family: @font-family-base;
  }

  #blocCSE {
    max-width: 879px !important;
    margin: auto;
    > .row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
    .column:nth-child(1) {
      div.blocsCSE {
        background-image: -moz-linear-gradient(
          31deg,
          rgb(113, 28, 255) 0%,
          rgb(63, 83, 255) 58%,
          rgb(13, 138, 255) 100%
        );
        background-image: -webkit-linear-gradient(
          31deg,
          rgb(113, 28, 255) 0%,
          rgb(63, 83, 255) 58%,
          rgb(13, 138, 255) 100%
        );
        background-image: -ms-linear-gradient(
          31deg,
          rgb(113, 28, 255) 0%,
          rgb(63, 83, 255) 58%,
          rgb(13, 138, 255) 100%
        );
      }
    }
    .column:nth-child(2) {
      div.blocsCSE {
        background-image: -moz-linear-gradient(
          125deg,
          rgb(27, 237, 200) 0%,
          rgb(26, 211, 226) 58%,
          rgb(25, 184, 251) 100%
        );
        background-image: -webkit-linear-gradient(
          125deg,
          rgb(27, 237, 200) 0%,
          rgb(26, 211, 226) 58%,
          rgb(25, 184, 251) 100%
        );
        background-image: -ms-linear-gradient(
          125deg,
          rgb(27, 237, 200) 0%,
          rgb(26, 211, 226) 58%,
          rgb(25, 184, 251) 100%
        );
      }
    }
    .column:nth-child(3) {
      div.blocsCSE {
        background-image: -moz-linear-gradient(
          -51deg,
          rgb(237, 31, 125) 0%,
          rgb(242, 35, 74) 58%,
          rgb(247, 39, 23) 100%
        );
        background-image: -webkit-linear-gradient(
          -51deg,
          rgb(237, 31, 125) 0%,
          rgb(242, 35, 74) 58%,
          rgb(247, 39, 23) 100%
        );
        background-image: -ms-linear-gradient(
          -51deg,
          rgb(237, 31, 125) 0%,
          rgb(242, 35, 74) 58%,
          rgb(247, 39, 23) 100%
        );
      }
    }
  }

  div.blocsCSE {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 13px 24px 0px rgba(16, 135, 255, 0.27);
    max-width: 236px;
    margin: auto;
    border-radius: 118px 118px 12px 12px;
    a {
      width: 100%;
      height: 100%;
      margin: auto;
      position: relative;
      text-decoration: none;
      span.contentImageLogo {
        border-radius: 118px 118px 0 0;
        display: block;
        position: relative;
        width: 236px;
        height: 185px;
        overflow: hidden;
        img {
          max-width: 236px;
          width: 100%;
          position: absolute;
          left: 50%;
          top: 49%;
          transform: translate(-50%, -50%);
          border-radius: 118px 118px 0 0;
          object-fit: cover;
          height: 100%;
          -webkit-transition: all 0.35s ease;
          -moz-transition: all 0.35s ease;
          -ms-transition: all 0.35s ease;
          -o-transition: all 0.35s ease;
          transition: all 0.35s ease;
        }
      }
      span.contentTexte {
        display: block;
        width: 100%;
        text-align: center;
        margin: auto;
        height: 80px;
        position: relative;
        border-radius: 0 0 12px 12px;

        span.texte {
          position: absolute;
          left: 0;
          right: 0;
          margin: auto;
          top: 50%;
          transform: translateY(-50%);
          color: white;
          font-weight: 700;
          font-size: 17px;
          text-align: center;
        }
      }

      &:hover {
        span.contentImageLogo {
          img {
            transform: translate(-50%, -50%) scale(1.1);
          }
        }
      }
    }
  }
}

#contentANCV {
  margin-top: 40px;
  margin-bottom: 50px;
  h1 {
    color: @color-fourth;
    font-size: 32px;
    font-weight: 700;
    font-family: @font-family-base;
  }

  #blocANCV {
    border: 1px solid #cccccc;
    border-radius: 20px;
    padding: 40px 50px;
    > .row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }

    h5 {
      margin: 20px auto;
    }

    a.boutonContenu {
      font-size: 14px;
      padding: 10px 30px;
      margin: 40px auto;
    }
  }
}

.page-content-edit {
  #contentInfosCommande {
    > .row {
      .ge-tools-drawer {
        width: 100%;
      }
    }

    .column:nth-child(2) {
      div.blocFonctionnement {
        span.blocInfos {
          span.contentImageLogo {
            border: 4px solid @color-primary !important;
          }
          span.blocTexte {
            span.titre {
              color: @color-primary !important;
            }
          }
        }
      }
    }

    .column:nth-child(3) {
      div.blocFonctionnement {
        span.blocInfos {
          span.contentImageLogo {
            border: 4px solid @color-third !important;
          }
          span.blocTexte {
            span.titre {
              color: @color-third !important;
            }
          }
        }
      }
    }

    .column:nth-child(4) {
      div.blocFonctionnement {
        span.blocInfos {
          span.contentImageLogo {
            border: 4px solid @color-second!important;
          }
          span.blocTexte {
            span.titre {
              color: @color-second!important;
            }
          }
        }
      }
    }
  }

  #contentInfosServices {
    > .row {
      .ge-tools-drawer {
        width: 100%;
      }
    }
    .ge-content {
      background-color: @color-primary;
    }
  }

  #contentOffresVoyage,
  #blocAvantagesVoyage,
  #blocANCV {
    > .row {
      .ge-tools-drawer {
        width: 100%;
      }
    }
  }

  #contentOffresCSE {
    #blocCSE {
      > .row {
        .ge-tools-drawer {
          width: 100%;
        }
      }
      .column:nth-child(2) {
        div.blocsCSE {
          background-image: -moz-linear-gradient(
            31deg,
            rgb(113, 28, 255) 0%,
            rgb(63, 83, 255) 58%,
            rgb(13, 138, 255) 100%
          );
          background-image: -webkit-linear-gradient(
            31deg,
            rgb(113, 28, 255) 0%,
            rgb(63, 83, 255) 58%,
            rgb(13, 138, 255) 100%
          );
          background-image: -ms-linear-gradient(
            31deg,
            rgb(113, 28, 255) 0%,
            rgb(63, 83, 255) 58%,
            rgb(13, 138, 255) 100%
          );
        }
      }
      .column:nth-child(3) {
        div.blocsCSE {
          background-image: -moz-linear-gradient(
            125deg,
            rgb(27, 237, 200) 0%,
            rgb(26, 211, 226) 58%,
            rgb(25, 184, 251) 100%
          );
          background-image: -webkit-linear-gradient(
            125deg,
            rgb(27, 237, 200) 0%,
            rgb(26, 211, 226) 58%,
            rgb(25, 184, 251) 100%
          );
          background-image: -ms-linear-gradient(
            125deg,
            rgb(27, 237, 200) 0%,
            rgb(26, 211, 226) 58%,
            rgb(25, 184, 251) 100%
          );
        }
      }
      .column:nth-child(4) {
        div.blocsCSE {
          background-image: -moz-linear-gradient(
            -51deg,
            rgb(237, 31, 125) 0%,
            rgb(242, 35, 74) 58%,
            rgb(247, 39, 23) 100%
          );
          background-image: -webkit-linear-gradient(
            -51deg,
            rgb(237, 31, 125) 0%,
            rgb(242, 35, 74) 58%,
            rgb(247, 39, 23) 100%
          );
          background-image: -ms-linear-gradient(
            -51deg,
            rgb(237, 31, 125) 0%,
            rgb(242, 35, 74) 58%,
            rgb(247, 39, 23) 100%
          );
        }
      }
    }
  }
}

// SOMMAIRE 2
#container-blocs-vacacances {
  > .row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
  }
  // COULEUR PRIMAIRE
  .bloc_primaire {
    div.content-bloc-vacances {
      span.title {
        background-color: @color-primary!important;
      }
    }
  }

  // COULEUR SECOND
  .bloc_second {
    div.content-bloc-vacances {
      span.title {
        background-color: @color-second!important;
      }
    }
  }

  // COULEUR TROIS
  .bloc_trois {
    div.content-bloc-vacances {
      span.title {
        background-color: @color-third!important;
      }
    }
  }
  .column:nth-child(3n + 1) {
    div.content-bloc-vacances {
      span.title {
        background-color: @color-primary;
      }
    }
  }
  .column:nth-child(3n + 2) {
    div.content-bloc-vacances {
      span.title {
        background-color: @color-second;
      }
    }
  }
  .column:nth-child(3n + 3) {
    div.content-bloc-vacances {
      span.title {
        background-color: @color-third;
      }
    }
  }

  div.content-bloc-vacances {
    max-width: 467px;
    margin: auto;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    span.img {
      display: block;
      width: 467px;
      margin: auto;
      height: 277px;
      border-radius: 20px;
      position: relative;
      overflow: hidden;

      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        width: 100%;
        height: 100%;
        max-width: 100% !important;
      }
    }
    span.title {
      border-radius: 0 0 20px 20px;
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100px;
      background-color: @color-primary;
      span.contentTitle {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        top: 45%;
        transform: translateY(-50%);
        color: white;
        font-weight: 700;
        span.txt {
          display: block;
          text-align: center;
          text-transform: uppercase;
        }
        a {
          color: white;
          border: 1px solid white;
          margin: auto;
          text-align: center;
          max-width: 25%;
          display: block;
          margin-top: 12px;
          font-size: 12px;
          &:hover {
            background-color: white;
            color: @color-txt;
          }
        }
      }
    }
  }
}

//MDP SOMMAIRE

#ligne-blocs-avantages {
  margin-bottom: 50px;

  // COULEUR PRIMAIRE
  .bloc_primaire {
    div.content-bloc-univers {
      a {
        span.content-title {
          background-color: @color-primary!important;
        }
      }
    }
  }

  // COULEUR SECOND
  .bloc_second {
    div.content-bloc-univers {
      a {
        span.content-title {
          background-color: @color-second!important;
        }
      }
    }
  }

  // COULEUR TROIS
  .bloc_trois {
    div.content-bloc-univers {
      a {
        span.content-title {
          background-color: @color-third!important;
        }
      }
    }
  }

  // COULEUR AUTO
  .column:nth-child(3n + 1) {
    div.content-bloc-univers {
      a {
        span.content-title {
          background-color: @color-primary;
        }
      }
    }
  }
  .column:nth-child(3n + 2) {
    div.content-bloc-univers {
      a {
        span.content-title {
          background-color: @color-second;
        }
      }
    }
  }

  .column:nth-child(3n + 3) {
    div.content-bloc-univers {
      a {
        span.content-title {
          background-color: @color-third;
        }
      }
    }
  }

  div.content-bloc-univers {
    box-shadow: 0px 13px 24px 0px rgba(3, 102, 226, 0.27);
    border-radius: 118px 118px 0 0;
    a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      border-radius: 118px 118px 0 0;
      span.content-img {
        display: block;
        max-width: 218px;
        overflow: hidden;
        height: 380px;
        border-radius: 118px;
        img {
          object-fit: cover;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-radius: 118px;
        }
      }
      span.content-title {
        position: absolute;
        bottom: 0;
        z-index: 1;
        text-align: center;
        display: block;
        margin: auto;
        width: 100%;
        background-color: @color-primary;
        min-height: 100px;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        span.title {
          position: absolute;
          left: 0;
          right: 0;
          margin: auto;
          top: 50%;
          transform: translateY(-50%);
          color: white;
          font-weight: 700;
          text-transform: uppercase;
          font-size: 14px;
        }
      }
      &:hover {
        span.content-title {
          min-height: 150px;
        }
      }
    }
  }
}

// MDP PRESTA //

body:not(.page-content-edit) {
  #containerHeadVoyage {
    > .row {
      display: flex;
    }
    a {
      text-align: center;
      color: white;
    }
  }
}

body:not(.page-content-edit) #containerImgPresta {
  > .ge-content {
    //display: contents;
  }
  @media @mobile {
    margin-bottom: 15px;
  }
  p {
    height: 100%;
    min-height: 380px;
    img {
      object-fit: cover;
      width: 1px !important;
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

#containerHeadVoyage.container-gallery #infoPresta {
  margin-bottom: 20px !important;
}

.page-content-edit {
  #containerHeadVoyage {
    .column#imgBase {
      display: none;
      img {
        display: none;
      }
    }
  }
}

body:not(.page-content-edit) #containerHeadVoyage {
  padding: 40px 40px 0px 40px !important;
  border: 0px solid white;
  position: relative;
  margin-bottom: 50px;
  @media @tablette {
    border-radius: 15px;
    margin-bottom: 20px;
  }
  .title {
    color: white;
    font-weight: 600;
    font-size: 16px;
  }
  p,
  li,
  span {
    margin-bottom: 0px;
    font-size: 21px;
    font-weight: 500;
  }

  .column:not(#imgBase) {
    padding: 0 0px 0 0;
    @media @mobile {
      padding: 0;
    }
  }
  #containerImgPresta {
    > .ge-content {
      overflow: hidden;
      position: relative;
      border-radius: 20px 0px 0 20px;
      width: calc(~"100% - 0px");
      img {
        border-radius: 0;
      }
      @media @mobile {
      }
    }
  }

  #infoPresta {
    padding: 10px 15px 5px 15px !important;
    align-items: center;
    align-content: center;
    border-radius: 0 20px 20px 0;
    background: #0b459c;
    background: linear-gradient(
      180deg,
      rgba(40, 45, 86, 1) 0%,
      rgba(64, 44, 114, 1) 100%
    );
    flex-direction: column;
    .row-container {
      background: transparent !important;
    }
    .row-container-fa-picto {
      padding: 6px 15px;
    }
    > .ge-content {
      h1,
      h2,
      h3 {
        font-size: 25px;
        color: white;
        margin-bottom: 40px;
        margin-top: 15px !important;
        font-weight: 600;
      }
      h4,
      h5,
      h6 {
        font-size: 20px;
        color: white;
        padding-left: 15px;
        margin-bottom: 10px;
        margin-top: 40px !important;
        text-transform: uppercase;
        font-weight: 500;
      }
    }
    p,
    li,
    span {
      color: white;
      font-size: 15px;
      font-weight: 500;
    }

    .containerFApicto {
      font-size: 22px;
      font-weight: 500;
      margin-bottom: 10px;
      i {
        color: white;
        display: block;
        font-size: 22px;
        text-align: center;
      }
    }
    .ligne-detail-voyage {
      margin-bottom: 10px !important;
      p {
        font-size: 14px !important;
      }
    }
    a.boutonHome:link,
    a.boutonHome:visited,
    a.boutonHome:active,
    a.boutonHome,
    a.boutonContenu:link,
    a.boutonContenu:visited,
    a.boutonContenu:active,
    a.boutonContenu,
    a.boutonRond:link,
    a.boutonRond:visited,
    a.boutonRond:active,
    a.boutonRond,
    a.boutonRect:link,
    a.boutonRect:visited,
    a.boutonRect:active,
    a.boutonRect,
    a.boutonDegrade:link,
    a.boutonDegrade:visited,
    a.boutonDegrade:active,
    a.boutonDegrade {
      color: #ffffff;
      background: @gradient-third;
      border: 0;
      padding: 10px 40px;
      margin-top: 15px;
      font-weight: 700 !important;
      &:hover {
        background: @gradient-third-hover!important;
        color: #ffffff !important;
        // background: @color-second !important;
        // border: none !important;
      }
    }
    p.a-partir-de {
      display: inline-block;
    }
    p.prix {
      font-size: 40px;
      display: inline-block;
    }
    img {
      border-radius: 0;
    }
  }

  #btnInscription {
    .column {
      + .column {
        margin-top: 10px;
      }
    }
    p {
      + p {
        margin-top: 15px;
      }
    }
  }
}

/* GESTION PICTO FONTAWESOME */
.containerFApicto {
  position: relative;
  padding-left: 40px !important;
  padding-bottom: 0px !important;
  i:not(.material-icons) {
    position: absolute;
    width: 25px !important;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.removeI {
  padding-left: 0px !important;
  i {
    display: none;
  }
}

.page-content-edit {
  #containerHeadVoyage {
    h1,
    h2,
    h3 {
      color: black !important;
    }
    h4,
    h5,
    h6 {
      color: black !important;
    }
    #infoPresta {
    }
  }
}

body:not(.page-content-edit) {
  .soon {
    .ge-content {
      &:after {
      }
    }
    a.btnAvantage {
      &.show {
        pointer-events: none;
        filter: brightness(0.5);
      }
    }
    &#imgListing {
      img {
        filter: brightness(0.5);
      }
    }
  }

  .finished {
    a.btnAvantage {
      .containerImg {
        filter: brightness(0.5);
      }
      &.show {
      }
    }
    &.finished-sommaire {
      &:hover {
        .ge-content {
          &:after {
            top: 10px;
          }
        }
      }
    }
    &#imgListing {
      img {
        filter: brightness(0.5);
      }
    }
  }
  .full {
    a.btnAvantage {
      .containerImg {
        filter: brightness(0.5);
      }
      &.show {
      }
    }
    &#imgListing {
      img {
        filter: brightness(0.5);
      }
    }
  }

  .finished:not(#containerListing) {
    .ge-content {
      &:after {
        content: "Terminé";
        position: absolute;
        //text-shadow: 1px 1px 7px rgba(255,255,255,0.4);
        z-index: 99999;
        top: 100px;
        left: 50%;
        width: auto;
        transform: translateX(-50%);
        background: @color-second;
        // box-shadow: 0 0 20px rgba(50,50,50,0.6);
        backdrop-filter: blur(4px);
        border-radius: 40px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        color: white;
        text-transform: uppercase;
        text-align: center;
        padding: 20px 30px;

        .transition(all 0.4s ease);
      }
    }
    div.bloc_partenaire {
      opacity: 1;
      .logo_partenaire,
      .encart_partenaire {
        filter: grayscale(1);
      }
      div.contenu_partenaire {
        a.boutonDegrade,
        a.boutonRect,
        a.boutonContenu,
        a.boutonond,
        a.boutonHome {
        }
      }
    }
    &#slider-sommaire {
      .ge-content {
        &:after {
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .full:not(#containerListing) {
    .ge-content {
      &:after {
        content: "Complet";
        position: absolute;
        //text-shadow: 1px 1px 7px rgba(255,255,255,0.4);
        z-index: 99999;
        top: 100px;
        left: 50%;
        width: auto;
        transform: translateX(-50%);
        background: @color-primary;
        // box-shadow: 0 0 20px rgba(50,50,50,0.6);
        backdrop-filter: blur(4px);
        border-radius: 40px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        color: white;
        text-transform: uppercase;
        text-align: center;
        padding: 20px 30px;

        .transition(all 0.4s ease);
      }
    }
    div.bloc_partenaire {
      opacity: 1;
      .logo_partenaire,
      .encart_partenaire {
        filter: grayscale(1);
      }
      div.contenu_partenaire {
        a.boutonDegrade,
        a.boutonRect,
        a.boutonContenu,
        a.boutonond,
        a.boutonHome {
        }
      }
    }
    &#slider-sommaire {
      .ge-content {
        &:after {
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .soon:not(#containerListing) {
    .ge-content {
      &:after {
        content: "Prochainement";
        position: absolute;
        //text-shadow: 1px 1px 7px rgba(255,255,255,0.4);
        z-index: 99999;
        top: 100px;
        left: 50%;
        width: auto;
        transform: translateX(-50%);
        background: @color-third;
        // box-shadow: 0 0 20px rgba(50,50,50,0.6);
        backdrop-filter: blur(4px);
        border-radius: 40px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        color: @color-primary;
        text-transform: uppercase;
        text-align: center;
        padding: 20px 30px;

        .transition(all 0.4s ease);
      }
    }
    div.bloc_partenaire {
      filter: brightness(0.5);
      pointer-events: none;
      div.contenu_partenaire {
        a.boutonDegrade,
        a.boutonRect,
        a.boutonContenu,
        a.boutonond,
        a.boutonHome {
          pointer-events: none;
        }
      }
    }
    &#slider-sommaire {
      .ge-content {
        &:after {
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

.page-content-edit div.finished {
  margin-top: 22px;
}
.page-content-edit div.finished::before {
  position: absolute;
  top: -28px;
  width: 100%;
  left: 0;
  content: "Terminé";
  background-color: @color-second;
  color: #ffffff;
  box-sizing: border-box;
  padding: 4px 0px 4px 0px;
  margin: 0px 0px 0px 0px;
  text-align: center;
}
.page-content-edit div.full {
  margin-top: 22px;
}
.page-content-edit div.full::before {
  position: absolute;
  top: -28px;
  width: 100%;
  left: 0;
  content: "Complet";
  background-color: @color-primary;
  color: #ffffff;
  box-sizing: border-box;
  padding: 4px 0px 4px 0px;
  margin: 0px 0px 0px 0px;
  text-align: center;
}
.page-content-edit div.soon {
  margin-top: 22px;
}
.page-content-edit div.soon::before {
  position: absolute;
  top: -28px;
  width: 100%;
  left: 0;
  content: "Prochainement";
  background-color: @color-third;
  color: @color-primary;
  box-sizing: border-box;
  padding: 4px 0px 4px 0px;
  margin: 0px 0px 0px 0px;
  text-align: center;
}

// * ------------------------------------------------------------------------------------------------------------------------------- * //
// * --------------------------------------------------- Page partenaire ----------------------------------------------------------- * //
// * ------------------------------------------------------------------------------------------------------------------------------- * //

#flex.row-container > .row {
  display: flex;
  /*justify-content: center;*/
  flex-wrap: wrap;
  > .column {
    @media @mobile {
      max-width: 300px;
      display: inline-flex;
    }
  }
  .ge-content {
    height: 100%;

    .bloc_partenaire {
      height: 100%;
      display: flex;
      flex-direction: column;
      .encart_partenaire {
        order: 1;
      }
      .logo_partenaire {
        order: 2;
      }
      .contenu_partenaire {
        flex: 1;
        order: 3;
      }
    }
  }
}

a.btn_partenaire {
  text-decoration: none;
  * {
    .transition(all 0.4s ease);
  }
  &:hover {
    div.bloc_partenaire {
      div.logo_partenaire {
        // border-color: @color-second;
      }
      div.contenu_partenaire {
        background: @color-second;
      }
    }
  }
}

div.bloc_partenaire {
  display: block;
  height: auto;
  border-radius: 0px;
  width: 100%;
  margin: auto;
  position: relative;
  border: 0px solid white;
  div.logo_partenaire {
    display: block;
    width: 100%;
    border-radius: 30px 30px 0px 0px;
    background-color: #ffffff;
    margin: 0 0 0px 0;
    overflow: hidden;
    padding-bottom: 80%;
    position: relative;
    left: 0%;
    border-bottom: 0px solid #e0e0e0;
    box-shadow: 0px 0px 14px rgba(150, 150, 150, 0);
    img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
      position: absolute;
    }
  }

  div.contenu_partenaire {
    width: 100%;
    display: block;
    border-radius: 0px 0px 0px 0px;
    height: auto;
    text-align: center;
    background-color: @color-second;
    color: #fff;
    position: relative;
    padding-top: 20px;
    padding-bottom: 40px;
    padding: 50px 20px 90px 20px;
    font-size: 13px;
    border: 0px solid #fff;
    h1,
    h2,
    h3 {
      color: white;
      font-size: 20px;
      margin-bottom: 5px;
      text-transform: none !important;
    }
    h4,
    h5,
    h6 {
      color: white;
      font-size: 15px;
      margin-bottom: 5px;
      text-transform: none !important;
    }
    .btn-contain {
      margin-top: 8px;
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
    }

    p {
      margin: 0px;
      font-weight: 400;
    }
    a[class^="bouton"] {
      margin: 0 auto;
      display: block;
    }
    a:not([class^="bouton"]) {
      font-size: 16px;
      color: white !important;
      text-decoration: underline;
      display: block;
    }
  }

  span.encart_partenaire {
    display: block;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: auto;
    padding: 10px 25px;
    border-radius: 10px 10px 0 0;
    position: relative;
    font-weight: 600;
    color: @color-primary;
    background-color: @color-third;
    font-size: 14px;
    z-index: 10;
    top: 0px;
    transform: none;
    left: 50%;
    transform: translateX(-50%);
    min-height: 10px;
    max-width: 100%;
    width: max-content;
  }
}

#accordion {
  padding: 0;
  position: relative;
  top: -15px;
  h3 {
    margin-top: 30px !important;
    margin-bottom: -10px;
  }
  h3 {
    border-top: 2px solid @color-third;
    padding-top: 10px;
    &.lePremier {
      border-top: 0px solid transparent;
    }
  }
  .row .collapse {
    box-shadow: 0px 0px 100px 20px rgba(195, 58, 175, 0.15);
    border-top: 0px solid transparent !important;
  }
  .row .collapsing {
    box-shadow: 0px 0px 100px 20px rgba(195, 58, 175, 0.15);
    border-top: 0px solid transparent !important;
  }
  .row .collapse.in {
    box-shadow: 0px 0px 100px 20px rgba(195, 58, 175, 0.15);
    border-top: 0px solid transparent !important;
  }
}

#headerContenu {
  margin-top: 50px;
  padding-bottom: 140px;
  position: relative;
  background-image: url("@{theme-path}/img/fondHeaderMdp.jpg");
  background-position: center;
  @media @tablette {
    margin-top: 0;
  }
  &::after {
    display: block;
    content: "";
    width: 85px;
    height: 85px;
    position: absolute;
    right: 0;
    top: 0;
    background-image: url("@{theme-path}/img/decoAvantages.png");
  }
  h1 {
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 50px;
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    &::after {
      display: block;
      content: "";
      position: absolute;
      width: 105px;
      height: 22px;
      background-image: url("@{theme-path}/img/decoTitreHeaderContenu.png");
      top: 65px;
    }
  }
  p {
    color: #ffffff;
  }
}

#activationContainer {
  position: relative;
  &::after {
    display: block;
    content: "";
    background-image: url("@{theme-path}/img/decoActivationCompte.png");
    position: absolute;
    bottom: 40px;
    right: -70px;
    width: 197px;
    height: 144px;
    animation: moveLeftRight 4s linear infinite;
  }
}

#containerAccordeons {
  padding-top: 0;
}

#utilisationCC {
  .row-container .ge-content {
    background: @color-third;
    padding: 174px 20px 20px 20px !important;
    text-align: center;
    border-radius: 40px;

    p {
      color: white;
    }
    &:after {
      content: "";
      width: 100px;
      height: 100px;
      position: absolute;
      top: 46px;
      left: 50%;
      transform: translateX(-50%);
      border: 2px solid white;
      border-radius: 100%;
    }
  }
  .column:nth-child(1) {
    .ge-content {
      &:before {
        content: "1";
        position: absolute;
        top: 53px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 60px;
        color: white;
        font-family: @font-family-title;
      }
    }
  }
  .column:nth-child(2) {
    .ge-content {
      &:before {
        content: "2";
        position: absolute;
        top: 53px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 60px;
        color: white;
        font-family: @font-family-title;
      }
    }
  }
  .column:nth-child(3) {
    .ge-content {
      &:before {
        content: "3";
        position: absolute;
        top: 53px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 60px;
        color: white;
        font-family: @font-family-title;
      }
    }
  }
  .column:nth-child(4) {
    .ge-content {
      &:before {
        content: "4";
        position: absolute;
        top: 53px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 60px;
        color: white;
        font-family: @font-family-title;
      }
    }
  }
}

/* -----------------------------------------------------------------------------------*/
/* ------------------------------ bloc chèque cadeaux --------------------------------*/
/* -----------------------------------------------------------------------------------*/

#SectionBlocsChequesCadeaux {
  .row {
    max-width: 90%;
    margin: auto;
    @media @mobile {
      max-width: 100%;
    }
  }
}

#onglets-cheques-cadeaux {
  div.onglet {
    padding: 70px 30px;
    padding-top: 70px;
  }
}

#ContainerBlocChequeCadeau {
  margin-bottom: 27px;
  @media screen and (max-width: 768px) {
    width: 50%;
    padding-top: 0px;
  }
  div.content-bloc-cheque-cadeau {
    background-color: white;
    border: 1px solid #f0f0f0;
    text-align: center;
    height: 329px;
    position: relative;

    div.content-img {
      height: 250px;
      padding-top: 18px;
      img {
        max-width: 165px;
        margin: auto;
        border-radius: 0;
      }
    }

    a.boutonContenu {
      background-color: @color-second;
      border-color: #dcdcdc;
      color: @color-primary;
      padding: 6px 36px;
      padding-top: 5px;
      width: 80%;
      margin-right: 0px;
      @media screen and (max-width: 480px) {
        padding: 3px 14px;
        padding-top: 3px;
        font-size: 14px;
      }
      &:hover {
        background-color: @color-primary;
        color: white;
        border-color: @color-primary;
      }
    }

    &.bloc-picto {
      div.content-picto {
        height: 180px;
        padding-top: 18px;

        img {
          max-width: 80px !important;
          margin-bottom: 13px;
          margin-top: 15px;
          border-radius: 0;
        }

        p.title {
          color: @color-primary;
          font-weight: bold;
          font-size: 18px;
          line-height: 20px;
        }
      }

      a.boutonContenu {
      }
    }
  }
}

.color-primary div.content-toutes-les-enseignes {
  background-color: @color-primary !important;
  a.boutonContenu {
    color: @color-primary !important;
  }
}
.color-second div.content-toutes-les-enseignes {
  background-color: @color-second !important;
  a.boutonContenu {
    color: @color-second !important;
  }
}
.color-third div.content-toutes-les-enseignes {
  background-color: @color-third !important;
  a.boutonContenu {
    color: @color-third !important;
  }
}

div.content-toutes-les-enseignes {
  background-color: @color-primary;
  height: 329px;
  text-align: center;
  padding-top: 70px;

  p {
    color: white;
    font-size: 15px;
    line-height: 20px;
    text-transform: uppercase;
    color: white;
    letter-spacing: 3px;
    font-weight: bold;
    margin-bottom: 71px;
    @media screen and (max-width: 480px) {
      margin-bottom: 49px;
    }
  }

  a.boutonContenu {
    background-color: white;
    border-color: white;
    color: @color-primary!important;
    padding: 6px 36px;
    padding-top: 5px;
    margin-right: 0;
    &:hover {
      background-color: transparent;
      color: white !important;
    }

    @media screen and (max-width: 480px) {
      padding: 3px 14px;
      padding-top: 3px;
      font-size: 14px;
    }
  }
}