@charset "UTF-8";
/* 
    Created on : 2 févr. 2021, 17:36:48
    Author     : ibnohani mohammed
*/
/*---colors---*/
/*---fonts-----*/
/*----mixins----*/
/*----mixin font---*/
@import url("https://fonts.googleapis.com/css2?family=roboto");
/*----mixin font---*/
@import url("https://fonts.googleapis.com/css2?family=PermanentMarker&display=swap");
/* 
    Created on : 15 avr. 2021, 23:04:41
    Author     : ibnoh
*/
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; }
  to {
    margin-left: 0%;
    width: 100%; } }
/* ressources ::https://unsplash.com/s/photos/splash-screen
   emoji:https://emojipedia.org/check-mark/-->
   svg : https://www.flaticon.com/
*/
*, ::before, ::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

html {
  scroll-behavior: smooth; }

body {
  font-family: Roboto, sans-serif;
  background: #f1f1f1; }

h1, h2, h3, h4, h5 {
  color: #3C3C3B;
  font-family: Roboto, sans-serif, Helvetica, Arial, sans-serif; }

/*-------navigation-----------------*/
.logo-mobile {
  background-color: black; }
  .logo-mobile a .logo {
    width: 200px;
    padding: 5px;
    background-color: transparent;
    display: none; }

nav {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 70px;
  background: rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out; }
  nav ul {
    width: 100%;
    height: 100%;
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center; }
    nav ul li::after {
      content: '';
      display: block;
      width: 0%;
      height: 2px;
      border-radius: 5px;
      background: #fff;
      margin: 0 auto;
      transition: width 0.2s ease-in-out; }
    nav ul li:hover::after {
      width: 100%; }
    nav ul a img {
      width: 200px;
      margin-right: 50px; }
    nav ul li {
      margin: 0 15px; }
      nav ul li a {
        text-decoration: none;
        font-size: 22px;
        color: #fff;
        text-transform: uppercase; }
        nav ul li a svg {
          width: 25px;
          color: white; }
          nav ul li a svg:hover {
            width: 30px;
            color: #e12b61; }

/*-------class anim-nav ==>-Animazion nav-Bar in js/app.js ligne 21-34--------*/
.anim-nav {
  background: rgba(0, 0, 0, 0.95);
  border-bottom: 1px solid #f1f1f1; }

@media screen and (max-width: 990px) {
  nav ul li {
    margin: 0 8px; }
    nav ul li a {
      font-size: 15px; } }
/*****------ menu btn-responsive -------******/
.btn-responsive-menu {
  position: fixed;
  width: 40px;
  height: 35px;
  top: 15px;
  right: 10px;
  background: white;
  display: none;
  cursor: pointer;
  z-index: 10000; }
  .btn-responsive-menu .lignes {
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #333333;
    position: absolute;
    transition: all 0.5s ease-in-out; }
    .btn-responsive-menu .lignes:nth-child(1) {
      top: 5px; }
    .btn-responsive-menu .lignes:nth-child(2) {
      top: 15px; }
    .btn-responsive-menu .lignes:nth-child(3) {
      top: 25px; }

.btn-responsive-menu.active .lignes:nth-child(1) {
  top: 12px;
  transform: rotate(135deg); }

.btn-responsive-menu.active .lignes:nth-child(2) {
  opacity: 0;
  transform: translateX(-20px); }

.btn-responsive-menu.active .lignes:nth-child(3) {
  top: 12px;
  transform: rotate(-135deg); }

@media screen and (max-width: 700px) {
  .btn-responsive-menu {
    display: block; }

  nav {
    display: none; }
    nav ul {
      overflow: hidden;
      flex-direction: column;
      justify-content: flex-start;
      background: #f1f1f1;
      width: 100%;
      height: 170px;
      margin-top: -1px; }
      nav ul .logo-hideen {
        display: none; }
      nav ul li a {
        color: black; }
        nav ul li a:hover {
          color: #f1f1f1;
          background: black;
          border-radius: 5px; }
        nav ul li a svg {
          color: black; }
      nav ul li::after {
        display: none; }

  .active-menu {
    display: block; }

  .logo-mobile a .logo {
    display: block;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 4000;
    margin-top: 0;
    cursor: pointer; } }
/*-----accueil---*/
.accueil {
  height: 800px;
  display: flex;
  overflow: hidden; }
  .accueil .bloc-gauche-accueil {
    position: relative;
    width: 40%;
    /*50%-10%->pour box schadow;*/
    height: 100%;
    background-color: black;
    box-shadow: 90px 0 100px 100px #000;
    /*(X Y flow spride? color)*/ }
    .accueil .bloc-gauche-accueil h1 {
      color: #f1f1f1;
      font-family: PermanentMarker, sans-serif;
      font-size: 90px;
      padding-top: 200px;
      padding-bottom: 20px;
      margin-left: 8vw;
      white-space: nowrap;
      display: block; }
      .accueil .bloc-gauche-accueil h1:hover {
        color: #881a16;
        font-family: Roboto, sans-serif;
        transition: 2s; }
      .accueil .bloc-gauche-accueil h1 span {
        color: #881a16; }
    .accueil .bloc-gauche-accueil p {
      color: #f1f1f1;
      font-size: 30px;
      text-align: justify;
      width: 600px;
      margin-left: 8vw;
      line-height: 1.3;
      animation-duration: 6s;
      animation-name: slidein; }
    .accueil .bloc-gauche-accueil .cont-btn-home {
      display: flex; }
      .accueil .bloc-gauche-accueil .cont-btn-home .btn-accueil {
        font-size: 18px;
        color: #f1f1f1;
        text-align: center;
        padding: 15px;
        text-decoration: none;
        border-radius: 5px;
        margin-top: 40px;
        border: solid 1px #f1f1f1;
        width: 150px; }
        .accueil .bloc-gauche-accueil .cont-btn-home .btn-accueil:nth-child(1) {
          transition: all 0.2s ease-in-out;
          color: #000000;
          background: #f1f1f1; }
          .accueil .bloc-gauche-accueil .cont-btn-home .btn-accueil:nth-child(1):hover {
            transition: all 0.2s ease-in-out;
            color: #f1f1f1;
            background: #000000; }
        .accueil .bloc-gauche-accueil .cont-btn-home .btn-accueil:hover {
          transition: all 0.2s ease-in-out;
          color: #000000;
          background: #f1f1f1; }
      .accueil .bloc-gauche-accueil .cont-btn-home .b1 {
        margin-left: 8vw; }
      .accueil .bloc-gauche-accueil .cont-btn-home .b2 {
        margin-left: 10px; }
  .accueil .bloc-droit-accueil {
    background-image: url("../img/ressources/gym-accueil.jpg");
    width: 60%;
    height: 100%;
    background-position: 70% 5%; }

/* Media Query Accueil*/
@media screen and (max-width: 1350px) {
  .accueil .bloc-gauche-accueil {
    width: 60%; }
  .accueil .bloc-droit-accueil {
    background-position: 72% 10%; } }
@media screen and (max-width: 750px) {
  .accueil .bloc-gauche-accueil {
    width: 40%; }
    .accueil .bloc-gauche-accueil h1 {
      font-size: 60px; }
  .accueil .bloc-droit-accueil {
    background-position: 72% 10%; } }
@media screen and (max-width: 540px) {
  .accueil .bloc-gauche-accueil {
    width: 40%; }
    .accueil .bloc-gauche-accueil h1 {
      font-size: 40px; }
  .accueil .bloc-droit-accueil {
    background-position: 72% 10%; } }
@media screen and (max-width: 400px) {
  .accueil .bloc-gauche-accueil {
    width: 40%; }
    .accueil .bloc-gauche-accueil h1 {
      font-size: 20px;
      padding-top: 90px; }
    .accueil .bloc-gauche-accueil p {
      font-size: 15px; }
    .accueil .bloc-gauche-accueil .cont-btn-home .b1, .accueil .bloc-gauche-accueil .cont-btn-home .b2 {
      font-size: 10px; }
  .accueil .bloc-droit-accueil {
    background-position: 72% 10%; } }
/*salle_special_offer*/
article.salle_special_offer {
  background-color: #881a16;
  position: relative; }
  article.salle_special_offer a.contact-enveloppe .center-elem {
    position: absolute;
    left: 90.5%;
    top: 0;
    transform: translate(-50%, -50%);
    margin-top: -.125em;
    text-align: center;
    background: azure;
    display: block;
    border-radius: 50%;
    padding: 10px; }
    article.salle_special_offer a.contact-enveloppe .center-elem:hover {
      box-shadow: 1px 5px 10px 15px rgba(255, 255, 255, 0.5); }
    article.salle_special_offer a.contact-enveloppe .center-elem img {
      width: 1.375em;
      margin: 0 auto 3px auto;
      display: block;
      height: auto; }
    article.salle_special_offer a.contact-enveloppe .center-elem span {
      display: inline-block;
      font-family: "GothamMedium",Helvetica,Arial,sans-serif;
      font-size: 1em;
      line-height: .84615em;
      color: #E00069; }

.inner-elems {
  padding: 1.25em 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-duration: 2s;
  animation-name: slidein; }
  .inner-elems .icon {
    margin-right: 2.1875em;
    margin-bottom: 1em; }
    .inner-elems .icon img {
      width: 6.75em;
      max-width: 100%;
      height: auto; }
  .inner-elems .text {
    width: 450px;
    text-align: left; }
    .inner-elems .text p,
    .inner-elems .text .title {
      font-size: 1.2em;
      line-height: 2em;
      margin-bottom: 0;
      text-transform: uppercase;
      color: white;
      font-family: Roboto, sans-serif, Helvetica, Arial, sans-serif; }
    .inner-elems .text .center-elem a.subscribe-btn {
      display: inline-block;
      align-items: center;
      justify-content: center;
      font-size: 1em;
      line-height: 1.875em;
      color: white;
      position: relative;
      padding-bottom: 0;
      padding-right: 1.25em;
      font-family: Roboto, sans-serif, Helvetica, Arial, sans-serif; }
      .inner-elems .text .center-elem a.subscribe-btn .arrow-right {
        position: absolute;
        top: .4em;
        right: -0.35em;
        width: 1.25em;
        height: 1.25em;
        fill: white; }

.titre-section-infos {
  color: #131212;
  text-align: center;
  font-size: 65px;
  padding: 50px 20px 120px;
  font-family: PermanentMarker, sans-serif, Roboto, sans-serif; }
  .titre-section-infos:hover {
    color: rgba(0, 0, 0, 0.5); }

.section-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  background: #f1f1f1;
  position: relative; }
  .section-info .carte-info {
    width: 350px;
    height: auto;
    margin: 0 20px 80px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 100; }
    .section-info .carte-info:hover {
      box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.9); }
    .section-info .carte-info .container-photo-info img {
      width: 100%;
      height: 500px;
      object-fit: cover; }
      .section-info .carte-info .container-photo-info img:hover {
        transition: transform 125ms;
        transform: translateY(-10px);
        box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.9); }
    .section-info .carte-info h2 {
      color: #333333;
      text-align: center;
      font-size: 25px;
      padding: 0 5px 15px; }
      .section-info .carte-info h2:hover {
        margin-top: 10px;
        transition: transform 125ms;
        transform: translateY(-10px); }
    .section-info .carte-info p {
      color: #333333;
      font-size: 20px;
      text-align: center;
      padding: 0 5px 15px; }
      .section-info .carte-info p:hover {
        transition: transform 125ms;
        transform: translateY(-10px); }
    .section-info .carte-info .deco-info {
      position: absolute;
      z-index: -1;
      top: -100px;
      left: -100px; }

@media screen and (max-width: 1400px) {
  .carte-info .deco-info {
    display: none; } }
@media screen and (max-width: 1000px) {
  .titre-section-infos {
    font-size: 50px; } }
@media screen and (max-width: 550px) {
  .titre-section-infos {
    font-size: 32px;
    padding: 40px 20px 40px; }

  .carte-info {
    margin: 0 10px 45px; } }
/*---- section-choix---*/
#choix {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000; }
  #choix .entrainement-choix {
    width: 30%;
    text-align: center;
    color: #ffffff;
    margin: -90px 20px 70px; }
    #choix .entrainement-choix h3 {
      font-size: 50px;
      margin-bottom: 50px;
      font-family: Roboto, sans-serif; }
      #choix .entrainement-choix h3:hover {
        color: #f1f1f1;
        transition: 0.5s; }
    #choix .entrainement-choix p {
      font-size: 18px;
      width: 70%;
      margin: 20px auto 30px;
      line-height: 1.3; }
    #choix .entrainement-choix button {
      width: 300px;
      padding: 15px 0;
      font-size: 22px;
      color: #f1f1f1;
      background: #000;
      border: solid 1px #f1f1f1; }
      #choix .entrainement-choix button:hover {
        color: #000;
        background: #f1f1f1;
        transition: all 0.5s ease-in-out; }
      #choix .entrainement-choix button a {
        color: white;
        text-decoration: none; }
        #choix .entrainement-choix button a:hover {
          color: #000; }

