@import url("https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
:root {
  --text-color: #3ba3a1;
  --dark-color: #175756;
  --cta-color: #d04900;
  --cta-hover-color: #f15500;
  --gray: #ededed;
  --light-gray: #e8e8e8;
  --dark-brightness: #19191920;
  --medium-brightness: #17575628;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::selection, *::-moz-selection {
  color: white;
  background-color: var(--text-color);
}

body {
  overflow-x: hidden;
}
body #page *,
body #page *::before,
body #page *::after {
  background-repeat: no-repeat;
  background-position: center;
}
body #page .facebook {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/facebook.svg");
}
body #page .instagram {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/instagram.svg");
}
body #page .twitter {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/twitter.svg");
}
body #page .tel::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/phone.svg");
}
body #page .mail::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/mail.svg");
}
body #page .location::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/location.svg");
}
body #page .identite::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/id_card.svg");
}
body #page .recyclage::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/recycle.svg");
}
body #page .civil::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/printing_stamp.svg");
}
body #page .recensement::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/multiple_users.svg");
}
body #page .elections::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/elections.svg");
}
body #page .permis::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/car.svg");
}
body #page .procedure::before,
body #page .urbanisme::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/hammer.svg");
}
body #page .right-arrow::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/right_arrow.svg");
}
body #page .les-actualites::before {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/background_icons.svg");
  background-repeat: repeat;
}
body #page .left-box-arrow {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/left_box.svg");
}
body #page .right-box-arrow {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/right_box.svg");
}
body #page .download::after {
  background-image: url("/wp-content/themes/twentytwentyone child/assets/icons/download.svg");
}
body #page * {
  font-family: "Karla", sans-serif;
}
body #page h1 {
  margin-top: 50px;
  font-family: "Lato", sans-serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--text-color);
}
body #page h2 {
  font-size: 35px;
  color: var(--dark-color);
}
body #page h3 {
  font-family: "Lato", sans-serif;
  font-size: 20px;
}
body #page h4 {
  font-size: 18px;
  color: var(--text-color);
}
body #page h5 {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  padding-bottom: 4px;
}
body #page a:not(.btn) {
  font-size: 18px;
  color: var(--text-color);
}
body #page p {
  font-size: 20px;
  color: black;
}
body #page a:not(.btn),
body #page a:hover:not(.btn),
body #page a:focus:not(.btn) {
  position: relative;
  text-decoration: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
}
.btn{
	background-color: #D04900;
	color:#FFFFFF;
	font-size:16px;
	padding: 16px 32px;
	border-radius:50px;
	border: 2px solid #D04900;
}
.btn:hover{
	background-color: #FFFFFF;
	color: #D04900;
}
body .site .site-content .content-area .btn:focus{
	background-color: #d68356;
	color: #FFFFFF;
}
body #page img {
  object-fit: cover;
}
body #page #masthead {
  display: flex;
  height: 103px;
  padding: 0;
  margin: 0 initial;
}
body #page #masthead .site-logo {
  width: auto;
  height: auto;
  margin: auto 0;
  padding: 0;
  border: none;
  outline: none;
  background: none;
}
body #page #masthead .site-logo a:hover,
body #page #masthead .site-logo a:focus,
body #page #masthead .site-logo a img {
  background: none;
  text-decoration: none;
  outline: none;
}
body #page #masthead #site-navigation {
  flex: 1;
  margin-left: 70px;
}
body #page #masthead #site-navigation .primary-menu-container {
  width: auto;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0;
  justify-content: space-between;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li {
  word-break: normal;
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
  width: min-content;
  display: flex;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li a {
  width: auto;
  margin: auto 0;
  font-size: 15px;
  color: var(--text-color);
  transition-duration: 300ms;
  transition-property: color;
  padding-bottom: 10px;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li a:hover, body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li a:focus {
  color: var(--dark-color);
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li a::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transition-duration: 300ms;
  transition-property: bottom, background-color;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li a:hover::after, body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li a:focus::after {
  background-color: var(--dark-color);
  bottom: 5px;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu-toggle {
  display: none;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu {
  border: none;
  background-color: white;
  padding: 15px 20px 10px;
  left: 50%;
  transform: translate(-50%, 0);
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu::before, body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu::after {
  display: none;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu li {
  background: none;
  width: max-content;
  margin: auto;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu li a:not(.footer-logo) {
  position: relative;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu li a:not(.footer-logo)::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  background-color: white;
  transform: scale(0);
  transform-origin: left;
  height: 1px;
  width: 100%;
  transition-duration: 300ms;
  transition-property: transform;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu li a:not(.footer-logo):hover::after {
  transform: scale(1);
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu li a {
  font-size: 14px;
  font-weight: bold;
  padding: 0;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu li a:hover::after, body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu li a::after {
  opacity: 1;
  background-color: var(--dark-color) !important;
}
body #page #masthead #site-navigation .primary-menu-container #primary-menu-list li .sub-menu li:not(:first-child) {
  margin-top: 10px;
}
@media screen and (max-width: 1024px) {
  body #page #masthead #site-navigation .primary-menu-container #primary-menu-list {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 482px) {
  body #page #masthead {
    height: max-content;
    padding: 10px 20px;
  }
  body #page #masthead #site-navigation .primary-menu-container #primary-menu-list {
    flex-wrap: wrap;
  }
  body #page #masthead #site-navigation .primary-menu-container #primary-menu-list > li {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    padding-top: 20px;
  }
  body #page #masthead #site-navigation .primary-menu-container #primary-menu-list > li > a {
    width: 100%;
    margin: 0;
    text-decoration: underline;
  }
  body #page #masthead #site-navigation .primary-menu-container #primary-menu-list > li > ul {
    padding-top: 5px;
  }
  body #page #masthead #site-navigation .primary-menu-container #primary-menu-list > li .sub-menu {
    margin-left: 0;
  }
}
body #page #main {
  padding: 0;
  margin-bottom: 100px;
}
body #page #main #homepage .carrousel {
  position: relative;
}
body #page #main #homepage .carrousel .gallery img {
  width: 100%;
  height: 565px;
}
body #page #main #homepage .carrousel .gallery::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}
body #page #main #homepage .carrousel .desc {
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignwide-width);
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: min-content;
}
body #page #main #homepage .carrousel .desc h2 {
  color: white;
  font-family: "karla";
  font-size: 48px;
  text-transform: uppercase;
  line-height: 40px;
  margin-bottom: 30px;
}
body #page #main #homepage .carrousel .desc h1 {
  color: white;
  font-family: "lato";
  font-size: 121px;
  font-weight: 800;
  width: 525px;
  line-height: 100px;
}
body #page #main #homepage .informations {
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignwide-width);
  margin: 0 auto;
  position: relative;
  height: min-content;
  margin-bottom: 47px;
}
body #page #main #homepage .informations .acces-rapide {
  margin-top: 27px;
}
body #page #main #homepage .informations .acces-rapide h1 {
  color: var(--text-color);
  font-weight: bold;
  margin-bottom: 27px;
}
body #page #main #homepage .informations .acces-rapide .acces {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}
body #page #main #homepage .informations .acces-rapide .acces div {
  width: 50%;
  margin-bottom: 20px;
}
body #page #main #homepage .informations .acces-rapide .acces div .circle {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  margin-right: auto;
  color: black;
  transition-duration: 200ms;
  transition-property: color;
}
body #page #main #homepage .informations .acces-rapide .acces div .circle:hover {
  color: var(--cta-color);
}
body #page #main #homepage .informations .acces-rapide .acces div .circle::before {
  content: "";
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-right: 10px;
  width: 65px;
  height: 65px;
  border: 5px solid var(--cta-color);
  border-radius: 50%;
}
body #page #main #homepage .informations .acces-rapide .right-arrow {
  color: var(--cta-color);
  position: relative;
  display: inline-block;
  font-size: 15px;
  text-transform: uppercase;
}
body #page #main #homepage .informations .acces-rapide .right-arrow::before {
  content: "";
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-left: 0;
  margin-right: 20px;
  width: 11px;
  height: 11px;
  transition-duration: 200ms;
  transition-property: margin;
}
body #page #main #homepage .informations .acces-rapide .right-arrow:hover::before {
  margin-left: 15px;
  margin-right: 5px;
}
body #page #main #homepage .informations .horaire-contact {
  background-color: var(--text-color);
  display: inline-block;
  padding: 30px 40px 47px;
  position: absolute;
  right: 0;
  top: -67px;
}
body #page #main #homepage .informations .horaire-contact a:not(.footer-logo) {
  position: relative;
}
body #page #main #homepage .informations .horaire-contact a:not(.footer-logo)::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  background-color: white;
  transform: scale(0);
  transform-origin: left;
  height: 1px;
  width: 100%;
  transition-duration: 300ms;
  transition-property: transform;
}
body #page #main #homepage .informations .horaire-contact a:not(.footer-logo):hover::after {
  transform: scale(1);
}
body #page #main #homepage .informations .horaire-contact p,
body #page #main #homepage .informations .horaire-contact a,
body #page #main #homepage .informations .horaire-contact h1 {
  color: white;
  white-space: nowrap;
}
body #page #main #homepage .informations .horaire-contact p,
body #page #main #homepage .informations .horaire-contact a,
body #page #main #homepage .informations .horaire-contact strong {
  font-size: 16px;
}
body #page #main #homepage .informations .horaire-contact *::selection {
  color: var(--text-color);
  background-color: white;
}
body #page #main #homepage .informations .horaire-contact h1 {
  text-align: center;
  font-weight: bold;
}
body #page #main #homepage .informations .horaire-contact strong {
  font-weight: normal;
  display: block;
}
body #page #main #homepage .informations .horaire-contact .desc {
  display: flex;
  justify-content: space-around;
}
body #page #main #homepage .informations .horaire-contact .desc > div {
  margin: 20px;
}
body #page #main #homepage .informations .horaire-contact .desc .contact p {
  position: relative;
}
body #page #main #homepage .informations .horaire-contact .desc .contact p.tel, body #page #main #homepage .informations .horaire-contact .desc .contact p.mail, body #page #main #homepage .informations .horaire-contact .desc .contact p.location {
  display: flex;
}
body #page #main #homepage .informations .horaire-contact .desc .contact p.tel::before, body #page #main #homepage .informations .horaire-contact .desc .contact p.mail::before, body #page #main #homepage .informations .horaire-contact .desc .contact p.location::before {
  content: "";
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  left: 0;
  margin: auto 0;
  object-fit: fill;
  margin-right: 4px;
}
body #page #main #homepage .les-actualites {
  width: 100%;
  height: 693px;
  position: relative;
  background-color: var(--gray);
}
body #page #main #homepage .les-actualites .inner {
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignwide-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
body #page #main #homepage .les-actualites .inner h1 {
  padding-top: 30px;
  padding-bottom: 48px;
}
body #page #main #homepage .les-actualites .inner .actualite .slick-slide {
  margin: 0 40px;
}
body #page #main #homepage .les-actualites .inner .actualite .slick-list {
  margin: 0 -40px;
}
body #page #main #homepage .les-actualites .inner .actualite .single {
  display: flex;
}
body #page #main #homepage .les-actualites .inner .actualite .single img {
  width: 665px;
  height: 462px;
  margin-right: 65px;
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc {
  position: relative;
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc h2 {
  line-height: 35px;
  padding-bottom: 2px;
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .date {
  padding-bottom: 20px;
  font-size: 18px;
  line-height: 25px;
  color: var(--text-color);
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
  line-height: 25px;
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .read-more {
  position: relative;
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .read-more, body #page #main #homepage .les-actualites .inner .actualite .single .desc .read-more::after {
  transition-duration: 200ms;
  transition-property: color, background-color, bottom;
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .read-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--text-color);
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .read-more:hover {
  color: var(--cta-color);
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .read-more:hover::after {
  background-color: var(--cta-color);
  bottom: -4px;
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .pagination {
  position: absolute;
  display: flex;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  border: none;
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .pagination .left-box-arrow,
body #page #main #homepage .les-actualites .inner .actualite .single .desc .pagination .right-box-arrow {
  width: 45px;
  height: 45px;
  margin-right: 5px;
  background-color: var(--cta-color);
  transition-duration: 200ms;
  transition-property: background-color;
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .pagination .left-box-arrow:hover,
body #page #main #homepage .les-actualites .inner .actualite .single .desc .pagination .right-box-arrow:hover {
  background-color: var(--cta-hover-color);
}
body #page #main #homepage .les-actualites .inner .actualite .single .desc .pagination .left-box-arrow:hover,
body #page #main #homepage .les-actualites .inner .actualite .single .desc .pagination .right-box-arrow:hover {
  cursor: pointer;
}
body #page #main #homepage .les-actualites::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 15px;
  margin-left: 10px;
  width: inherit;
  height: inherit;
  background-repeat: round;
  background-position: center;
}
body #page #main #homepage .vivre-budos {
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignwide-width);
  margin: 0 auto;
  margin-top: 50px;
}
body #page #main #homepage .vivre-budos h2 {
  color: var(--text-color);
  margin-bottom: 28px;
}
body #page #main #homepage .vivre-budos .inner {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
body #page #main #homepage .vivre-budos .inner .single {
  position: relative;
  margin: 10px auto;
}
body #page #main #homepage .vivre-budos .inner .single,
body #page #main #homepage .vivre-budos .inner .single img {
  width: 255px;
  height: 400px;
}
body #page #main #homepage .vivre-budos .inner .single img {
  object-fit: fill;
}
body #page #main #homepage .vivre-budos .inner .single a {
  position: absolute;
  bottom: 20px;
  right: 0;
  padding: 10px 22px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  color: white;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  background-color: var(--cta-color);
  transition-duration: 200ms;
  transition-property: background-color;
}
body #page #main #homepage .vivre-budos .inner .single a:hover {
  background-color: var(--cta-hover-color);
}
body #page #main #homepage .demarches {
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignwide-width);
  margin: 0 auto;
  display: flex;
  margin-top: 97px;
  justify-content: space-between;
}
body #page #main #homepage .demarches .acces {
  position: relative;
  width: 50%;
}
body #page #main #homepage .demarches .acces h2 {
  color: var(--text-color);
  margin-bottom: 28px;
}
body #page #main #homepage .demarches .acces p {
  margin-bottom: 50px;
}
body #page #main #homepage .demarches .acces .list {
  display: flex;
}
body #page #main #homepage .demarches .acces .list .inner {
  margin-right: auto;
}
body #page #main #homepage .demarches .acces .list .inner .circle {
  display: block;
  color: black;
  font-size: 18px;
  text-align: center;
  margin-bottom: 40px;
  transition-duration: 200ms;
  transition-property: color;
}
body #page #main #homepage .demarches .acces .list .inner .circle:hover, body #page #main #homepage .demarches .acces .list .inner .circle:focus {
  color: var(--cta-color);
}
body #page #main #homepage .demarches .acces .list .inner .circle::before {
  content: "";
  display: block;
  width: 65px;
  height: 65px;
  border: 5px solid var(--cta-color);
  border-radius: 50%;
  margin: auto;
  margin-bottom: 13px;
}
body #page #main #homepage .demarches .image {
  position: relative;
  width: 445px;
  height: 490px;
}
body #page #main #homepage .demarches .image img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
body #page #main #homepage .demarches .image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1919194b;
}
body #page #main #homepage .demarches .image .inner {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  width: 75%;
  margin: 0 auto;
  text-align: center;
}
body #page #main #homepage .demarches .image .inner h1 {
  color: white;
  font-weight: 800;
  margin-bottom: 24px;
}
body #page #main #homepage .demarches .image .inner a.bulletin {
  display: flex;
  width: max-content;
  margin: auto;
  padding: 10px 24px;
  border-radius: 30px;
  color: white;
  font-size: 16px;
  line-height: 24px;
  background-color: var(--cta-color);
  transition-duration: 200ms;
  transition-property: background-color;
  margin-bottom: 15px;
}
body #page #main #homepage .demarches .image .inner a.bulletin::after {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  margin-left: 33px;
}
body #page #main #homepage .demarches .image .inner a.bulletin:hover {
  background-color: var(--cta-hover-color);
}
body #page #main #homepage .demarches .image .inner a.voir-plus {
  color: white;
  position: relative;
}
body #page #main #homepage .demarches .image .inner a.voir-plus::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
  transition-duration: 200ms;
  transition-property: transform;
}
body #page #main #homepage .demarches .image .inner a.voir-plus:hover::after {
  transform: translateY(4px);
}
body #page #main #homepage .communaute {
  margin-top: 100px;
  position: relative;
}
body #page #main #homepage .communaute .image {
  position: relative;
}
body #page #main #homepage .communaute .image img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}
body #page #main #homepage .communaute .image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #17575670;
}
body #page #main #homepage .communaute .inner {
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignwide-width);
  margin: 0 auto;
  position: absolute;
  top: 75px;
  left: 0;
  right: 0;
  display: flex;
}
body #page #main #homepage .communaute .inner .desc {
  width: 50%;
}
body #page #main #homepage .communaute .inner .desc h1 {
  font-size: 60px;
  line-height: 60px;
  font-weight: 800;
  color: white;
  margin-bottom: 10px;
}
body #page #main #homepage .communaute .inner .desc p {
  color: white;
  line-height: 25px;
  font-size: 20px;
}
body #page #main #homepage .communaute .inner .acces {
  width: 50%;
  position: relative;
}
body #page #main #homepage .communaute .inner .acces a {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: max-content;
  padding: 13px 45px;
  border-radius: 30px;
  font-size: 20px;
  line-height: 32px;
  color: white;
  background-color: var(--cta-color);
  transition-duration: 200ms;
  transition-property: background-color;
}
body #page #main #homepage .communaute .inner .acces a:hover {
  background-color: var(--cta-hover-color);
}
body #page #main #homepage .information-numeros {
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignwide-width);
  margin: 0 auto;
  padding-top: 97px;
}
body #page #main #homepage .information-numeros .numeros {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  margin-bottom: 100px;
}
body #page #main #homepage .information-numeros .numeros h2 {
  text-align: center;
  margin-bottom: 26px;
}
body #page #main #homepage .information-numeros .numeros strong {
  color: var(--cta-color);
}
body #page #main #homepage .information-numeros .numeros > div {
  padding: 37px 60px;
  background-color: #e8e8e866;
  margin: 0 15px;
}
@media screen and (max-width: 1024px) {
  body #page #main #homepage .informations .acces-rapide {
    display: block;
  }
  body #page #main #homepage .informations .acces-rapide .acces {
    width: 100%;
  }
  body #page #main #homepage .informations .horaire-contact {
    position: relative;
    top: 20px;
    width: 100%;
    padding: 10px 20px;
  }
  body #page #main #homepage .informations .horaire-contact h1 {
    margin-top: 30px;
  }
  body #page #main #homepage .les-actualites {
    height: auto;
  }
  body #page #main #homepage .les-actualites .inner {
    padding: 20px auto;
  }
  body #page #main #homepage .les-actualites .inner .actualite .single {
    flex-direction: column;
  }
  body #page #main #homepage .les-actualites .inner .actualite .single img {
    width: 665px;
    height: 462px;
    margin: auto;
  }
  body #page #main #homepage .les-actualites .inner .actualite .single .desc {
    margin-top: 20px;
    padding-bottom: 15px;
  }
  body #page #main #homepage .les-actualites .inner .actualite .single .desc .pagination {
    left: auto;
    right: 0;
  }
  body #page #main #homepage .demarches .acces {
    width: 100%;
  }
  body #page #main #homepage .demarches .image {
    width: 100%;
  }
  body #page #main #homepage .communaute {
    margin-top: 50px;
  }
  body #page #main #homepage .communaute .inner {
    flex-direction: column;
    top: 0;
    padding: 10px 20px;
  }
  body #page #main #homepage .communaute .inner .desc,
