@charset "UTF-8";
::-moz-placeholder {
  color: black;
}
::placeholder {
  color: black;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  background: white top center/100% url(../images/bg.png);
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "breeregular", sans-serif;
  font-weight: 400;
}

h1, .h1 {
  font-size: 25px;
  line-height: 1.3;
  margin: 0 0 30px;
}

@media all and (max-width: 991px) {
  h1, .h1 {
    font-size: 20px;
  }
}
h2, .h2 {
  font-size: 60px;
  line-height: 1.2;
  margin: 0 0 30px;
}
h2.border-bottom span, .h2.border-bottom span {
  border-bottom: dashed 2px #000;
}
h2.blanc, .h2.blanc {
  color: white;
}
h2.blanc.border-bottom span, .h2.blanc.border-bottom span {
  border-bottom-color: white;
}
h2.bleu-fonce, .h2.bleu-fonce {
  color: #106A7D;
}
h2.bleu-fonce.border-bottom span, .h2.bleu-fonce.border-bottom span {
  border-bottom-color: #106A7D;
}
h2.bleu-clair, .h2.bleu-clair {
  color: #7DBCC0;
}
h2.bleu-clair.border-bottom span, .h2.bleu-clair.border-bottom span {
  border-bottom-color: #7DBCC0;
}
h2.vert, .h2.vert {
  color: #B7C300;
}
h2.vert.border-bottom span, .h2.vert.border-bottom span {
  border-bottom-color: #B7C300;
}
h2.vert-fonce, .h2.vert-fonce {
  color: #30A178;
}
h2.vert-fonce.border-bottom span, .h2.vert-fonce.border-bottom span {
  border-bottom-color: #30A178;
}
h2 span, .h2 span {
  display: inline-block;
}

@media all and (max-width: 1199px) {
  h2, .h2 {
    font-size: 50px;
  }
}
@media all and (max-width: 991px) {
  h2, .h2 {
    font-size: 40px;
  }
}
@media all and (max-width: 767px) {
  h2, .h2 {
    font-size: 26px;
  }
}
h3, .h3 {
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 30px;
}

@media all and (max-width: 767px) {
  h3, .h3 {
    font-size: 22px;
  }
}
a {
  color: #000;
  text-decoration: none;
  transition: color 0.25s ease, background 0.25s ease;
}

p {
  margin: 0 0 30px;
}
p strong {
  font-weight: 400;
}

table td.important {
  background: #D5EBE6;
}
table td.important p {
  padding: 15px 15px 0;
  margin: 0;
}

form {
  /* la zone de déplacement */
  /* le curseur */
}
form.inline {
  display: flex;
}
form.inline .form-group {
  display: flex;
  margin: 0;
}
form input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  position: relative;
}
form input[type=range]:focus {
  outline: none;
}
form input[type=range]:before, form input[type=range]:after {
  position: absolute;
  font-family: "breeregular", sans-serif;
  bottom: -22px;
  color: white;
}
form input[type=range]:before {
  content: "0 km";
  left: 0;
}
form input[type=range]:after {
  content: "100 km";
  right: 0;
}
form input[type=range]::-webkit-slider-runnable-track {
  background: white;
  height: 3px;
  border: 0;
  border-radius: 0;
}
form input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: white;
  position: relative;
  top: -6px;
  width: 16px;
  height: 16px;
  border-radius: 16px;
}
form input[type=checkbox], form input[type=radio] {
  display: none;
  position: relative;
}
form input[type=checkbox]:checked + label:after, form input[type=radio]:checked + label:after {
  opacity: 1;
}
form input[type=checkbox] + label, form input[type=radio] + label {
  position: relative;
  padding: 0 0 0 30px;
  line-height: 1.3;
  color: white;
  display: inline-block;
}
form input[type=checkbox] + label:before, form input[type=radio] + label:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: white;
  border: solid 1px rgba(0, 0, 0, 0.1);
}
form input[type=checkbox] + label:after, form input[type=radio] + label:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  padding: 4px 2px;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease;
}
form input[type=checkbox].rounded + label:before, form input[type=radio].rounded + label:before {
  border-radius: 20px;
}
form button {
  background: white;
  text-align: center;
  padding: 8px 35px;
  font-family: "breeregular", sans-serif;
  color: #106A7D;
  font-size: 14px;
  text-transform: uppercase;
  border: 0;
  border-radius: 6px;
  transition: color 0.25s ease, background 0.25s ease;
}
form button:hover {
  background: #106A7D;
  color: white;
}
form .label {
  margin: 0 0 5px;
  color: white;
}
form .form-group {
  margin: 0 0 10px;
}
form .form-group.inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
form .form-group.inline span {
  margin: 0 15px 0 0;
  line-height: 1;
}
form .form-group.inline .selects {
  display: flex;
  margin: 0 -8px;
  width: 100%;
}
form .form-group.inline .selects select {
  margin: 0 8px;
  width: 33.3333333333%;
}
form .form-group.autocomplete {
  position: relative;
}
form .form-group.autocomplete ::-moz-placeholder {
  color: white;
}
form .form-group.autocomplete ::placeholder {
  color: white;
}
form .form-group.autocomplete ul {
  position: absolute;
  z-index: 2;
  top: 42px;
  left: 0;
  right: 0;
  background: white;
}
form .form-group.autocomplete ul li {
  padding: 5px 10px;
  list-style: none;
  cursor: pointer;
}
form .form-group.autocomplete ul li:hover {
  color: #F7D2C2;
}
form .form-group.autocomplete ul li:first-child {
  padding-top: 10px;
}
form .form-group.autocomplete ul li:last-child {
  padding-bottom: 10px;
}
form .form-control {
  width: 100%;
  border-radius: 6px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  text-transform: uppercase;
  font-family: "Roboto Condensed", sans-serif;
  transition: border 0.25s ease;
}
form .form-control:focus {
  outline: 0;
  border-color: #106A7D;
}
form .range {
  position: relative;
  width: 100%;
}
form .range span {
  position: absolute;
  bottom: -14px;
  width: 50px;
  left: calc(50% - 25px);
  font-size: 13px;
  text-align: center;
  color: white;
}
form .select {
  position: relative;
}
form .select:before {
  content: "";
  position: absolute;
  top: 12px;
  right: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  padding: 3px;
}
form .select select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding: 0 45px 0 15px;
}

