* {
  box-sizing: border-box;
}

:root {
  --largeur: 100%;
  --fontSize1: 4.25rem;
  --fontSize2: 2.25rem;
  --fontSize3: 1.75rem;
  --fontSize4: 1.375rem;
  --fontSize5: 1.25rem;
  --fontSize6: 1.125rem;
  --padding: 2rem;
  interpolate-size: allow-keywords;
}

@media (max-width: 991px) {
  :root {
    --largeur: 100%;
    --fontSize1: 2.25rem;
    --fontSize2: 1.575rem;
    --fontSize3: 1.3rem;
    --fontSize4: 1.15rem;
    --fontSize5: 1.05rem;
    --fontSize6: 1rem;
    --padding: 1.5rem;
  }
}
/* MIXIN */
html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

@media (max-width: 767px) {
  html {
    font-size: 15px;
  }
}
body {
  font-family: "DM Sans", sans-serif;
  font-size: var(--fontSize6);
  line-height: 1.5;
  color: var(--couleur400);
}

@media (max-width: 991px) {
  body {
    font-size: 1rem;
  }
}
h1, h2, h3, ul, ol, p {
  margin: 0;
  padding: 0;
}

h1, .h1 {
  font-size: var(--fontSize1);
  line-height: 1;
  color: var(--couleur500);
  font-weight: 700;
  margin: 0 0 2.5rem;
}

h2, .h2 {
  font-size: var(--fontSize2);
  color: var(--couleur500);
  font-weight: 700;
  margin: 0 0 1rem;
}

h3, .h3 {
  font-size: var(--fontSize3);
  line-height: 1.2;
  color: var(--couleur500);
  font-weight: 700;
  margin: 0 0 1rem;
}

h4, .h4 {
  font-size: var(--fontSize3);
  color: var(--couleur500);
  font-weight: 700;
  margin: 0 0 2rem;
}

ul, p {
  margin: 0 0 1.5rem;
}

p a {
  color: var(--couleur500);
}
p a:not([href^="https://www.lang"]):not(.btn):not(.not-external):not([href^=mailto]) {
  display: inline;
  padding-right: 1.1rem;
  position: relative;
}
p a:not([href^="https://www.lang"]):not(.btn):not(.not-external):not([href^=mailto]):after {
  content: "";
  position: absolute;
  bottom: 0.2rem;
  right: 0;
  width: 1rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/externe.svg);
          mask: no-repeat center/contain url(../images/externe.svg);
  background: var(--couleur500);
}
p a:hover {
  text-decoration: none;
}

@media (max-width: 767px) {
  p a:not([href^="https://www.lang"]):not(.btn):not(.not-external):not([href^=mailto]):after {
    bottom: 0.1rem;
  }
}
/* FORMULAIRE */
form fieldset, #formulaire form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
form fieldset legend, #formulaire form fieldset legend {
  display: none !important;
}
form fieldset ul, #formulaire form fieldset ul {
  margin: 0;
}
form fieldset ul li::marker, #formulaire form fieldset ul li::marker {
  content: none;
}
form fieldset ul li input, #formulaire form fieldset ul li input {
  position: absolute;
  opacity: 0;
}
form fieldset ul li input:checked + label:before, #formulaire form fieldset ul li input:checked + label:before {
  border-color: var(--couleur500);
}
form fieldset ul li input:checked + label:after, #formulaire form fieldset ul li input:checked + label:after {
  opacity: 1;
}
form fieldset ul li input + label, #formulaire form fieldset ul li input + label {
  position: relative;
  margin: 0;
  padding: 0 0 0 2rem;
  font-weight: 400;
}
form fieldset ul li input + label:before, #formulaire form fieldset ul li input + label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 4px;
  border: solid 1px var(--couleur400);
  transition: border 0.3s ease;
}
form fieldset ul li input + label:after, #formulaire form fieldset ul li input + label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  border: solid var(--couleur500);
  border-width: 0 3px 3px 0;
  padding: 4px 2px;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}