@media screen and (max-width: 1200px) {
  .entrainement-choix {
    width: 400px; } }
@media screen and (max-width: 990px) {
  #choix {
    flex-direction: column; }
    #choix .entrainement-choix {
      width: 350px;
      margin: 50px 0 70px; }
      #choix .entrainement-choix h3 {
        font-size: 40px;
        margin-bottom: 20px; }
      #choix .entrainement-choix button {
        width: 250px;
        padding: 15px 0;
        font-size: 22px; }
      #choix .entrainement-choix:nth-child(1) {
        margin: 50px 20px 0; } }
/*-----------Section-Galerie-Equipement------*/
.titre-equipements {
  text-align: center;
  font-size: 70px;
  color: #000;
  padding: 50px 0;
  text-transform: uppercase;
  font-family: PermanentMarker, sans-serif; }
  .titre-equipements:hover {
    color: rgba(0, 0, 0, 0.5); }

#equipement {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1300px;
  min-width: 300px;
  margin: 0 auto 100px; }
  #equipement .btn-modale {
    width: 350px;
    height: 400px;
    border: none;
    margin: 10px;
    cursor: pointer;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; }
  #equipement .btn-modale:nth-child(1) {
    background-image: url(../img/ressources/img1-equip.jpg); }
  #equipement .btn-modale:nth-child(2) {
    background-image: url(../img/ressources/img2-equip.jpg); }
  #equipement .btn-modale:nth-child(3) {
    background-image: url(../img/ressources/img3-equip.jpg); }
  #equipement .btn-modale:nth-child(4) {
    background-image: url(../img/ressources/img4-equip.jpg); }
  #equipement .btn-modale:nth-child(5) {
    background-image: url(../img/ressources/img5-equip.jpg); }
  #equipement .btn-modale:nth-child(6) {
    background-image: url(../img/ressources/img6-equip.jpg); }
  #equipement .btn-modale:nth-child(7) {
    background-image: url(../img/ressources/img7-equip.jpg); }
  #equipement .btn-modale:nth-child(8) {
    background-image: url(../img/ressources/img8-equip.jpg); }
  #equipement .btn-modale:nth-child(9) {
    background-image: url(../img/ressources/img9-equip.jpg); }