header {
  position: relative;
  z-index: 3;
  background: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
header .header {
  display: flex;
  align-items: center;
  padding: 45px 0;
}
header .header h1, header .header .h1 {
  text-transform: uppercase;
  height: 100%;
  margin: 0;
}
header .header h1 span, header .header .h1 span {
  color: #7DBCC0;
}
header .header .logo {
  margin: 0 30px 0 0;
  padding: 0 30px 0 0;
  height: 100%;
  border-right: solid 1px #000;
}
header .header .baseline {
  text-transform: uppercase;
  margin: 0 30px 0 0;
  padding: 0 30px 0 0;
  height: 100%;
  font-family: "breeregular", sans-serif;
  line-height: 1.3;
  border-right: solid 1px #000;
}
header .navigation {
  position: absolute;
  right: 15px;
  bottom: 0;
}
header .navigation .burger {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "breeregular", sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease;
}
header .navigation .burger:hover, header .navigation .burger.on {
  color: #106A7D;
}
header .navigation .burger:hover i, header .navigation .burger.on i {
  background: #106A7D;
}
header .navigation .burger i {
  width: 56px;
  height: 56px;
  background: #7DBCC0;
  display: inline-block;
  margin: 0 0 0 15px;
  transition: background 0.25s ease;
}
header .navigation .burger i img {
  margin: 15px;
}

@media all and (max-width: 991px) {
  header .header .baseline {
    font-size: 14px;
  }
}
@media all and (max-width: 767px) {
  header .header {
    flex-direction: column;
    align-items: flex-start;
  }
  header .header .logo {
    margin: 0 0 15px 0;
    padding: 0 0 0 15px;
    border-right: none;
    border-left: solid 1px #000;
  }
  header .header .baseline {
    margin: 0 0 15px 0;
    padding: 0 0 0 15px;
    border-right: none;
    border-left: solid 1px #000;
  }
}
footer {
  background: #B7C300;
  color: white;
  padding: 45px 0;
  font-family: "breeregular", sans-serif;
  font-size: 14px;
  line-height: 1.2;
}
footer p {
  margin: 0 0 15px;
}
footer p a {
  color: white;
}
footer p a:hover {
  color: #106A7D;
}
footer strong {
  font-family: "breebold", sans-serif;
}
footer ul {
  display: flex;
  justify-content: center;
}
footer ul li {
  list-style: none;
  margin: 0 5px;
}
footer ul li a {
  font-size: 20px;
  color: white;
  display: block;
  width: 38px;
  height: 38px;
  line-height: 34px;
  border: solid 2px white;
  border-radius: 38px;
  text-align: center;
  transition: color 0.25s ease, border 0.25s ease;
}
footer ul li a:hover {
  color: #106A7D;
  border-color: #106A7D;
}
footer ul li a i {
  position: relative;
  top: 2px;
}
footer .mentions {
  margin: 60px 0 0 0;
}
footer .pitch {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  margin: 0 0 30px;
}
footer .pitch p {
  margin: 0;
}
footer .pitch p a {
  color: #106A7D;
  font-weight: 400;
  text-decoration: underline;
}
footer .pitch p a:hover {
  color: white;
}
footer form .form-group label {
  font-size: 11px;
}
footer form .form-group label a {
  color: white;
  text-decoration: underline;
}
footer form .form-group ::-moz-placeholder {
  color: #B7C300;
}
footer form .form-group ::placeholder {
  color: #B7C300;
}

@media (max-width: 767px) {
  footer .mentions {
    margin: 30px 0 30px;
  }
}
/* CLASSES */
.croix {
  position: absolute;
  top: 45px;
  right: 60px;
  width: 25px;
  height: 25px;
  background: none;
  border: none;
  cursor: pointer;
}
.croix:after, .croix:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: white;
  transition: background 0.25s ease;
}
.croix:after {
  transform: rotate(-45deg);
}
.croix:before {
  transform: rotate(45deg);
}
.croix:hover:after, .croix:hover:before {
  background: #106A7D;
}

/* BOOTSTRAP */
.container-fluid {
  padding: 0;
}
.container-fluid > .row {
  margin: 0;
}
.container-fluid > .row > [class^=col] {
  padding: 0;
}

/* GRID FLUID / FIXE */
.grid-6 {
  width: 555px;
}
.grid-6.text {
  padding: 0 30px;
}

@media all and (max-width: 1199px) {
  .grid-6 {
    width: 480px;
  }
}
@media all and (max-width: 991px) {
  .grid-6 {
    width: 360px;
  }
}
@media all and (max-width: 767px) {
  .grid-6 {
    width: 100%;
  }
}
/* TEXTE */
.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
}

/* DISPLAY */
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* IMAGES */
.image img {
  width: 100%;
  height: auto;
  display: block;
}
.image.carte {
  height: 100%;
}

@media all and (max-width: 991px) {
  .image.carte {
    height: 500px;
  }
}
/* BOUTON */
.btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  padding: 8px 20px;
  background: #F7D2C2;
  color: #106A7D;
  text-transform: uppercase;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 400;
  transition: color 0.25s ease, background 0.25s ease;
}
.btn:hover {
  background: #106A7D;
  color: white;
}

.btn-plus {
  color: #000;
  text-decoration: none;
  font-weight: 400;
  padding: 0 20px 0 0;
  position: relative;
  transition: color 0.25s ease;
}
.btn-plus:before {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  width: 14px;
  height: 14px;
  background: url(../images/savoir-plus-bleu.svg);
  transition: background 0.25s ease;
}
.btn-plus.bleu-clair {
  color: #7DBCC0;
}
.btn-plus.bleu-clair:before {
  background: url(../images/savoir-plus-bleu-clair.svg);
}
.btn-plus.bleu-clair:hover {
  color: #106A7D;
}
.btn-plus.bleu-clair:hover:before {
  background: url(../images/savoir-plus-bleu.svg);
}
.btn-plus.vert-fonce {
  color: #30A178;
}
.btn-plus.vert-fonce:before {
  background: url(../images/savoir-plus-vert-fonce.svg);
}
.btn-plus.vert-fonce:hover {
  color: #B7C300;
}
.btn-plus.vert-fonce:hover:before {
  background: url(../images/savoir-plus-vert-clair.svg);
}
.btn-plus.bleu-fonce {
  color: #106A7D;
}
.btn-plus.bleu-fonce:hover {
  color: #7DBCC0;
}
.btn-plus.bleu-fonce:hover:before {
  background: url(../images/savoir-plus-bleu-clair.svg);
}

/* SLICK */
.slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  display: flex;
  justify-content: center;
}
.slick-dots li {
  list-style: none;
  margin: 0 2px;
}
.slick-dots li.slick-active button {
  background: #F7D2C2;
}
.slick-dots li button {
  background: white;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  border: 0;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  color: transparent;
  transition: background 0.25s ease;
}
.slick-dots li button:hover {
  background: #F7D2C2;
}
.slick-dots li button:focus, .slick-dots li button:active {
  outline: 0;
}

.slick-prev, .slick-next {
  position: absolute;
  z-index: 3;
  top: 35%;
  background: rgba(255, 255, 255, 0.6);
  transition: background 0.5s ease;
  width: 10%;
  height: 30%;
  border: 0;
  color: transparent;
  overflow: hidden;
  padding: 0;
  border-radius: 10px;
}
.slick-prev:before, .slick-next:before {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  border: solid white;
  border-width: 0 3px 3px 0;
  padding: 3px;
  transform: rotate(135deg) scale(1);
  transition: transform 0.5s ease;
}
.slick-prev:focus, .slick-next:focus {
  outline: 0;
}
.slick-prev:hover, .slick-next:hover {
  background: rgba(221, 221, 221, 0.6);
}
.slick-prev:hover:before, .slick-next:hover:before {
  transform: rotate(135deg) scale(1.7);
}

.slick-prev {
  left: 10%;
}
.slick-prev:before {
  left: 15px;
}

.slick-next {
  right: 10%;
}
.slick-next:before {
  right: 15px;
  transform: rotate(-45deg) scale(1);
}
.slick-next:hover:before {
  transform: rotate(-45deg) scale(1.7);
}