body #page #main #homepage .communaute .inner .acces {
    width: 100%;
  }
  body #page #main #homepage .communaute .inner .acces {
    margin: auto;
    margin-top: 20px;
  }
  body #page #main #homepage .communaute .inner .acces a {
    position: relative;
  }
  body #page #main #homepage .information-numeros {
    padding-top: 50px;
  }
}
@media screen and (max-width: 767px) {
  body #page #main #homepage .carrousel .desc h1 {
    font-size: 80px;
    white-space: pre-line;
    width: 100%;
  }
  body #page #main #homepage .informations .acces-rapide .acces div {
    width: 100%;
  }
  body #page #main #homepage .informations .acces-rapide .acces div a {
    margin-left: 20px;
  }
  body #page #main #homepage .informations .horaire-contact h1,
body #page #main #homepage .informations .horaire-contact p,
body #page #main #homepage .informations .horaire-contact a {
    white-space: pre-line;
  }
  body #page #main #homepage .les-actualites .inner .actualite .single img {
    width: 100%;
    height: auto;
  }
  body #page #main #homepage .demarches {
    flex-direction: column;
  }
  body #page #main #homepage .communaute .image img {
    height: 450px;
  }
  body #page #main #homepage .communaute .inner .desc h1 {
    font-size: 40px;
  }
  body #page #main #homepage .information-numeros h1 {
    text-align: center;
  }
  body #page #main #homepage .information-numeros .numeros {
    flex-direction: column;
  }
}
body #page #colophon {
  width: 100%;
  max-width: 100%;
  padding: 35px 0 20px 0;
  background-color: var(--dark-color);
}
body #page #colophon * {
  color: white;
  font-size: 14px;
  line-height: 20px;
}
body #page #colophon *::selection {
  color: var(--dark-color);
  background-color: white;
}
body #page #colophon > div {
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignwide-width);
  margin: 0 auto;
}
body #page #colophon .contact p {
  position: relative;
}
body #page #colophon .contact p.tel, body #page #colophon .contact p.mail, body #page #colophon .contact p.location {
  display: flex;
}
body #page #colophon .contact p.tel::before, body #page #colophon .contact p.mail::before, body #page #colophon .contact p.location::before {
  content: "";
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  left: 0;
  margin: auto 0;
  object-fit: fill;
  margin-right: 4px;
}
body #page #colophon .site-logo {
  margin: 0;
}
body #page #colophon .footer-navigation {
  margin: 0;
  padding: 0;
}
body #page #colophon .site-info {
  display: flex;
  justify-content: space-between;
  padding: 0 0 47px;
  border: none;
}
body #page #colophon .site-info a:not(.footer-logo) {
  position: relative;
}
body #page #colophon .site-info a:not(.footer-logo)::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  background-color: white;
  transform: scale(0);
  transform-origin: left;
  height: 1px;
  width: 100%;
  transition-duration: 300ms;
  transition-property: transform;
}
body #page #colophon .site-info a:not(.footer-logo):hover::after {
  transform: scale(1);
}
body #page #colophon .site-info .site-name,
body #page #colophon .site-info img {
  height: 45px;
  width: auto;
}
body #page #colophon .site-info > * {
  margin-bottom: auto;
}
body #page #colophon .site-info .links ul {
  list-style: none;
  padding: 0;
}
body #page #colophon .footer-navigation-wrapper {
  height: 25px;
}
body #page #colophon .footer-navigation-wrapper li a {
  display: inline-block;
  height: 25px;
  width: 25px;
  object-fit: cover;
  margin: 0 20px;
}
body #page #colophon .powered-by {
  padding: 16px 0 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  body #page #colophon .site-info {
    flex-wrap: wrap;
  }
  body #page #colophon .site-info > div {
    width: 50%;
    margin: auto;
    margin-top: 15px;
    text-align: center;
  }
  body #page #colophon .site-info .contact {
    margin-left: 0;
    margin-right: 0;
  }
  body #page #colophon .site-info .contact .tel::before,