form label, #formulaire form label {
  display: block;
  margin: 0 2rem 0.5rem;
  font-weight: 700;
  font-size: var(--fontSize6);
  color: var(--couleur500);
}
form input, form textarea, #formulaire form input, #formulaire form textarea {
  font-family: "DM Sans", sans-serif;
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  border: solid 1px transparent;
  border-radius: 2rem;
  outline: 0;
  font-size: var(--fontSize6);
  color: var(--couleur500);
  background: var(--couleur200);
  padding: 0 2rem;
  transition: border 0.3s ease;
}
form input::-moz-placeholder, form textarea::-moz-placeholder, #formulaire form input::-moz-placeholder, #formulaire form textarea::-moz-placeholder {
  color: var(--couleur400);
}
form input::placeholder, form textarea::placeholder, #formulaire form input::placeholder, #formulaire form textarea::placeholder {
  color: var(--couleur400);
}
form input:focus, form textarea:focus, #formulaire form input:focus, #formulaire form textarea:focus {
  border-color: var(--couleur400);
  box-shadow: none;
}
form textarea, #formulaire form textarea {
  height: 20rem !important;
  line-height: 1.5;
  padding: 2rem;
  resize: none !important;
}
form em, #formulaire form em {
  margin: 0.5rem 0 0 2rem;
}
form button[type=submit], #formulaire form button[type=submit] {
  background: var(--couleur500);
  padding: 1.1rem 2rem;
  font-family: "DM Sans";
  font-size: var(--fontSize6);
  /*height: 4rem;
  line-height: 4rem;*/
  color: white;
  font-weight: 700;
  border-radius: 2rem;
  border: solid 1px transparent;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  position: relative;
  padding-right: 4rem;
}
form button[type=submit]:hover, #formulaire form button[type=submit]:hover {
  background: white;
  color: var(--couleur500);
  border-color: var(--couleur300);
}
@media (max-width: 767px) {
  form button[type=submit], #formulaire form button[type=submit] {
    padding: 0.6rem 1rem 0.5rem;
  }
}
form button[type=submit]:after, #formulaire form button[type=submit]:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: var(--fontSize6);
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/arrow.svg);
          mask: no-repeat center/contain url(../images/arrow.svg);
  background: white;
  transform: translateY(-50%);
  transition: background 0.3s ease;
}
form button[type=submit]:hover:after, #formulaire form button[type=submit]:hover:after {
  background: var(--couleur500);
}
@media (max-width: 767px) {
  form button[type=submit], #formulaire form button[type=submit] {
    padding-right: 1rem;
  }
  form button[type=submit]:after, #formulaire form button[type=submit]:after {
    content: none;
  }
}
form .wpforms-field:not(.wpforms-field-layout), #formulaire form .wpforms-field:not(.wpforms-field-layout) {
  margin: 0 0 2rem;
}
form .wpforms-submit-container, #formulaire form .wpforms-submit-container {
  text-align: right;
}

#formulaire form {
  margin: 0 0 3rem;
}

/* HEADER */
header {
  position: relative;
  z-index: 2;
}
header .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .wrapper .logo {
  margin: 1rem 4rem 1rem 0;
  display: flex;
  align-items: center;
}
header .wrapper .logo img {
  width: auto;
  max-width: 7.5rem;
  height: 4rem;
  display: block;
}
header .wrapper nav li { /* GLOBAL */ }
header .wrapper nav li.menu-item-has-children > a {
  padding-right: 2rem;
}
header .wrapper nav li.menu-item-has-children > a:after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: calc(50% + 1px);
  width: 0.85rem;
  aspect-ratio: 1;
  transform: translateY(-50%);
  -webkit-mask: no-repeat center/contain url(../images/bas.svg);
          mask: no-repeat center/contain url(../images/bas.svg);
  background: var(--couleur500);
}
header .wrapper nav a { /* GLOBAL A */
  position: relative;
  color: var(--couleur500);
  font-weight: 600;
  text-decoration: none;
}
header .wrapper nav > div > ul {
  display: flex;
  list-style: none;
  margin: 0;
}
header .wrapper nav > div > ul > li { /* NIVEAU 1 */
  margin: 0 2rem 0 0;
  height: 6rem;
  display: flex;
  align-items: center;
}
header .wrapper nav > div > ul > li:hover > .sub-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
header .wrapper nav > div > ul > li > .sub-menu { /* NIVEAU 2 */
  list-style: none;
  position: absolute;
  top: 6rem;
  left: 0;
  right: 0;
  transform: translateY(1rem);
  padding: 2rem calc(50vw - 660px);
  margin: 0 0 1.5rem;
  -moz-columns: 4;
       columns: 4;
  font-size: 1rem;
  border-bottom: solid 1px var(--couleur200);
  background: var(--couleur200);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
header .wrapper nav > div > ul > li > .sub-menu > li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
header .wrapper nav > div > ul > li > .sub-menu > li.menu-item-has-children > a {
  padding-right: 2.5rem;
}
header .wrapper nav > div > ul > li > .sub-menu > li.menu-item-has-children > a:after {
  right: 1rem;
}
header .wrapper nav > div > ul > li > .sub-menu > li > a {
  background: white;
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.4rem 1rem;
}
header .wrapper nav > div > ul > li > .sub-menu .sub-menu { /* NIVEAU 3 */
  position: relative;
  top: 0;
  -moz-columns: 1;
       columns: 1;
  list-style: none;
  padding: 0 0 1rem 0;
}
header .wrapper nav > div > ul > li > .sub-menu .sub-menu li {
  position: relative;
  width: 100%;
  margin: 0;
}
header .wrapper nav > div > ul > li > .sub-menu .sub-menu li a {
  font-weight: 400;
}
header .wrapper form {
  width: 10rem;
  position: relative;
}
header .wrapper form input {
  margin: 0;
  width: 100%;
  height: 3rem;
  padding: 0 2.5rem 0 1rem;
  font-size: 1rem;
}
header .wrapper form button {
  position: absolute;
  top: 50%;
  right: 1rem;
  padding: 0;
  transform: translateY(-50%);
  width: 1.25rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/loupe.svg);
          mask: no-repeat center/contain url(../images/loupe.svg);
  background: var(--couleur300);
  border: 0;
}
header .wrapper form button:hover {
  background: var(--couleur500);
}
header .wrapper .burger {
  display: none;
  width: 1.5rem;
  aspect-ratio: 1;
  background: var(--couleur400);
  -webkit-mask: no-repeat center/contain url(../images/burger.svg);
          mask: no-repeat center/contain url(../images/burger.svg);
}
header .wrapper .burger.active {
  -webkit-mask: no-repeat center/contain url(../images/close.svg);
          mask: no-repeat center/contain url(../images/close.svg);
}