.bloc-modale {
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none; }
  .bloc-modale img {
    width: 100%; }
  .bloc-modale .bloc-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .bloc-modale .bloc-img .fermeture-modale {
      position: absolute;
      z-index: 4000;
      top: 5%;
      right: 5%;
      width: 60px;
      height: 60px;
      font-size: 22px;
      color: white;
      background: #f00;
      border-radius: 50%;
      border: none;
      cursor: pointer; }

.active-modale {
  display: block; }

/*-----media Query-----*/
@media screen and (max-width: 850px) {
  .titre-equipements {
    font-size: 45px; } }
@media screen and (max-width: 500px) {
  .titre-equipements {
    font-size: 35px; } }
/*-------------------------Section-Parallax-------*/
.parallax {
  background-image: url(../img/ressources/img-paral.jpg);
  background-attachment: fixed;
  background-position: center;
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center; }
  .parallax .parallax-txt {
    font-size: 100px;
    color: #f1f1f1;
    text-align: center;
    font-weight: 700; }

/*//media Query*/
@media screen and (max-width: 580px) {
  .parallax .parallax-txt {
    font-size: 50px;
    color: red; } }
/*// section-tarifs*/
.titre-tarifs {
  background: #f1f1f1;
  font-size: 50px;
  text-align: center;
  padding: 50px 0; }
  .titre-tarifs:hover {
    color: rgba(0, 0, 0, 0.5); }

