@charset "UTF-8";
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/styles.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import 'reset.css';
@import 'fonts.css';
:root {
  --RECREA_COLOR_PRIMARY: $blue;
  --RECREA_COLOR_SECONDARY: $orange;
}
@font-face {
  font-family: "recrea";
  src: url("/css/fonts/Icons/icomoon.eot") format("embedded-opentype");
  src: url("/css/fonts/Icons/icomoon.ttf") format("truetype"), url("/css/fonts/Icons/icomoon.woff") format("woff"), url("/css/fonts/Icons/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "recrea" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
  background: var(--RECREA_COLOR_SECONDARY);
  color: #FFFFFF;
}

::selection {
  background: var(--RECREA_COLOR_SECONDARY);
  color: #FFFFFF;
}

::-moz-placeholder {
  color: rgba(112, 112, 112, 0.5);
}

::placeholder {
  color: rgba(112, 112, 112, 0.5);
}

* {
  box-sizing: border-box;
  outline: none;
}

:root{
    --white: #ffffff;
}

input[type=text],
input[type=email],
input[type=tel] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

html {
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 300;
  background: #FFFFFF;
  color: #707070;
  font-size: 16px;
  font-size: 1em;
  line-height: 1.4em;
  overflow-x: hidden;
  /* PARTIE POPUP ILEO */
  /* PAGE PARTENAIRE */
  /* */
}
body .rule-picto {
  background-color: var(--RECREA_COLOR_SECONDARY);
  width: 110px;
  height: 110px;
  flex: 0 0 auto;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  margin-right: 25px;
}
body .zoom-img {
  overflow: hidden;
  position: relative;
}
body .zoom-img img {
  transition: all 450ms ease;
  transform: scale(1);
}
body .zoom-img:hover img {
  transform: scale(1.1);
}
body .content {
  margin: auto;
  max-width: 1640px;
  padding: 0 20px;
}
body img {
  max-width: 100%;
}
body a {
  color: var(--RECREA_COLOR_PRIMARY);
  transition: all 450ms ease;
}
body a:hover {
  color: #354D68;
}
body strong, body b {
  font-weight: 500;
}
body em, body i {
  font-style: italic;
}
body sup {
  vertical-align: super;
  font-size: 0.6em;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-weight: 700;
  line-height: 0.9em;
  word-wrap: break-word;
  word-break: break-word;
  /* overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto; */
}
body h1 {
  font-size: 3em;
  text-transform: capitalize;
}
body h2 {
  font-size: 2.5em;
}
body h3 {
  font-size: 2em;
}
body h4 {
  font-size: 1.75em;
}
body h5 {
  font-size: 1.5em;
}
body h6 {
  font-size: 1em;
}
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
  font-weight: 700;
  line-height: 0.9em;
  word-wrap: break-word;
  word-break: break-word;
  /* overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto; */
}
body .h1 {
  font-size: 3em;
  text-transform: capitalize;
}
body .h2 {
  font-size: 2.5em;
}
body .h3 {
  font-size: 2em;
}
body .h4 {
  font-size: 1.75em;
}
body .h5 {
  font-size: 1.5em;
}
body .h6 {
  font-size: 1em;
}
/* body p {
  line-height: 1.2em;
  font-size: 1.1em;
} */
body textarea {
  resize: none;
}
body form, body input, body textarea {
  font-family: "Poppins", Arial, sans-serif;
}
body input[type=text],
body input[type=email],
body input[type=tel],
body textarea {
  border: 0;
  border-bottom: 1px solid #707070;
  margin-bottom: 50px;
  padding: 10px 0;
}
body input[type=submit].button {
  padding: 10px 20px 5px 20px;
}
body input[type=submit].button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
body .optin {
  font-size: 0.85em;
  /* margin-bottom: 20px; */
}
body .optin input {
  margin-right: 10px;
}
body form {
  margin: 50px 0;
}
body #mail2-container {
  display: none;
}
body .icon-ouverture:before {
  content: "\e900";
}
body .icon-horaires:before {
  content: "\e901";
}
body .icon-tarifs:before {
  content: "\e902";
}
body .icon-acces:before {
  content: "\e903";
}
body .icon-planning:before {
  content: "\e904";
}
body .icon-email:before {
  content: "\e905";
}
body .icon-telephone:before {
  content: "\e906";
}
body .icon-facebook:before {
  content: "\e907";
}
body .icon-instagram:before {
  content: "\e908";
}
body .icon-twitter:before {
  content: "\e909";
}
body .button {
  width: fit-content;
  padding: 0.5rem 1.5rem;
  margin-top: 15px;
  text-align: center;
  display: inline-flex;
  border-radius: 50px;
  background: var(--RECREA_COLOR_SECONDARY);
  border: 2px solid var(--RECREA_COLOR_SECONDARY);
  transition: all 450ms ease;
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}
body .button:hover {
  background: #FFFFFF;
  color: var(--RECREA_COLOR_SECONDARY);
}
body .button.button-white {
  border: 2px solid #FFFFFF;
  background: #FFFFFF;
  color: var(--RECREA_COLOR_PRIMARY);
}
body .button.button-white:hover {
  border: 2px solid var(--RECREA_COLOR_SECONDARY);
  background: var(--RECREA_COLOR_SECONDARY);
  color: #FFFFFF;
}
body .button-onglet {
  background: #707070;
  border-color: #707070;
}
body .button-onglet:hover {
  background: var(--RECREA_COLOR_SECONDARY);
  border-color: var(--RECREA_COLOR_SECONDARY);
  color: #FFFFFF;
}
body .button-onglet.active {
  background: var(--RECREA_COLOR_SECONDARY);
  border-color: var(--RECREA_COLOR_SECONDARY);
}
body .button-onglet.active:hover {
  background: var(--RECREA_COLOR_SECONDARY);
  border-color: var(--RECREA_COLOR_SECONDARY);
  color: #FFFFFF;
}
body .stars {
  display: flex;
  margin-bottom: 5px;
}
body .stars .star {
  background: url(images/star.svg) center center no-repeat;
  background-size: 100% 100%;
  height: 22px;
  width: 30px;
}
body .stars .star.full {
  background-image: url(images/star-full.svg);
}
body .stars .star.half {
  background-image: url(images/star-half.svg);
}
body #container-menu {
  z-index: 8;
  position: fixed;
  width: 100%;
}
body #container:has(#inscription_container) #container-menu, body #container:has(#inscription_container) footer{
  display: none;
}
body #overmenu {
    display: flex;
    font-size: 0.8rem;
    font-weight: 400;
    background: var(--RECREA_COLOR_SECONDARY);
    padding: 0.25rem;
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
}
body #overmenu i {
  /* margin-right: 10px; */
  font-size: 1.4em;
  display: flex;
}
body #overmenu span {
  font-weight: 400;
  margin-right: 5px;
}
body #overmenu .content {
  display: flex;
  flex: 2 1;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}

/* carrousel d'horaires du menu */
body #overmenu .marquee_container {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  mask-image : linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 5%,
    rgba(0, 0, 0, 1) 95%,
    rgba(0, 0, 0, 0)
  )
}
body #overmenu .marquee_container .marquee_content {
  animation: RightToLeft 35s infinite linear;
  font-size: inherit;
}
body #overmenu .marquee_container .marquee_link {
  color: var(--white);
  text-decoration: none;
}
body #overmenu .marquee_container:hover .marquee_content {
  animation-play-state: paused
}
body #overmenu .marquee_container .marquee_content .no_date {
  padding: 0 5rem;
}
body #overmenu .marquee_container .marquee_content .no_date .link {
  text-decoration: underline;
  /* padding: 0; */
}
body #overmenu .marquee_container .marquee_content strong {
  text-transform: capitalize;
  margin-left: 1rem;
}
@keyframes RightToLeft {
  from {
    transform: translateX(0);
  } to {
    transform: translateX(-100%);
  }
}

body #overmenu .connexion_inscription {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 20px;
}
body #overmenu .connexion_inscription a {
  color: var(--white);
  font-weight: 500;
}
body #overmenu .se_connecter {
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
}
body #overmenu .se_connecter:hover {
  text-decoration: underline;
}
body #overmenu .s_inscrire {
  font-weight: 600;
  line-height: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--white);
  background-color: unset;
  text-decoration: none;
  transition: all 250ms ease-in-out;
}
body #overmenu .s_inscrire:hover {
  background-color: var(--white);
  color: var(--RECREA_COLOR_SECONDARY);
}