/* BANNIERE */
.banniere {
  color: white;
  position: relative;
}
.banniere h2, .banniere .h2 {
  font-size: 32px;
  color: white;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .banniere h2, .banniere .h2 {
    font-size: 22px;
  }
}
.banniere a {
  color: white;
}
.banniere strong {
  font-family: "breebold";
}
.banniere nav {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0%;
  overflow: hidden;
  background: rgba(70, 178, 181, 0.9) no-repeat bottom center/auto 450px url(../images/menu-deroulant.png);
  opacity: 0;
  transition: width 0.25s ease 0.25s, opacity 0.25s ease 0s;
}
.banniere nav.on {
  opacity: 1;
  width: 50%;
  transition: width 0.25s ease 0s, opacity 0.25s ease 0.1s;
}
.banniere nav .menu {
  position: absolute;
  left: 30px;
  top: 30px;
}
.banniere nav .menu li {
  list-style: none;
  position: relative;
}
.banniere nav .menu li.current-menu-item:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  border-bottom: solid 2px #000;
  width: 40px;
}
.banniere nav .menu li a {
  display: block;
  padding: 10px 0;
  font-size: 22px;
  color: #000;
}
.banniere nav .menu li a:hover {
  color: white;
}
@media (max-width: 767px) {
  .banniere nav .menu li a {
    font-size: 18px;
  }
}
.banniere .slider { /* UNIQUEMENT SUR LA HOME */
  position: relative;
  background: linear-gradient(-45deg, #D5EBE6 0%, #106A7D 100%);
}
.banniere .slider:not(.empty):before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -200px;
  left: 5%;
  width: 400px;
  height: 400px;
  background: no-repeat 0 0/400px auto url(../images/banniere-1.png);
}
.banniere .slider:not(.empty):after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 75%;
  width: 200px;
  height: 200px;
  background: no-repeat 0 0/200px auto url(../images/banniere-2.png);
}
.banniere .slider.move {
  text-align: center;
}
.banniere .slider.move h2, .banniere .slider.move .h2 {
  font-size: 60px;
  margin: 0;
  font-weight: 400;
  padding: 160px 0;
  color: white;
  position: relative;
  z-index: 2;
  height: 530px;
}
.banniere .slider.move .slide {
  padding: 0;
}
.banniere .slider.equipe .slide:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: calc(50% - 15px);
  bottom: 0;
  background: no-repeat 20% calc(100% - 150px)/120% auto url(../images/banniere-equipe-1.png);
}
.banniere .slider.equipe .slide h2 {
  margin: 0 0 8px;
}
.banniere .slider.equipe .btn-plus:before {
  background: url(../images/savoir-plus-blanc.svg);
}
@media all and (max-width: 991px) {
  .banniere .slider.equipe .slide:before {
    content: none;
  }
}
@media all and (max-width: 767px) {
  .banniere .slider:not(.empty):before, .banniere .slider:not(.empty):after {
    content: none;
  }
}
.banniere .slide {
  position: relative;
  /*z-index: 1;*/
  padding: 120px 0;
  min-height: 500px;
}
.banniere .slide.annuaire {
  padding: 60px 0;
  min-height: auto;
  background: linear-gradient(-45deg, #F7D2C2 0%, #64B69F 100%);
}
.banniere .slide.annuaire h2 {
  font-family: "Roboto", sans-serif;
  font-size: 80px;
  line-height: 1;
  color: transparent;
  text-align: right;
  -webkit-text-stroke: 2px white;
}
.banniere .slide.annuaire .btn {
  position: relative;
  z-index: 2;
  font-size: 16px;
  background: #106A7D no-repeat 20px 50%/auto 50% url(../images/annuaire-conseillers-blanc.svg);
  max-width: 400px;
  text-transform: none;
  border-radius: 0;
  padding: 15px 60px 15px 80px;
  transition: background 0.25s ease, color 0.25s ease;
}
.banniere .slide.annuaire .btn:hover {
  background: #dceeeb no-repeat 20px 50%/auto 50% url(../images/annuaire-conseillers-bleu.svg);
  color: #106A7D;
}
.banniere .slide.annuaire .btn:hover:after {
  border-color: #106A7D;
}
.banniere .slide.annuaire .btn:after {
  content: "";
  position: absolute;
  top: calc(50% - 16px);
  right: 25px;
  border: solid white;
  border-width: 0 3px 3px 0;
  padding: 16px;
  transform: rotate(-45deg);
  transition: border 0.25s ease;
}
.banniere .slide > .container {
  position: relative;
  z-index: 3;
}
.banniere .slide a {
  position: relative;
  z-index: 2;
}
.banniere .slide a:hover {
  color: #106A7D;
}
.banniere .slide .player {
  color: white;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}
.banniere .slide .player img {
  width: auto;
  height: 80px;
}
.banniere .slide .player a {
  height: 80px;
  display: flex;
  padding: 0 80px 0 15px;
  background: #106A7D;
  align-items: center;
  line-height: 1.2;
  position: relative;
}
.banniere .slide .player a:hover {
  background: #dceeeb;
  color: #106A7D;
}
.banniere .slide .player a:hover:before {
  border-color: #106A7D;
}
.banniere .slide .player a:hover:after {
  border-left-color: #106A7D;
}
.banniere .slide .player a:before {
  content: "";
  position: absolute;
  top: 15px;
  right: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: solid 2px #dceeeb;
}
.banniere .slide .player a:after {
  content: "";
  position: absolute;
  top: 30px;
  right: 25px;
  height: 0;
  width: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #dceeeb;
}
@media all and (max-width: 767px) {
  .banniere .slide.annuaire .flex {
    align-items: flex-start;
    flex-direction: column;
  }
  .banniere .slide.annuaire .flex .text-uppercase {
    text-align: left;
  }
  .banniere .slide.annuaire .btn {
    background-image: none;
    padding: 15px 60px 15px 30px;
  }
  .banniere .slide.annuaire .btn:hover {
    background-image: none;
  }
}
.banniere .over {
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  padding: 90px 0;
}
.banniere .over h2 {
  margin: 0;
}
.banniere .over p {
  margin: 30px 0 0;
  font-size: 18px;
}

@media all and (max-width: 1199px) {
  .banniere .slider.move h2, .banniere .slider.move .h2 {
    font-size: 50px;
  }
  .banniere .slide.annuaire h2 {
    font-size: 60px;
  }
}
@media all and (max-width: 991px) {
  .banniere nav.on {
    width: 100%;
  }
  .banniere .slider.move h2, .banniere .slider.move .h2 {
    font-size: 40px;
  }
  .banniere .slide.annuaire h2 {
    font-size: 50px;
  }
}
@media all and (max-width: 767px) {
  .banniere .slider.move h2, .banniere .slider.move .h2 {
    font-size: 26px;
  }
}
/* ACCROCHE */
.accroche {
  position: relative;
  z-index: 2;
  padding: 120px 0;
  color: white;
  font-family: "breelight", sans-serif;
  font-size: 32px;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
}
.accroche.etude {
  background: linear-gradient(45deg, #64B69F 0%, #F7D2C2 100%);
}
.accroche.formation {
  background: linear-gradient(45deg, #F7D2C2 0%, #106A7D 100%);
}
.accroche:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -200px;
  left: 5%;
  width: 400px;
  height: 400px;
  background: no-repeat 0 0/400px auto url(../images/banniere-1.png);
}
.accroche:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 75%;
  width: 200px;
  height: 200px;
  background: no-repeat 0 0/200px auto url(../images/banniere-2.png);
}
.accroche big {
  font-size: 42px;
}
.accroche strong {
  font-size: 32px;
  font-family: "breebold", sans-serif;
}

@media (max-width: 767px) {
  .accroche {
    font-size: 22px;
    padding: 60px 0;
  }
  .accroche big {
    font-size: 26px;
  }
  .accroche strong {
    font-size: 22px;
  }
}
/* ONGLETS */
.onglets {
  color: white;
  font-family: "breeregular", sans-serif;
  font-size: 28px;
  position: relative;
}
.onglets:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150%;
  background: no-repeat 50% 140%/50% auto url(../images/etude-onglets.png);
}
.onglets p {
  padding: 20px 30px 120px;
  line-height: 1.3;
  cursor: pointer;
}
.onglets .onglet {
  text-align: right;
}
.onglets .onglet p {
  font-size: 28px;
  transition: font-size 0.5s ease;
}
.onglets .onglet:hover p {
  font-size: 36px;
}
.onglets .onglet.on p {
  font-size: 36px;
}
.onglets .onglet.on:before {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  border: solid white;
  border-width: 5px 5px 0 0;
  width: 20px;
  height: 20px;
}
.onglets .onglet.on.architecture-paysage-urbanisme:after, .onglets .onglet.on.patrimoine:after {
  display: block;
}
.onglets .onglet.architecture-patrimoine {
  background: #7DBCC0 no-repeat center center/200% url(../images/equipe-architecture-patrimoine.png);
}
.onglets .onglet.urbanisme {
  background: #106A7D no-repeat center left/200% url(../images/equipe-urbanisme.png);
}
.onglets .onglet.paysage {
  background: #30A178 no-repeat top left/200% url(../images/equipe-paysage.png);
}
.onglets .onglet.en-appui {
  background: #B7C300 no-repeat bottom left/200% url(../images/equipe-en-appui.png);
}
.onglets .onglet.architecture-paysage-urbanisme:after, .onglets .onglet.patrimoine:after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -40px;
  width: 50px;
  height: 50px;
  border-top: 30px solid #000;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  display: none;
}
.onglets .onglet.architecture-paysage-urbanisme {
  background: rgba(16, 106, 125, 0.8);
  text-align: left;
}
.onglets .onglet.architecture-paysage-urbanisme .background:after {
  background: no-repeat center center/cover url(../images/equipe-paysage.png);
}
.onglets .onglet.architecture-paysage-urbanisme .background:before {
  background: no-repeat center center/cover url(../images/equipe-urbanisme.png);
}
.onglets .onglet.architecture-paysage-urbanisme:before {
  left: 15px;
  border: solid white;
  border-width: 5px 0 0 5px;
}
.onglets .onglet.architecture-paysage-urbanisme:after {
  left: 20%;
  border-top-color: #7DBCC0;
}
.onglets .onglet.patrimoine {
  background: rgba(125, 188, 192, 0.8);
}
.onglets .onglet.patrimoine:after {
  right: 20%;
  border-top-color: #106A7D;
}
.onglets .onglet.patrimoine .background:after {
  background: no-repeat center center/cover url(../images/equipe-architecture-patrimoine.png);
}
.onglets .onglet.architecture-paysage-urbanisme, .onglets .onglet.patrimoine {
  position: relative;
}
.onglets .onglet.architecture-paysage-urbanisme p span, .onglets .onglet.patrimoine p span {
  position: relative;
  z-index: 2;
}
.onglets .onglet.architecture-paysage-urbanisme .background, .onglets .onglet.patrimoine .background {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.onglets .onglet.architecture-paysage-urbanisme .background:before, .onglets .onglet.architecture-paysage-urbanisme .background:after, .onglets .onglet.patrimoine .background:before, .onglets .onglet.patrimoine .background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.etudes .onglets:before {
  content: none;
}

@media all and (max-width: 1199px) {
  .onglets {
    font-size: 26px;
  }
  .onglets .onglet.on {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .onglets p {
    padding-bottom: 30px;
  }
  .onglets .onglet.on p, .onglets .onglet:hover p {
    font-size: 26px;
  }
  .onglets .onglet p {
    font-size: 22px;
  }
}
.content:not(.mce-content-body) {
  display: none;
}
.content:not(.mce-content-body).on {
  display: block;
}

.details > .detail {
  padding: 60px 0;
  display: none;
}
.details > .detail.on {
  display: block;
}
.details > .detail h2 span {
  position: relative;
}
.details > .detail h2 span:before {
  content: "";
  position: absolute;
  top: -10px;
  right: -30px;
  border-top: solid 5px white;
  border-right: solid 5px white;
  width: 38px;
  height: 38px;
}
.details > .detail h2 span:after {
  content: "";
  position: absolute;
  top: 0px;
  right: -20px;
  width: 15px;
  height: 15px;
  background: no-repeat top left/15px url(../images/active.svg);
}

/* RESULTATS SOUS FORME ACCORDEON */
.resultats {
  display: none;
  padding: 0 0 60px;
}
.resultats.on {
  display: block;
}
.resultats.in-situ .mois.replay span:hover {
  color: #106A7D;
  background: white;
}
.resultats.in-situ .mois.replay span:hover:before {
  color: #106A7D;
}
.resultats.in-situ .mois span {
  border-color: #106A7D;
}
.resultats.in-situ .mois span:hover {
  background: #106A7D;
}
.resultats.sur-le-web .mois.replay span:hover {
  color: #106A7D;
  background: white;
}
.resultats.sur-le-web .mois.replay span:hover:before {
  color: #106A7D;
}
.resultats.sur-le-web .mois span {
  border-color: #106A7D;
}
.resultats.sur-le-web .mois span:hover {
  background: #106A7D;
}
.resultats .mois, .resultats .role {
  background: white;
  margin: 0 0 10px;
}
.resultats .mois.on span, .resultats .role.on span {
  background: #106A7D;
  color: white;
}
.resultats .mois.on span:before, .resultats .role.on span:before {
  content: "\f068";
}
.resultats .mois.on .liste, .resultats .role.on .liste {
  display: block;
}
.resultats .mois.replay, .resultats .role.replay {
  background: #106A7D;
  color: white;
}
.resultats .mois.replay.on, .resultats .role.replay.on {
  background: white;
  color: #106A7D;
}
.resultats .mois.replay span, .resultats .role.replay span {
  color: white;
}
.resultats .mois.replay span:before, .resultats .role.replay span:before {
  color: white;
}
.resultats .mois span, .resultats .role span {
  display: block;
  border: solid 2px #106A7D;
  padding: 8px 40px;
  text-transform: uppercase;
  color: #106A7D;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease, background 0.25s ease;
}
.resultats .mois span:hover, .resultats .role span:hover {
  background: #106A7D;
  color: white;
}
.resultats .mois span:before, .resultats .role span:before {
  content: "\f067";
  font-family: "Font Awesome 5 Pro";
  font-size: 22px;
  position: absolute;
  top: 8px;
  left: 15px;
}
.resultats .mois .h2, .resultats .role .h2 {
  font-size: 22px;
  text-transform: uppercase;
  color: #106A7D;
  margin: 0 0 15px;
  font-weight: 700;
}
.resultats .mois .liste, .resultats .role .liste {
  background: rgba(125, 188, 192, 0.2);
  padding: 15px 15px 0;
  display: none;
}
.resultats .mois .liste .formation, .resultats .mois .liste .elu, .resultats .role .liste .formation, .resultats .role .liste .elu {
  display: flex;
  margin: 0 0 15px;
}
.resultats .mois .liste .formation .image, .resultats .mois .liste .elu .image, .resultats .role .liste .formation .image, .resultats .role .liste .elu .image {
  width: 150px;
}
.resultats .mois .liste .formation .image.video, .resultats .mois .liste .elu .image.video, .resultats .role .liste .formation .image.video, .resultats .role .liste .elu .image.video {
  position: relative;
}
.resultats .mois .liste .formation .image.video:before, .resultats .mois .liste .elu .image.video:before, .resultats .role .liste .formation .image.video:before, .resultats .role .liste .elu .image.video:before {
  content: "";
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 80px;
  border: solid 2px white;
}
.resultats .mois .liste .formation .image.video:after, .resultats .mois .liste .elu .image.video:after, .resultats .role .liste .formation .image.video:after, .resultats .role .liste .elu .image.video:after {
  content: "";
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 12px);
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid white;
}
.resultats .mois .liste .formation .image img, .resultats .mois .liste .elu .image img, .resultats .role .liste .formation .image img, .resultats .role .liste .elu .image img {
  /*height: 150px;*/
}
.resultats .mois .liste .formation .detail, .resultats .mois .liste .elu .detail, .resultats .role .liste .formation .detail, .resultats .role .liste .elu .detail {
  margin: 0 0 0 15px;
  width: calc(100% - 150px);
}
.resultats .mois .liste .formation .detail h3, .resultats .mois .liste .formation .detail .h3, .resultats .mois .liste .elu .detail h3, .resultats .mois .liste .elu .detail .h3, .resultats .role .liste .formation .detail h3, .resultats .role .liste .formation .detail .h3, .resultats .role .liste .elu .detail h3, .resultats .role .liste .elu .detail .h3 {
  font-size: 20px;
  text-transform: uppercase;
  font-family: "Roboto Condensed", sans-serif;
  color: #000;
  margin: 0;
}
.resultats .mois .liste .formation .detail p, .resultats .mois .liste .elu .detail p, .resultats .role .liste .formation .detail p, .resultats .role .liste .elu .detail p {
  margin: 0;
}
.resultats .mois .liste .formation .detail p.utile, .resultats .mois .liste .elu .detail p.utile, .resultats .role .liste .formation .detail p.utile, .resultats .role .liste .elu .detail p.utile {
  color: #106A7D;
}
.resultats .mois .liste .formation .detail p.utile a, .resultats .mois .liste .elu .detail p.utile a, .resultats .role .liste .formation .detail p.utile a, .resultats .role .liste .elu .detail p.utile a {
  color: #106A7D;
}
.resultats .mois .liste .formation .detail .btn, .resultats .mois .liste .elu .detail .btn, .resultats .role .liste .formation .detail .btn, .resultats .role .liste .elu .detail .btn {
  font-size: 16px;
  text-transform: none;
  line-height: 1.2;
  padding: 8px;
  display: block;
  margin: 5px 0;
}
.resultats .mois .liste .formation .detail .download, .resultats .mois .liste .elu .detail .download, .resultats .role .liste .formation .detail .download, .resultats .role .liste .elu .detail .download {
  font-size: 18px;
  font-weight: 700;
  color: #106A7D;
}
.resultats .mois .liste .formation .detail .download:hover, .resultats .mois .liste .elu .detail .download:hover, .resultats .role .liste .formation .detail .download:hover, .resultats .role .liste .elu .detail .download:hover {
  text-decoration: underline;
}
.resultats .mois .liste .formation .detail .date, .resultats .mois .liste .elu .detail .date, .resultats .role .liste .formation .detail .date, .resultats .role .liste .elu .detail .date {
  color: #106A7D;
  font-weight: 400;
}

@media (max-width: 767px) {
  .resultats .mois span {
    font-size: 18px;
  }
  .resultats .mois span:before {
    top: 6px;
  }
  .resultats .mois .liste .formation {
    flex-wrap: wrap;
  }
  .resultats .mois .liste .formation .image {
    margin: 0 0 15px;
  }
  .resultats .mois .liste .formation .detail {
    width: 100%;
    margin: 0;
  }
}
/*************/
/* ACCUEIL */
/*************/
.vision {
  height: 600px;
  position: relative;
  background: no-repeat bottom center/cover url(../images/accueil.jpg);
}
.vision .over {
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  padding: 45px 0;
}
.vision .over h3, .vision .over .h3 {
  text-transform: uppercase;
  margin: 0 0 15px;
}
.vision .over p {
  font-size: 18px;
  margin: 0;
}
.vision .over p:last-child {
  font-family: "breeregular", sans-serif;
  font-size: 18px;
}

.qui-sommes-nous {
  background: #46B2B5;
}

.acces.align-right {
  display: flex;
  justify-content: flex-end;
}
.acces.acces-equipe {
  background: white no-repeat center center/auto url(../images/bg-stripe.png);
}
.acces.acces-equipe .grid-6 {
  position: relative;
  padding: 90px 15px 230px 60px;
}
.acces.acces-equipe .grid-6:before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -120px;
  left: 30px;
  right: 0;
  height: 350px;
  background: no-repeat 0px 0px/auto 350px url(../images/decouvrez-equipe-1.png);
}
.acces.acces-etude {
  background: white;
}
.acces.acces-etude .grid-6 {
  position: relative;
  padding: 300px 90px 60px 60px;
}
.acces.acces-etude .grid-6:before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  right: 0;
  bottom: 0;
  background: no-repeat 0 50%/auto 200% url(../images/etude-1.png); /* TODO */
}
.acces.acces-etude .grid-6:after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  height: 260px;
  background: no-repeat 50% 0px/auto 260px url(../images/etude-2.png);
}
.acces.acces-elu {
  background: #46B2B5;
  color: white;
}
.acces.acces-elu button {
  background: white;
  color: black;
  border-radius: 4px;
  padding: 8px 30px;
  border: solid 1px #30A178;
}
.acces.acces-elu .grid-6 {
  position: relative;
  padding: 240px 15px 60px 60px;
}
.acces.acces-elu .grid-6:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  height: 200px;
  background: no-repeat 50% 0px/auto 200px url(../images/elu-1.png);
}
.acces.acces-elu .grid-6:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 730px;
  height: 730px;
  background: no-repeat center center/cover url(../images/elu-2.png);
}
.acces.acces-elu .grid-6 h2 {
  border-bottom-color: white;
}
.acces.acces-elu .grid-6 .btn-plus {
  color: white;
}
.acces.acces-formations {
  color: white;
}
.acces.acces-formations .grid-6 {
  position: relative;
  padding: 120px 60px 330px 15px;
}
.acces.acces-formations .grid-6:before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  right: 0;
  bottom: 0;
  background: no-repeat 0 0/130% auto url(../images/formations-1.png); /* TODO */
}
.acces.acces-formations .grid-6:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: no-repeat 50% 100%/150px url(../images/formations-2.png);
}
.acces.acces-formations .grid-6 h2 {
  border-bottom-color: white;
}
.acces.acces-formations .grid-6 .btn-plus {
  color: white;
}
.acces.acces-formations .grid-6 .btn-plus:before {
  background: url(../images/savoir-plus-blanc.svg);
}
.acces.acces-album {
  background: white;
}
.acces.acces-album .grid-6 {
  position: relative;
  padding: 60px 15px 200px 60px;
}
.acces.acces-album .grid-6:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: no-repeat 0 0/auto 100% url(../images/album-1.png);
}
.acces.acces-album .grid-6:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: no-repeat 50% 100%/auto 200px url(../images/album-2.png);
}
.acces.acces-album .grid-6 h2 {
  border-bottom-color: #30A178;
}
.acces h2 {
  padding: 0 0 15px;
  margin: 0 0 20px;
  line-height: 1;
  border-bottom: dashed 2px #000;
  position: relative;
  z-index: 1;
}
.acces h2.bleu-clair {
  border-bottom-color: #7DBCC0;
}
.acces h2.vert-fonce {
  border-bottom-color: #30A178;
}
.acces p {
  position: relative;
  z-index: 1;
}
.acces iframe {
  width: 100%;
  height: 315px;
}