#tarifs {
  background: #f1f1f1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1300px;
  min-width: 300px;
  margin: 0 auto 30px; }
  #tarifs .carte-tarif {
    width: 350px;
    height: auto;
    background-image: repeating-linear-gradient(22.5deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 31px, rgba(255, 255, 255, 0.05) 31px, rgba(255, 255, 255, 0.05) 32px, transparent 32px, transparent 92px), repeating-linear-gradient(112.5deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 31px, rgba(255, 255, 255, 0.05) 31px, rgba(255, 255, 255, 0.05) 32px, transparent 32px, transparent 92px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 31px, rgba(255, 255, 255, 0.05) 31px, rgba(255, 255, 255, 0.05) 32px, transparent 32px, transparent 92px), linear-gradient(90deg, #080808, #080808);
    color: #f1f1f1;
    margin: 20px 10px;
    border-radius: 5px; }
    #tarifs .carte-tarif h3 {
      text-align: center;
      font-size: 45px;
      font-family: PermanentMarker, sans-serif;
      position: relative;
      margin-top: -100px;
      margin-bottom: 50px; }
      #tarifs .carte-tarif h3:hover {
        color: white;
        transition: 0.5s; }
    #tarifs .carte-tarif .prix-carte {
      text-align: center;
      font-size: 30px;
      margin: 25px 0; }
      #tarifs .carte-tarif .prix-carte span {
        font-size: 80px;
        position: relative; }
        #tarifs .carte-tarif .prix-carte span::after {
          content: "90€";
          display: block;
          position: absolute;
          top: 10px;
          right: -50px;
          font-size: 25px; }
    #tarifs .carte-tarif .infos-carte {
      margin: 20px auto 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      font-size: 22px;
      padding-left: 30px;
      text-align: center; }
      #tarifs .carte-tarif .infos-carte img {
        margin-right: 7px;
        width: 20px; }

