/* Complément de mutualise_css.css */

/* Définition des polices et taille de polices */
/*
@font-face {
    font-family: "Genuine";
    src: url("/font/Genuine 400.ttf");
  }
*/

:root {
  /*
--typo-principale : 'Kumbh Sans', sans-serif;
--typo-secondaire : 'Genuine';
*/
  --typo-principale: "Roboto", sans-serif;
  --typo-secondaire: "Fugaz One", cursive;

  --font-size-hero-h1-mobile: 2.9rem;
  --font-size-normale-h1: 5rem;
  --font-size-mobile-h1: 3rem;

  --font-size-normale-h2: 4rem;
  --font-size-tablette-h2: 3rem;
  --font-size-mobile-h2: 2rem;

  --font-size-normale-h3: 2rem;

  --font-size-normale-corps: 14px;

  --font-size-normale-card-text: 12px; /*A remplacer par .fs-sm*/

  --font-size-normal-input: 20px;

  --font-size-tablette-card-text: 22px;

  /* Fontsize button à harmoniser */

  --font-size-normale-header: 1rem;

  --font-size-normale-footer: 14px; /*A remplacer par .fs-norm*/

  /* Définition d'une palette de couleurs  */
  --main-bg-color: #000000;
  --second-bg-color: #ffff;
  --dark-bg-color: #171717;
  --main-button-color: #c169d6;
  --dark-violet: #864995;
  --second-button-color: #23898c;
  --main-text-color: #fff;
  --clear-text-color: #cecece;
  --dark-text-color: #292929;
  --dropdown-transparent-bg: #cecece80;
  --transparent-black: #000000bd;

  /* Définition de bordure A RENOMMER + Explicite  */

  --normal_px: 4px;
  --fin_px: 2px;
  --xl_px: 10px;
}

.button_padding {
  padding: 0.25rem 3rem;
}
.bord-rad-10 {
  border-radius: var(--xl_px);
}
.bord-rad-0 {
  border-radius: 0;
}
.bord-fin-violet {
  border: var(--fin_px) var(--main-button-color) solid;
}
.text-black {
  color: #000000 !important;
}
.border-black {
  border: #000000 2px solid !important;
}
.text-violet {
  color: var(--main-button-color);
}
.ff-main {
  font-family: var(--typo-principale);
}
.ff-second {
  font-family: var(--typo-secondaire);
  text-transform: uppercase;
}
/* font-size */
.fs-big {
  font-size: 4rem;
}
.fs-mid {
  font-size: 3rem;
}
.fs-mid-norm {
  font-size: 2rem;
}

.fs-norm {
  font-size: 1rem;
}

.fs-sm {
  font-size: 0.5rem;
}

/* Définition des BACKGROUNDS */
.bg-violet {
  background-color: var(--main-button-color);
}

.btn-violet {
  background-color: var(--main-button-color);
  padding: 0.5rem 2rem 0.5rem 2rem;
  box-shadow: 5px 4px 0px 0px var(--dark-violet);
}
.btn-violet:hover {
  transition: ease-in-out 0.2s;
  text-decoration: none;
  transform: scale(1.1);
}
.btn-violet:active {
  background-color: var(--dark-violet);
  box-shadow: 4px 2px #666;
  transform: translateY(4px);
}

/* Ombre portée */
.txt-shadow {
  text-shadow: 4px 4px 0 var(--main-button-color);
}
.cookie_alert {
  box-shadow: 3px 2px 0px 2px var(--main-button-color);
}
/* Déclaration font-family à conserver sinon header ne la prend pas en compte */
body {
  font-family: var(--typo-principale);
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

/* Définition du HEADER  */
header {
  font-family: var(--typo-principale);
  margin-bottom: 89px;
  font-size: var(--font-size-normale-header);
  font-weight: 300;
}
/* Définition du logo  */
.logoHeader {
  max-width: 70%;
}
/* Définition de barre de navigation */
#navbarMainMenuToggler {
  background: var(--main-bg-color);
  color: var(--main-text-color);
  border-bottom: 3px solid var(--dark-text-color);
}
#navbarMainMenuToggler:hover,
#navbarMainMenuToggler:active {
  transition: ease-in-out 200ms;
}
#navbarMainMenuToggler a:hover {
  text-decoration: none;
  /* font-size: 17px; */
}
/* Style du lien correspondant à la quand la page active  */
.active_navLink {
  text-decoration: underline 2px var(--main-button-color);
  color: var(--main-text-color) !important;
}
.header-mobile-link {
  color: var(--main-bg-color);
}
.header-mobile-link:hover {
  color: var(--main-button-color);
  text-decoration: none !important;
}
.header-mobile-link:active {
  color: var(--main-button-color);
  text-decoration: underline;
}