body #container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body #container #content {
  flex: 1 0 auto;
}
body #container footer {
  flex-shrink: 0;
}
body #acces-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
body #acces-contact #contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--ligthGrey);
}
body #acces-contact #contact .contact-wrapper{
  max-width: 1640px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
  padding: 10rem 5rem 2rem 5rem;
}
body #acces-contact #form-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: unset;
  background-color: var(--white);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
}
body #acces-contact #form-contact .optin {
  font-size: 0.8rem;
  line-height: 1.25;
}
body #acces-contact #form-contact .optin input {
  visibility: hidden;
  margin: unset;
  position: absolute;
}
body #acces-contact #form-contact .button {
  align-self: center;
  margin: unset;
  padding: 0.5rem 1.5rem;
}
body #acces-contact #contact .contact-left {
  flex: 2 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 3rem;
}
body #acces-contact #contact .contact-left .contact-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
body #acces-contact #contact .contact-left .contact-info h1 {
  font-style: italic;
}
body #acces-contact #contact .contact-left .contact-info a {
  text-decoration: none;
  color: inherit;
  font-size: 1rem;
}
body #acces-contact #contact .contact-left .acces-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
body #acces-contact #contact .contact-left .acces-itineraire {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
body #acces-contact #contact .contact-left .acces-itineraire h3 {
  font-size: 1.15rem;
  font-weight: 500;
  font-style: italic;
}
body #acces-contact #contact .contact-left .acces-itineraire .acces-icons {
  display: flex;
  gap: 1rem;
}
body #acces-contact #contact .contact-left .acces-itineraire .acces-icons a {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 99px;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--RECREA_COLOR_PRIMARY);
  background-color: var(--white);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
}
body #acces-contact #contact .contact-left .acces-itineraire .acces-icons a:hover {
  color: var(--white);
  background-color: var(--RECREA_COLOR_SECONDARY);
}
body #acces-contact #contact .contact-right {
  flex: 1 0 300px;
}
body #acces-contact #acces {
  max-width: 1640px;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
  padding: 5rem;
}
body #acces-contact #acces #transports, body #acces-contact #acces #mymap {
  flex: 1 0 300px;
}
body #acces-contact #acces #mymap {
  border-radius: 1rem;
  min-height: 480px;
  z-index: 0;
}
body #acces-contact #acces #transports {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 1rem;
}
body #acces-contact #acces #transports .transport {
  display: flex;
  align-items: center;
  gap: 1rem;
}
body #acces-contact #acces #transports .transport .picto-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
}
body .voir_plus, body .lire_actu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 2rem 0;
}
body .voir_plus a.scroll_indicator, body .lire_actu a.scroll_indicator {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: #000000;
  transform: unset;
}
body .voir_plus a.scroll_indicator .icon_chevron_long, body .lire_actu a.scroll_indicator .icon_chevron_long {
  height: 1rem;
  width: 4rem;
  animation: goDown .7s infinite ease-in-out alternate; 
}
@keyframes goDown {
  100% { transform: translate3d(0, 8px, 0); }
}
body .voir_plus a.scroll_indicator p, body .lire_actu a.scroll_indicator p {
  font-size: clamp(0.75rem , 2vw, 0.875rem);
  font-weight: inherit;
  white-space: nowrap;
  width: fit-content;
}
/* body #rejoindre, body #contact {
  font-size: 1.2em;
}
body #rejoindre .contentsquare-content .contentsquare-text, body #contact .contentsquare-content .contentsquare-text {
  text-align: left;
  padding-left: 50px;
  padding-top: 0;
}
body #rejoindre form, body #contact form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
body #rejoindre form input[type=text],
body #rejoindre form input[type=email],
body #rejoindre form input[type=tel],
body #rejoindre form textarea, body #contact form input[type=text],
body #contact form input[type=email],
body #contact form input[type=tel],
body #contact form textarea {
  width: 46%;
}
body #rejoindre form div, body #contact form div {
  text-align: center;
  width: 100%;
}
body #rejoindre form input[type=submit], body #contact form input[type=submit] {
  margin-top: 50px;
  display: inline-block;
}
body #rejoindre .contentsquare-content .contentsquare-text {
  padding-top: 35px;
}
body #contact form {
  margin-top: 0;
}
body #contact form textarea {
  width: 100%;
}
body #contact form div {
  text-align: right;
}
body #contact form input[type=submit] {
  margin-top: 0;
} */
body #menu {
  height: 64px;
  background: #FFFFFF;
  padding: 0 32px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  font-size: 0.9em;
  border-radius: 0 0 0.5rem 0.5rem;
}
body #menu .menu-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 100%;
}
body #menu .menu-content #logo-site {
  height: 100%;
  padding: 0.5rem;
}
body #menu .menu-content #logo-site img {
  height: 100%;
  width: auto;
}
body #menu .menu-content .btn-cheque {
  display: none;
}
body #menu .menu-content .btn-cheque .icon_cadeau {
  height: 1rem;
  width: 1rem;
}
body #menu .menu-content nav {
  text-align: right;
  line-height: 2em;
  height: -webkit-fill-available;
  display: flex;
}
body #menu .menu-content nav ul {
  display: flex;
  align-items: center;
  -moz-column-gap: 15px;
       column-gap: 15px;
}
body #menu .menu-content nav ul li:last-child a {
  padding-right: 0;
}
body #menu .menu-content nav ul .menu-dropdown {
  position: relative;
  height: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
}
body #menu .menu-content nav ul .menu-dropdown .dropdown {
  display: flex;
  justify-content: center;
  z-index: -1;
  position: absolute;
  top: 64px;
  text-align: left;
  min-width: 154px;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 250ms ease-in-out,
              transform 400ms ;
}
body #menu .menu-content nav ul .menu-dropdown .dropdown ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #ffffff;
  padding: 8px 0;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 0.5rem 0.5rem;
}
body #menu .menu-content nav ul .menu-dropdown .dropdown ul li {
  width: 100%;
}
body #menu .menu-content nav ul .menu-dropdown .dropdown ul li a {
  display: inline-block;
  padding: 8px 32px;
  width: 100%;
}
body #menu .menu-content nav ul .menu-dropdown .dropdown ul li:hover {
  background-color: #f9f9f9;
}
body #menu .menu-content nav ul .menu-dropdown .dropdown ul li:hover a {
  color: var(--RECREA_COLOR_SECONDARY);
}
body #menu .menu-content nav ul .menu-dropdown:hover .dropdown {
  transform: translateY(0);
  opacity: 1;
}
body #menu .menu-content nav ul .menu-dropdown:hover > a {
  color: var(--RECREA_COLOR_SECONDARY);
}
body #menu .menu-content:not(.open) nav ul .menu-dropdown:hover .icon-chevron {
  transform: rotate(360deg);
  color: var(--RECREA_COLOR_SECONDARY);
}
body #menu .menu-content nav ul .menu-dropdown .icon-chevron {
  display: inline-block;
  margin-left: 5px;
  color: var(--RECREA_COLOR_PRIMARY);
  transform: rotate(270deg);
  transition: all 450ms ease;
}
body #menu .menu-content nav ul .menu-dropdown .icon-chevron::before {
  content: "\e910";
}
body #menu .menu-content nav a {
  display: inline-block;
  color: var(--RECREA_COLOR_PRIMARY);
  font-weight: 500;
  text-decoration: none;
  text-transform: lowercase;
  font-size: 1em;
  line-height:1em;
}
body #menu .menu-content nav a::first-letter {
  text-transform: uppercase;
}
body #menu .menu-content nav a:last-child {
  margin-right: 0;
}
body #menu .menu-content nav a:hover {
  color: var(--RECREA_COLOR_SECONDARY);
}
body #menu .menu-content nav a.btn-orange span {
  background: var(--RECREA_COLOR_SECONDARY);
  color: #FFFFFF;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid var(--RECREA_COLOR_SECONDARY);
  transition: all 450ms ease;
}
body #menu .menu-content nav a.btn-orange span:hover {
  color: var(--RECREA_COLOR_SECONDARY);
  background: #FFFFFF;
}
body #menu .menu-content nav #list-menu .nav-title.icons-rs {
  display: flex;
  gap: 1rem;
}
body #menu .menu-content nav #list-menu .nav-title.icons-rs a {
  width: fit-content;
}
body .header-default {
  padding: 5rem 0;
  margin-top: 100px;
  text-align: center;
}
body .header-default h1 {
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 5rem);
  color: var(--RECREA_COLOR_SECONDARY);
}
body .header-default h1 span {
  font-weight: 200;
  display: block;
  font-size: 0.65em;
}
body #header-contact h1 span {
  display: inline;
}
body .header_bons_cadeaux {
  padding-bottom: 100px;
  background-color: #f4f4f4;
}
body #accueil_popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100001;
}
body #accueil_popup > div {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
body #accueil_popup .bloc_centre {
  background-image: url("images/centre_aquatique.png");
}
body #accueil_popup .bloc_parc {
  background-image: url("images/parc_aquatique.png");
}
body #accueil_popup .bloc_centre, body #accueil_popup .bloc_parc {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
body #accueil_popup .bloc_centre img, body #accueil_popup .bloc_parc img {
  height: 200px;
  width: 200px;
  transition: transform 1s;
  -webkit-transition: transform 1s;
  -ms-transition: transform 1s;
  -moz-transition: transform 1s;
  -o-transition: transform 1s;
}
body #accueil_popup .bloc_centre:hover img, body #accueil_popup .bloc_parc:hover img {
  transform: scale(0.85);
  -webkit-transform: scale(0.85);
  -ms-transform: scale(0.85);
  -moz-transform: scale(0.85);
  -o-transform: scale(0.85);
}
/* body #acces {
  display: flex;
}
body #acces #mymap {
  min-height: 600px;
  width: 100%;
  z-index: 1 !important;
}
body #acces #transports {
  width: 36.05%;
  padding: min(75px, 7.8125%);
  display: flex;
  align-items: center;
}
body #acces #transports .transport {
  display: flex;
  margin-bottom: 30px;
  align-items: center;
  flex-wrap: wrap;
}
body #acces #transports .transport:last-child {
  margin-bottom: 0;
}
body #acces #transports .transport .picto-contact {
  width: 50px;
  margin-right: 10px;
  text-align: center;
  flex: 0 0 50px;
}
body #acces #transports .transport .pictotxt-contact {
  margin-left: 5px;
  flex: 1;
}
body #acces #transports .transport .pictotxt-contact p {
  line-height: 1.4em;
  font-size: 1em;
}
body #acces #transports .transport i, body #acces #transports .transport svg {
  color: var(--RECREA_COLOR_PRIMARY);
  font-size: 2em;
}
body #contact {
  padding: 100px 0;
}
body #contact h2 {
  font-size: 3em;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--RECREA_COLOR_PRIMARY);
  margin-bottom: 20px;
  font-weight: 600;
}
body #contact .content {
  display: flex;
}
body #contact .content .contact-content {
  width: 100%;
} */
body #activites .blocks-content .block a:hover div p {
  color: #FFFFFF;
}
body .blocks {
  margin: 100px 0;
}
body .blocks .blocks-content {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
}
body .blocks .blocks-content .block {
  margin: 1%;
  flex: 0 0 31.33333%;
}
body .blocks .blocks-content .block a {
  text-decoration: none;
  color: var(--RECREA_COLOR_SECONDARY);
  display: flex;
  flex-direction: column;
  height: 100%;
}
body .blocks .blocks-content .block a:hover {
  color: #FFFFFF;
}
body .blocks .blocks-content .block a:hover span.h4 {
  color: #FFFFFF;
}
body .blocks .blocks-content .block a:hover img {
  transform: scale(1.1);
}
body .blocks .blocks-content .block a:hover div {
  background: var(--RECREA_COLOR_PRIMARY);
}
body .blocks .blocks-content .block .zoom-img {
  max-height: 305px;
  height: 305px;
}
body .blocks .blocks-content .block .zoom-img img {
  height: 100%;
  width: 100%;
  max-width: none;
  max-height: 315px;
  -o-object-fit: cover;
     object-fit: cover;
}
body .blocks .blocks-content .block span {
  text-decoration: underline;
}
body .blocks .blocks-content .block div {
  padding: 20px;
  background: #F5F5F5;
  transition: all 450ms ease;
}
body .blocks .blocks-content .block div span.h4 {
  font-size: 1.5em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--RECREA_COLOR_SECONDARY);
  text-decoration: none;
  display: block;
}
body #cheques {
  margin: 0;
}
body #cheques h2 {
  font-size: 2em;
}
body #tarifs a {
  overflow: hidden;
  width: 100%;
  display: block;
}
body #tarifs .zoom-img {
  position: relative;
  background-blend-mode: luminosity;
  width: 100%;
  padding: 200px 20px;
  text-align: center;
  transition: all 450ms ease;
  background-size: cover;
}
body #tarifs .zoom-img:hover {
  transform: scale(1.1);
}
body #tarifs .zoom-img:hover .button {
  background: #FFFFFF;
  color: var(--RECREA_COLOR_SECONDARY);
}
body #tarifs .zoom-img img {
  display: none;
}
body #tarifs .zoom-img .button {
  text-decoration: none;
  border: 2px solid #FFFFFF;
}
body #tarifs .zoom-img div {
  background: none;
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 450ms ease;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
body #tarifs .zoom-img div h2 {
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1.2em;
  margin-bottom: 50px;
}
body #activite .blocks-content .block {
  text-align: center;
  color: #FFFFFF;
}
body #activite .blocks-content .block a {
  color: #FFFFFF;
  display: block;
  height: auto;
}
body #activite .blocks-content .block a:hover .button {
  background: #FFFFFF;
  color: var(--RECREA_COLOR_SECONDARY);
}
body #activite .blocks-content .block .no-button {
  display: block;
  height: 56px;
}
body #activite .blocks-content .block span {
  text-decoration: none;
}
body #activite .blocks-content .block div {
  padding: 30px 20px;
  background: var(--RECREA_COLOR_PRIMARY);
}
body #activite .blocks-content .block div span.h4 {
  font-size: 2em;
}
body #activites .blocks-content .block {
  flex: 0 0 100%;
  margin: 0;
}
body #activites .blocks-content .block a {
  text-align: left;
  display: flex;
  width: 100%;
  flex-direction: row;
}
body #activites .blocks-content .block:nth-child(odd) figure {
  order: 2;
}
body #activites .blocks-content .block:nth-child(odd) div {
  order: 1;
}
body #activites .blocks-content .block figure {
  width: 50%;
  height: auto;
}
body #activites .blocks-content .block .zoom-img {
  max-height: none;
}
body #activites .blocks-content .block .zoom-img img {
  max-height: none;
}
body #activites .blocks-content .block div {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 50px;
}
body #activites .blocks-content .block div span {
  text-decoration: none;
}
body #activites .blocks-content .block div h2 {
  text-transform: uppercase;
  margin-bottom: 20px;
}
body #activites .blocks-content .block div p {
  color: #454545;
  margin-bottom: 20px;
}
body #news {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 100%;
  padding: 5rem 3rem;
  margin: unset;
  background-color: var(--ligthGrey);
}
body #news h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--RECREA_COLOR_PRIMARY);
}
body #news .button {
  margin: unset;
}
body #actualites {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 2rem 2rem 5rem 2rem;
}
body #actualites #list_actus {
  width: 100%;
  max-width: 1640px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(220px, 100% / 5), 1fr));
  gap: 1rem;
  overflow: hidden;
  padding: 2rem;
  background-color: var(--ligthGrey);
  border-radius: 1.5rem;
}
body #news #list_actus.slick-slider .slick-list {
  padding: 1rem 0;
}
body #news #list_actus.slick-slider .slick-track {
  display: flex;
  width: -webkit-fill-available;
  width: -moz-available;
  gap: 1rem;
}
body #news #list_actus.slick-slider .slick-dots {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
body #news #list_actus.slick-slider .slick-dots li {
  margin: unset;
}
body #news #list_actus.slick-slider .slick-dots li button {
  display: flex;
  justify-content: center;
  font-size: 0;
  line-height: unset;
  padding: unset;
}
body #news #list_actus.slick-slider .slick-dots li button:before {
  font-family: "slick";
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: unset;
  position: static;
  width: fit-content;
  height: fit-content;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: var(--RECREA_COLOR_PRIMARY);
  -webkit-font-smoothing: antialiased;
}
body #news #list_actus.slick-slider .slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: var(--RECREA_COLOR_PRIMARY);
}
body #news #list_actus {
  width: -webkit-fill-available;
width: -moz-available;
  overflow: hidden;
  max-width: 1640px;
  margin: unset;
}
body #actualites #list_actus .card_link, body #news #list_actus .card_link {
  text-decoration: none;
  /* margin: 0 0.5rem; */
}
body #actualites #list_actus .card_actualite, body #news #list_actus .card_actualite {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 360 / 280;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
  transition: all 250ms ease-in-out;
}
body #actualites #list_actus .card_actualite .card_image, body #news #list_actus .card_actualite .card_image {
  flex: 1 0;
  overflow: hidden;
  background-color: var(--ligthGrey);
  transition: inherit;
}
body #actualites #list_actus .card_actualite .card_image img, body #news #list_actus .card_actualite .card_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: inherit;
}
body #actualites #list_actus .card_actualite:hover .card_image img, body #news #list_actus .card_actualite:hover .card_image img {
  transform: scale(1.05);
}
body #actualites #list_actus .card_actualite .card_caption, body #news #list_actus .card_actualite .card_caption {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  /* height: 20%; */
}
body #actualites #list_actus .card_actualite .card_caption h4, body #news #list_actus .card_actualite .card_caption h4 {
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-style: italic;
  color: var(--RECREA_COLOR_SECONDARY);
}
body #actualites #list_actus .card_actualite .card_caption p, body #news #list_actus .card_actualite .card_caption p {
  line-height: 1;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--RECREA_COLOR_PRIMARY);
}