.testimoniale {
  background-color: #f1f1f1;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50vh;
  overflow: hidden;
  margin: 0;
  padding: 10px;
  /*----media Quert---*/ }
  .testimoniale h2 {
    font-size: 60px;
    margin-top: -15px; }
    .testimoniale h2:hover {
      color: rgba(0, 0, 0, 0.5);
      transition: 03s; }
  .testimoniale .testimonial-container {
    background-color: #476ce4;
    color: #fff;
    border-radius: 15px;
    margin: 50px auto;
    padding: 20px 80px;
    max-width: 768px;
    position: relative; }
    .testimoniale .testimonial-container .progress-bar {
      background-color: #fff;
      height: 4px;
      width: 100%;
      animation: grow 10s linear infinite;
      transform-origin: left; }
    .testimoniale .testimonial-container .fa-quote {
      color: rgba(255, 255, 255, 0.3);
      font-size: 28px;
      position: absolute;
      top: 70px; }
    .testimoniale .testimonial-container .fa-quote-right {
      left: 40px; }
    .testimoniale .testimonial-container .fa-quote-left {
      right: 40px; }
    .testimoniale .testimonial-container .testimonial {
      line-height: 28px;
      text-align: justify; }
    .testimoniale .testimonial-container .user {
      display: flex;
      align-items: center;
      justify-content: center; }
      .testimoniale .testimonial-container .user .user-image {
        border-radius: 50%;
        height: 75px;
        width: 75px;
        object-fit: cover; }
      .testimoniale .testimonial-container .user .user-details {
        margin-left: 10px; }
        .testimoniale .testimonial-container .user .user-details .username {
          margin: 0; }
        .testimoniale .testimonial-container .user .user-details .role {
          font-weight: normal;
          margin: 10px 0; }
@keyframes grow {
  0% {
    transform: scaleX(0); } }
  @media screen and (max-width: 768px) {
    .testimoniale h2 {
      font-size: 20px;
      margin-top: 81px; }
    .testimoniale .testimonial-container {
      padding: 10px 30px;
      width: 80%; }
    .testimoniale .fa-quote {
      display: none; } }
  @media screen and (max-width: 550px) {
    .testimoniale h2 {
      font-size: 35px; } }
  @media screen and (max-width: 330px) {
    .testimoniale h2 {
      font-size: 20px;
      margin-top: 35px; }
    .testimoniale .testimonial-container {
      padding: 05px 20px;
      width: 50%;
      height: 70%;
      margin-bottom: 10px; } }