body #page #colophon .site-info .contact .mail::before {
    position: absolute;
    left: calc(50% - 80px);
  }
  body #page #colophon .site-info .contact .tel a,
body #page #colophon .site-info .contact .mail a {
    margin: auto;
  }
}

@media screen and (min-width: 1110px) {
  :root {
    --responsive--alignwide-width: 1110px;
  }
}
@media screen and (max-width: 1109px) {
  :root {
    --responsive--alignwide-width: 94%;
  }
}

.two-color{
	font-weight:600;
}

.two-color span{
	color: #3BA3A1;
}


.background-degrade{
	background: linear-gradient(180deg, #E9FFFF 0.01%, #FFF 66.2%);
}

.background-degrade-inverse{
	background: linear-gradient(0deg, #E9FFFF 0.01%, #FFF 66.2%);
}

body #page .app-frame-container h2{
	font-weight:600;
}

body #page .app-frame-container .btn{
	margin-inline:auto;
	
}


body #page .app-frame{
	background-color:#3BA3A1;
	position:relative;
	height: 256px;
}

body #page .app-frame:before {
   content:"";
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 0 115px 100vw;
   border-color: transparent transparent #3BA3A1 transparent;
   transform: rotate(0deg);
	position:absolute;
	bottom:100%;
	left:0;
}