@media (max-width: 767px) {
  header .wrapper nav {
    position: absolute;
    top: 5rem;
    left: 0;
    right: 0;
    background: white;
    text-align: center;
    display: none;
  }
  header .wrapper nav.active {
    display: block;
  }
  header .wrapper nav a { /* GLOBAL */ }
  header .wrapper nav > div > ul {
    display: block;
  }
  header .wrapper nav > div > ul > li {
    display: block;
    margin: 0;
    height: -moz-min-content;
    height: min-content;
  }
  header .wrapper nav > div > ul > li:hover > .sub-menu {
    height: 0;
    pointer-events: none;
  }
  header .wrapper nav > div > ul > li.active {
    height: -moz-max-content;
    height: max-content;
  }
  header .wrapper nav > div > ul > li.active > .sub-menu {
    height: -moz-max-content;
    height: max-content;
    pointer-events: all;
  }
  header .wrapper nav > div > ul > li > a {
    display: block;
    height: 3rem;
    line-height: 3rem;
  }
  header .wrapper nav > div > ul > li > .sub-menu {
    position: relative;
    top: 0;
    margin: 0;
    padding: 0;
    height: 0;
    opacity: 1;
    transform: none;
    overflow: hidden;
    -moz-columns: 1;
         columns: 1;
    transition: height 0.3s ease;
  }
  header .wrapper nav > div > ul > li > .sub-menu > li:first-child {
    margin-top: 1rem;
  }
  header .wrapper nav > div > ul > li > .sub-menu > li:last-child {
    margin-bottom: 0;
  }
  header .wrapper form {
    margin: 0 1rem 0 0;
  }
  header .wrapper .burger {
    display: block;
  }
  header .wrapper .logo img {
    height: 3rem;
  }
}
/* FOOTER */
footer .wrapper {
  border-top: solid 1px var(--couleur300);
  padding: 2rem 0 0;
}
footer .wrapper nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
}
footer .wrapper nav ul li {
  position: relative;
  margin: 0 1rem;
}
footer .wrapper nav ul li:after {
  content: "";
  position: absolute;
  top: 5px;
  right: -1rem;
  bottom: 5px;
  border-right: solid 1px var(--couleur500);
}
footer .wrapper nav ul li:last-child:after {
  content: none;
}
footer .wrapper nav ul li a {
  color: var(--couleur400);
  text-decoration: none;
}
footer .logo small {
  font-size: 0.8rem;
}
footer .newsletter {
  text-align: center;
}
footer .newsletter .titre {
  font-size: var(--fontSize5);
  font-weight: 700;
  color: var(--couleur500);
  margin: 0 0 1rem;
}
footer .newsletter .btn {
  width: 100%;
}
footer .follow ul {
  display: flex;
  list-style: none;
}
footer .follow ul li {
  margin: 0 0.75rem 0 0;
}
footer .follow ul li.facebook a:before {
  -webkit-mask: no-repeat center/contain url(../images/facebook.svg);
          mask: no-repeat center/contain url(../images/facebook.svg);
}
footer .follow ul li.instagram a:before {
  -webkit-mask: no-repeat center/contain url(../images/instagram.svg);
          mask: no-repeat center/contain url(../images/instagram.svg);
}
footer .follow ul li.youtube a:before {
  -webkit-mask: no-repeat center/contain url(../images/youtube.svg);
          mask: no-repeat center/contain url(../images/youtube.svg);
}
footer .follow ul li a {
  display: block;
  width: 2.25rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  background: var(--couleur200);
  position: relative;
  transition: background 0.3s ease;
}
footer .follow ul li a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--couleur400);
  transition: background 0.3s ease;
}
footer .follow ul li a:hover {
  background: var(--couleur500);
}
footer .follow ul li a:hover:before {
  background: white;
}
footer .follow .titre {
  font-size: var(--fontSize5);
  font-weight: 700;
  color: var(--couleur500);
  margin: 0 0 1rem;
}