/* Définition des boutons menus coulissant */
.header_dropdown-toogle {
  color: var(--main-text-color);
  font-size: var(--font-size-normale-header);
}
.header_dropdown-toogle:hover,
.navbar-nav .nav-item .nav-link:hover,
#navbarMainMenuToggler
  ul
  .dropdown
  .dropdown-menu
  .dropdown-item:hover
  .navbar-nav
  .nav-item
  .nav-link {
  background: var(--dark-text-color);
  border-radius: 0;
  font-size: large;
  transition: ease-in 100ms;
}

.dropdown-menu {
  background: var(--main-bg-color);
}
.header_dropdown-item {
  color: var(--main-bg-color);
}
#navbarMainMenuToggler ul .dropdown .dropdown-menu .dropdown-item:hover {
  background-color: var(--dark-text-color);
}
/* Ouverture du drodpdown-menu au survol du bouton Dropdown  */
.dropdown:hover .dropdown-menu,
.dropdown-menu:hover .dropdown-menu {
  display: block;
}
/* Seulement sur Mobile */
#accordionMenuMobile .card:hover {
  background-color: var(--second-bg-color);
}
#accordionMenuMobile .nav-item .nav-link {
  color: var(--main-bg-color);
}
#accordionMenuMobile {
  position: absolute;
  width: 100%;
  left: 0;
  top: 3.5rem;
}

/*images arrondies = class BS4 rounded-circle*/

.circle {
  border-radius: 50% !important;
}

/* Définition du FOOTER  */
footer {
  color: var(--main-text-color);
  background-color: var(--dark-bg-color);
  font-size: var(--font-size-normale-footer);
}
.footer_logo {
  max-width: 16rem;
}
.footer_hr {
  height: var(--fin_px);
  border: 0;
  background-color: var(--clear-text-color);
  position: relative;
  top: calc(10 * var(--xl_px));
  margin-bottom: calc(5 * var(--xl_px));
}
footer a {
  color: var(--main-text-color);
  padding: 2px 4px;
  font-size: var(--font-size-normale-corps);
}
footer a:hover {
  color: var(--main-text-color);

  font-weight: bold;
  transition: ease-in 200ms;
  text-decoration: none;
}
footer i {
  font-size: 2.5rem;
}
footer i:hover {
  transform: scale(1.2);
  color: var(--main-text-color);
  border-radius: 50%;

  transition: ease-in 100ms;
}