body #page .app-frame img{
	height:calc(100% + 180px);
	object-fit:contain;
	position:absolute;
	bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}


body #page .app-frame-text p,
body #page .app-frame-text li{
	font-size:14px;
	font-family:"Karla";
	color:#175756;
}

body #page .app-frame-list ul{
	padding-left:13px;
}

body #page .app-frame-list li{
	color:#3BA3A1;
}

body #page .app-frame-list li span{
	color:#175756;
}

.app-frame .elementor-column-gap-default > .elementor-column > .elementor-element-populated{
	padding:0;
}

body #page .help-container-frame > div{
	column-gap:30px;
}

body #page .help-container-frame a{
	color:#FFFFFF;
}


body #page .help-container-frame .btn:hover{
	color:#D04900;
}

body #page .help-frame > div{
	border-radius:20px;
	height:240px;
	width:260px;
	padding:50px 25px;
}

body #page .help-frame-right > div{
	border-radius:20px;
	padding:42px 16px;
	width:260px;
}

body #page .help-frame-right h2{
	font-size:29px;
	color:#FFFFFF;
	font-family:"Karla";
}

body #page .help-frame-text h2{
	font-size:24px;
	color:#000000;
	font-family:"Karla";
	margin-bottom:32px;
}

body #page .help-frame-right-text p{
	font-size:18px;
	color:#FFFFFF;
	font-family:"Karla";
	margin-top:32px;
}