@media (max-width: 991px) {
  footer {
    text-align: center;
  }
}
/* CLASSES */
/* BTN */
.btn, [type=submit] {
  background: var(--couleur500);
  padding: 1.1rem 2rem;
  font-family: "DM Sans";
  font-size: var(--fontSize6);
  /*height: 4rem;
  line-height: 4rem;*/
  color: white;
  font-weight: 700;
  border-radius: 2rem;
  border: solid 1px transparent;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.btn:hover, [type=submit]:hover {
  background: white;
  color: var(--couleur500);
  border-color: var(--couleur300);
}
@media (max-width: 767px) {
  .btn, [type=submit] {
    padding: 0.6rem 1rem 0.5rem;
  }
}
.btn.fixed-width, [type=submit].fixed-width {
  max-width: 100%;
  width: 25rem;
  text-align: center;
}
.btn.fixed-height, [type=submit].fixed-height {
  height: 4rem;
  line-height: 4rem;
  padding-top: 0;
  padding-bottom: 0;
}
.btn.underline, [type=submit].underline {
  text-decoration: underline;
}

.btn-secondary {
  background: white;
  color: var(--couleur500);
  border: solid 1px var(--couleur300);
}
.btn-secondary:hover {
  background: var(--couleur500);
  color: white;
}

.arrow {
  position: relative;
  padding-right: 4rem;
}
.arrow:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: var(--fontSize6);
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/arrow.svg);
          mask: no-repeat center/contain url(../images/arrow.svg);
  background: white;
  transform: translateY(-50%);
  transition: background 0.3s ease;
}
.arrow:hover:after {
  background: var(--couleur500);
}
@media (max-width: 767px) {
  .arrow {
    padding-right: 1rem;
  }
  .arrow:after {
    content: none;
  }
}

.arrow-back {
  position: relative;
  padding-left: 4rem;
}
.arrow-back:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2rem;
  width: var(--fontSize6);
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/arrow-back.svg);
          mask: no-repeat center/contain url(../images/arrow-back.svg);
  background: white;
  transform: translateY(-50%);
  transition: background 0.3s ease;
}

/* ALIGN */
.text-left {
  text-align: left;
}

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

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

/* TOP */
.top {
  background: var(--couleur200);
  padding: 0.5rem 0;
}
.top ul {
  margin: 0;
  display: flex;
  list-style: none;
  justify-content: flex-end;
}
.top ul li {
  margin: 0 0 0 1rem;
}

/* EN 1 CLIC */
.un-clic {
  position: fixed;
  z-index: 9;
  top: 30vh;
  right: 0;
  display: flex;
  transform: translateX(20rem);
  transition: transform 0.3s ease;
}
.un-clic.active {
  transform: translateX(0);
}
.un-clic.active p {
  background: var(--couleur200);
}
.un-clic.active p span {
  color: var(--couleur500);
}
.un-clic.active p span:after {
  background: var(--couleur500);
}
.un-clic p {
  display: flex;
  justify-content: center;
  align-items: center;
  /*text-align: center;*/
  width: 9rem;
  height: 7rem;
  background: var(--couleur500);
  border-radius: 2rem 0 0 2rem;
  transform: translateX(1rem);
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}
.un-clic p.opened span:after {
  width: 1.5rem;
  top: calc(50% - 0.75rem);
  left: calc(50% - 0.75rem);
  background: var(--couleur500);
  -webkit-mask: no-repeat center/contain url(../images/close.svg);
          mask: no-repeat center/contain url(../images/close.svg);
}
.un-clic p.opened em {
  display: none;
}
.un-clic p:hover:not(.opened) {
  background: var(--couleur200);
  transform: translateX(0);
}
.un-clic p:hover:not(.opened) span {
  color: var(--couleur500);
}
.un-clic p:hover:not(.opened) span:after {
  background: var(--couleur500);
}
.un-clic p span {
  font-size: var(--fontSize4);
  line-height: 1.2;
  font-weight: 700;
  color: white;
  padding: 0 0 0 0;
  position: relative;
  transition: color 0.3s ease;
}
.un-clic p span:after {
  content: "";
  position: absolute;
  top: calc(50% - 1rem);
  left: -2.5rem;
  width: 2rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/un-clic.svg);
          mask: no-repeat center/contain url(../images/un-clic.svg);
  background: white;
  transition: background 0.3s ease;
}
.un-clic p em {
  font-style: normal;
}
.un-clic ul {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 2rem;
  width: 20rem;
  font-size: var(--fontSize4);
  line-height: 1.2;
  font-weight: 700;
  background: var(--couleur200);
  border-radius: 0 0 0 2rem;
}
.un-clic ul li a {
  color: var(--couleur500);
  text-decoration: none;
  padding: 0.5rem 1rem 0.5rem 2rem;
  display: block;
  position: relative;
}
.un-clic ul li a:before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 0;
  width: var(--fontSize6);
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/arrow.svg);
          mask: no-repeat center/contain url(../images/arrow.svg);
  background: var(--couleur500);
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.un-clic ul li a:hover:before {
  transform: translateX(0);
  opacity: 1;
}