/* def Owl Carousel  */
.owl-prev {
  left: -30px;
}
.owl-next {
  right: -30px;
}
.owl-prev,
.owl-next {
  position: absolute;
  top: 30%;
}
.owl-prev span,
.owl-next span {
  font-size: 60px;
  /* color: var(--dark-text-color); */
  color: var(--dark-violet);
}
.partenaire-card {
  background-color: black;
  /* background-color: var(--dark-text-color); */
  height: 31rem;
}
.testimonialCarousel {
  padding: 6rem;
}
/* positionnement du logo des partenaires / témoins */
.partenaire-card-block {
  background: white;
  width: 11rem;
  height: 11rem;
  position: absolute;
  top: -55px;
  left: -77px;
  display: flex;
  align-content: center;
  justify-content: center;
}
.partenaire-card-body {
  padding: 2rem;
}
/* Formulaire Newsletter du footer */
.form-in_footer span {
  font-size: 80%;
  font-weight: 300;
}
/* .form-control {
    font-size: 1.5rem;
} */
.form-control::placeholder {
  color: var(--main-button-color);
  opacity: 0.9;
}
.form-control:focus {
  color: var(--main-button-color);
  background-color: var(--main-bg-color);
  border-color: var(--main-button-color);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* MENUS Général*/
/* Définition de liste  */
li {
  list-style-type: none;
}
.nav-item {
  justify-content: center !important;
  display: flex !important;
}

/* FORMULAIRES */
/* Définition des checkbox  (diminuer de 10px pour tablettes et mobiles) */
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  height: calc(4 * var(--xl_px));
  width: calc(4 * var(--xl_px));
  background: var(--main-bg-color);
  border: var(--fin_px) solid var(--main-text-color);
  margin-top: -3px;
}
/* (diminuer de 10px pour tablettes et mobiles) */
input[type="checkbox"]:checked {
  border: 0px;
  /* avec checkbox personnalisée*/
  background-image: url("/img/assets/checkbox_checked.svg");
  background-size: calc(4 * var(--xl_px)) calc(4 * var(--xl_px));
}

/* Définitions de BOUTONS et LIENS */
a {
  color: var(--main-button-color);
}
.cta_button {
  color: var(--main-text-color);
  /* background-color: var(--main-button-color); */
  font-size: 1.5rem;
  width: 65%;
}
/* Définition du lien de sélection  */
.link {
  color: var(--main-text-color);
  /* font-size: var(--font-size-normale-corps); */
}
.link:hover,
a:hover {
  color: var(--main-button-color);
  transition: ease-in 200ms;
}
.link:hover {
  text-decoration: none;
}
.lienRecherche {
  width: 85%;
  /* color : var(--main-button-color); */
  color: var(--dark-bg-color);

  /*  border: 3px var(--main-button-color) solid; */
  border: 3px var(--main-text-color) solid;
  padding: 12px;
  display: flex;
  margin: auto;
  margin-top: auto;
  margin-bottom: auto;
  transition: 0.2s;
}
.lienRecherche a {
  color: var(--main-bg-color);
  background-color: var(--main-button-color);
  font-size: 4vh;
  padding: var(--xl_px);
}

.lienRecherche a {
  border: 3px solid;
  border-radius: var(--xl_px);
}

.lienRecherche a:hover,
.card-link:hover {
  color: var(--main-button-color);
  background-color: var(--main-bg-color);
  text-transform: uppercase;
  transition: ease-in 200ms;
  text-decoration: none;
}
/* Personnaliser la couleur des boutons carousel Partenaires en modifiant fill='' échapper "#" en ajoutant "23" au code couleur */
/* .carousel-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#red' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}
.carousel-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%white' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
} */
.overlayButton {
  z-index: 1000;
  background-color: var(--transparent-black);
}
.title_underline {
  border-top: 3px solid var(--main-bg-color);
}

#hero {
  background-color: var(--main-button-color-transparent);
  background-size: cover;
  height: 560px;
  background-position: bottom;
  background-position: center;
  margin-top: 0;
}
.coursHero {
  background-position-y: 24% !important;
}
/* Banniere bas sur toutes les pages */
#global-bannerFitness {
  background-image: url("/img/images/accueil_pix-fin.jpg");
  background-size: cover;
  height: 500px;
  background-position: center;
}

.Accordion_Title {
  font-size: 2rem;
  color: var(--main-bg-color);
  text-align: left;
}
.Accordion_Title:hover {
  color: var(--main-button-color);
  text-decoration: none;
}
.accordion_icon {
  width: 88%;
  display: flex;
  justify-content: end;
}
.accordion-header hr {
  border-top: 2px solid var(--main-bg-color);
}
.accordion_inDark_bg {
  color: var(--main-text-color) !important;
}
.accordion_inDark_bg > div > button:hover {
  color: var(--main-button-color) !important;
}
.accordion_inDark_bg hr {
  border-top: 2px solid var(--main-text-color);
}
.btn-link + .Accordion_Title {
  margin-left: auto;
}