body #page .btn-help{
	color:#FFFFFF;
	width:211px;
	padding:16px 25px;
}

body #page .style-h2 h2{
	color:#175756;
	font-family:"Karla";
	font-size:32px;
	font-weight:600;
}

body #page .style-p p{
	color:#175756;
	font-family:"Karla";
	font-size:18px;
	font-weight:500;
}

body #page .info-frame-p p{
	font-size:14px;
	/*text-align:center;*/
}

body #page .btn-know-more,
body #page .btn-question{
	width:auto;
}




body #page .h2-color-white h2{
	color:#FFFFFF;
}

body #page .question-frame .btn{
	margin:auto;
}

body #page .nourice-info-frame >div> img{
	width:auto;
}

body .site-main .entry-content{
	margin-bottom: 0;
}

body .question-frame-container{
	margin-bottom: -100px;
}

.entry-footer{
	display: none;
}

@media screen and (max-width: 400px) {
	.btn-show-questions{
		max-width:300px;
		margin:auto;
	}
	.btn-show-questions a{
		font-size:10px;
	}
}



@media screen and (max-width: 1130px) {
	
	body #page .info-frame-p p{
		text-align:center;
	}
	
	body #page .btn-know-more{
		margin:auto;
	}
	
	body #page .help-container-frame > div{
		flex-direction:column;
		gap:50px;
		align-items:center;
	}
	body #page .help-container-frame > div div{
		justify-content:center;
	}
	
	body #page .help-frame,
	body #page .help-frame-right{
		width:260px;
	}
}

/*# sourceMappingURL=custom.css.map */