@media (max-width: 767px) {
  .un-clic {
    transform: translateX(15rem);
  }
  .un-clic p {
    width: 8rem;
    height: 5.5rem;
  }
  .un-clic p span {
    padding: 0 0 0 1rem;
  }
  .un-clic p span:after {
    left: -1.5rem;
  }
  .un-clic ul {
    width: 15rem;
    padding: 1rem 0;
  }
  .un-clic ul li a:before {
    content: none;
  }
}
/* IMAGE */
.image {
  position: relative;
  width: var(--largeur);
}
.image.rounded {
  margin: 0 0 1.5rem;
}
.image.rounded img {
  border-radius: 1.5rem;
}
.image img {
  width: 100%;
  display: block;
}

@media (max-width: 767px) {
  .image {
    width: 100%;
  }
}
/* ARIANE */
.ariane {
  font-size: 1rem;
  color: var(--couleur500);
  margin: 0 0 2rem;
}
.ariane p {
  margin: 0;
}
.ariane p a {
  text-decoration: none;
}
.ariane p a:hover {
  text-decoration: underline;
}
.ariane p .breadcrumb_last {
  font-weight: 700;
}

/* FEATURED */
.featured {
  margin: 0 0 3rem;
}
.featured .slider img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.76;
  -o-object-fit: cover;
     object-fit: cover;
}
.featured .slider a {
  position: relative;
  display: block;
}
.featured .slider a > span {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}
.featured .slider .owl-dots {
  margin: 2rem 0 0;
}

/* ACTUALITES */
.actualites {
  text-align: center;
  margin: 0 0 3rem;
}
.actualites .card {
  text-align: left;
  padding: 0 0 2rem;
}
.actualites .card a {
  color: #5D5A88;
  text-decoration: none;
}
.actualites .card a p {
  color: #9795B5;
}
.actualites .card a .image img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
/* VOIR PLUS */
.voir-plus {
  margin: 0;
  text-align: right;
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .voir-plus {
    margin: 2rem 0 0;
  }
}
/* FILTRES */
.filtres {
  margin: 0 0 2rem;
}
.filtres form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.filtres form.date {
  grid-template-columns: repeat(2, 1fr);
}
.filtres form .label {
  color: var(--couleur500);
  font-weight: 700;
  margin: 0 0 0 2rem;
  height: 2rem;
}
.filtres form .btn:not(.no-label) {
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .filtres form {
    grid-template-columns: repeat(1, 1fr);
  }
  .filtres form.date {
    grid-template-columns: repeat(1, 1fr);
  }
  .filtres form .btn:not(.no-label) {
    margin-top: 0;
  }
}
/* AGENDA */
.agenda {
  text-align: center;
  margin: 0 0 3rem;
}
.agenda .grid .card {
  text-align: center;
  margin: 0 0 2rem;
}
.agenda .grid .card a {
  overflow: hidden;
  display: block;
  height: 100%;
  border: solid 1px var(--couleur300);
  border-radius: 1.5rem;
  color: var(--couleur500);
  text-decoration: none;
  transition: border 0.3s ease;
}
.agenda .grid .card a:hover {
  border-color: var(--couleur400);
}
.agenda .grid .card p {
  margin: 2rem 0 1rem;
  padding: 0 1rem;
  font-size: var(--fontSize5);
  line-height: 1.2;
}
.agenda .grid .card .image {
  position: relative;
  margin: 0 0 2.5rem;
}
.agenda .grid .card .image:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--couleur900) 0%, rgba(255, 255, 255, 0) 60%);
  border-radius: 0 0 1.5rem 1.5rem;
}
.agenda .grid .card .image img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0 0 1.5rem 1.5rem;
}
.agenda .grid .card .image .date {
  position: absolute;
  bottom: -1.5rem;
  left: 0;
  right: 0;
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 0.9;
}
.agenda .grid .card .image .date.double {
  flex-direction: row;
}
.agenda .grid .card .image .date.double div {
  margin: 0 0.25rem;
  flex-direction: column;
}
.agenda .grid .card .image .date.double div:nth-child(2) {
  position: relative;
  top: -0.75rem;
}
.agenda .grid .card .image .date div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.agenda .grid .card .image .date span:first-child {
  color: white;
  font-weight: 700;
}