@media all and (max-width: 767px) {
  .acces.acces-equipe .grid-6 {
    padding: 90px 15px 230px 15px;
  }
  .acces.acces-etude .grid-6 {
    padding: 300px 90px 60px 15px;
  }
  .acces.acces-elu .grid-6 {
    padding: 240px 15px 60px 15px;
  }
  .acces.acces-album .grid-6 {
    padding: 60px 15px 200px 15px;
  }
}
/*************/
/* EQUIPE */
/*************/
.details .detail.architecture-patrimoine {
  background: #7DBCC0 center/100% url(../images/equipe-architecture-patrimoine.png);
  color: white;
}
.details .detail.architecture-patrimoine h3 {
  color: #7DBCC0;
  background: white;
  display: inline-block;
  padding: 8px 15px;
}
.details .detail.architecture-patrimoine .profil .nom {
  background: #106A7D;
}
.details .detail.en-appui {
  background: #B7C300 center/100% url(../images/equipe-en-appui.png);
  color: white;
}
.details .detail.en-appui h3 {
  color: #B7C300;
  background: white;
  display: inline-block;
  padding: 8px 15px;
}
.details .detail.en-appui .profil .nom {
  background: #B7C300;
}
.details .detail.paysage {
  background: #30A178 center/100% url(../images/equipe-paysage.png);
  color: white;
}
.details .detail.paysage h3 {
  color: #30A178;
  background: white;
  display: inline-block;
  padding: 8px 15px;
}
.details .detail.paysage .profil .nom {
  background: #30A178;
}
.details .detail.urbanisme {
  background: #106A7D center/100% url(../images/equipe-urbanisme.png);
  color: white;
}
.details .detail.urbanisme h3 {
  color: #106A7D;
  background: white;
  display: inline-block;
  padding: 8px 15px;
}
.details .detail.urbanisme .profil .nom {
  background: #30A178;
}