/*-----section - formulaire------*/
.titre-contact {
  border-top: 1px dashed #000;
  text-align: center;
  font-size: 50px;
  padding: 50px 0; }
  .titre-contact:hover {
    color: rgba(0, 0, 0, 0.5);
    transition: 0.5s; }

#contact form {
  width: 50%;
  margin: 0 auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding-bottom: 100px;
  position: relative; }
  #contact form label, #contact form input {
    width: 100%;
    font-size: 20px;
    margin: 5px 0; }
  #contact form label:nth-child(5) {
    margin-bottom: 10px; }
  #contact form input {
    padding: 10px 5px; }
    #contact form input:nth-child(4) {
      margin-bottom: 20px; }
  #contact form textarea {
    width: 100%;
    height: 200px;
    font-size: 20px;
    padding: 15px; }
  #contact form .form-btn {
    display: block;
    margin: 20px auto;
    padding: 10px;
    font-size: 18px;
    width: 250px;
    border-radius: 5px;
    border: 1px solid #333333; }
    #contact form .form-btn:hover {
      color: white;
      background-color: rgba(0, 0, 0, 0.75);
      font-weight: bold; }

@media screen and (max-width: 1100px) {
  #contact {
    width: 80%;
    margin: 0 auto; }
    #contact form .form-btn {
      font-size: 15px;
      width: 100px; } }
@media screen and (max-width: 550px) {
  .titre-contact {
    font-size: 30px; } }
/*------------sectionPage=>Coaches--------------***/
h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  position: relative;
  top: 90px;
  padding-top: 50px; }

section.coaches {
  display: flex;
  justify-content: center;
  align-items: center; }
  section.coaches .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
    section.coaches .container .hexagon {
      position: relative;
      width: 350px;
      height: 400px;
      margin: 50px 20px 70px; }
      section.coaches .container .hexagon::before {
        content: "";
        position: absolute;
        bottom: -70px;
        width: 100%;
        height: 60px;
        background: radial-gradient(rgba(0, 0, 0, 0.15), transparent, transparent);
        border-radius: 50%;
        transition: 0.5s; }
      section.coaches .container .hexagon:hover::before {
        opacity: 0.8;
        transform: scale(0.8); }
      section.coaches .container .hexagon .shape {
        background-color: black;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
        transition: 0.5; }
        section.coaches .container .hexagon .shape:hover {
          transform: translateY(-30px); }
        section.coaches .container .hexagon .shape img {
          position: absolute;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          object-fit: cover; }
        section.coaches .container .hexagon .shape .content {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
          text-align: center;
          background: linear-gradient(45deg, #03a9f4, rgba(3, 169, 244, 0.5));
          color: #f1f1f1;
          opacity: 0;
          transition: 0.5s; }
          section.coaches .container .hexagon .shape .content:hover {
            opacity: 1; }

/** section cours---**/
h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  position: relative;
  top: 90px;
  padding: 60px 0; }

section.cours {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh; }
  section.cours .container {
    position: relative;
    width: 1100px;
    display: flex;
    flex-wrap: wrap; }
    section.cours .container .box {
      position: relative;
      width: 275px;
      height: 275px;
      overflow: hidden;
      transition: 0.5s; }
      section.cours .container .box:hover {
        z-index: 1;
        transform: scale(1.25);
        box-shadow: 0px 25px 40px rgba(0, 0, 0, 0.5);
        opacity: 1;
        border-radius: 3%; }
      section.cours .container .box .imgBx {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        section.cours .container .box .imgBx::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          background: linear-gradient(180deg, #f00, #000);
          mix-blend-mode: multiply;
          opacity: 0;
          transition: 0.5s; }
        section.cours .container .box .imgBx img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 3%; }
      section.cours .container .box .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        padding: 20px; }
        section.cours .container .box .content h2 {
          color: #f1f1f1;
          transition: 0.5s;
          text-transform: uppercase;
          margin-bottom: 5px;
          font-size: 20px;
          transform: translateY(200px); }
        section.cours .container .box .content p {
          color: #f1f1f1;
          transition: 0.5s;
          transform: translateY(200px);
          font-size: 14px; }