body .header {
  position: relative;
  /* height: 100dvh; */
  /* margin-top: 64px; */
}
body .header .bg-header {
  height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: none;
  display: flex;
  align-items: center;
}
body .header .bg-header img {
  display: none;
}
body .header .bg-header .header-content {
  color: #FFFFFF;
  text-align: right;
  width: 100%;
}
body .header .bg-header .header-content div {
  border-radius: 100px;
  width: 100%;
  padding-right: min(140px, 8.4146%);
}
body .header .bg-header .header-content h1, body .header .bg-header .header-content h2 {
  color: transparent;
  -webkit-text-stroke: 2px #FFFFFF;
  text-transform: uppercase;
  font-size: 5em;
  text-shadow: 0 0 0.2em rgba(53, 77, 104, 0.25);
}
body .header .bg-header .header-content h1 {
  text-align: center;
}
body .header .bg-header .header-content p {
  font-size: 1.4em;
  line-height: 1.6em;
  text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.75);
}
body #header-club {
  background-color: var(--RECREA_COLOR_PRIMARY);
}
body #header .bg-header .header-content p {
  font-weight: 600;
  font-size: 2em;
}
body #header .bg-header .header-content div {
  position: relative;
  z-index: 2;
}
body #header .bg-header .header-content:after {
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  /*opacity: .25;
  background: rgba(#000, .35);*/
  pointer-events: none;
  z-index: 1;
}
.header .parallax_container {
  height: 100lvh;
  width: 100%;
  overflow: hidden;
  scrollbar-width: none;
  padding-top: unset;
  will-change: transform;
}
.header .parallax_container .bandeau_image {
  height: 100%;
  filter: brightness(80%);
  will-change: transform;
  transform: translateZ(0) scale(1.15);
  margin-top: 90px;
}
.header .parallax_container .heading {
  height: 100svh;
  width: 100%;
  padding: 2em;
  transform: translateZ(1px) scale(0.875);
}
body #container .header .parallax_container .heading p {
  text-align: center;
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  max-width: 90%;
}
body #header-home {
  height: calc(100vh - 145px);
  background: var(--RECREA_COLOR_PRIMARY);
}
body #header-home .bg-header {
  height: calc(100vh - 145px);
  position: relative;
}
body #header-home .bg-header:after {
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 1;
}
body #header-home .bg-header .header-content {
  text-align: left;
  z-index: 2;
}
body #header-home .bg-header .header-content div {
  width: 100%;
  padding-right: min(140px, 8.4146%);
  padding-left: min(140px, 8.4146%);
}
body #header-home #header-home-nav {
  position: fixed;
  right: 0;
  top: 45%;
  z-index: 100;
}
/* body #header-home #header-home-nav:hover {
  transform: translateX(-120px);
} */
body #header-home #header-home-nav nav a {
  display: flex;
  text-align: right;
  color: #FFFFFF;
  background: var(--RECREA_COLOR_SECONDARY);
  border-radius: 50px 0 0 50px;
  text-decoration: none;
  border: 2px solid var(--RECREA_COLOR_SECONDARY);
  padding: 5px 20px 5px 8px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1em;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;

  transform: translateX(120px);
  transition: transform 400ms ease-in-out 100ms;
}
body #header-home #header-home-nav nav a:hover {
  transform: translateX(0);
}
body #header-home #header-home-nav nav a i {
  padding-right: 20px;
  font-size: 1.3em;
}
body #header-home #header-home-nav nav a:last-child {
  margin-bottom: 0;
}
body #header-home #header-home-nav nav a:hover {
  background: #FFFFFF;
  color: var(--RECREA_COLOR_SECONDARY);
}
body .header .slick-dots {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  width: fit-content;
  height: fit-content;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
body .header .slick-dots li {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
body .header .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  padding: 15px 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
body .header .slick-dots li button:hover, body .header .slick-dots li button:focus {
  outline: none;
}
body .header .slick-dots li button:hover:before, body .header .slick-dots li button:focus:before {
  opacity: 1;
}
body .slick-dots li button:before {
  font-family: "slick";
  font-size: 12px;
  line-height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body .slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #FFFFFF;
}
body .scroll-down {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-width: 2px 2px 0 0;
  border-style: solid;
  margin: 10px;
  color: #FFFFFF;
  transform: rotate(-135deg);
  cursor: pointer;
  position: absolute;
  bottom: 40px;
  left: 50%;
  opacity: 0.75;
  transform: translateX(-100%) rotate(-225deg);
  transition: all 450ms ease;
}
body .scroll-down:hover {
  opacity: 1;
}
body .btn-scroll-down {
  position: relative;
  padding: 0 15px;
}
body .btn-scroll-down:after {
  content: "";
  width: 10px;
  height: 10px;
  border-width: 2px 2px 0 0;
  border-style: solid;
  position: absolute;
  right: 0;
  transform: rotate(-225deg);
}
body .savoirplus_horaires {
  left: 50%;
  transform: translate(-40%);
  bottom: 80px;
  position: absolute;
  color: #fff;
}
body .center {
  text-align: center;
  width: 100%;
}
body .content-default {
  padding-bottom: 100px;
}
body #template-default {
  padding-top: 0;
}
body #tarifs #tarifs-content {
  overflow: hidden;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  margin-bottom: 50px;
}
body #tarifs #onglets {
  display: flex;
  justify-content: stretch;
  margin-bottom: 0;
}
body #tarifs #onglets .button-onglet {
  border-radius: 0;
  margin: 0;
  flex-grow: 1;
  font-size: 1.4em;
  padding: 20px 10px 15px 10px;
  background: #F5F5F5;
  border: 0;
  color: #707070;
  font-weight: 500;
  border-bottom: 1px solid #E8E8E8;
  border-right: 1px solid #E8E8E8;
}
body #tarifs #onglets .button-onglet:last-child {
  border-right: 0;
}
body #tarifs #onglets .button-onglet.active, body #tarifs #onglets .button-onglet:hover {
  background: var(--RECREA_COLOR_SECONDARY);
  color: white;
}
body #tarifs #contenus {
  background: #F5F5F5;
  text-align: center;
  padding: 4% 6%;
}
body #tarifs #contenus table {
  width: 100%;
  font-size: 1.4em;
  font-weight: 500;
}
body #tarifs #contenus table i {
  font-size: 1.125rem;
  font-weight: 300;
}
body #tarifs #contenus table tr {
  border-bottom: 1px solid #E8E8E8;
  text-align: right;
}
body #tarifs #contenus table tr:last-child {
  border: 0;
}
body #tarifs #contenus table tr td {
  padding: 20px 0;
  text-align: left;
}
body #tarifs #contenus table tr td span:first-child {
  margin-right: 30px;
}
body #tarifs #contenus table tr td:last-child {
  text-align: right;
  display: inline-flex;
}
body #tarifs #contenus table tr td .sous-prix {
  font-weight: 300;
}
body #tarifs .pass_sport {
  text-align: center;
  margin-bottom: 30px;
}
body #tarifs .pass_sport img {
  margin-right: 30px;
}
body #tarifs .asterisque_tarifs {
  text-align: left;
  margin-top: 50px; 
  font-size: 1.125rem;
  font-weight: 400;
}
body #actualite {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}
body #actualite header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--ligthGrey);
}
body #actualite .actualite_header {
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row;
  gap: 3rem;
  padding: 5rem 5rem 3rem 5rem;
}
body #actualite .actualite_header .actualite_title {
  flex: 1 0 40vw;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
body #actualite .actualite_header .actualite_title h1 {
  flex: 2 0;
  display: block;
  font-style: italic;
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 600;
}
body #actualite .actualite_header .actualite_title .partager {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
body #actualite .actualite_header .actualite_title .partager h5 {
  font-size: 1rem;
  font-weight: 500;
}
body #actualite .actualite_header .actualite_title .partager .partager_icons {
  display: flex;
  align-items: center;
  gap: 1rem;
}
body #actualite .actualite_header .actualite_title .partager .partager_icons a {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--RECREA_COLOR_PRIMARY);
  background-color: var(--white);
  padding: 0.5rem;
  border-radius: 60px;
}
body #actualite .actualite_header .actualite_title .partager .partager_icons a i {
  font-size: 1.5rem;
  line-height: 0;
}
body #actualite .actualite_header .actualite_image {
  flex: 1 0 40vw;
  aspect-ratio: 720 / 480;
  /* width: 100%;
  height: 100%; */
  object-fit: cover;
}
body #actualite .actualite_header .actualite_image img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  overflow: hidden;
}
body #actualite .actualite_content {
  width: 80%;
  max-width: 980px;
  padding: 5rem 0;
  text-align: left !important;
}
body #actualite .actualite_content h1 {
  font-size: 3rem;
  font-style: italic;
}
body #actualite .actualite_content h2 {
  font-size: 2rem;
  font-weight: 600;
}
body #actualite .actualite_content h3 {
  font-size: 1.5rem;
  font-weight: 500;
}
body #actualite .actualite_content h4 {
  font-size: 1rem;
  font-weight: 500;
}
body #abonnements {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body #abonnements #abonnements-container {
  padding: 100px 0;
}
body #abonnements #abonnements-container h2 {
  text-align: center;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 3.5em;
  margin-bottom: 100px;
}
body #abonnements #abonnements-container h3 {
  text-transform: uppercase;
  margin-bottom: 10px;
}
body #abonnements #abonnements-container ul li {
  list-style-type: disc;
  margin-left: 15px;
  margin-bottom: 10px;
}
body #abonnements #abonnements-container ul li:last-child {
  margin-bottom: 0;
}
body #abonnements #abonnements-container sup {
  margin-left: 5px;
}
body #abonnements #abonnement-formules {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  justify-content: center;
}
body #abonnements #abonnement-formules .abonnement-formule {
  flex: auto 1 1;
  max-width: 523px;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #FFFFFF;
}
body #abonnements #abonnement-formules .abonnement-formule .abonnement-formule-titre {
  color: #FFFFFF;
  padding: 40px 20px;
  font-size: 1.4em;
}
body #abonnements #abonnement-formules .abonnement-formule .abonnement-formule-texte {
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
body #abonnements #abonnement-formules .abonnement-formule .abonnement-formule-texte div:first-child {
  flex: 1;
}
body #abonnements #abonnement-formules .abonnement-formule .abonnement-formule-texte .prix_abos {
  margin-top: 50px;
  font-weight: 300;
}
body #abonnements #abonnement-formules .abonnement-formule .abonnement-formule-texte div:last-child span:first-child {
  font-size: 3.5em;
  font-weight: 600;
}
body #abonnements #abonnement-formules .abonnement-formule .abonnement-formule-texte div:last-child span:last-child {
  font-weight: 500;
}
body #abonnements #abonnement-formules .abonnement-formule .abonnement-formule-texte .prix_abos {
  display: flex;
  
}
body #abonnements #abonnement-formules .abonnement-formule .abonnement-formule-texte .prix_1 span:first-child {
  font-size: 3.5em;
  font-weight: 600;
}
body #abonnements #abonnement-formules .abonnement-formule .abonnement-formule-texte .prix_1 span:last-child {
  font-weight: 500;
}
body #abonnements #abonnement-avantages {
  display: flex;
  gap: 15px;
}
body #abonnements #abonnement-avantages .abonnement-avantage {
  background: rgba(232, 232, 232, 0.9);
  flex: 1 1 280px;
  padding: 40px 30px;
}
body #abonnements #abonnement-avantages .abonnement-avantage h3 {
  margin-bottom: 30px;
}
body #abonnements #abonnement-avantages .abonnement-avantage:last-child {
  background-color: #FFF;
}
body #abonnements #asterisque {
  text-align: right;
  margin: 10px;
  font-size: 0.8em;
  color: #FFFFFF;
}
body #header-tarifs .bg-header {
  height: auto;
}
body #header-tarifs .header-content {
  padding-top: 150px;
  padding-bottom: 400px;
}
body #header-tarifs .header-content h1 {
  margin-bottom: 50px;
  color: #FFFFFF;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 5em;
  -webkit-text-stroke: 0;
}
body #header-tarifs .header-content h1 span {
  font-weight: 200;
  display: block;
  font-size: 0.65em;
}
body #header-tarifs .content {
  text-align: center;
  margin-top: 50px;
  font-size: 1.2em;
  line-height: 1.4em;
}
body #spc h3 {
  text-transform: uppercase;
}
body #spc .button {
  margin-top: 50px;
}
body .contentsquare-text-description .contentsquare-text-description-cropped {
  overflow: hidden;
  /* display: flex;
  flex-direction: column;
  flex-wrap: wrap; */
}
body .contentsquare-text-description .contentsquare-text-description-cropped li:before {
  content: "- ";
}
body #identity .content {
  padding: 80px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 4vw;
  align-items: center;
  max-width: 1200px;
}
body #identity .content h1 {
  color: var(--RECREA_COLOR_SECONDARY);
  font-weight: 200;
  text-transform: uppercase;
  font-size: 4vw;
  line-height: 1em;
  text-align: center;
}
body #identity .content h1 strong {
  font-weight: 600;
  font-size: 6vw;
  line-height: 0.8em;
  margin-top: 10px;
  display: inline-block;
}
body #identity .content div {
  flex: 0 0 61.9485%;
  color: #707070;
  text-align: left;
}
body #identity .content div p {
  line-height: 1.4em;
  font-size: 1.2em;
}
body #identity .content div a {
  margin-top: 20px;
  font-weight: 500;
}
body #identity .content div a.button {
  padding: 3px 20px 5px 20px;
  max-width: 242px;
  /*margin: 20px 40%;*/
}
body #identity .content div a i {
  font-size: 1.5em;
  transform: translateY(10px);
  display: inline-block;
  margin-left: 10px;
}
body #iframe_webvision {
  text-align: center;
}
body #iframe_webvision iframe {
  max-width: 1200px;
  width: 1200px;
  max-height: 600px;
  height: 600px;
  padding-bottom: 100px;
}

body #tabbar {
  /* background: var(--RECREA_COLOR_SECONDARY); */
  position: fixed;
  z-index: 8;
  bottom: 0;
  width: 100%;
  /* box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5); */
  display: none;
}
body #tabbar #tabbar-nav nav {
  width: 100%;
  display: flex;
  font-size: 1em;
  align-content: stretch;
}
body #tabbar #tabbar-nav nav a {
  flex: 1 1 0;
  padding: 20px 1%;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
body #tabbar #tabbar-nav nav a:last-child {
  border-right: 0;
}
body #tabbar #tabbar-nav nav a i {
  margin-right: 10px;
}
body #tabbar #tabbar-nav nav a:hover, body #tabbar #tabbar-nav nav a.selected {
  color: var(--RECREA_COLOR_SECONDARY);
  background: #FFFFFF;
}
/* NEW TABBAR */
#mobile_tabbar {
  height: 3rem;
  width: 100%;
  border-radius: 1rem;
  min-width: 280px;
}
#mobile_tabbar .tabs {
  display: flex;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.25));
}
#mobile_tabbar .tab a {
  display: flex;
  text-decoration: none;
  width: 100%;
  height: 100%;
}
#mobile_tabbar .tab:not(.tab_03) {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  background: white;
  padding: 0.25rem 0;
  transition: all 100ms ease-in;
}
#mobile_tabbar .tab_01 {
  border-radius: 0.5rem 0 0 0;
}
#mobile_tabbar .tab_05 {
  border-radius: 0 0.5rem 0 0;
}
#mobile_tabbar .tab:not(.tab_03) a {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  /* gap: 0.125rem; */
}
#mobile_tabbar .tabs .tab.tab_03 {
 display: flex;
 justify-content: center;
 width: 100%;
}
#mobile_tabbar .tabs .tab.tab_03 .tab_main {
  flex: 2;
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 100%;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding-bottom: 0.25rem;
}
#mobile_tabbar .tabs .tab.tab_03 .tab_main svg {
  position: absolute;
  width: 100%;
  height: 100%;
  fill: var(--white);
  bottom: 0;
 }
#mobile_tabbar .tabs .tab.tab_03 .tab_side {
  flex: 1;
  height: 100%;
  width: auto;
  min-width: 6px;
  background-color: white;
}
#mobile_tabbar .tabs .tab.tab_03 .button_resa {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%); 
  width: 48px;
  height: 48px;
  border-radius: 99px;
  background-color: #55D1F9;
  cursor: pointer;
  transition: transform 150ms ease-in;
}
#mobile_tabbar .tabs .tab.active.tab_03 .button_resa {
  animation: clicBump 400ms ease-in-out
}
#mobile_tabbar .tabs .tab.tab_03 .button_resa svg {
  color: #ffffff;
  width: 28px;
}
#mobile_tabbar .tabs .tab .tab_icons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #a5a5a5;
  aspect-ratio: 2/3;
  transition: inherit;
  height: 1rem;
  width: 1rem;
}
#mobile_tabbar .tabs .tab.active .tab_icons {
  color: #1C317A;
}
#mobile_tabbar .tabs .tab p{
  text-align: center;
  width: 100%;
  position: relative;
  font-size: clamp(10px, 5vw, 12px);
  font-weight: 300;
  color: #4C4C4C;
  transition: inherit;
}
#mobile_tabbar .tabs .tab.active p{
  font-weight: 500;
  color: #1C317A;
}