@media all and (max-width: 767px) {
  .details .detail.architecture-patrimoine h3 {
    font-size: 22px;
  }
  .details .detail.en-appui h3 {
    font-size: 22px;
  }
  .details .detail.paysage h3 {
    font-size: 22px;
  }
  .details .detail.urbanisme h3 {
    font-size: 22px;
  }
}
.popin {
  display: none;
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.popin.on {
  display: block;
}
.popin .video {
  padding: 0 0 56.25%;
  height: 0;
  overflow: hidden;
  position: relative;
  top: 20%;
}
.popin .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*************/
/* EQUIPE SLIDER AJOUT */
/*************/
.w-slider {
  position: relative;
  width: 100%;
}
.w-slider .button-nav {
  margin: 0;
}
.w-slider .image img {
  display: block;
  width: 100%;
  height: auto;
}
.w-slider h2, .w-slider .h2 {
  font-family: "breeregular";
  font-size: 60px;
  color: #106A7D;
  text-align: center;
  margin: 0 0 45px;
  position: relative;
}
.w-slider h2:after, .w-slider .h2:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 415px;
  border-bottom: dashed 2px #106A7D;
}
@media all and (max-width: 991px) {
  .w-slider h2, .w-slider .h2 {
    font-size: 40px;
  }
}
.w-slider h3, .w-slider .h3 {
  font-family: "breeregular";
  font-size: 20px;
  line-height: 1;
  color: #106A7D;
}
.w-slider h4, .w-slider .h4 {
  margin: 0 0 15px;
  font-weight: 700;
  color: #106A7D;
}
.w-slider .slider:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: no-repeat top center/50% url(../images/background-equipe.png);
  z-index: -1;
  opacity: 0.2;
}
.w-slider .accordeons {
  display: none;
}
.w-slider .details h3, .w-slider .details .h3 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 20px;
  line-height: 1;
  color: #30A178;
}
.w-slider .details ul li {
  position: relative;
  padding-left: 15px;
}
.w-slider .details ul li:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #000;
}
.w-slider .fiche-equipe {
  margin: 30px 0;
}
.w-slider .fiche-equipe p {
  margin: 0;
}
.w-slider .fiche-equipe h4, .w-slider .fiche-equipe .h4 {
  margin: 5px 0;
}
.w-slider .fiche-equipe strong {
  color: #30A178;
}
.w-slider .btn-prev, .w-slider .btn-next {
  position: absolute;
  top: 0;
  background: rgba(0, 195, 165, 0.2);
  border: none;
  width: 120px;
  height: 100%;
  z-index: 2;
  cursor: pointer;
  transition: background 0.5s ease;
  transform: rotate(180deg);
}
.w-slider .btn-prev span, .w-slider .btn-next span {
  writing-mode: vertical-lr;
  position: relative;
}
.w-slider .btn-prev span:after, .w-slider .btn-next span:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
  border: solid #30A178;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 9px;
  transform: scale(1);
  transition: transform 0.5s ease;
}
.w-slider .btn-prev:hover, .w-slider .btn-next:hover {
  background: rgba(0, 195, 165, 0.4);
}
.w-slider .btn-prev {
  left: 0;
  transform: rotate(180deg);
}
.w-slider .btn-prev span:after {
  right: -25px;
  transform: rotate(-45deg);
}
.w-slider .btn-prev:hover span:after {
  transform: rotate(-45deg) scale(1.5);
}
.w-slider .btn-next {
  right: 0;
}
.w-slider .btn-next span:after {
  left: -25px;
  transform: rotate(135deg);
}
.w-slider .btn-next:hover span:after {
  transform: rotate(135deg) scale(1.5);
}
.w-slider .slick-dots {
  position: relative;
  margin: 0 0 45px;
  display: flex;
  justify-content: center;
}
.w-slider .slick-dots li:not(:last-child) {
  margin: 0 5px 0 0;
}
.w-slider .slick-dots li button {
  background: #106A7D;
  border: none;
  text-indent: 9999px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
}
.w-slider .slick-dots li.slick-active button {
  opacity: 1;
}