@media (max-width: 767px) {
  .agenda .grid .card {
    margin: 0;
  }
  .agenda .grid .card .image img {
    aspect-ratio: 2;
  }
}
/* DETAIL AGENDA */
.lieu {
  margin: 0 0 2rem;
}
.lieu img {
  max-width: 100%;
}

.detail-agenda .pictogrammes {
  margin: 0 0 2rem;
}
.detail-agenda .pictogrammes li {
  list-style: none;
  position: relative;
  margin: 0 0 1.5rem;
  padding: 0 0 0 4rem;
}
.detail-agenda .pictogrammes li.lieu:before {
  background: var(--couleur500);
  -webkit-mask: no-repeat center/contain url(../images/lieu.svg);
          mask: no-repeat center/contain url(../images/lieu.svg);
}
.detail-agenda .pictogrammes li.nombre-places:before {
  background: var(--couleur500);
  -webkit-mask: no-repeat center/contain url(../images/nombre-places.svg);
          mask: no-repeat center/contain url(../images/nombre-places.svg);
}
.detail-agenda .pictogrammes li.prix:before {
  background: var(--couleur500);
  -webkit-mask: no-repeat center/contain url(../images/prix.svg);
          mask: no-repeat center/contain url(../images/prix.svg);
}
.detail-agenda .pictogrammes li.duree:before {
  background: var(--couleur500);
  -webkit-mask: no-repeat center/contain url(../images/duree.svg);
          mask: no-repeat center/contain url(../images/duree.svg);
}
.detail-agenda .pictogrammes li.abonnement:before {
  background: var(--couleur500);
  -webkit-mask: no-repeat center/contain url(../images/abonnement.svg);
          mask: no-repeat center/contain url(../images/abonnement.svg);
}
.detail-agenda .pictogrammes li.partage:before {
  background: var(--couleur500);
  -webkit-mask: no-repeat center/contain url(../images/partage.svg);
          mask: no-repeat center/contain url(../images/partage.svg);
}
.detail-agenda .pictogrammes li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 2.5rem;
  aspect-ratio: 1;
  background: red;
}
.detail-agenda .pictogrammes li a {
  color: var(--couleur400);
  transition: color 0.3s ease;
}
.detail-agenda .pictogrammes li a:hover {
  color: var(--couleur500);
}

.back {
  text-align: center;
}

/* SHARE */
.share {
  text-align: right;
}
.share a {
  font-weight: 700;
  text-decoration: none;
  color: var(--couleur400);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: color 0.3s ease;
}
.share a:hover {
  color: var(--couleur500);
}
.share a img {
  width: 2.5rem;
  aspect-ratio: 1;
  margin: 0 0 0 0.75rem;
}

/* PAGINATION */
.pagination {
  text-align: center;
  width: 100%;
  margin: 0 0 3rem;
}
.pagination ul {
  list-style: none;
  display: flex;
  width: 100%;
  margin: 0;
  justify-content: center;
}
.pagination ul li {
  margin: 0 0.25rem;
}
.pagination ul li.active a {
  font-weight: 700;
}
.pagination ul li a {
  display: block;
  width: 2.75rem;
  aspect-ratio: 1;
  line-height: 2.75rem;
  border-radius: 2.75rem;
  background: var(--couleur200);
  text-align: center;
  text-decoration: none;
  color: var(--couleur500);
}

@media (max-width: 767px) {
  .pagination {
    margin: 2rem 0 3rem;
  }
}
/* DOTS */
.owl-carousel .owl-dots {
  display: flex;
  justify-content: center;
  width: 100%;
}
.owl-carousel .owl-dots .owl-dot {
  width: 0.625rem;
  aspect-ratio: 1;
  border-radius: 1rem;
  background: var(--couleur300);
  margin: 0 0.5rem;
}
.owl-carousel .owl-dots .owl-dot.active {
  background: var(--couleur500);
}
.owl-carousel .owl-dots .owl-dot:hover {
  background: var(--couleur400);
}

/* WP FORM */
#formulaire {
  margin: 3rem 0 0;
}
#formulaire .wpforms-container .wpforms-field {
  padding: 0;
}
#formulaire .wpforms-error-container {
  margin: 0 0 2rem;
}
#formulaire [type=submit] {
  background: var(--couleur500);
  padding: 1.1rem 2rem;
  font-family: "DM Sans";
  font-size: var(--fontSize6);
  /*height: 4rem;
  line-height: 4rem;*/
  color: white;
  font-weight: 700;
  border-radius: 2rem;
  border: solid 1px transparent;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  height: auto;
  line-height: 1.5;
}
#formulaire [type=submit]:hover {
  background: white;
  color: var(--couleur500);
  border-color: var(--couleur300);
}
@media (max-width: 767px) {
  #formulaire [type=submit] {
    padding: 0.6rem 1rem 0.5rem;
  }
}
#formulaire [type=submit]:after {
  content: none;
}