@keyframes clicBump {
  0% {
      transform: translateX(-50%) scale(1);
  } 50% {
      transform: translateX(-50%) scale(1.1);
  } 100% {
      transform: translateX(-50%) scale(1);
  }
}
/* FIN TABBAR */
/* body #news {
  text-align: center;
  background: var(--RECREA_COLOR_PRIMARY);
  color: #FFFFFF;
  padding: 100px 0;
}
body #news h2.h3 {
  font-size: 3.5em;
  text-align: center;
  margin-bottom: 40px;
}
body #news span.h4 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 1.4em;
  text-decoration: none;
  display: block;
}
body #news span {
  text-decoration: underline;
}
body #news span:hover {
  text-decoration: none;
}
body #news .news-content {
  display: flex;
  align-items: stretch;
  margin-bottom: 40px;
}
body #news .news-content .news {
  padding: 0 8px;
  text-align: left;
  width: 33.33333%;
}
body #news .news-content .news .zoom-img {
  max-height: 315px;
  height: 100%;
}
body #news .news-content .news .zoom-img img {
  height: 100%;
  width: 100%;
  max-width: none;
  max-height: 315px;
  -o-object-fit: cover;
     object-fit: cover;
}
body #news .news-content a {
  color: #FFFFFF;
  text-decoration: none;
} */

 body #espaces {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  width: -webkit-fill-available;
  width: -moz-available;
  gap: 2rem;
  padding: 5rem 0;
  background-color: var(--RECREA_COLOR_SECONDARY);
  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.025);
}
body #espaces h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}
body #espaces  #espaces_container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: -webkit-fill-available;
  width: -moz-available;
  max-width: 1640px;
  gap: 1rem;
}
body #espaces  #espaces_container .slick-track {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
body #espaces  #espaces_container .slides {
  border-radius: 8px;
  overflow: hidden;
}
body #espaces  #espaces_container .slides .slides_link {
  display: flex;
  justify-content: center;
}
body #espaces  #espaces_container .slides .slides_link .card_espace .card_image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4/3;
  overflow: hidden;
  /* max-height: 320px; */
}
body #espaces  #espaces_container .slides .slides_link .card_espace .card_image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: brightness(80%);
  will-change: transform;
  transition: all 300ms ease-in-out;
}
body #espaces  #espaces_container .slides .slides_link:hover .card_espace .card_image img {
  filter: brightness(90%);
  transform: scale(1.10);
}
body #espaces  #espaces_container .slides .slides_link .card_espace .card_description {
  position: absolute;
}
body #espaces  #espaces_container .slides .slides_link .card_espace .card_description h3 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--white);
  font-style: italic;
  text-transform: capitalize;
}
body #espaces  #espaces_container .slick-dots  button:before {
  font-size: 8px;
}
/* SUPPR SPACES */
body #spaces h1.h3, body #spaces h2.h3 {
  font-size: 3.5em;
  text-align: center;
  margin-bottom: 40px;
  color: var(--RECREA_COLOR_PRIMARY);
  text-transform: uppercase;
}
body #spaces .spaces-content {
  display: flex;
  align-items: stretch;
}
body #spaces .spaces-content .space {
  text-align: center;
  width: 100%;
  height: 530px;
  background: var(--RECREA_COLOR_PRIMARY);
}
body #spaces .spaces-content .space a {
  text-decoration: none;
}
body #spaces .spaces-content .space img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body #spaces .spaces-content .space .zoom-img {
  width: 100%;
  height: 100%;
  position: relative;
}
body #spaces .spaces-content .space .zoom-img div {
  position: absolute;
  z-index: 2;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  padding: 0 20px;
}
body #spaces .spaces-content .space .zoom-img h3.h4 {
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1em;
  font-size: 2.75em;
  text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.75);
}
body #header-partenaires .bg-header {
  height: 400px;
}
body #header-partenaires .bg-header .header-content h4 {
  text-align: center;
  font-weight: 500;
}
body #partenaires-content {
  text-align: center;
}
body #partenaires-content .txt_partenaire_haut, body #partenaires-content .txt_partenaire_bas {
  margin: 50px 0 100px 0;
}
body #partenaires-content .txt_partenaire_haut h1, body #partenaires-content .txt_partenaire_bas h1 {
  font-size: 4em;
  font-weight: 600;
  margin-bottom: 30px;
  text-transform: uppercase;
  color: var(--RECREA_COLOR_SECONDARY);
}
body #partenaires-content .txt_partenaire_haut span, body #partenaires-content .txt_partenaire_bas span {
  font-weight: 200;
  font-size: 0.65em;
}
body #partenaires-content #partenaires-list {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 100px;
}
body #partenaires-content #partenaires-list .partenaire-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 20px;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1215686275);
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-picture {
  flex: 1 0 150px;
  max-width: 300px;
  background-color: #f5f5f5;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-picture .partenaire-img {
  width: 75%;
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-picture .remise-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 12px;
  border-radius: 3px;
  color: #ffffff;
  font-weight: 600;
  background-color: #37393A;
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-content {
  flex: 2 1 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-content .partenaire-description {
  flex: 2 1 260px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  text-align: left;
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-content .partenaire-description h3 {
  font-size: 1.6rem;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-content .partenaire-description .etablissement {
  font-size: 1rem;
  font-style: italic;
  padding-bottom: 1.5rem;
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-content .partenaire-description .description {
  font-size: 1rem;
  padding-bottom: 2rem;
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-content .partenaire-description p:last-child {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--RECREA_COLOR_SECONDARY);
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-content .partenaire-contact {
  flex: 0 0 210px;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  border-left: #cfcfcf solid 1px;
  padding: 0 2rem;
  margin: 2rem 0;
}
body #partenaires-content #partenaires-list .partenaire-container .partenaire-content .partenaire-contact .contact-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
body #marketing-container {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background: var(--RECREA_COLOR_PRIMARY);
}
body #marketing-container .marketing {
  flex: 0 0 50%;
}
body #marketing-container img {
  width: 100%;
}
body #introseo, body #outroseo {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 100px 0;
  font-size: 1.2em;
  line-height: 1.3em;
}
body #introseo h3 {
  color: var(--RECREA_COLOR_PRIMARY);
}
body #introseo.introactivites, body #outroseo.introactivites {
  padding-top: 0;
}
body #introseo.introactivites .button, body #outroseo.introactivites .button {
  margin-top: 50px;
}
body #introseo.introseo, body #outroseo.introseo {
  padding: 50px 0;
}
body #rules {
  display: flex;
  justify-content: center;
  text-align: center;
}
body #rules #rules-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(220px, 100% / 3), 1fr));
  gap: 3rem;
  /* padding: 0 15.85%; */
}
body #rules h2 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  text-transform: uppercase;
  color: var(--RECREA_COLOR_PRIMARY);
  margin-bottom: 20px;
}
body #rules .rule {
  /* flex: 1 0 44%; */
  text-align: left;
  display: flex;
  align-items: center;
}
body #rules .rule img {
  margin-right: 50px;
}
body #rules .rule-picto {
  width: clamp(80px, 5vw, 110px);
}
body #accessibilite .content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  gap: 2rem;
  padding: 2rem 2rem 6rem 2rem;
}
body #accessibilite .cards_accessibilite {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 34px;
  background-color: #f7f7f7;
}
body #accessibilite .cards_accessibilite .col_accessibilite {
  flex: 1 0 clamp(224px, 50vw, 340px);;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  gap: 2rem;
  padding: clamp(1rem, 2vw, 2rem);
  border-radius: 16px;
  background-color: var(--white);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.10);
}
body #accessibilite .cards_accessibilite .col_accessibilite h3 {
  color: var(--RECREA_COLOR_PRIMARY);
  text-transform: uppercase;
}
body #accessibilite .cards_accessibilite .col_accessibilite ul {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body #accessibilite .cta_accessibilite a {
  font-weight: 500;
}
body #advantages .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 100px;
  margin-bottom: 50px;
}
body #advantages .content .advantage {
  text-align: center;
  padding: 0 50px;
  margin-bottom: 50px;
}
body #advantages .content .advantage img {
  height: 150px;
}
body #advantages .content .advantage h3 {
  margin-top: 35px;
  text-transform: uppercase;
  color: var(--RECREA_COLOR_PRIMARY);
}
body #avis {
  background: var(--RECREA_COLOR_PRIMARY);
  color: #FFFFFF;
  text-align: center;
  padding: 100px 0;
}
body #avis h2 {
  text-transform: uppercase;
  font-size: 3.5em;
  margin-bottom: 75px;
}
body #avis figure {
  border-radius: 260px;
  overflow: hidden;
  width: 260px;
  height: 260px;
  margin-bottom: 50px;
  display: inline-block;
}
body #avis figure img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body #avis .button {
  margin-top: 25px;
  background: #FFFFFF;
  color: var(--RECREA_COLOR_PRIMARY);
  border-color: #FFFFFF;
}
body #avis .button:hover {
  background: var(--RECREA_COLOR_PRIMARY);
  color: #FFFFFF;
}
body #avis #opinions {
  display: flex;
  flex-wrap: wrap;
}
body #avis #opinions .opinion {
  margin-bottom: 50px;
  width: 33.3333%;
  padding: 0 25px;
}
body #avis #opinions .opinion p {
  background: url(images/quotation.svg) center center no-repeat;
  background-size: contain;
}
body #planning, body #plannings {
  padding: 100px 0;
  text-align: center;
}
body #planning h2, body #plannings h2 {
  color: var(--RECREA_COLOR_PRIMARY);
  text-transform: uppercase;
  margin-bottom: 50px;
}
body #planning figure img, body #planning .html-planning, body #plannings figure img, body #plannings .html-planning {
  padding: 50px;
  overflow-x: scroll;
  margin-bottom: 50px;
}
body #planning .html-planning object, body #plannings .html-planning object {
  margin: auto;
  min-height: 675px;
  height: auto !important;
}
body #planning .outroseo, body #plannings .outroseo {
  margin-bottom: 50px;
  font-size: 1.2em;
}
body #plannings {
  padding: 50px 0 100px 0;
}
body #onglets {
  margin-bottom: 25px;
  text-align: center;
}
body #onglets .button-onglet {
  display: inline-block;
  margin: 20px;
}
body #contenus .contenu {
  display: none;
}
body #contenus .contenu.active {
  display: block;
}
/*body #contenus .contenu_horaires.active {
  display: flex;
  flex-wrap: wrap;
}*/
body .container {
  margin: auto;
  max-width: 1640px;
}
body #horaires {
  margin: 1.5rem 1.5rem 5rem 1.5rem;
  border-radius: 1rem;
  background: #F5F5F5;
  padding: 1rem 0;
}
body #horaires .contentsquare-content {
  background: var(--RECREA_COLOR_SECONDARY);
  color: white;
  text-align: center;
}
body #horaires .contentsquare_content_horaires {
  display: block;
  background: var(--RECREA_COLOR_SECONDARY);
  color: white;
  text-align: center;
  width: 50%;
  /*border: 10px solid #fff;*/
  border-radius: 30px;
}
body #horaires .contentsquare-content h2.h3 {
  color: white;
  font-size: 2.8em;
  line-height: 1.2em;
}
body #horaires .contentsquare-content h2.h3_horaires {
  color: white;
  font-size: 2.8em;
  line-height: 1.2em;
  text-align: center;
  text-transform: uppercase;
}
body #horaires .contentsquare-content table {
  margin: auto;
  width: 80%;
  font-weight: 500;
  font-size: 1.4em;
  /*float: right;*/
  float: none;
}
body #horaires .contentsquare-content table tr {
  border-bottom: white 1px solid;
}
body #horaires .contentsquare-content table tr:last-child {
  border: 0;
}
body #horaires .contentsquare-content table tr td {
  text-align: left;
  padding: 20px 10px;
}
body #horaires .contentsquare-content table tr td:last-child {
  text-align: right;
  padding-right: 0;
}
body #horaires .contentsquare-content table tr td:first-child {
  padding-left: 0;
}
body #horaires .contentsquare-content:nth-child(odd) {
  background: var(--RECREA_COLOR_PRIMARY);
}

/* STYLE REFONTE HORAIRES */
#horaires h2 {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  font-weight: 500;
  color: #394B68;
  margin-bottom: 0.5rem;
}
#horaires .horaires_header {
  width: 100%;
  padding: 0 1rem 2rem 1rem;
  border-radius: 1rem;
  background-color: #F5F5F5;
}
#horaires .subnav {
  height: 3rem;
  border-radius: 0.5rem;
  background-color: #ffffff;
  padding: 0 1rem;
  margin-bottom: 1rem;
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.06);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#horaires .subnav .arrows {
  position: absolute;
  height: 100%;
  width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0));
  z-index: 1;
  cursor: pointer;
}
#horaires .subnav .left-arrow {
  left: 0;
}
#horaires .subnav .right-arrow {
  right: 0;
}
#horaires .subnav ul {
  display: flex;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  cursor: grab;
  height: 100%;
  /* mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0)); */
}
#horaires .subnav .nav {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 1rem;
  height: 100%;
  font-size: 1.125rem;
  font-weight: 500;
  color: #7e8286;
  fill: #7e8286;
  white-space: nowrap;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
#horaires .subnav .list-nav .nav::first-letter {
  text-transform: uppercase;
}
/* #horaires .subnav .nav svg {
    aspect-ratio: 1/1;
    height: 1rem;
    margin-right: 0.25rem;
    fill: inherit;
} */
#horaires .subnav .nav::before{
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #55D1F9;
  opacity: 0;
  transition: all 300ms ease-in;
}
#horaires .subnav .nav.active::before{
  opacity: 1;
}
#horaires .subnav .nav.active{
  color: #55D1F9;
  fill: #55D1F9;
}
#horaires .subnav .nav:not(.active):hover {
  color: #394B68;
  fill: #394B68;
}
#horaires .horaires_header .dates {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.875rem;
}
#horaires .horaires_header .dates ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#horaires .horaires_header .dates p {
  line-height: 2.5;
}
#horaires .horaires_header .dates .date_tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  border: #7e8286 solid 1px;
  padding: 0.25rem 0.5rem;
  max-height: 2rem ;
  white-space: nowrap;
}
#horaires .horaires_header .dates .no_dates {
  display: inline-flex;
}
.contenu_periode {
  display: none;
}
.contenu_periode.active {
  display: flex;
}
.horaires_periode {
  display: none;
}
.horaires_periode.active {
  display: flex;
}
#horaires .horaires_content {
  /*display: flex;*/
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-radius: 1rem;
  background:  #F5F5F5;
}
#horaires .horaires_content .categories {
  width: 100%;
}
#horaires .horaires_content .categories input {
  position: absolute;   
  opacity: 0;
  z-index: -1;
}
#horaires .horaires_content .categories input:checked ~ .categorie_content{
  max-height: 100%;
  padding: 1rem;
}
#horaires .horaires_content .categories input:checked ~ .categorie_content .card_equipement {
  opacity: 1;
  transform: translateY(0);
}
/*#horaires #horaires_content .categories input:checked ~*/ .categorie_content{
  max-height: 100%;
  padding: 1rem;
}
/*#horaires #horaires_content .categories input:checked ~*/ .categorie_content .card_equipement {
  opacity: 1;
  transform: translateY(0);
}
#horaires .horaires_content .categories input:checked + label .icon-chevron {
  transform: rotate(0deg);
}
#horaires .horaires_content .categories .categorie_header {
  width: -webkit-fill-available;
  width: -moz-available;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  padding: 1rem 4rem 1rem 2rem;
  margin: 0 1rem;
  border-radius: 0.5rem;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #7e8286;
  background-color: white;
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 200ms ease-in;
  font-style: italic;
}
#horaires .horaires_content .categories input:checked ~ .categorie_header {
  color: #394B68;
}
#horaires .horaires_content .categories input:checked ~ label .categorie_header:hover, #horaires .horaires_content .categories .categorie_header:hover {
  color: #55D1F9;
}
#horaires .horaires_content .categories .categorie_header .icon-chevron {
  width: 1em;
  height: 1em;
  position: absolute;
  right: 2rem;
  top: 32%;
  text-align: center;
  transform: rotate(-90deg);
  transition: all 0.35s;
  font-style: normal;
}
#horaires .horaires_content .categories .categorie_header .icon-chevron::before {
  content: "\e910";
}
#horaires .horaires_content .categories .categorie_header label{
  color: inherit;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}