@media all and (max-width: 1199px) {
  .w-slider {
    /*
    .slick-arrow {
    	display: none;
    }
    */
  }
  .w-slider .btn-prev, .w-slider .btn-next {
    display: none;
  }
}
@media all and (max-width: 991px) {
  .w-slider .slider:after {
    background: no-repeat top center/cover url(../images/background.png);
    opacity: 0.1;
  }
  .w-slider .slider .fiche-equipe .image {
    margin: 0 0 30px;
  }
}
@media all and (max-width: 767px) {
  .w-slider .slider {
    display: none;
  }
  .w-slider .accordeons {
    display: block;
    margin: 30px 0;
  }
  .w-slider .accordeons .accordeon:not(:last-child) {
    margin: 0 0 15px 0;
  }
  .w-slider .accordeons .accordeon .btn-accordeon {
    padding: 8px 0;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid #707070;
  }
  .w-slider .accordeons .accordeon .btn-accordeon .h2 {
    font-size: 22px;
  }
  .w-slider .accordeons .accordeon .btn-accordeon .h2:after {
    content: none;
  }
  .w-slider .accordeons .accordeon .details {
    display: none;
  }
  .w-slider .accordeons .accordeon.on .details {
    display: block;
    margin: 15px 0 0;
  }
  .w-slider .accordeons .accordeon.on .details .image {
    margin: 0 0 15px;
  }
}
.profils {
  margin-bottom: 50px;
}
.profils .slick-dots {
  bottom: -50px;
  left: 20%;
  right: 20%;
  display: flex;
  justify-content: space-between;
}
.profils .slick-dots:before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  border-top: solid 1px white;
}
.profils .slick-dots li {
  width: 100%;
  margin: 0;
  opacity: 0;
}
.profils .slick-dots li.slick-active {
  opacity: 1;
}
.profils .slick-dots li.slick-active button {
  background: white;
}
.profils .slick-dots li button {
  border-radius: 0;
  margin: 0;
  width: 100%;
}
.profils .slick-slide:focus {
  outline: 0;
}