/* GRID */
.grid {
  display: grid;
  gap: 1.5rem;
}
.grid.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid + h4, .grid + .contact {
  margin-top: 3rem;
}
.grid .slider {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.grid .slider .card {
  width: 100%;
}
.grid .card.flat {
  border: 0;
  border-radius: 0;
  padding: 0;
}
.grid .card.flat p {
  font-size: 1.15rem;
  font-weight: 400;
}
.grid .card.flat .image img {
  border-radius: 1.5rem;
}
.grid .card p {
  font-size: var(--fontSize5);
  color: var(--couleur400);
  font-weight: 600;
  margin: 0;
}
.grid .card p + .image {
  margin-top: 2rem;
}
.grid .card p strong {
  color: var(--couleur500);
}
.grid .card h3:last-child {
  margin: 0;
}
.grid .card .image {
  margin: 0 0 1.5rem;
}
.grid .card .image img {
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}
.grid .card a {
  text-decoration: none;
}

@media (max-width: 991px) {
  .grid.grid-2, .grid.grid-3, .grid.grid-4 {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* RESULTAT RECHERCHE */
.resultats-recherche a {
  text-decoration: none;
  color: var(--couleur400);
}
.resultats-recherche a strong {
  color: var(--couleur500);
}

/* ARTICLE */
.sommaire {
  /*position: sticky;
  top: 10rem;*/
  color: var(--couleur500);
  font-size: var(--fontSize4);
}
.sommaire p {
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.sommaire ul {
  margin: 0 0 2rem 0rem;
}
.sommaire ul li {
  list-style: none;
  position: relative;
  padding: 0 0 0 calc(1rem + 4px);
}
.sommaire ul li:before {
  content: "";
  position: absolute;
  background: var(--couleur500);
  top: 0.75rem;
  left: 0;
  width: 5px;
  aspect-ratio: 1;
  border-radius: 5px;
}
.sommaire ul li a {
  color: var(--couleur500);
  text-decoration: none;
}
.sommaire ul li a.active {
  font-weight: 700;
}
.sommaire ul li a:hover {
  font-weight: 700;
}

@media (max-width: 767px) {
  .sommaire {
    font-size: var(--fontSize5);
  }
}
.contact {
  border: solid 1px var(--couleur300);
  border-radius: 2rem;
  padding: var(--padding);
  text-align: center;
  width: 35%;
  margin: 0 auto 3rem;
}
.contact.large {
  width: 100%;
}
.contact p {
  margin: 0 0 1rem;
}
.contact p:last-child {
  margin: 0;
}

.liens {
  margin: 0 0 3rem;
}
.liens .card {
  margin: 0;
}
.liens .card a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  font-size: var(--fontSize4);
  line-height: 1.3;
  font-weight: 700;
  color: var(--couleur500);
  height: 100%;
  padding: 2rem;
  border-radius: 1.5rem;
  border: solid 1px var(--couleur300);
  transition: border 0.3s ease;
}
.liens .card a.has-image {
  text-align: left;
  padding: 1rem;
  display: block;
  height: 100%; /* auto ? */
}
.liens .card a.has-image span {
  display: block;
  padding: 0.5rem 0;
}
.liens .card a.has-image .image {
  margin: 0 0 1rem;
}
.liens .card a:hover {
  border-color: var(--couleur500);
}

/* BLOCS */
.blocs {
  margin: 0 0 3rem;
}

/* ONGLETS */
.onglets {
  margin: 0 0 3rem;
}
.onglets > ul {
  display: flex;
  list-style: none;
  margin: 0;
}
.onglets > ul li {
  padding: 0 2rem;
  font-size: 1rem;
  line-height: 4rem;
  color: var(--couleur500);
  font-weight: 700;
  border-radius: 2rem 0 0 0;
  border: solid 1px var(--couleur300);
  height: 4rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.onglets > ul li.active {
  background: var(--couleur500);
  color: white;
}
.onglets > ul li:last-child {
  border-top-right-radius: 2rem;
}
.onglets > ul li:hover:not(.active) {
  background: var(--couleur200);
}
.onglets > ul li + li {
  margin-left: -1px;
  border-radius: 0;
}
.onglets .onglet {
  border: solid 1px var(--couleur300);
  border-radius: 0 2rem 2rem 2rem;
  margin-top: -1px;
  display: none;
}
.onglets .onglet.active {
  display: block;
}
.onglets .onglet p {
  padding: 1rem 2rem;
  margin: 0;
}
.onglets .onglet ul {
  margin: 0;
  padding: 1rem 2rem;
  list-style: none;
}
.onglets .onglet ul li {
  border-bottom: solid 1px var(--couleur300);
  padding: 0.75rem 0;
  font-size: var(--fontSize4);
  position: relative;
}
.onglets .onglet ul li:last-child {
  border: 0;
}
.onglets .onglet ul li a {
  display: block;
  padding: 0 2rem 0 0;
  color: var(--couleur500);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
}
.onglets .onglet ul li a:hover {
  color: var(--couleur400);
}
.onglets .onglet ul li a:hover:before {
  background: #5D5A88;
}
.onglets .onglet ul li a:hover:after {
  background: white;
}
.onglets .onglet ul li a:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--fontSize3);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 1.5rem;
  background: var(--couleur200);
  transition: background 0.3s ease;
}
.onglets .onglet ul li a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--fontSize3) / 2 - 0.375rem);
  transform: translateY(-50%);
  width: 0.75rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/download.svg);
          mask: no-repeat center/contain url(../images/download.svg);
  background: #9795B5;
  transition: background 0.3s ease;
}
.onglets .onglet .label {
  display: none;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin: 0;
  padding: 1rem 2rem;
  border-radius: 2rem 2rem 0 0;
  background: var(--couleur500);
}