#horaires .horaires_content .categories .categorie_header .chapeau{
  margin-top: 0.125rem;
  font-weight: 400;
  font-size: 0.875rem;
  text-transform: none;
  font-style: normal;
  color: #7e8286;
}
#horaires .horaires_content .categories .categorie_content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(346px, 100% / 4), 1fr));
  gap: 1rem;
  overflow: hidden;
  padding: 0 1rem;
  max-height: 0;
  transition: all 300ms ease-in-out;
}
/*#horaires #horaires_content .categories*/ .categorie_content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(346px, 100% / 4), 1fr));
  gap: 1rem;
  overflow: hidden;
  /*padding: 0 1rem;
  max-height: 0;*/
  transition: all 300ms ease-in-out;
}
#horaires .horaires_content .categories .categorie_content .card_equipement {
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: white;
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(-50%);
  text-align: center;
  transition: all 300ms ease-in-out;
}
#horaires .horaires_content .categorie_content .card_equipement .header_equipement {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  min-height: 5em;
}
#horaires .horaires_content .categorie_content .card_equipement .header_equipement h3{
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  font-style: italic;
  text-align: left;
  line-height: 1;
  text-transform: uppercase;
  color: #FFF;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0px 0px 5px 3px rgba(156, 154, 154, 0.06);
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire table {
  width: 100%;
  border-collapse: collapse;
  vertical-align: middle;
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire table tbody{
  vertical-align: middle;
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire tr {
  height: 2rem ;
  vertical-align: inherit;
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire tr:nth-child(even){
  background-color: #F3F3F3;
  border-radius: 0.25rem;
  padding: 0 0.5rem;
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire th {
  width: 3.25rem;
  text-align: left;
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
  color: #394B68;
  padding-left: 0.8rem ;
  vertical-align: inherit;
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire td {
  font-size: clamp(10px, 2vw, 12px);
  text-align: inherit;
  line-height: 1;
  text-transform: uppercase;
  padding: 0;
  color: #888888;
  vertical-align: inherit;
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire .active_day th{
  padding-left: 0.3rem;
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire .active_day span{
  background-color: #55D1F9;
  color: #ffffff;
  border-radius: 30px;
  padding:  0.125rem 0.5rem;
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire .active_day td{
  font-weight: 600;
  color: #394B68;
}
#horaires .horaires_content .categorie_content .card_equipement .tableau_horaire .phrase_modifiable {
  padding: 0.5rem;
  font-size: 0.75rem;
  text-align: left;
  font-style: italic;
}
#horaires .horaires_content .categories .categorie_content .card_equipement.closed  {
  filter: grayscale(100%);
}
/*#horaires #horaires_content .categories*/ .categorie_content .card_equipement {
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: white;
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.06);
  /*opacity: 0;
  transform: translateY(-50%);*/
  text-align: center;
  transition: all 300ms ease-in-out;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .header_equipement {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  min-height: 5em;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .header_equipement h3{
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  font-style: italic;
  text-align: left;
  line-height: 1;
  text-transform: uppercase;
  color: #FFF;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0px 0px 5px 3px rgba(156, 154, 154, 0.06);
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire table {
  width: 100%;
  border-collapse: collapse;
  vertical-align: middle;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire table tbody{
  vertical-align: middle;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire tr {
  height: 2rem ;
  vertical-align: inherit;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire tr:nth-child(even){
  background-color: #F3F3F3;
  border-radius: 0.25rem;
  padding: 0 0.5rem;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire th {
  width: 3.25rem;
  text-align: left;
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
  color: #394B68;
  padding-left: 0.8rem ;
  vertical-align: inherit;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire td {
  font-size: clamp(10px, 2vw, 12px);
  text-align: inherit;
  line-height: 1;
  text-transform: uppercase;
  padding: 0;
  color: #888888;
  vertical-align: inherit;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire .active_day th{
  padding-left: 0.3rem;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire .active_day span{
  background-color: #55D1F9;
  color: #ffffff;
  border-radius: 30px;
  padding:  0.125rem 0.5rem;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire .active_day td{
  font-weight: 600;
  color: #394B68;
}
/*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire .phrase_modifiable {
  padding: 0.5rem;
  font-size: 0.75rem;
  text-align: left;
  font-style: italic;
}
/*#horaires #horaires_content .categories*/ .categorie_content .card_equipement.closed  {
  filter: grayscale(100%);
}
/* FIN STYLE REFONTE HORAIRE */
body #actualite-image {
  text-align: center;
}
body #actualite-image figure {
  height: 600px;
  width: 100%;
  overflow: hidden;
}
body #actualite-image figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body #share {
  text-align: right;
  margin: 50px 0;
}
body #actualite-content {
  margin: 0 0 100px 0;
  text-align: left;
}
body #actualite-content .content {
  text-align: left;
}
body #actualite-content .actu_content_div {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}
body #actualite-content .actu_content_div img {
  display: block;
  min-width: 350px;
}
body #actualite-content .content img {
  height: auto !important;
}
body #share a {
  transition: all 450ms ease;
  color: #FFFFFF;
  overflow: hidden;
  text-decoration: none;
  margin: 20px;
  margin-left: 0;
}
body #share a:hover span:last-child {
  background-color: #b4b4b4;
}
body #share a span {
  transition: all 450ms ease;
  border-radius: 0 20px 20px 0;
  padding: 8px 20px;
  background: #cbcbcb;
}
body #share a span:first-child {
  padding: 8px 10px;
  border-radius: 20px 0 0 20px;
  background: #b4b4b4;
}
body #share a img {
  height: 15px;
}
body #share a.facebook span {
  background: #3667b6;
}
body #share a.facebook span:first-child {
  background: #26539c;
}
body #share a.twitter span {
  background: #8de0fe;
}
body #share a.twitter span:first-child {
  background: #5fd4ff;
}
body #share a:hover.facebook span {
  background: #26539c;
}
body #share a:hover.twitter span {
  background: #5fd4ff;
}
body .contentsquare-content {
  display: flex;
  align-items: stretch;
  color: #707070;
}
body .contentsquare-content.squareinvert {
  flex-direction: row-reverse;
}
body .contentsquare-content.squareinvert .contentsquare-text {
  text-align: left;
}
body .contentsquare-content h1.h3, body .contentsquare-content h2.h3 {
  padding-bottom: 30px;
  font-size: 3.5em;
  color: var(--RECREA_COLOR_PRIMARY);
  text-transform: none;
}
body .contentsquare-content .contentsquare-text {
  padding: 7.8125%;
  padding: min(146px, 7.8125%);
  text-align: right;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
  align-items: center;
}
body .contentsquare-content .contentsquare-text .contentsquare-text-cropped {
  overflow: hidden;
}
body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div h1, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div h2, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div h3, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div h4, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div h5, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div h6,
body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div .h1, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div .h2, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div .h3, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div .h4, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div .h5, body .contentsquare-content .contentsquare-text .contentsquare-text-cropped div .h6 {
  line-height: 1em;
  margin-bottom: 10px;
}
body .contentsquare-content .contentsquare-text div {
  max-width: 674px;
}
body .contentsquare-content .contentsquare-text .plus span {
  display: flex;
}
body .contentsquare-content figure {
  flex: 0 0 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body .contentsquare-content img {
  display: none;
}
body .contentsquare-content:nth-child(even) {
  flex-direction: row-reverse;
}
body .contentsquare-content:nth-child(even) .contentsquare-text {
  text-align: left;
  /*align-items: flex-start;*/
  align-items: center;
}
body .contentsquare-content:nth-child(even).squareinvert {
  flex-direction: row;
}
body .contentsquare-content:nth-child(even).squareinvert .contentsquare-text {
  text-align: right;
  align-items: flex-end;
}
body .contentsquare-content.color-true, body .contentsquare-content.color2-true {
  background: var(--RECREA_COLOR_PRIMARY);
  color: #FFFFFF;
}
body .contentsquare-content.color-true h1.h3, body .contentsquare-content.color-true h2.h3, body .contentsquare-content.color2-true h1.h3, body .contentsquare-content.color2-true h2.h3 {
  color: #FFFFFF;
}
body .contentsquare-content.color-true .plus span, body .contentsquare-content.color2-true .plus span {
  background: #FFFFFF;
}
body .contentsquare-content.color-true .plus span:after, body .contentsquare-content.color2-true .plus span:after {
  color: var(--RECREA_COLOR_PRIMARY);
}
body .contentsquare-content.color-true .plus span:hover, body .contentsquare-content.color2-true .plus span:hover {
  background: var(--RECREA_COLOR_SECONDARY);
}
body .contentsquare-content.color-true .plus span:hover:after, body .contentsquare-content.color2-true .plus span:hover:after {
  color: #FFFFFF;
}
body .contentsquare-content.color2-true {
  background: var(--RECREA_COLOR_SECONDARY);
}
body .contentsquare-content.color2-true ::-moz-selection {
  background: var(--RECREA_COLOR_PRIMARY);
}
body .contentsquare-content.color2-true ::selection {
  background: var(--RECREA_COLOR_PRIMARY);
}
body .contentsquare-content.color2-true .plus span:after {
  color: var(--RECREA_COLOR_SECONDARY);
}
body .contentsquare-content.color2-true .plus span:hover {
  background: var(--RECREA_COLOR_PRIMARY);
}
body .contentsquare-content.color2-true .button-white {
  color: var(--RECREA_COLOR_SECONDARY);
}
body .contentsquare-content.color2-true .button-white:hover {
  background: var(--RECREA_COLOR_SECONDARY);
  color: #FFFFFF;
  border-color: #FFFFFF;
}
body .plus {
  background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0.75) 75%, rgba(255, 255, 255, 0) 100%);
  padding-top: 50px;
  margin-top: 0;
  transform: translateY(-100%);
  width: 100%;
}
body .plus span {
  background: var(--RECREA_COLOR_SECONDARY);
  padding: 5px;
  border-radius: 100%;
  transition: all 450ms ease;
  margin: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  transform: translateY(calc(100% + 20px));
}
body .plus span:after {
  content: "+";
  display: block;
  font-weight: 600;
  font-size: 2.25em;
  color: #FFFFFF;
  font-family: Arial, sans-serif;
}
body .plus span:hover {
  background: var(--RECREA_COLOR_PRIMARY);
}
body #footer {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: #454545;
  color: #FFFFFF;
  /* margin-top: 10rem; */
  padding: 5rem 2rem 5rem 2rem;
  font-size: 0.9em;
}
body #footer .footer_padding{
  min-width: 100%;
  align-self: center;
  height: 14rem;
}
body #footer .content {
  display: flex;
  justify-content: space-between;
  width: -webkit-fill-available;
  width: -moz-available;
}
body #footer #newsletter {
  position: absolute;
  top: -8%;
  width: 100%;
  max-width: 1080px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 2rem 2.5rem 2rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.15);
  background-color: var(--white);
  color: var(--grey);
  z-index: 2;
}
body #footer #newsletter .badge {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background-color: var(--RECREA_COLOR_PRIMARY);
  color: var(--white);
}
body #footer #newsletter .badge i {
  display: flex;
  margin: unset;
  font-size: 1.75rem;
}
body #footer #newsletter .text_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  color: #000000;
}
body #footer #newsletter .text_content h2 {
  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
  text-align: center; 
  color: var(--RECREA_COLOR_PRIMARY);
}
body #footer #newsletter #formNewsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: unset;
  gap: 0.5rem;
  width: 60%;
}
body #footer #newsletter #formNewsletter .newsletter_inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}
body #footer #newsletter #formNewsletter .newsletter_inputs input {
  flex: 1 240px;
}
body #footer #newsletter #formNewsletter .newsletter_inputs .btn_submit {
  max-width: fit-content;
  line-height: inherit;
  font-size: 1rem;
  border-radius: 0.5rem;
  background-color: var(--RECREA_COLOR_PRIMARY);
  border-color: var(--RECREA_COLOR_PRIMARY);
}
body #footer #newsletter .mention {
  font-size: 0.75rem;
  text-align: center;
}
body #footer #newsletter .mention a {
  color: var(--grey);
  text-decoration: underline;
}
body #footer #newsletter .mention i {
  font-size: 0.875rem;
  vertical-align: text-top;
  margin: unset;
}
body #footer span.h5 {
  color: var(--RECREA_COLOR_SECONDARY);
  text-transform: uppercase;
  font-size: 1.4em;
  margin-bottom: 15px;
  margin-top: 40px;
  display: block;
}
body #footer span.h5:first-child {
  margin-top: 0;
}
body #footer p {
  font-size: 1em;
}
body #footer p, body #footer a {
  line-height: 1.6em;
}
body #footer a {
  color: #FFFFFF;
  text-decoration: none;
}
body #footer a:hover {
  color: var(--RECREA_COLOR_SECONDARY);
}
body #footer i {
  margin-right: 10px;
}
body #footer i.icon-facebook {
  margin-right: 0;
  margin-left: 5px;
}
body #footer #stars-container {
  display: inline-block;
}
body #footer .note {
  font-size: 0.7em;
}
body #footer #logos-footer {
  width: 100%;
  height: auto;
  max-width: 164px;
  text-align: center;
}
body #footer #logos-footer .collectivite {
  margin-top: 30px;
}
body #footer #logos-footer .collectivite img {
  width: 100%;
}
body #subfooter {
  background: var(--RECREA_COLOR_SECONDARY);
  color: #FFFFFF;
  padding: 15px 20px;
  font-size: 0.9em;
}
body #subfooter a {
  color: #FFFFFF;
  text-decoration: none;
}
body #subfooter a:hover {
  text-decoration: underline;
}
body #subfooter span {
  margin: 10px;
}
body #subfooter .inline {
  display: inline;
}

/* BLOC HEADER DU CHEQUE */
body #content .btn_cheque {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  height: 50px;
  padding: 0 16px;
  cursor: pointer;
}

body #content .btn--cta {
  background-color: #23b8cd;
  border-radius: 30px;
  font-size: 1.2rem;
  color: #ffffff;
  transition: all 0.2s ease-in-out; 
}

body #content .btn--cta:hover {
  background-color: #ffffff;
  color: #23b8cd;
  border: 2px #23b8cd solid;
  transition: all 0.2s ease-in-out; 
}

.cheque__header {
  padding-top: 4%;
  padding-bottom: 4%;
}

.cheque__header__title {
  font-size: 4.5rem;
  font-weight: 500;
  color: #354d68;
  text-align: left;
  margin: 0 32% 3% 10%;
  text-transform: initial;
}

body #container .cheque__header__chapeau {
  font-size: 2rem;
  color: #a4afbb;
  text-align: left;
  display: flex;
  align-items: center;
  padding-right: 12%;
}

.cheque__header__theme {
  display: flex;
  justify-content: center;
  margin-bottom: -150px;
}

.cheque__header__theme__figure {
  position: relative;
  transform: perspective(60cm) rotateX(35deg);
  display: flex;
}