@media all and (max-width: 767px) {
  .profils .slider .slick-prev, .profils .slider .slick-next {
    display: none !important;
  }
}
.membre {
  text-align: left;
  width: 30%;
  margin: auto;
  color: #000;
  position: relative;
}
.membre:before, .membre:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 12%;
  width: 30%;
  bottom: 12%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.membre:before {
  left: -30%;
  border-radius: 10px 0 0 10px;
}
.membre:after {
  right: -30%;
  border-radius: 0 10px 10px 0;
}
.membre > div {
  position: relative;
}
.membre > div:before, .membre > div:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 24%;
  width: 50%;
  bottom: 24%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.membre > div:before {
  left: -60%;
}
.membre > div:after {
  right: -60%;
}
.membre .image {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.membre .nom {
  padding: 14px 30px;
  font-family: "breeregular", sans-serif;
  font-size: 24px;
  color: white;
}
.membre .profil {
  padding: 15px 30px 30px;
  background: white;
  border-radius: 0 0 10px 10px;
}
.membre .profil p {
  margin: 0 0 15px;
}
.membre .profil .poste {
  text-transform: uppercase;
  color: #106A7D;
  margin: 0 0 15px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}
.membre .profil .hobbies {
  color: #106A7D;
  font-size: 18px;
  font-family: "breeregular", sans-serif;
}

@media all and (max-width: 1199px) {
  .membre {
    width: 40%;
  }
  .membre:before, .membre:after {
    width: 20%;
  }
  .membre:before {
    left: -20%;
    border-radius: 10px 0 0 10px;
  }
  .membre:after {
    right: -20%;
    border-radius: 0 10px 10px 0;
  }
  .membre > div:before, .membre > div:after {
    width: 25%;
  }
  .membre > div:before {
    left: -35%;
  }
  .membre > div:after {
    right: -35%;
  }
}
@media all and (max-width: 991px) {
  .membre {
    width: 60%;
  }
  .membre:before, .membre:after {
    content: none;
  }
  .membre > div:before, .membre > div:after {
    content: none;
  }
}
@media all and (max-width: 767px) {
  .membre {
    width: 100%;
  }
  .membre .nom {
    font-size: 20px;
  }
  .membre .profil .poste {
    font-size: 18px;
  }
}
/*************/
/* FORMATIONS */
/*************/
.themes {
  padding: 60px 0 60px;
  /*
  .suite {
  	position: relative;

  	&:after {
  		content: "";
  		position: absolute;
  		bottom: -60px;
  		left: 30px;
  		right: 0;
  		height: 25px;
  		background: no-repeat bottom left / auto 25px url(../images/suite.png);
  	}
  }
  */
}
.themes h2 {
  text-align: center;
}
.themes p {
  font-size: 32px;
  line-height: 1.3;
  font-weight: 400;
  margin: 0;
  padding: 0 0 0 30px;
  text-align: center;
}

@media (max-width: 767px) {
  .themes p {
    font-size: 22px;
    padding: 0;
  }
}
.formats {
  padding: 60px 0 0 0;
}
.formats h2 {
  text-align: center;
}
.formats .deux-formats {
  display: flex;
  justify-content: center;
}
.formats .deux-formats .format {
  padding: 30px;
  margin: 0 5px;
  text-align: center;
  font-family: "breeregular", sans-serif;
  font-size: 32px;
  line-height: 1;
  width: 30%;
  cursor: pointer;
  position: relative;
  background: #106A7D;
  color: white;
  transition: background 0.25s ease;
}
.formats .deux-formats .format:hover {
  background: #7DBCC0;
}
.formats .deux-formats .format:before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  border-top: 30px solid #7DBCC0;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  opacity: 0;
  transition: opacity 0.25s ease, bottom 0.25s ease;
}
.formats .deux-formats .format.on:before {
  opacity: 1;
  bottom: -40px;
}
.formats .deux-formats .format p {
  margin: 0;
}
.formats .deux-formats .format p small {
  font-size: 20px;
}
.formats .recherche {
  margin: 45px 0;
}
.formats .recherche ::-moz-placeholder {
  color: #106A7D;
}
.formats .recherche ::placeholder {
  color: #106A7D;
}
.formats .recherche form {
  display: flex;
  justify-content: center;
}
.formats .recherche form span {
  line-height: 42px;
}
.formats .recherche form .form-group {
  margin: 0 45px 0 0;
  position: relative;
}
.formats .recherche form .form-group:first-child {
  width: 300px;
}
.formats .recherche form .form-group.motcle:before {
  content: "\f002";
  position: absolute;
  top: 8px;
  left: 20px;
  width: 42px;
  height: 42px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 700;
  color: #106A7D;
  font-size: 18px;
}
.formats .recherche form .form-group.motcle .form-control {
  padding: 0 10px 0 35px;
}
.formats .recherche form .form-control {
  width: calc(100% - 20px);
  height: 42px;
  line-height: 36px;
  border: solid 2px #106A7D;
  margin: 0 10px;
  padding: 0 10px;
  border-radius: 0;
  font-size: 18px;
  font-family: "breeregular", sans-serif;
  text-transform: none;
}
.formats .recherche form .select:before {
  top: 15px;
  right: 20px;
}
.formats .recherche form .select select {
  padding: 0 45px 0 10px;
  color: #106A7D;
}

@media all and (max-width: 991px) {
  .formats .deux-formats .format {
    width: 50%;
  }
}
@media all and (max-width: 767px) {
  .formats .deux-formats .format {
    font-size: 22px;
  }
  .formats .deux-formats .format p small {
    font-size: 16px;
  }
  .formats .recherche form {
    flex-direction: column;
  }
  .formats .recherche form .select select {
    padding-right: 20px;
  }
  .formats .recherche form .form-group {
    margin: 0 0 0 10px;
  }
  .formats .recherche form .form-group:first-child {
    margin: 0 0 30px;
    width: 100%;
  }
  .formats .recherche form .form-control {
    font-size: 16px;
  }
}
/*************/
/* ETUDES */
/*************/
.details .detail .domaine {
  text-align: left;
  margin: 0 0 60px;
  position: relative;
  padding-top: 150px;
}
.details .detail .domaine.architecture:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: no-repeat bottom center/100% auto url(../images/architecture.png);
}
.details .detail .domaine.architecture h3 {
  background: #7DBCC0;
}
.details .detail .domaine.architecture .client {
  color: #7DBCC0;
}
.details .detail .domaine.paysage:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: no-repeat bottom center/100% auto url(../images/paysage.png);
}
.details .detail .domaine.paysage h3 {
  background: #30A178;
}
.details .detail .domaine.paysage .client {
  color: #30A178;
}
.details .detail .domaine.urbanisme:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: no-repeat bottom center/100% auto url(../images/urbanisme.png);
}
.details .detail .domaine.urbanisme h3 {
  background: #106A7D;
}
.details .detail .domaine.urbanisme .client {
  color: #106A7D;
}
.details .detail .domaine.patrimoine:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: no-repeat bottom center/auto 100% url(../images/patrimoine.png);
}
.details .detail .domaine.patrimoine h3 {
  padding: 0;
}
.details .detail .domaine.patrimoine h3 span {
  background: #00C3A5;
}
.details .detail .domaine.patrimoine-bati {
  padding-top: 0;
}
.details .detail .domaine.patrimoine-bati h4 {
  background: #00C3A5;
}
.details .detail .domaine.patrimoine-bati .client {
  color: #00C3A5;
}
.details .detail .domaine.patrimoine-mobilier {
  padding-top: 0;
}
.details .detail .domaine.patrimoine-mobilier h4 {
  background: #106A7D;
}
.details .detail .domaine.patrimoine-mobilier .client {
  color: #106A7D;
}
.details .detail .domaine h3 {
  color: white;
  text-align: center;
  padding: 15px;
  position: absolute;
  z-index: 2;
  bottom: -30px;
  left: 30px;
  right: 30px;
  margin: 0;
  text-transform: uppercase;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 32px;
}
.details .detail .domaine h3 span {
  display: inline-block;
  padding: 15px 45px;
}
.details .detail .domaine h4 {
  text-transform: uppercase;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  color: white;
  padding: 15px;
  text-align: center;
  margin: 0 0 15px;
}
.details .detail .domaine p {
  margin: 0 0 15px;
}
.details .detail .domaine .introduction {
  font-size: 20px;
  margin: 0 0 30px;
}
.details .detail .domaine .image {
  position: relative;
  margin: 15px 0 60px;
}
.details .detail .domaine .client {
  font-family: "breeregular", sans-serif;
  border-top: dotted 1px #000;
  padding: 15px 0 0 0;
}

@media (max-width: 767px) {
  .details .detail .domaine h3 {
    font-size: 22px;
  }
}
.etape {
  text-align: left;
  display: flex;
  margin: 0 0 15px;
}
.etape.patrimoine-bati {
  padding: 15px 30px;
  margin: 0;
}
.etape.patrimoine-bati .numero, .etape.patrimoine-bati h3 {
  color: #00C3A5;
}
.etape.patrimoine-mobilier {
  padding: 15px 30px;
  margin: 0;
}
.etape h3 {
  font-family: "Roboto Condensed", sans-serif;
  color: #106A7D;
  margin: 0;
  font-size: 24px;
  text-transform: uppercase;
}
.etape p {
  margin: 0;
}
.etape .numero {
  color: #106A7D;
  font-size: 100px;
  font-weight: 700;
  margin: 0 15px 0 0;
  line-height: 1;
  position: relative;
  top: -7px;
}