section.cours .container .box:hover .imgBx::before {
  opacity: 1; }

section.cours .container .box:hover .content h2 {
  transform: translateY(0);
  transition-delay: 0.4s; }

section.cours .container .box:hover .content p {
  transform: translateY(0);
  transition-delay: 0.6s; }

@media screen and (max-width: 1100px) {
  .container .box {
    margin: 40px auto 0 auto; } }
@media screen and (max-width: 550px) {
  .container .box {
    margin: 40px auto 0 auto; } }
.btnhute {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 30px;
  left: 220px;
  width: 75px;
  height: 75px;
  border-radius: 75px;
  font-family: #f1f1f1;
  font-size: 40px;
  letter-spacing: 2px;
  transition: 1s box-shadow;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); }
  .btnhute a {
    text-decoration: none;
    filter: grayscale(80%); }
  .btnhute:hover {
    box-shadow: 0 5px 35px 0px white; }

/* ressources ::after1- 
   emoji:https://emojipedia.org/check-mark/-->
   svg : https://www.flaticon.com/
*/
/*-----footer-------*/
footer {
  background: #333333;
  flex-shrink: 0;
  border-top: 1px dashed #fff;
  width: 100%;
  color: #f1f1f1;
  font-weight: 0;
  /*  .btn{
        @include flex-center;
        position: relative;
        top:-36px;
        left: 220px;
        width: 75px;
        height: 75px;
        border-radius: 75px;
        font-family: $first-Color;
        font-size: 40px;
        letter-spacing: 2px;
        transition:  1s box-shadow;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
        a{
            text-decoration: none;
           // filter:invert(1);
           filter: grayscale(80%);//https://developer.mozilla.org/fr/docs/Web/CSS/filter
        }
        &:hover{
            box-shadow: 0 5px 35px 0px rgb(255, 255, 255);
            //display: block;      
          }
    }*/ }
  footer h4 {
    font-size: 25px;
    padding-bottom: 50px;
    color: white !important; }
  footer ul {
    list-style-type: none; }
  footer .contenu-footer {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 20px;
    padding: 50px 0 45px; }
    footer .contenu-footer .bloc {
      width: 25%;
      margin: 0 50px; }
    footer .contenu-footer .footer-services li {
      padding: 2px 0; }
      footer .contenu-footer .footer-services li a {
        text-decoration: none;
        color: #f1f1f1; }
        footer .contenu-footer .footer-services li a:hover {
          color: black; }
    footer .contenu-footer .footer-contact p {
      padding: 5px 0;
      color: #f1f1f1; }
    footer .contenu-footer .footer-medias .liste-media {
      position: relative;
      right: 10px; }
      footer .contenu-footer .footer-medias .liste-media li a {
        text-decoration: none;
        color: #f1f1f1;
        display: flex;
        align-items: center;
        font-size: 25px; }
        footer .contenu-footer .footer-medias .liste-media li a:hover {
          color: rgba(2, 2, 2, 0.75); }
      footer .contenu-footer .footer-medias .liste-media img {
        width: 40px;
        margin: 10px 10px; }
  footer .bloc-visible p {
    text-align: center !important;
    padding-bottom: 20px !important; }
  footer .bloc-cacher {
    display: none; }

/* Medias Query*/
@media screen and (max-width: 1300px) {
  footer .contenu-footer {
    width: 700px;
    flex-wrap: wrap; }
    footer .contenu-footer .bloc {
      width: 40%;
      margin: 0 0; }
      footer .contenu-footer .bloc:nth-child(1), footer .contenu-footer .bloc:nth-child(2) {
        margin-bottom: 50px; } }
@media screen and (max-width: 800px) {
  footer .contenu-footer {
    width: 320px; }
    footer .contenu-footer .bloc {
      width: 300px;
      margin: 30px 30px; }
      footer .contenu-footer .bloc:nth-child(1) {
        margin-top: 20px; }
      footer .contenu-footer .bloc:nth-child(1), footer .contenu-footer .bloc:nth-child(2) {
        margin-bottom: 20px; }
  footer .bloc-visible {
    display: none; }
  footer .bloc-cacher {
    display: block; } }

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