.cheque__header__theme__figure #theme {
  display: block;
  width: 45vw;
  border-radius: 1vw;
  box-shadow: 0px 20px 20px 5px rgba(0, 0, 0, 0.15);
  border: 2px #ffffff solid;
}

.cheque__header__theme__figure #montant_dans_theme {
  font-size: 5vw;
  font-weight: 500;
  color: #ffffff;
  transform: perspective(40cm) rotateX(30deg);
  text-align: right;
  position: absolute;
  right: 28%;
  top: 20% !important;
} 

.img_texte {
  display: flex;
  flex-direction: row-reverse;
  margin-left: 8%;
  gap: 5%;
}

.img_texte:nth-child(2) {
  order: 2;
}/* fin BLOC HEADER CHEQUE */

/* BLOC PERSONNALISATION CHEQUE */
.cheque__form {
  background-color: #354d68;
  color: #ffffff;
  text-align: center;
  padding: 7rem 2rem 2rem 2rem;
  margin: initial;
}

.container-div {
  display: flex;
  width: 100%;
  gap: 16px;
}

.content-div,
.last_fieldset {
  flex: 1;
}
/* .content-div {
  width: 55%;
} */

.content-div .change_visuel {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
}

/* .last_fieldset {
  width: 45%;
} */

#select-themes option {
  background-color: #354d68;
}

.span_euro {
  font-size: 6rem;
  font-weight: 500;
}

.proposition-montant label:nth-child(2) {
  margin-bottom: 5px;
}

.input_cursor_montant {
  display: flex;
    justify-content: center;
  gap: 2rem;
}

/* enlever fleche haut et bas input choix valeur */
.input_cursor_montant input[type="number"]::-webkit-outer-spin-button,
.input_cursor_montant input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
    margin: 0;
}

/* pareil mais sur firefox */
.input_cursor_montant input[type="number"] {
  appearance:textfield;
  -moz-appearance:textfield;
}

.input_cursor_montant label[for="exp"] {
  font-size: 1.4rem;
}

.input_montant {
  flex: 1 0 324px;
  text-align: right;
}
.montant_perso {
  flex: 1 0 324px;
  display: block;
  text-align: left;
}

/* style spécifique à l'input type range */

.montant_perso input[type="range"] {
  margin-top: 20px;
  font-size: 1.5rem;
  width: 10em;
  color: #23b8cd;
  position: relative;
  overflow: hidden;
  --thumb-height: 18px;
  --track-height: 0.125em;
  --track-color: #556a82;
  --brightness-hover: 180%;
  --brightness-down: 80%;
  --clip-edges: 0.125em;
  background-color: #354d68;
}

/* === WebKit specific styles === */
.montant_perso input[type="range"],
.montant_perso input[type="range"]::-webkit-slider-runnable-track,
.montant_perso input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

.montant_perso input[type="range"]::-webkit-slider-runnable-track,
.montant_perso input[type="range"]::-webkit-slider-thumb {
  position: relative;
}

.montant_perso input[type="range"]::-webkit-slider-thumb {
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
    100vmax currentColor;

  width: var(--thumb-width, var(--thumb-height));
  
  border: 2px #23b8cd solid;
  background-color: #354d68;
  box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height));

  filter: brightness(100%);
  clip-path: polygon(
    100% -1px,
    var(--clip-edges) -1px,
    0 var(--clip-top),
    -100vmax var(--clip-top),
    -100vmax var(--clip-bottom),
    0 var(--clip-bottom),
    var(--clip-edges) 100%,
    var(--clip-further) var(--clip-further)
  );
}

.montant_perso input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
    100% calc(var(--track-height) + 1px);
}

/* === Firefox specific styles === */
.montant_perso input[type="range"],
.montant_perso input[type="range"]::-moz-range-track,
.montant_perso input[type="range"]::-moz-range-thumb {
  appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

.montant_perso input[type="range"]::-moz-range-track,
.montant_perso input[type="range"]::-moz-range-thumb,
.montant_perso input[type="range"]::-moz-range-progress {
  background: #fff0;
}

.montant_perso input[type="range"]::-moz-range-thumb {
  background: currentColor;
  border: 0;
  width: var(--thumb-width, var(--thumb-height));
  border-radius: var(--thumb-width, var(--thumb-height));
  cursor: grab;
}

.montant_perso input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
}

.montant_perso input[type="range"]::-moz-range-track {
  width: 100%;
  background: var(--track-color);
}

.montant_perso input[type="range"]::-moz-range-progress {
  appearance: none;
  background: currentColor;
  transition-delay: 30ms;
}

.montant_perso input[type="range"]::-moz-range-track,
.montant_perso input[type="range"]::-moz-range-progress {
  height: calc(var(--track-height) + 1px);
  border-radius: var(--track-height);
}

.montant_perso input[type="range"]::-moz-range-thumb,
.montant_perso input[type="range"]::-moz-range-progress {
  filter: brightness(100%);
}

/* fin style input type range */

.btn--form {
  background-color: #576c84;
  border: 1px solid #a4afbb;
  border-radius: 10px;
  line-height: 2rem;
  color: #ffffff;
}

body #content .btn_mobile {
  display: none;
  transition: all 0.2s ease-in-out;
}

body #content .btn_desktop {
  display: inline-flex;
  transition: all 0.2s ease-in-out; 
}

body #content .btn_mobile:hover, 
body #content .btn_desktop:hover {
  background-color: #23b8cd;
  transition: all 0.2s ease-in-out;
  color: inherit;
}

.chevron_gauche:before, 
.chevron_droit:before {
  border-style: solid;
  border-width: 0.10em 0.10em 0 0;
  content: '';
  display: inline-block;
  height: 0.30em;
  position: relative;
  top: 0.30em;
  vertical-align: top;
  width: 0.30em;
  border-radius: 1px;
  font-size: 2rem;
}

.chevron_gauche:before {
  left: 0.13em;
  transform: rotate(-135deg);
  margin-right: 10px;
}

.chevron_droit:before {
  right: 0.13em;
  transform: rotate(45deg);
  margin-left: 10px;
}

#themes {
  width: 350px;
  border-bottom: 1px solid;
}

.fieldset_submit {
  margin-bottom: 0;
}

.fav-montant, .required_fields {
  color: #23b8cd;
}

.required_fields {
  margin-bottom: 10px;
  margin-top: 10px;
}

.fav-montant::before {
  content:"\002605"
}

.cheque__form__step {
  margin-bottom: 50px;
  text-align: center;
}

.cheque__form__step img{
  width: 60px;
  height: 60px;
  vertical-align: middle;
}

.cheque__form__step p {
  text-align: center;
  font-size: 1rem;
}

.cheque__form__step hr{
  border: none;
  border-top: 1px #FFF solid;
  margin: 0 40% 5% 40%;
}

.cheque__form__step__title {
  font-size: 1.6rem;
  text-transform: uppercase;
  font-weight: 500;
  margin: auto;
  margin-bottom: 15px !important;
  line-height: 30px;
}

.cheque__form__step input[type=number] {
  color: #ffffff;
  text-align: inherit;
  background-color: inherit;
  font-size: 6rem;
  width: 200px;
  border: none;
  font-weight: 500;
}

.cheque__form__step input[type=radio]:checked, .cheque__form__step input[type=radio]:not(:checked) {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  visibility: hidden;
}

.cheque__form__step .proposition-montant {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.cheque__form__step .proposition-montant .choix-montant + label {
  position: relative;
  width: 150px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #a4afbb;
  border-radius: 60px;
  cursor: pointer;
  background-color: #576c84;
  transition: all 0.2s ease-in-out; 
}

.cheque__form__step .proposition-montant .choix-montant:hover + label:hover {
  background-color: #23b8cd;
  border: 2px solid #23b8cd;
  transition: all 0.2s ease-in-out; 
}

.cheque__form__step .proposition-montant label[for="montant-02"] {
  border: 2px solid #23b8cd;
}

.cheque__form__step .proposition-montant .choix-montant + label .choix-montant:not(:checked) + label {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-image: linear-gradient(138deg, var(--red), var(--yellow));
  z-index: -1;
}

.cheque__form__step .text {
  display: flex;
  flex-direction: column;
}

.cheque__form__step .text label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: inherit;
}

.cheque__form__step .text .champs-txt {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #a4afbb;
  color: #ffffff;
  background-color: #576c84;
  margin-bottom: 10px;
}

.cheque__form__step .text .champs-txt input[name="email"] {
  margin-bottom: 0;
}

.cheque__form__step .text .champs-txt::-moz-placeholder {
  color: #a4afbb;
}

.cheque__form__step .text .champs-txt::placeholder {
  color: #a4afbb;
}

.cheque__form__step .text .champs-txt:focus {
  border-color: #23b8cd;
}

.icon_payment {
  margin-top: 15px;
}

.icon_payment img {
  height: 30px;
  width: 30px;
}
/*  */

/* BANDEAU SERVICES */
.cheque__services {
  display: flex !important;
  justify-content: space-evenly;
  align-items: center;
  background-color: #eeeeee;
  padding: 90px 24px;
}

.cheque__services__content {
  width: 20%;
  height: 12rem;
}

.cheque__services__content__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.cheque__services__content__icon .icon {
  max-width: 35vw;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.cheque__services__content__caption {
  text-align: center;
  color: #354d68;
  font-weight: 500;
  font-size: 1.2rem;
  margin-top: 24px;
  padding: 0 22%;
} /* fin bandeau services */

/* FAQ */
.faq {
  text-align: center;
  margin: 6rem 0;
  color: #354d68;
  display: block !important;
}

.faq__header h2 {
  font-size: 2.3rem;
  margin-bottom: 20px;
  font-weight: 500;
}

.faq__header p {
  font-size: 1.6rem;
  margin-bottom: 30px;
}

.faq_all_dropdown {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 10%;
  text-align: left;
}

/* .faq__dropdown {
  margin: 3% 0;
} */

.faq__dropdown__title {
  border: 2px #354d68 solid;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  transition: all 0.2s ease-in-out;
}

.faq__dropdown__title:hover, 
.faq__dropdown__title.active {
  background-color: #354d68;
  color: #FFF;
  transition: all 0.2s ease-in-out;
}

.faq__dropdown__title:hover img {
  filter: brightness(0) invert(1);
}

.faq__dropdown h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 500;
}

.faq__dropdown p {
  font-size: 1.2rem;
  background-color: #eeeeee;
  color: #737373;
  padding: 20px;
}

.faq_toggle-icon {
  width: 24px;
  height: 24px;
}

.faq__dropdown__text--hidden .plus-icon {
  display: inline;
}

.faq__dropdown__text--hidden {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.faq__dropdown__text--hidden .link {
  color: #23b8cd;
  text-decoration: none;
} /* fin FAQ */

/* PAGE PANIER */

.links {
  margin-top: 12rem !important;
  margin-left: 12rem;
}

.links a {
  text-decoration: none;
  font-style: italic;
  color: #354d68;
}

.panier__header {
  color: #354d68;
  display: flex;
  justify-content: center;
}

.panier__header hr {
  border: 1px solid #354d68;
}

.parcours_client {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parcours_client span {
  font-size: inherit;
  display: grid;
  text-align: center;
  padding: 20px 20px 0 20px;
}

.parcours_client .second_span_parcours {
  padding: 20px 30px 0 30px;
}

.parcours_client hr {
  width: 8rem;
}

.parcours_client img {
  margin-bottom: 10px;
  height: 80px;
  width: 80px;
}

.content_panier {
  display: flex;
  width: 100%;
  gap: 5%;
  margin: 2% 0;
}

.content_panier .div_gauche {
  width: 50%;
  margin-left: 10rem;
}

.content_panier .div_droite {
  width: 35%;
  margin-right: 10rem;
}

.content_panier legend{
  color: #354d68;
  margin: inherit;
}

.content_panier .text {
  background-color: #354d68;
  color: #FFFFFF;
  border-radius: 30px;
}

.recap {
  color: #354d68;
}

.recap .rubriques_cheque {
  width: 100%;
  display: flex;
}

.recap .rubriques_cheque span:first-child {
  width: 38%;
}

.recap .rubriques_cheque span:nth-child(2) {
  width: 23%;
}

.recap hr {
  border: 1px #9c9c9c solid;
}

.section_promo {
  text-align: center;
  margin: 15px 0;
}

.section_promo input[type="text"] {
  text-align: center;
}

.section_promo input:first-child {
  margin-right: 20px;
}

.btn_cheque_submit {
  padding: 10px 5%;
  border: 2px #23b8cd solid;
  height: inherit;
}

.coordonnees {
  text-align: left;
  padding: 40px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.coordonnees div:first-of-type {
  display: flex;
}

.coordonnees #confirmation_code_promo {
  display: inherit;
}

.coordonnees input[type="radio"] {
  position: inherit !important;
  left: inherit !important;
  width: inherit !important;
  height: inherit !important;
  visibility: inherit !important;
}

.coordonnees hr {
  margin: inherit;
}

.coordonnees .checkmark_radio {
  background-color: #576c84;
  /*border: 1px #FFFFFF solid;*/
  height: 15px;
  width: 15px;
}

.coordonnees .checkmark_radio:after {
  top: 0 !important;
  left: 0 !important;
  width: 10px !important;
  height: 10px !important;
}

.coordonnees .container_radio {
  padding-left: 20px;
}

.coordonnees .span_note {
  font-size: 14px;
}

.infos_cheque {
  display: flex;
  box-shadow: rgba(100, 100, 111, 0.15) 0px 0px 20px 0px;
  font-weight: bold;
  margin-top: 20px;
  border-radius: 10px;
  padding: 20px;
  justify-content: space-between;
}

.infos_cheque div {
  display: grid;
}

.infos_cheque .img_montant {
  position: relative;
}

.infos_cheque .div_infos_mobile {
  display: contents;
}

.div_infos_mobile hr {
  display: none;
}

.infos_cheque .first_span {
  font-weight: initial;
}

/* le visuel du cheque */
.infos_cheque img:first-of-type {
  height: 100px;
  width: 100%;
}

.div_nom_theme {
  min-width: 120px;
  text-align: center;
}

/* le nom du theme */
.infos_cheque .nom_theme {
  text-decoration: underline;
}

.nom_theme a {
  color: #354d68;
}

/* le montant du cheque */
.infos_cheque .montant_cheque {
  border: 1px #354d68 solid;
  border-radius: 5px;
  padding: 10px 20px;
  font-weight: 500;
}

/* les images du bloc, sauf l'image du visuel du chèque */
.infos_cheque img:not(.visuel_cheque){
  height: 35px;
  width: 35px;
}

/* icone poubelle */
.infos_cheque .icone_poubelle:hover {
  filter: invert(12%) sepia(100%) saturate(4233%) hue-rotate(356deg) brightness(118%) contrast(120%);
}

.infos_cheque span, .infos_cheque a {
  align-self: center;
}

.infos_cheque p {
  display: none;
}

.infos_cheque div .picto_responsive, .infos_cheque div img:not(.visuel_cheque) {
  display: none;
}

.infos_cheque #montant_dans_theme {
  position:absolute;
  left:55%;
  top:15%;
  color:#FFFFFF;
  font-size:1.6rem;
  font-weight: 500;
}

.options_paiement {
  display: flex;
  justify-content: center;
  align-items: center;
}

.options_paiement .container_radio {
  visibility: hidden;
}

.add_cheque {
  text-align: center;
  margin-top: 30px;
}

.add_cheque a {
  text-decoration: none;
}

.add_cheque span {
  margin-right: 10px;
  font-size: 3rem;
}

.add_cheque .btn--cta {
  background-color: #FFFFFF;
  color: #23b8cd;
  border: 2px #23b8cd solid;
}

.add_cheque .btn--cta:hover {
  background-color: #23b8cd;
  color: #FFFFFF;
  transition: all 0.2s ease-in-out; 
}

.legend_inherit {
  text-align: inherit;
  margin-bottom: inherit;
}

.icon_payment {
  margin-top: 15px;
}

.icon_payment img {
  height: 30px;
  width: 30px;
}

.radio_checkbox_group {
  display: flex;
  align-items: baseline;
}

.radio_checkbox_group:first-of-type {
  margin-right: 60px;
}

.radio_checkbox_group input {
  margin-right: 5px;
  align-self: baseline;
}

.radio_checkbox_group label {
  margin-bottom: inherit !important;
  display: block !important;
  font-size: 14px !important;
}

.radio_checkbox_group #label_cgv {
  padding-left: 20px;
  cursor: default;
}