.img_inCard {
  background-position: center;
  background-size: contain;
  height: 24vh;
  background-repeat: no-repeat;
}
.citation_dot {
  height: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.big-in-title {
  margin-left: 6rem;
}

/* Page Pourqui */
.pourQuiBtn {
  color: var(--main-text-color);
  border: 2px solid var(--main-text-color);
}

.pourQuiBtn:hover {
  color: var(--main-text-color);
  background-color: var(--main-button-color);
  border: 2px solid var(--main-button-color);
}

/* Page CONTACT */
.page-holder {
  min-height: 100vh;
}
/* page TEMOIGNAGES */
.logo-temoin {
  height: 200px;
}

.bg-cover {
  background-size: cover !important;
}

/* Définition du formulaire de contact  */
/* .contactForm input, .contactForm textarea{
    font-size: var(--font-size-normal-input);
    font-family: var(--typo-principale);
    text-transform: uppercase;
    width: 100%;
    border-top: none;
    border-right: none;
    border-left: none;
    background-color: transparent;
    color: var(--main-text-color);
}
.contactForm input::placeholder, .contactForm textarea::placeholder, .contactForm label {
    font-size: 12px;
}
.contactForm label {
    color: var(--main-button-color);
}
.contactForm input:focus, .contactForm textarea:focus {
    border-color: var(--main-button-color);
    box-shadow: 0 0 0 .2rem var(--main-button-color-transparent) ;
} */
#inputUser_message {
  width: 100% !important;
  /* border: laissez class border de BS4 color : #ced4da 1px solid*/
  padding: var(--xl_px) !important;
  height: 100px;
}
.formSubmit {
  color: var(--main-text-color);
  /* border: 2px solid var(--main-button-color); */
  border: 2px solid var(--main-text-color);
}
.formSubmit:hover {
  color: var(--main-text-color);
  background-color: var(--main-button-color);
  border: 2px solid var(--main-button-color);
}
.formSubmit:active {
  background-color: var(--main-bg-color);
  border: var(--main-button-color) solid var(--fin_px);
}


/* Modale du formulaire de contact Axonaut */
.axonaut-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
}
.axonaut-overlay[hidden] {
  display: none;
}
.axonaut-modal {
  position: relative;
  width: 90%;
  max-width: 800px;
  height: 85vh;
  background-color: #fff;
  overflow: hidden;
}
.axonaut-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 1;
  padding: 0.25rem 0.75rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-text-color);
  background-color: #fff;
  border: var(--fin_px) solid var(--dark-text-color);
  border-radius: var(--xl_px);
  cursor: pointer;
}
.axonaut-modal__close:hover {
  color: var(--main-text-color);
  background-color: var(--main-button-color);
  border-color: var(--main-button-color);
}
.axonaut-modal__frame,
.axonaut-modal__frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}
body.axonaut-noscroll {
  overflow: hidden;
}

/* MediaQueries */

@media (max-width: 576px) {
  header {
    margin-bottom: 59px;
  }

  /* section {
        padding-bottom: 4rem;
    } */
  #hero {
    height: 43vh;
  }
  .coursHero {
    background-position-y: 50%;
  }
  .fs-big {
    font-size: 3.5rem;
  }
  .fs-mid {
    font-size: 2rem;
  }
  .accueil_text p span {
    font-size: 12px !important;
  }
  .big-in-title {
    margin-left: 1rem;
  }
  .testimonialCarousel {
    padding: 1rem;
  }
  .partenaire-card-block {
    position: initial;
    margin: auto;
  }
  #global-bannerFitness {
    height: 250px;
  }

  .cta_button {
    font-size: 1rem;
    width: 60%;
  }
  .Accordion_Title {
    font-size: 1rem;
  }
  .card-text {
    font-size: var(--font-size-normale-card-text);
  }
  .card-title {
    font-size: 1rem;
  }
  .small {
    font-size: 8px;
  }
  .footer_logo {
    max-width: 10rem;
  }
  .overlayButton {
    background-color: #0000001c;
  }
  .partenaire-card {
    height: auto;
  }
}
@media (max-width: 360px) {
  #hero {
    height: 49vh;
  }
}