@media (max-width: 991px) {
  .onglets > ul {
    display: none;
  }
  .onglets .onglet {
    border-radius: 2rem;
    display: block;
  }
  .onglets .onglet + .onglet {
    margin: 2rem 0 0;
  }
  .onglets .onglet .label {
    display: block;
  }
}
/* ACCORDEON */
.accordeon {
  margin: 0 0 3rem;
}
.accordeon + .accordeon {
  margin-top: -2rem;
}
.accordeon > div {
  border: solid 1px var(--couleur300);
  border-radius: 1.5rem;
  margin: 0 0 1.5rem;
  transition: border 0.3s ease;
}
.accordeon > div.active {
  border: solid 1px var(--couleur500);
}
.accordeon > div.active .label:after {
  transform: rotate(45deg);
}
.accordeon > div.active .content {
  display: block;
  padding: 0 var(--padding) 0;
}
.accordeon > div:hover {
  border-color: var(--couleur500);
}
.accordeon > div .label {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--padding);
  cursor: pointer;
}
.accordeon > div .label:after {
  content: "";
  position: absolute;
  top: calc(50% - 7.5px);
  right: 2rem;
  border: solid var(--couleur500);
  border-width: 0 1px 1px 0;
  padding: 5px;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}
.accordeon > div .label span {
  margin: 0 1rem 0 0;
}
.accordeon > div .label img {
  margin: 0 1rem 0 0;
  height: 2rem;
  display: block;
}
.accordeon > div .content {
  display: none;
}

.content ul, .content ol, .text ul, .text ol {
  margin-left: 2rem;
}
.content p + ul, .text p + ul {
  margin-top: -1rem;
}
.content a:not(.btn), .text a:not(.btn) {
  color: var(--couleur500);
}
.content a:not(.btn):hover, .text a:not(.btn):hover {
  text-decoration: none;
}
.content img, .text img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2rem;
  margin: 0 0 2.5rem;
}
.content .pictogramme, .text .pictogramme {
  width: auto;
  height: 1.25rem;
  border-radius: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  top: 2px;
}
.content .pictogramme.double, .text .pictogramme.double {
  top: 0.75rem;
  height: 2.5rem;
  margin: 0 0.5rem;
}

@media (max-width: 767px) {
  .content img, .text img {
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 2/1;
  }
}
/* ELUS */
.elu {
  position: relative;
}
.elu.large .detail {
  display: flex;
  justify-content: space-between;
}
.elu.large .detail > div {
  width: calc(50% - 1.5rem);
}
.elu.large .contact {
  width: 100%;
}
.elu.card {
  border: solid 1px #D4D2E3;
  padding: 1.5rem;
  border-radius: 1.5rem;
}
.elu.card .image img {
  border-radius: 1rem;
  aspect-ratio: 1.05;
}
.elu .email {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
.elu .email a {
  display: block;
  width: 1.5rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/email.svg);
          mask: no-repeat center/contain url(../images/email.svg);
  background: var(--couleur500);
}
.elu .email a:hover {
  background: var(--couleur400);
}

@media (max-width: 767px) {
  .elu.large .detail {
    flex-direction: column;
  }
  .elu.large .detail > div {
    width: 100%;
  }
}
/* PLAN DU SITE */
.plan ul {
  margin: 0 0 2.5rem 2rem;
}
.plan ul li a {
  color: var(--couleur500);
  text-decoration: none;
}
.plan ul li a:hover {
  text-decoration: underline;
}

/* DATE PICKER */
.ui-datepicker {
  background: var(--couleur200);
  border-radius: 2rem;
  padding: 1rem;
  text-align: center;
}
.ui-datepicker a {
  color: var(--couleur500);
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
  width: 100%;
}
.ui-datepicker table {
  width: 100%;
}/*# sourceMappingURL=styles.css.map */