.btn_payment {
  margin-top: 20px;
  text-align: center;
}

.btn_payment input {
  padding: 10px 15%;
}

body #content .disabled_button {
  background-color: #576c84;
  color: #8e9fb0;
  border: 2px #8e9fb0 solid !important;
  cursor: auto;
}

body #content .disabled_button:hover {
  background-color: #576c84;
  color: #8e9fb0;
  border: 2px #8e9fb0 solid !important;
}

.cp_ville {
  display: flex;
  width: 100%;
}

.cp_ville br {
  display: none;
}

.cp_ville div:nth-child(1) {
  display: flex;
  flex-direction: column;
  width: 30%;
  margin-right: 10px;
}

.cp_ville div:last-child {
  width: 70%;
}

.cp_ville input, .cp_ville select {
  width: 100%;
}

/* Checkbox + label */
.custom_checkbox {
  display: block;
  position: relative;
  padding-left: 20px;
  color: #FFF;
}

/* On cache la checkbox par défaut du navigateur */
.custom_checkbox input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.custom_checkbox a {
  color: #FFFFFF;
}

.custom_checkbox a:hover {
  color: #FFFFFF;
}

/* Custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 13px;
  width: 13px;
  background-color: #576c84;
  border: 1px solid #a4afbb;
  border-radius: 3px;
  cursor: pointer;
}

/* au survol, on change la border */
.checkmark:hover {
  border: 1px #23b8cd solid;
}

/* checkbox cochée, on change le bg et la border */
.custom_checkbox input:checked ~ .checkmark {
  background-color: #23b8cd;
  border: 1px solid #a4afbb;
}

.prix_ttc {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
  font-size: 1.5rem;
}

.mt-10 {
  margin-top: 10px;
}

/* fin PAGE PANIER */

@media screen and (max-width: 1260px) {

  body #news {
    padding: 5rem 2rem;
  }
  body #news #list_actus {
    max-width: 100%;
  }
  body #contenus .contentsquare-content .contentsquare-text {
    text-align: center;
  }
  body #horaires .contentsquare-content table {
    width: 100%;
  }
  body #tarifs #onglets,
  body #abonnements #abonnement-formules,
  body #abonnements #abonnement-avantages {
    flex-wrap: wrap;
  }
  body #activites .blocks-content .block a {
    flex-wrap: wrap;
  }
  body #activites .blocks-content .block figure {
    height: 350px;
  }
  body #activites .blocks-content .block figure, body #activites .blocks-content .block div {
    width: 100%;
  }
  body #activites .blocks-content .block:nth-child(odd) figure {
    order: 1;
  }
  body #activites .blocks-content .block:nth-child(odd) div {
    order: 2;
  }
  /* body #menu {
    padding: 0px;
  } */
  body #tabbar {
    display: block;
  }
  body #tabbar #tabbar-nav nav a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px 0 5px 0;
  }
  body #tabbar #tabbar-nav nav a i {
    padding: 0 0 5px 0;
    margin: 0;
  }
  body #menu .menu-content nav a {
    padding: 0px;
  }
  body #planning figure img, body #planning .html-planning, body #plannings figure img, body #plannings .html-planning {
    padding: 10px;
    padding-left: 0;
    padding-right: 0;
  }
  body #plannings {
    padding: 25px 0 50px 0;
  }
  body #onglets {
    margin-bottom: 25px;
  }
  body #onglets .button-onglet {
    margin: 10px;
  }
  body #acces {
    flex-wrap: wrap;
  }
  body #acces #transports {
    width: 100%;
  }
  body #contact .content {
    flex-wrap: wrap;
  }
  body #contact .content .contact-content:first-child {
    margin-bottom: 25px;
  }
  body #menu .menu-content nav #list-menu {
    flex-direction: column;
  }
  body #menu .menu-content nav ul li:last-childn a {
    padding-right: 10px;
  }
  body #menu .menu-content .btn-cheque {
    display: block;
    padding: 0.25rem 0.75rem;
    margin: 0;
    text-transform: none;
    background-color: #F9557F;
    font-size: 0.875rem;
    border: none;
  }
  body #menu .menu-content .btn-cheque:hover {
    color: var(--white);
    background-color: #fc7f9e;
  }
  body #menu .menu-content .left-content {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 3vw, 2rem) ;
  }
  body #menu .menu-content #hamburger {
    width: 36px;
    height: 26px;
    transform: rotate(0deg);
    transition: 0.5s ease-in-out;
    cursor: pointer;
    display: block;
    right: 0;
    top: 10px;
    z-index: 100;
  }
  body #menu .menu-content #hamburger:hover span {
    background: var(--RECREA_COLOR_PRIMARY);
  }
  body #menu .menu-content #hamburger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--RECREA_COLOR_PRIMARY);
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }
  body #menu .menu-content #hamburger span:nth-child(1) {
    top: 0px;
  }
  body #menu .menu-content #hamburger span:nth-child(2), body #menu .menu-content #hamburger span:nth-child(3) {
    top: 12px;
  }
  body #menu .menu-content #hamburger span:nth-child(4) {
    top: 24px;
  }
  body #menu .menu-content #hamburger.open span:nth-child(1) {
    top: 12px;
    width: 0%;
    left: 50%;
  }
  body #menu .menu-content #hamburger.open span:nth-child(2) {
    transform: rotate(45deg);
  }
  body #menu .menu-content #hamburger.open span:nth-child(3) {
    transform: rotate(-45deg);
  }
  body #menu .menu-content #hamburger.open span:nth-child(4) {
    top: 12px;
    width: 0%;
    left: 50%;
  }
  body #menu .menu-content.open #nav-menu {
    transform: translateX(0);
    opacity: 1;
  }
  body #menu .menu-content #nav-menu {
    position: fixed;
    z-index: -1;
    height: -webkit-fill-available;
    height: -moz-available;
    transform: translateX(-100%);
    min-height: 100vh;
    width: 100vw;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 150ms;
  }
  body #menu .menu-content #list-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100vw;
    height: 100%;
    padding: 0px 0 4.5rem 0;
    background-color: #ffffff;
    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.15);
  }
  body #menu .menu-content nav #list-menu .menu-dropdown .dropdown {
    display: none;
    position: static;
    padding: 0;
    opacity: 1;
  }
  body #menu .menu-content nav ul .menu-dropdown:hover .dropdown {
    display: none;
    opacity: 0;
  }
  body #menu .menu-content nav #list-menu .menu-dropdown.open .dropdown {
    transform: none;
    font-size: 0.875rem;
    display: block;
    opacity: 1;
  }
  body #menu .menu-content nav ul .menu-dropdown.open .icon-chevron {
    transform: rotate(360deg);
    color: var(--RECREA_COLOR_SECONDARY);
  }
  body #menu .menu-content nav #list-menu > li {
    display: block;
    font-size: 1.125rem;
    width: 100%;
    height: auto;
    text-align: left;
    justify-content: flex-start;
  }
  body #menu .menu-content nav #list-menu .nav-title {
    padding: 0.75rem 2rem;
    line-height: 1em;
  }
  body #menu .menu-content nav #list-menu .nav-title:has(.btn-orange) {
    padding: 0 1.25rem;
    font-size: 1rem;
  }
  body #menu .menu-content nav #list-menu #btn_resa {
    display: none;
  }
  body #menu .menu-content nav .menu-dropdown .dropdown__header {
    display: flex;
    pointer-events: none;
  }
  body #menu .menu-content nav ul .menu-dropdown .dropdown ul {
    box-shadow: none;
  }
  body #menu .menu-content nav ul .menu-dropdown .dropdown .dropdown__content li {
    padding: 0.25rem 3rem;
  }
  body #menu .menu-content nav ul .menu-dropdown .dropdown ul li a {
    padding: 0px;
  }
  body #menu .menu-content nav ul .menu-dropdown .dropdown ul li a:hover {
    transition: none;
  }
  body #menu .menu-content nav a {
    display: inline-block;
    width: 100%;
  }
  body #menu .menu-content nav a.btn-orange {
    margin: 13px 0;
  }
  body #spaces .spaces-content {
    flex-wrap: wrap;
  }
  body #spaces .spaces-content .space {
    height: 300px;
  }
  body #spaces .spaces-content .space-fake {
    display: none;
  }
  body #identity .content {
    max-width: none;
    padding: 80px 7.8125%;
  }
  body #iframe_webvision iframe {
    width: 100%;
  }
  body #avis #opinions .opinion {
    width: 100%;
  }
  body #footer .content {
    flex-wrap: wrap;
  }
  body #footer .content section {
    margin: 20px;
    flex: 0 0 20%;
  }

  /* PAGE HORAIRES */
  body #contenus .contenu_horaires.active {
    display: block;
  }

  body #horaires .contentsquare_content_horaires {
    width: 100%;
  }

  /* fin PAGE HORAIRES */

  /* BLOC HEADER */
  .cheque__header__theme {
    margin-bottom: -100px;
  }

  .cheque__header__theme__figure {
    justify-content: center;
  }

  .cheque__header__theme__figure #theme {
    width: 85vw;
  }

  .cheque__header__theme__figure #montant_dans_theme {
    font-size: 10vw;
  } 

  .img_texte {
    display: block;
    margin-left: 0;
  }/* fin BLOC HEADER CHEQUE */

  /* BLOC PERSONNALISATION CHEQUE */
  .cheque__form {
    padding-top: 12%;
  }

  .container-div {
    display: block;
  }

  .content-div, .last_fieldset {
    width: initial;
  }

  .last_fieldset {
    margin-bottom: 0;
  }

  body #content .btn_mobile {
    display: inline-flex;
  }
  
  body #content .btn_desktop {
    display: none;
  }

  body #content .chevron_gauche:before {
    margin-right: 0;
  }
  
  body #content .chevron_droit:before {
    margin-left: 0;
  }

  .cheque__form__step {
    margin-top: 25px;
  }

  .cheque__form__step .proposition-montant .choix-montant + label {
    width: 90px;
  }

  .cheque__form__step__title {
    font-size: 2rem;
  }

  .cheque__form__step input[type=number] {
    width: 100px;
  }

  .input_cursor_montant {
    display: block;
  }

  .input_cursor_montant .input_montant {
    display: flex;
    justify-content: center;
  }

  .montant_perso {
    text-align: center;
  }

  .div_montant {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .input_cursor_montant label[for="exp"] {
    font-size: 1.2rem;
  }

  #montant {
    text-align: right;
    font-size: 5rem;
    width: auto;
    min-width: 40px;
    padding: 0;
  }

  .span_euro {
    font-size: 5rem;
    align-self: center;
  }

  #themes {
    width: initial;
  }

  #themes span {
    font-size: 1.2rem;
  }
  /*  */

  /* bandeau services */
  .cheque__services {
    flex-direction: column;
    gap: 48px;
    padding: 50px 24px;
  }

  .cheque__services__content {
    width: inherit;
    height: inherit;
  }
  
  .cheque__services__content__icon {
    aspect-ratio: 3/1;
    height: inherit;
  }

  .cheque__services__content__icon .icon {
    width: 100px;
  }

  .cheque__services__content__icon .icon_calendrier {
    width: 90px;
  }
  
  .cheque__services__content__caption {
    padding: 0 34px;
  } /* fin bandeau services */

  /* FAQ */
  .faq {
    margin: 50px 0;
  }

  .faq h2 {
    font-size: 2.0rem;
  } 

  .faq__header p {
    font-size: 1.2rem;
  }

  .faq_all_dropdown {
    padding: 0 5%;
  }

  .faq__dropdown h3 {
    font-size: 1rem;
  }

  .faq__dropdown p {
    font-size: 1rem;
  }

  .faq img {
    margin-left: 20px;
  }/* fin FAQ */

  /* PAGE PANIER */

  .panier__header img, 
  .content_panier img {
    max-width: inherit;
  }

  .links {
    display: none;
  }

  .content_panier {
    display: block;
    margin: 10% 0;
  }

  .content_panier .div_gauche {
    margin-left: 1rem;
    margin-right: 1rem;
    width: auto;
  }

  .content_panier .div_droite {
    margin: 3rem 1rem 0 1rem;
    width: auto;
  }

  .recap .rubriques_cheque span:nth-child(2) {
    display: none;
  }
  
  .recap .rubriques_cheque span:nth-child(3) {
    display: none;
  }

  .recap p {
    font-weight: initial;
  }

  .infos_cheque {
    display: block;
  }

  .infos_cheque div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .infos_cheque #montant_dans_theme {
    left: 60%;
    top: 15%;
    font-size: 1.2rem;
  }

  .infos_cheque .div_infos_mobile {
    display: flex;
    flex-direction: row;
  }

  .div_infos_mobile {
    justify-content: space-around;
    margin-top: 20px;
  }

  .div_infos_mobile div {
    display: block;
    text-align: center;
  }

  .div_infos_mobile p {
    margin-bottom: 20px;
  }

  .div_infos_mobile hr {
    display: block;
    border: 1px #354d68 solid;
  }

  .infos_cheque p {
    display: block;
  }

  .infos_cheque div a, 
  .infos_cheque div img:not(.visuel_cheque) {
    display: block !important;
  }

  .infos_cheque .picto_responsive {
    margin-left: 10px;
  }

  .infos_cheque a, 
  .infos_cheque img:not(.visuel_cheque) {
    display: none;
  }

  .infos_cheque .visuel_cheque {
    margin-right: 20px;
    max-width: inherit;
  }

  .infos_cheque .montant_cheque {
    padding: 5px 30px;
  }

  .btn_payment input {
    padding: 10px 10%;
    font-size: inherit;
  }

  .cp_ville {
    display: block;
  }

  .cp_ville br {
    display: block;
  }

  .cp_ville div:nth-child(1) {
    width: inherit;
    margin-right: inherit;
  }

  .cp_ville div:last-child {
    width: inherit;
  }

  .section_promo {
    display: block !important;
    text-align: center !important;
  }

  .section_promo .btn--cta {
    font-size: inherit;
  }

  .coordonnees {
    padding: 20px;
  }

  .coordonnees div:first-of-type {
    justify-content: center;
  }

  .section_promo input:first-child {
    margin-right: 15px;
  }

  /* fin PAGE PANIER */
}
@media screen and (max-height: 1024px) {
  .img_planning {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  body #espaces  #espaces_container .slides .slides_link .card_espace .card_image {
    aspect-ratio: 1/1;
  }
}
@media screen and (max-width: 920px) {
  body h2 {
    word-wrap: inherit;
    overflow-wrap: inherit;
    -webkit-hyphens: none;
            hyphens: none;
  }
  body .header .bg-header .header-content h1, body .header .bg-header .header-content h2 {
    font-size: 4em;
  }
  body .blocks .blocks-content .block {
    flex: 0 0 48%;
  }
  body .contentsquare-content .contentsquare-text {
    padding: 3rem 1.5rem 5rem 1.5rem;
    font-size: 0.8em;
  }
  body .contentsquare-content .contentsquare-text .contentsquare-text-cropped {
    text-align: center;
  }
  body #rejoindre .contentsquare-content .contentsquare-text,
  body #contact .contentsquare-content .contentsquare-text {
    padding-top: 50px;
  }
  body #advantages .content {
    justify-content: center;
    margin-top: 20px;
  }
  body #horaires .contentsquare-content table {
    font-size: 1em;
  }
  body #horaires .contentsquare-content table tr td:first-child {
    font-size: 1.4em;
  }
  body #rules #rules-container {
    padding: 0 20px;
  }
  body #rules .rule {
    flex-direction: column;
    text-align: center;
  }
  body #rules .rule img {
    margin-right: 0;
    margin-bottom: 35px;
  }
  body #rules .rule .rule-picto {
    margin-right: 0;
    margin-bottom: 20px;
  }
  /* MOBILE IDENTITY CONTENT */
  /* body #identity .content {
    display: block;
    text-align: center;
  } */
  body #identity .content h1 {
    margin-bottom: 20px;
    padding-right: 0;
    font-size: 8vw;
  }
  body #identity .content h1 strong{
    font-size: 14vw;
  }
  body #actualites {
    margin: unset;
    padding: 0.5rem 0.5rem 5rem 0.5rem;
  }
  body #actualites #list_actus {
    padding: 1rem;
  }
  body #marketing-container {
    display: block;
  }
  body #marketing-container img {
    width: 100%;
  }
  body .contentsquare-content {
    flex-direction: column-reverse !important;
  }
  body .contentsquare-content:nth-child(even) .contentsquare-text, body .contentsquare-content .contentsquare-text {
    text-align: center;
    align-items: center !important;
  }
  body .contentsquare-content:nth-child(even) .contentsquare-text div, body .contentsquare-content .contentsquare-text div {
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body .contentsquare-content .squareinvert {
    flex-direction: column-reverse;
  }
  body .contentsquare-content figure {
    background: none;
  }
  body .contentsquare-content figure img {
    display: block;
    width: 100%;
  }
  body #acces-contact #contact .contact-wrapper {
    padding: 8rem 2rem 5rem 2rem;
  }
  body #acces-contact #contact .contact-left {
    text-align: center;
  }
  body #acces-contact #contact .contact-left .acces-itineraire {
    align-items: center;
  }
  body #acces-contact #acces {
    padding: 5rem 2rem;
  }
  body #footer #newsletter {
    top: -2%;
    padding: 1.5rem 1rem 2.5rem 1rem;
  }
  body #footer #newsletter #formNewsletter {
    width: 100%;
  }
  body #footer .footer_padding {
    height: 22rem;
  }
  body #footer .content {
    flex-wrap: wrap;
  }
  body #footer .content section {
    margin: 20px;
    flex: 0 0 25%;
  }
}
@media screen and (max-width: 768px) {
  body .partenaire-picture {
    padding: 2rem 0;
    max-width: 100%;
  }
  body #partenaires-content #partenaires-list .partenaire-container .partenaire-content .partenaire-contact {
    height: auto;
    width: 80%;
    border-left: none;
    border-top: #cfcfcf solid 1px;
    padding: 2rem 0;
    margin: 0 2rem;
  }
  body #partenaires-content #partenaires-list .partenaire-container .partenaire-picture {
    max-width: 100%;
  }
  body .partenaire-description {
    text-align: center;
  }
  body #actualite-content .actu_content_div {
    flex-wrap: wrap;
    text-align: center;
  }
  .cheque__form {
    padding: 12% 1rem 2rem 1rem;
  }
}
@media screen and (max-width: 640px) {
  body #spaces h1.h3,
  body #spaces h2.h3 {
    font-size: 3em;
  }
  body #overmenu nav {
    display: none;
  }
  body #header-home {
    height: 85vh;
  }
  body #header-home .bg-header {
    height: 90vh;
  }
  body .header-default {
    margin-top: 80px;
  }
  body #identity {
      /* margin-top: 120px; */
      padding-top: 40px;
  }
  body .header .bg-header .header-content h1, body .header .bg-header .header-content h2 {
    font-size: 3em;
  }
  body .header .bg-header .header-content p {
    font-size: 1.5em !important;
  }
  body #introseo {
    padding: 50px 0;
  }
  body #share a {
    display: flex;
  }
  body #share a span:last-child {
    flex-grow: 1;
    text-align: center;
  }
  body #actualite-content {
    line-height: 1.2em;
    font-size: 0.88em;
  }
  body #actualite-content p {
    line-height: 1.2em;
    font-size: 1em;
  }
  body #planning {
    padding: 50px 0;
  }
  body .blocks {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  body .blocks .blocks-content .block {
    flex: 0 0 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
  }
  body #overmenu {
    font-size: 0.75em;
    line-height: 1em;
  }
  body #overmenu .content div {
    text-align: center;
  }
  body #menu {
    height: 54px;
    padding: 8px 16px;
  }
  /* body #menu .menu-content nav {
    top: 38px;
    left: -16px;
  } */
  body #menu .menu-content #logo-site {
    max-height: 80%;
    display: block;
    padding: unset;
  }
  body #menu .menu-content #hamburger {
    right: 0;
    top: 6px;
  }
  body .header .parallax_container .bandeau_image {
    margin-top: 72px;
  }
  body #header-home {
    display: block;
  }
  body #header-home #header-home-nav {
    display: none;
  }
  body .slick-dots {
    left: 0;
  }
  body #actualite .actualite_header {
    padding: 1.5rem;
  }
  body #news .news-content {
    display: block;
  }
  body #news .news-content h2.h3 {
    font-size: 3em;
  }
  body #news .news-content .news {
    margin-bottom: 40px;
  }
  body #news .news-content .news img {
    width: 100%;
  }
  body #spaces .spaces-content {
    display: block;
  }
  body #spaces .spaces-content h1.h3, body #spaces .spaces-content h2.h3 {
    font-size: 3em;
  }
  body .contentsquare h1.h3, body .contentsquare h2.h3 {
    text-transform: none;
    font-size: 3em;
  }
  body #footer .content section {
    padding: 0 40px;
    margin: 20px 0;
    flex: 0 0 100%;
    text-align: center;
  }
  body #footer .content section#logos-footer {
    max-width: none;
  }
  body #subfooter .content {
    text-align: center;
  }
  body .bqzerq {
    bottom: 60px !important;
  }
  /* STYLE REFONTE HORAIRES */
  body #horaires {
    border-radius: unset;
    margin: 0 0 5rem 0;
  }
  /* #horaires .horaires_header .subnav {
    flex-direction: column;
  } */
  #horaires .horaires_content .categories .categorie_header {
    padding: 1rem 4rem 1rem 1rem;
  }
  #horaires .horaires_content .categories input:checked ~ .categorie_content {
      grid-template-columns: repeat(1, 1fr);
      overflow: visible;
  }
  #horaires .horaires_content .categorie_content .card_equipement .tableau_horaire .phrase_modifiable{
    padding: 0.5rem;
  }
  /*#horaires .horaires_header .subnav {
      flex-direction: column;
  }
  #horaires #horaires_content .categories .categorie_header {
    padding: 1rem 4rem 1rem 1rem;
  }
  #horaires #horaires_content .categories input:checked ~*/ .categorie_content {
      grid-template-columns: repeat(1, 1fr);
      padding: 1rem 0;
      overflow: visible;
  }
  /*#horaires #horaires_content*/ .categorie_content .card_equipement .tableau_horaire .phrase_modifiable{
    padding: 0.5rem;
  }
  /* FIN STYLE REFONTE HORAIRE */
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  body #tabbar {
    display: block;
  }
  body #tabbar #tabbar-nav nav {
    font-size: 0.9em;
  }
  body #tarifs #onglets .button-onglet {
    border-right: 0;
  }
  body footer {
    margin-bottom: 50px;
  }
}