@media (max-width: 767px) {
  .etape h3 {
    font-size: 18px;
  }
  .etape .numero {
    font-size: 60px;
  }
}
.convention {
  background: transparent;
  color: #000;
  padding: 60px 0;
}
.convention h2 {
  text-align: center;
  color: #106A7D;
}
.convention h2.border-bottom span {
  border-bottom-color: #106A7D;
}
.convention h3 {
  font-family: "Roboto Condensed", sans-serif;
  margin: 0 0 5px;
  font-size: 24px;
  color: #106A7D;
  text-transform: uppercase;
}
.convention p {
  margin: 0 0 10px;
}
.convention p big {
  font-size: 18px;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .convention h3 {
    font-size: 18px;
  }
}
.liens {
  background: #46B2B5;
  color: white;
  padding: 60px 0;
}
.liens p {
  margin: 0;
}
.liens p a {
  color: white;
  text-decoration: underline;
}
.liens .lien {
  display: flex;
}
.liens .lien .image {
  width: 110px;
  margin: 0 30px 0 0;
}
.liens .lien .detail {
  width: calc(100% - 110px);
}

/*************/
/* ALBUMS DES MAIRES */
/*************/
.album {
  padding: 0;
}
.album .fiches {
  padding: 60px 60px 0;
  background: white;
}
.album .fiches.no-padding {
  padding: 0;
}
.album .fiches h2 {
  font-size: 24px;
  color: #106A7D;
  padding: 0 0 0 0px;
}
.album .fiches h2 span {
  font-size: 40px;
}
.album .fiches .resultat {
  text-align: center;
  border: solid 1px #106A7D;
  margin: 0 0 30px;
}
.album .fiches .resultat .image {
  width: 100%;
  margin: 0 0 15px;
  aspect-ratio: 2/1;
}
@supports not (aspect-ratio: 2/1) {
  .album .fiches .resultat .image {
    height: 150px;
  }
}
.album .fiches .resultat h3 {
  font-size: 16px;
  margin: 0 0 15px;
}
.album .fiches .resultat h3 span {
  font-size: 18px;
  color: #106A7D;
  transition: color 0.5s ease;
}
.album .fiches .resultat:hover h3 span {
  color: #7DBCC0;
}

.filtres {
  background: #46B2B5;
  padding: 60px 0;
  font-family: "breeregular", sans-serif;
  font-size: 16px;
}
.filtres form button {
  border-radius: 0;
  border: 0;
  background: white;
  color: #000;
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  margin: 0 0 0 15px;
  font-size: 20px;
}
.filtres form .col-lg-3 .form-group:after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  border-right: solid 1px white;
  bottom: 35px;
}
.filtres form .form-group {
  position: relative;
  height: 100%;
}
.filtres form .form-group.inline {
  align-items: flex-start;
}
.filtres form .form-group.motcle:before {
  content: "\f002";
  position: absolute;
  top: 8px;
  left: 15px;
  width: 42px;
  height: 42px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 700;
  color: white;
  font-size: 18px;
}
.filtres form .form-group.motcle .form-control {
  padding: 0 10px 0 40px;
}
.filtres form .form-control {
  height: 42px;
  line-height: 42px;
  border-radius: 0;
  border: solid 1px white;
  background: none;
  color: white;
  font-family: "breeregular", sans-serif;
  font-size: 16px;
  text-transform: none;
}

.sticky {
  position: sticky;
  overflow: hidden;
  top: 0;
  right: 0;
  height: 100vh;
}

.carte {
  width: 100%;
  height: 100%;
}
.carte.canton, .carte.pays {
  height: 400px;
  margin: 0 0 45px;
}

/*************/
/* LOCALISATION */
/*************/
.localisation .image.logo {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.localisation .image.logo img {
  width: 300px;
}

@media all and (max-width: 767px) {
  .localisation .image.logo img {
    width: 250px;
  }
}
/*************/
/* FICHE ALBUM */
/*************/
.pagination ul {
  display: flex;
}
.pagination ul li {
  margin: 0 2px 0 0;
  list-style: none;
}
.pagination ul li:nth-child(1) a, .pagination ul li:nth-child(2) a, .pagination ul li:nth-child(3) a {
  background: #00C3A5;
}
.pagination ul li:nth-child(1) a:hover, .pagination ul li:nth-child(2) a:hover, .pagination ul li:nth-child(3) a:hover {
  background: #106A7D;
  color: #00C3A5;
}
.pagination ul li a {
  display: block;
  width: 68px;
  height: 68px;
  font-size: 26px;
  color: #106A7D;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.pagination ul li a:hover {
  color: #00C3A5;
}

@media all and (max-width: 991px) {
  .pagination ul li a {
    width: 58px;
    height: 58px;
    font-size: 24px;
  }
}
@media all and (max-width: 767px) {
  .pagination ul li a {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}
.fiche {
  margin: 60px 0;
}
.fiche h1 {
  font-size: 60px;
  margin: 30px 0 15px 0;
  color: #106A7D;
}
.fiche h1.pdf {
  font-size: 30px;
  margin: 0 0 5px;
}
.fiche h2 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 32px;
  color: #106A7D;
}
.fiche h2.pdf {
  font-size: 20px;
}
.fiche p strong {
  color: #106A7D;
}
.fiche .territoires-lies {
  margin: 0 0 15px;
}
.fiche .territoires-lies p {
  margin: 0 0 0px;
}
.fiche .elus {
  text-align: right;
  font-weight: 500;
}
.fiche .elus span {
  font-weight: 300;
}
.fiche .elus .image {
  margin: 0 0 30px;
}
.fiche .elus .maire, .fiche .elus .president, .fiche .pays .maire, .fiche .pays .president {
  background: rgba(125, 188, 192, 0.2);
  color: #000;
  display: inline-block;
  font-weight: 700;
  padding: 2px 5px;
}
.fiche .commune p, .fiche .communaute p {
  margin: 0 0 5px;
}
.fiche .commune p.date-creation, .fiche .communaute p.date-creation {
  margin: 0 0 45px;
}
.fiche .commune .image, .fiche .communaute .image {
  margin: 0 0 30px;
}
.fiche .commune .important, .fiche .communaute .important, .fiche .pays .important {
  background: rgba(125, 188, 192, 0.2);
  padding: 15px;
  margin: 30px 0 30px;
}
.fiche .commune .important strong, .fiche .communaute .important strong, .fiche .pays .important strong {
  color: #000;
}
.fiche .commune .important span, .fiche .communaute .important span, .fiche .pays .important span {
  color: #106A7D;
}
.fiche .pays h1 {
  margin: 0 0 15px;
}

@media all and (max-width: 991px) {
  .fiche h1 {
    font-size: 50px;
  }
  .fiche h2 {
    font-size: 26px;
  }
}
@media all and (max-width: 767px) {
  .fiche h1 {
    font-size: 30px;
  }
  .fiche h2 {
    font-size: 22px;
  }
}
/*************/
/* ANNUAIRES DES MAIRES */
/*************/
.annuaire {
  padding: 60px 0 60px;
}

/*************/
/* MODAL */
/*************/
.modal-back {
  position: fixed;
  z-index: 8;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(16, 106, 125, 0.8);
  display: none;
}
.modal-back.on {
  display: block;
}

.modal {
  position: fixed;
  z-index: 9;
  width: 800px;
  height: 450px;
  top: calc(50% - 225px);
  left: calc(50% - 400px);
  background: white;
  display: none;
}
.modal.on {
  display: block;
}

/* PRINT PART */
@media print {
  header, footer, .banniere, .pagination {
    display: none;
  }
}
.widget {
  list-style: none;
}/*# sourceMappingURL=styles.css.map */

.inner{
  width: 100%;
    margin: 0 auto !important;
    max-width: 92%;
}
    
@media (min-width: 768px){
  .inner{
    max-width: 92%;
  }
    
}
@media (min-width: 1024px){
  .inner{
    max-width: 94%;
  }
    
}
@media (min-width: 1280px){
  .inner{
    max-width: 94%;
  }
    
}
@media (min-width: 1440px){
  .inner{
    max-width: 1300px;
  }
    
}
@media (min-width: 1680px){
  .inner{
    max-width: 1300px    ;
  }
    
}