/* corrections visuelles page cheque cadeau (pour le titre et sous titre) */
@media only screen and (min-width: 969px) and (max-width: 1400px) {
  .cheque__header__title {
    font-size: 5rem;
    margin: 0 10% 0 10%;
  }

  body #container .cheque__header__chapeau {
    font-size: 2.6rem;
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 20px;
    margin-top: 20px;
  }
}

@media only screen and (max-width: 968px) {
  .cheque__header__title {
    text-align: center;
    font-size: 2.6rem;
    margin: 0 8% 0 8%;
  }

  body #container .cheque__header__chapeau {
    font-size: 1.6rem;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
    padding-left: 10%;
    padding-right: 10%;
  }

  .infos_cheque img:not(.visuel_cheque){
    height: 30px;
    width: 30px;
  }
}

/* corrections visuelles page panier (pictos parcours client) */
@media only screen and (max-width: 968px) {

  .parcours_client hr {
    width: 2.5rem;
  }

  .parcours_client img {
    height: 70px;
    width: 70px;
  }

  .parcours_client span {
    padding: 20px 12px 0 12px;
    font-size: 12px;
  }
}

/* correction visuelle page panier petite tablette */
@media only screen and (min-width: 540px) and (max-width: 767px) {
  .montant_visuel {
    top: 30rem;
    left: 12rem;
  }

  .first_span {
    font-size: 1.2rem !important;
  }
}

/* correction visuelle page panier petite tablette */
@media only screen and (max-width: 767px) {
  #joinup-widget {
    margin-bottom: 48px!important;
    max-height: 70vh!important;
  }
  body .header .slick-dots {
    left: 4px;
  }
  body .header .slick-dots li button:before {
    font-size: 8px;
    width: 20px;
    height: 20px;
  }
  body .contentsquare-text-description .contentsquare-text-description-cropped {
    align-content: center;
  }
  body #identity .content div a.button { 
    transform: initial; 
  }
  .cheque__header {
    padding-top: 10% !important;
  }

  .cheque__header__theme {
    margin-bottom: -60px;
  }

  .section_promo input:first-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .infos_cheque .visuel_cheque {
    height: 70px !important;
    width: 130px !important;
  }

  .infos_cheque #montant_dans_theme {
    left: 45%;
    top: 12%;
  }

  .first_span {
    display: none;
  }

  .infos_cheque .montant_cheque {
    padding: 5px 20px;
  }

  .parcours_client .second_span_parcours {
    padding: 20px 5px 0 5px;
  }

  .parcours_client img {
    height: 50px;
  }
}

/* correction visuelle page personnalisation du cheque pour petit ecran d'ordi */
@media only screen and (min-width: 1435px) and (max-width: 1628px) {
  .cheque__header__title {
    margin: 0px 25% 3% 10% !important;
  }
}

/* correction visuelle page personnalisation du cheque pour petit ecran d'ordi ou grande tablette */
@media only screen and (min-width: 1260px) and (max-width: 1400px) {
  .cheque__header__title {
    margin: 0 10% 2% 10%;
  }

  #img-theme {
    height: 300px;
    width: 500px;
  }

  /* le visuel du chèque */
  #theme {
    height: 100%;
    width: 100% !important;
  }

  body #container .cheque__header__chapeau {
    padding-left: initial !important;
  }

  /* le nom du chèque */
  #themes {
    width: 200px;
  }

  .input_cursor_montant label[for="exp"] {
    font-size: 1.2rem;
  }

  .montant_perso input[type="range"] {
    width: 8em;
  }

  .div_gauche {
    margin-left: 5rem !important;
  }

  .div_droite {
    margin-right: 5rem !important;
  }
}

/* corrections visuelles page panier pour tout type de tablette */
@media only screen and (min-width: 540px) and (max-width: 969px) {
  .infos_cheque div:first-of-type {
    justify-content: space-evenly;
  }
}

/* corrections visuelles page panier pour tablettes (sauf petites) */
@media only screen and (min-width: 767px) and (max-width: 969px) {
  .montant_visuel {
    top: 32.5rem;
    left: 16rem;
  }
  
}

/* corrections visuelles page panier très petits écrans */
@media only screen and (max-width: 380px) {
  .panier__header {
    display: flex;
    margin: 0 20px;
  }
  .montant_visuel {
    top: 27.5rem;
  }

  .section_promo {
    display: block;
    text-align: center;
  }

  .section_promo .btn_submit {
    margin-top: 20px;
  }

  .infos_cheque .visuel_cheque {
    height: 65px !important;
  }
}

/* design du bandeau appli */

.pwa-banner {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  border-radius: 30px 30px 0px 0px;
  background-color: color-mix(in srgb, var(--secondary) 80%, transparent);
  backdrop-filter: blur(10px);
  color: white;
  padding: 30px 30px 50px 30px;
  text-align: center;
  box-shadow: 0 0px 5px 2px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  opacity: 0;
  transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.pwa-banner.show {
  bottom: 0;
  opacity: 1;
}

.pwa-banner.hide {
  bottom: -100px;
  opacity: 0; 
}

.icon_smiling {
  width:135px;
  height:55px;
}

.icon_telecharger {
  width:25px;
  height:25px;
  vertical-align: middle;
}

.pwa-install-button {
  border: 1px solid var(--primary);
  border-radius: 10rem;
  text-decoration: none;
  padding: 0.7rem 1.4rem 0.7rem 1.5rem;
  color:var(--secondary)!important;
  background:var(--primary);
  font-size: 16px;
}

.pwa-install-button:hover {
  border: 1px solid var(--secondary);
  color:var(--white)!important;
  background:var(--secondary);
}

.pwa-alert-text {
  font-size: 0.875rem;
  margin-bottom: 30px;
}

.pwa-alert-titre{
  font-size: 1.125rem;
  font-weight: 600;
  margin: 20px 30px 20px 30px;
}

.grecaptcha-badge {
  visibility: hidden;
}