@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* Variables */
:root{
    --color_red:#ff3939;
    --color_white:#ffffff;
    --color_gray:#333031;
    --color_backsite:#f5f6f8;
    --color_aquagym:#2ecc71;
    --color_natation: #f1c40f;
    --color_fitness: #9b59b6;
    --color_step: #3498db;
    --color_trampoline: #f1c40f;
    --color_bébé:#1abc9c;
}

*{
    font-family:sans-serif;
    margin: 0; padding: 0;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color:inherit;
}
h1{
    color: var(--color_gray);
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 600;
}
h2{
    color:var(--color_red);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 3px;
}
body{
    background: var(--color_backsite);
    padding-top: 70px;
}
.form-control{
    width: 450px;
    margin-top: 10px;
}
.form-control .form-label{
    display: block;
    font-size: 13px;
}
.form-control .form-input{
    margin-bottom: 10px;
    width: 100%;
    height: 25px;
    padding-left: 5px;
}
.form-control .form-textarea{
    margin-bottom: 10px;
    width: 100%;
    height: 100px;
    padding: 5px;
}
.form-control .form-btn{
    background: var(--color_red);
    padding: 10px 20px;
    font-weight: bold;
    color:var(--color_white);
    border:1px solid var(--color_red);
    cursor: pointer;
}

/* COOKIESBOX */
.cookiesbox{
    background: var(--color_white);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
    border-radius: 5px;
    width: 485px;
    padding: 15px;
    position: fixed;
    bottom:20px;
    left:20px;
    overflow: hidden;
    font-size: 15px;
    z-index: 10000;
}
.cookiesbox h3{
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 600;
}
.cookiesbox p{
    color:#000000bd;
    font-size: 14px;
}
.cookiesbox a.confident{
    display: block;
    color:var(--color_red);
    margin:10px 0;
}
.cookiesbox button{
    background: transparent;
    border:1px solid #757575;
    color:#757575;
    padding: 10px;
    border-radius:3px;
    margin-right:5px;
    cursor: pointer;
}
.cookiesbox img{
    position: absolute;
    bottom:-55px;
    right:-70px;
    z-index:-100;
    opacity: 0.2;
}
.cookiesbox .cookiesparams{
    display: none;
}
.cookiesbox .cookiesparams hr{
    border:1px solid rgba(0,0,0,0.1);
    margin-top: 5px;
    margin-bottom: 10px;
}
.cookiesbox .cookiesparams .cookiescheckboxcontainer{
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    padding: 10px 0 5px 0;
}
.cookiesbox .cookiesparams .cookiescheckboxcontainer a{
    display: block;
    margin-bottom: 5px;
    color:rgba(0, 0, 0, 0.7);
    font-size: 12px;
    text-decoration: none;
}
.cookiesbox .cookiescheckbox{
    display: none;
}
.cookiesbox .cookiescheckboxcontainer span{
    font-weight: bold;
    font-size: 13px;
}
.cookiesbox .cookiescheckbox + label {
    box-sizing: border-box;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    padding:2px;
    background-color: #c0ceda ;
    transition: all 0.5s ;
    cursor: pointer;
}
.cookiesbox .cookiescheckbox + label::before {
    box-sizing: border-box;
    display: block;
    content: "";
    height: calc(1.5rem - 4px);
    width: calc(1.5rem - 4px);
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.5s ;
}
.cookiesbox .cookiescheckbox:checked + label {
    background-color: #ff3939 ;
}
.cookiesbox .cookiescheckbox:checked + label::before {
    margin-left: 1.5rem ;
}
.cookiesbox .cookiescheckboxcontainer{
    position: relative;
}
.cookiesbox .cookiescheckboxcontainer span{
    position: absolute;
    height: 1.5rem;
    line-height:  1.5rem;
    padding-left: 5px;
    color:rgba(0, 0, 0, 0.7)
}

.cookieschoice{
    background: #fff;
    position: fixed;
    bottom:0;
    right: 20px;
    padding: 5px 10px;
    border-top:1px solid rgba(0, 0, 0, 0.5);
    border-left:1px solid rgba(0, 0, 0, 0.5);
    border-right:1px solid rgba(0, 0, 0, 0.5);
    font-size: 12px;
    color:#000;
    border-radius: 5px 5px 0 0;
    opacity: 0.3;
    transition: all 0.3s;
}
.cookieschoice a{
    color:#333031;
    text-decoration: none;
}
.cookieschoice:hover{
    opacity: 0.8;
}

/* TOPBAR */
.topbar{
    background: #fff;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    height: 70px;
    line-height: 70px;
    padding: 0 20px;
    position: fixed;
    left:0;
    right:0;
    top:0;
    z-index:7000;
}
.topbar a{
    color:inherit;
    text-decoration: none;
}
.topbar .topbar_logo{
    color:#ff3939;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing:1px;
}
.topbar .topbar_menu a{
    margin-right: 10px;
    letter-spacing: 2px;
    color:#333031;
    font-size: 0.9em;
    border-bottom:2px solid #fff;
    transition: 0.3s;
    padding: 1px 0;
}
.topbar .topbar_menu a:hover{
    border-bottom: 2px solid #ff3939;
}
.topbar .topbar_menu a.members{
    background: var(--color_red);
    color:#fff;
    border-radius: 0 5px 5px 0;
    padding: 10px;
    padding-left: 35px;
    position: relative;
    font-weight: 500;
    border:1px solid var(--color_red);
}
.topbar .topbar_menu a.members i{
    font-size: 20px;
    position: absolute;
    left:10px;
    bottom:-16px;
}
.topbar .topbar_menu a.logout{
    background: var(--color_red);
    color:#fff;
    border-radius: 0 5px 5px 0;
    padding: 10px;
    padding-left: 30px;
    position: relative;
    border:1px solid var(--color_red);
}
.topbar .topbar_menu a.logout i{
    font-size: 20px;
    position: absolute;
    left:9px;
    bottom:-16px;
}
.topbar .topbar_menu a.tickets{
    background: #f7f7f7;
    border-radius: 5px 0 0 5px;
    padding: 10px;
    padding-left: 32px;
    position: relative;
    font-weight: 600;
    border:1px solid rgba(0, 0, 0, 0.1);
    margin-right: -5px;
}
.topbar .topbar_menu a.tickets i{
    font-size: 20px;
    position: absolute;
    left:10px;
    bottom:-16px;
    font-weight: 500;
}
.topbar .topbar_menu a:last-child{
    margin-right: 0;
}
.topbar .topbar_menucontainer{
    display: flex;
    z-index: 7000;
}
.topbar .topbar_icon{
    display: none;
    color:#333031;
}
.topbar .topbar_menu a.active{
    color:#ff3939;
}

/* SITE CONTAINER */
.site-container{
    padding: 20px;
}

/* Banniere du site */
.site-banniere{
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius:5px;
}

/* Déscription */
.description{
    background: #fff;
    padding: 3px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
    border-radius: 5px;
}
.description h1{
    font-weight: 600;
    color:#ff3939;
    font-size: 20px;
    padding: 5px;
    text-align: center;
    margin-bottom: 10px;
}
.description h3{
    font-size: 14px;
    padding: 0 5px;
    font-weight: 600;
    color:#333031;
}
.description p{
    font-size: 13px;
    padding: 0 5px;
    opacity: 0.9;
    margin-bottom: 10px;
}
.description .text-container{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.description .text{
    width: 33.33%;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    padding: 0 10px;
    text-align: center;
}
.description .text:first-child{
    padding-left:0;
}
.description .text:last-child{
    border:none;
}

/* POLITIQUE DE CONFIDENTIALITE */
.consent h1{
    text-transform: uppercase;
    font-size: 20px;
    color: #ff3939;
    font-weight: 500;
}
.consent h3{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
}
.consent p{
    font-size: 14px;
    color:#333031c2;
    font-weight: 400;
    padding-left: 16px;
}
.consent span{
    color:#ff3939;
}
.consent hr{
    margin: 5px 0;
    opacity: 0;
}
.consent p.maj{
    margin-bottom: 10px;
    margin-top:-5px;
    padding: 0;
}
.consent p.desc{
    margin-bottom: 10px;
    padding: 0;
}

/* LES COURS */
.cours{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -3px;
}
.cours .category_name{
    width: 100%;
    margin: 3px;
    margin-top: 10px;
    border-bottom:2px solid rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    color:#333031;
    font-weight: 600;
    font-size: 20px;
}
.cours .anchor{
    height: 0;
    font-size: 0;
    position: relative;
    top:-70px;
    visibility: hidden;
    width: 100%;
}
.cour_container{
    width: 25%;
    padding: 3px;
}
.cour{
    position: relative;
    background: #fff;
    border:1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
    padding-bottom: 40px;
    overflow: hidden;
    height: 100%;
}
.cour img{
    width: calc(100% - 6px);
    height: 200px;
    object-fit: cover;
    border-radius: 3px;
    border:1px solid rgba(0,0,0,0.1);
    margin: 3px;
}
.cour .category{
    padding: 3px 10px;
    display: inline;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    border-radius:3px;
    margin-left: 10px;
    color:#fff;
    position: absolute;
    left:0;
    top:190px;
}
.cour .content{
    padding: 10px;
    font-size: 13px;
    color: #333333ab;
    margin-top: -10px;
}
.cour .content h3{
    color:#333031;
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 5px;
}
.cour .content h3 span{
    text-transform: lowercase;
    opacity: 0.8;
    font-weight: 400;
    padding-left: 5px;
}
.cour .btn-cour{
    display: inline-block;
    padding: 5px 10px;
    margin-top: 5px;
    border-radius: 3px;
    position: absolute;
    bottom: 10px;
    transition: all 0.5s;
}
.cour .btn-cour:hover{
    color:#fff;
}
.cour .more{
    transform: rotate(45deg);
    position: absolute;
    top:19px;
    right:-30px;
    padding: 5px 0;
    text-transform: uppercase;
    font-weight: 600;
    color:#fff;
    width: 130px;
    text-align: center;
    font-size: 14px;
}

.cour .tickets{
    background: #f7f7f7;
    border-radius: 3px;
    padding: 5px;
    position: absolute;
    font-weight: 600;
    border:1px solid rgba(0, 0, 0, 0.1);
    bottom:10px;
    right: 10px;
}

/* RACCOURCIS */
.speedcours{
    display:flex;
    flex-wrap: wrap;
}
.speedcour a{
    background: #fff;
    margin-right: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    border:1px solid rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    font-size: 12px;
    transition: all 0.2s;
    display: block;
    margin-bottom: 5px;
}
.speedcour a:hover{
    color:#fff;
}
.illustration{
    display: flex;
    background: #fff;
    border:1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    max-width: 980px;
    margin: 0 auto;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
}
.illustration span{
    font-weight: 300;
}
.illustration .details{
    width: 700px;
    padding-left: 10px;
    font-weight: 500;
}
.illustration .details h3{
    text-transform: uppercase;
}
.illustration .details h4{
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 10px;
}
.illustration .details i{
    font-size: 17px;
}
.illustration .image{
    width: 100%;
    margin-bottom: -5px;
}
.illustration img{
    width: 100%;
    border-radius: 5px;
    height: 350px;
    object-fit: cover;
}
.cours_description{
    background: #fff;
    border:1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    max-width: 980px;
    margin: 0 auto;
    margin-top: 5px;
    font-size: 15px;
    text-align: justify;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
}
.cours_description p{
    height: 100px;
    overflow: hidden;
}
.cours_description p.show{
    height: auto;
}
.cours_description hr{
    margin-top: 10px;
    margin-left: -10px;
    margin-right: -10px;
    opacity: 0.3;
}
.cours_description a{
    display: block;
    padding-top: 5px;
    text-align: center;
}
.cours_description span{
    color:var(--color_red);
}

/* Planning */
.planning{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 5px -3px;
}
.planning .day_container{
    width: calc(100%/6);
    text-align: center;
    margin-bottom: 15px;
    padding: 0 3px;
}
.planning .planning_cours{
    margin-bottom: 5px;
    padding: 5px 10px;
    cursor: pointer;
    background: var(--color_white);
    border-radius: 5px;
    transition-duration: 0.3s;
    opacity: 0.8;
}
.planning .planning_cours:hover{
    color:#fff;
}
.planning .title{
    font-weight: 600;
}
.planning .day{
    color:rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    font-weight: 500;
}

/* Locations */
.locations{
    display: flex;
}
.locations .salle{
    height: 200px;
    position: relative;
    text-align: center;
    padding-top: 10px;
    border:1px solid rgba(0, 0, 0, 0.3);
    width: 500px;
    margin-right: 10px;
}
.locations .piscine{
    position: absolute;
    top:65px;
    bottom:15px;
    right: 55px;
    left:15px;
    border-radius: 50px;
    border:1px solid rgba(0, 0, 0, 0.3);
    padding-top: 10px;
}
.locations .locations-détails{
    margin-top: 10px;
}
.locations .prices{
    display: flex;
    margin-bottom: 10px;
}
.locations .prices p{
    width: 150px;
}
.locations span{
    color:var(--color_red);
}
.locations-disp{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 3px;
}
.locations-disp .dispo{
    width: 24%;
    text-transform: uppercase;
    position: relative;
}
.locations-disp .dispo p{
    font-size: 14px;
    font-weight: 400;
    background: var(--color_red);
    display: inline-block;
    padding: 3px 10px;
    color:#fff;
    position: absolute;
    top:0px;
    left: 0px;
    border: 1px solid var(--color_red);
}
.locations-disp img{
    width: 100%;
    border:1px solid var(--color_red);
}
.loc{
    color:var(--color_red);
    margin-top: -7px;
}

/* Formulaire de contact */
.contact-container{
    display: flex;
}
.contact-container h1{
    color:var(--color_red);
    font-size: 16px;
}
.contact-container .desc{
    width: 100%;
    margin-right: 10px;
}
.contact-container .desc-content{
    background: #fff;
    padding: 10px;
    border:1px solid rgba(0, 0, 0, 0.1);
}
.contact-container input{
    display: block;
    width: 100%;
    height: 30px;
    border:1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 3px;
    padding-left: 5px;
}
.contact-container textarea{
    display: block;
    width: 100%;
    height: 100px;
    border:1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
    padding: 5px;
    max-width: 250px;
    min-width: 100%;
    min-height: 100px;
}
.contact-container button{
    width: 100px;
    height: 30px;
    background: var(--color_red);
    border:1px solid var(--color_red);
    color:#fff;
    font-weight: bold;
    cursor: pointer;
}
.contact-container .scrfield{
    display: none;
}
.contact-container .iframe-content{
    width: 100%;
    border:1px solid rgba(0, 0, 0, 0.1);
}
.contact-container i{
    color:var(--color_red);
}
.contact-container b:hover{
    color:var(--color_red);
}


.errors{
    background: #ff39392f;
    color:var(--color_red);
    font-weight: 500;
    padding: 10px;
    border-radius: 3px;
    margin: 0 auto;
    margin-bottom: 5px;
    max-width: 980px;
    text-align: center;
}
.errors a{
    font-weight: 700;
    text-decoration: underline;
}
.success{
    background: #16c9602c;
    padding: 10px;
    color:#16c961;
    font-weight: 500;
    border-radius: 3px;
    margin:0 auto;
    margin-bottom: 5px;
    max-width: 980px;
    text-align: center;
}

.form_container{
    background: #fff;
    width: 350px;
    margin: 0 auto;
    padding: 20px;
    border:1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
.form_container .go_login{
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 10px;
    margin-top: 10px;
}
.form_container .go_login a{
    background: var(--color_red);
    padding: 5px 10px;
    color:#fff;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 3px;
}
.form_register input[type=text], .form_register input[type=password]{
    display: block;
    width: 100%;
    height: 30px;
    margin-bottom: 5px;
    border:1px solid rgba(0, 0, 0, 0.25);
    padding-left: 5px;
    border-radius: 2px;
}
.form_register input[type=submit]{
    height: 30px;
    padding: 0 10px;
    background: var(--color_red);
    border:1px solid var(--color_red);
    color:#fff;
    font-size: 16px;
    cursor: pointer;
    border-radius: 3px;
    width: 100%;
}
.form_login h1, .form_register h1{
    text-align: center;
    margin-bottom: 15px;
}
.form_login input[type=text], .form_login input[type=password]{
    display: block;
    width: 100%;
    height: 30px;
    margin-bottom: 5px;
    border:1px solid rgba(0, 0, 0, 0.25);
    padding-left: 5px;
    border-radius: 2px;
}
.form_login input[type=checkbox]{
    display: inline-block;
    cursor: pointer;
}
.form_login label{
    cursor: pointer;
}
.form_login input[type=submit]{
    height: 35px;
    padding: 0 10px;
    background: var(--color_red);
    border:1px solid var(--color_red);
    color:#fff;
    font-size: 16px;
    cursor: pointer;
    border-radius: 3px;
    margin-top: 5px;
    width: 100%;
}
.form_login a{
    color:rgba(0, 0, 0, 0.5);
    text-decoration: underline;
    font-size: 14px;
    display: block;
    text-align: center;
    margin-top: 10px;
}
.gestion_site{
    text-align: center;
}
.gestion_site a{
    background: var(--color_red);
    color:#fff;
    padding: 10px;
    border-radius:5px;
    display: block;
    width: 200px;
    text-align: center;
    margin:0 auto;
    margin-bottom: 5px;
}
.gestion_site h1{
    margin-bottom: 10px;
}

/* Réservations */
.reservation{
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    max-width: 980px;
    margin:0 auto;
    margin-top: 10px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
}
.reservation p.accord{
    color:var(--color_red);
}
.reservation a{
    text-decoration: underline;
}
.reservation select{
    font-size: 18px;
    cursor: pointer;
    border:1px solid rgba(0, 0, 0, 0.4);
    color:rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    width: 100%;
}
.reservation input[type=submit]{
    padding: 5px;
    display: block;
    color:#fff;
    margin-top: 5px;
    border-radius: 3px;
    border:none;
    font-size: 16px;
    cursor: pointer;
}
.reservation .checkboxcontent{
    position: relative;
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
}
.reservation .checkboxcontent:last-child{
    border-bottom:none;
}
.reservation label{
    display: inline-block;
    cursor: pointer;
    padding-left: 10px;
    vertical-align: top;
    padding-top: 5px;
    padding-bottom: 5px;
}

.reservation .checkboxcontent input[type=checkbox] {
    appearance: none;
    border-radius: 5px;
    height: 24px;
    width: 24px;
    background: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    margin-top: 5px;
}
.reservation .checkboxcontent [type="checkbox"]:checked {
    position: relative;
    border-color: var(--color_red);
    &:before {
      content: '';
      display: block;
      color: var(--color_red);
      font-size: 50px;
      position: absolute;
      text-align: center;
      width: 12px;
      height: 12px;
      font-weight: bold;
      background: var(--color_red);
      border-radius: 3px;
      top:5px;
      left:5px;
    }
}
.reservation .checkboxcontent [type="checkbox"]:checked + label{
    color:var(--color_red);
}
/* Achat tickets */
.tickets_container{
    width: 235px;
    margin: 0 auto;
}
.tickets_container h1{
    margin-bottom: -15px;
}
.tickets_container h2{
    margin-bottom: 10px;
    text-align: center;
}
.tickets_container .ticket_line{
    display: flex;
    font-size: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 20px;
    position: relative;
}
.tickets_container .ticket_line:last-child{
    border:none;
}
.tickets_container .ticket_line p{
    margin-right: 5px;
    width: 80px;
    text-align: left;
}
.tickets_container .ticket_line span{
    opacity: 0;
}
.tickets_container .ticket_line p.coupon{
    text-align: right;
    width: 50px;
}
.tickets_container .ticket_line .off{
    position: absolute;
    bottom:14px;
    font-size: 12px;
    font-weight: bold;
    color:var(--color_red);
    left:-82px;
    text-align: right;
    width: 100px;
}
.tickets_container .ticket_line input{
    background: var(--color_red);
    color:#fff;
    padding: 0 5px;
    border:1px solid var(--color_red);
    border-radius: 3px;
    cursor: pointer;
    margin-left: -5px;
}
.virement-container{
    width: 800px;
    margin:0 auto;
    text-align: center;
}
.virement-container span{
    font-size: 14px;
    font-style: italic;
    color:var(--color_red);
}
.virement-container input[type=submit]{
    background: var(--color_red);
    padding: 10px;
    color:#fff;
    border:1px solid var(--color_red);
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
}

/* PROFIL */
.profil{
    width: 500px;
    margin: 0 auto;
}
.profil a{
    background: var(--color_red);
    padding: 5px;
    color:#fff;
    float: right;
    border-radius: 3px;
}
.profil_reservations{
    width: 500px;
    margin: 0 auto;
}
.profil_reservations h1{
    font-size: 16px;
    margin-top: 4px;
}
.profil_reservations h3{
    color:var(--color_red);
    font-weight: 500;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 16px;
}
.profil_reservation_line span{
    font-weight: 600;
}
.profil_reservation_line{
    margin-bottom: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px;
    border-radius: 3px;
}
.profil_reservation_line p{
    display: inline-block;
    padding: 5px;
}
.profil_reservation_line a{
    float: right;
    background: var(--color_red);
    padding: 5px 10px;
    color:#fff;
    border-radius: 3px;
}
.profil_reservations h5{
    color:var(--color_red);
    font-weight: 500;
}

/* RESERVATIONS */
.cancel_reservation{
    width: 500px;
    margin: 0 auto;
}
.cancel_reservation .prevent{
    color:var(--color_red);
    font-size: 14px;
    font-style: italic;
    margin-bottom: 5px;
    font-weight: 500;
    text-align: justify;
}
.cancel_reservation input{
    background: var(--color_red);
    border:none;
    color:#fff;
    padding: 10px 15px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 10px;
}
.dashboard_date{
    background: #fff;
    border:1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
    padding: 5px;
}
.dashboard_line{
    padding-left: 15px;
    color:var(--color_red);
}

/* Nouveau mot de passe */
.resetpassword{
    background: #fff;
    padding: 10px;
    width: 300px;
    margin:0 auto;
    border:1px solid rgba(0, 0, 0, 0.1);
}
.resetpassword h1{
    color:var(--color_red);
    text-align: center;
    margin-bottom: 5px;
}
.resetpassword p{
    color:rgba(0, 0, 0, 0.7);
    margin-bottom: 5px;
}
.resetpassword input{
    display: block;
    width: 100%;
}
.resetpassword input[type=text]{
    width: 100%;
    height: 30px;
}
.resetpassword input[type=password]{
    width: 100%;
    height: 30px;
}
.resetpassword input[type=submit]{
    background: var(--color_red);
    border:none;
    padding: 5px 10px;
    display: block;
    font-weight: 600;
    font-size: 16x;
    color:#fff;
    margin-top: 10px;
    cursor: pointer;
}

.users_list{
    display: flex;
}

/* DashBoard */
table{
    margin:0 auto
}
table, th, td{
    border:1px solid rgba(0, 0, 0, 0.1);
    border-collapse: collapse;
    text-align: left;
    padding: 3px 5px;
}
th{
    text-transform: uppercase;
    font-size: 14px;
}

/* Tickets */
.gestionTickets:nth-child(odd){
    background: #fff;
}
.gestionTickets input[type=button]{
    font-weight: bold;
    color:rgba(0, 0, 0, 0.7);
    border:1px solid rgba(0, 0, 0, 0.7);;
    border-radius: 3px;
    cursor: pointer;
    padding: 3px;
}
.gestionTickets input[type=text]{
    font-weight: bold;
    color:rgba(0, 0, 0, 0.7);;
    border:1px solid rgba(0, 0, 0, 0.7);;
    border-radius: 3px;
    text-align: center;
    width: 50px;
    padding: 3px;
}
.gestionTickets input[type=submit]{
    background: var(--color_red);
    padding: 3px;
    border:1px solid var(--color_red);
    color:#fff;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
}

/* Dashboard - Cours */
.dashboard-cours-choice{
    display: flex;
    justify-content: space-between;
    width: 710px;
    margin:0 auto;
}
.dashboard-cours-choice h3{
    text-transform: uppercase;
    color:var(--color_red);
    font-weight: 500;
    color:var(--color_red);
    font-size: 16px;
}
.dashboard-cours-choice label{
    color:rgba(0, 0, 0, 0.7);
    font-size: 15px;
}
.dashboard-cours-choice select{
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding: 4px;
    color:rgba(0,0,0,0.6);
    border:1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.dashboard-cours-choice .dashboard-cours-border{
    padding: 10px;
    width: 350px;
    background: #fff;
    border:1px solid rgba(0, 0, 0, 0.1);
}
.dashboard-cours-choice input[type=submit]{
    background: var(--color_red);
    color:#fff;
    border:1px solid var(--color_red);
    padding: 5px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    border-radius: 3px;
}
.dashboard-cours-result{
    width: 710px;
    margin:0 auto;
    background: #fff;
    padding: 10px;
    border:1px solid rgba(0, 0, 0, 0.1);
    margin-top: -10px;
}
.dashboard-cours-result h3{
    text-transform: uppercase;
    color:var(--color_red);
    font-weight: 500;
    color:var(--color_red);
    font-size: 16px;
    margin-bottom: 5px;
}
.dashboard-cours-result h3 span{
    color:rgba(0, 0, 0, 0.7);
}
.dashboard-cours-result h3 a{
    color:var(--color_red);
    padding: 0 5px;
    border-radius: 3px;
    float: right;
    font-weight: bold;
    border:1px solid var(--color_red);
}
.dashboard-cours-result p{
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 5px 0;
}
.dashboard-cours-result p:last-child{
    border:none;
    padding-bottom:0;
}
.dashboard-cours-result p a{
    float: right;
    color:#fff;
    font-weight: bold;
    background: var(--color_red);
    padding: 0 5px;
    border-radius: 3px;
}
.dashboard-cours-result h4{
    border-bottom: 1px solid #000;
    border-top:2px solid #fff;
    margin-top: -1px;
    margin-bottom: 3px;
}
.dashboard-cours-result .result-details{
    padding: 5px 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 15px;
    border-top: 1px solid #fff;
    margin-top:-1px;
    text-decoration: underline;
    margin-bottom: -5px;
    color:rgba(0, 0, 0, 0.8);
}
.dashboard-cours-result .result-details-users{
    margin: 0 5px;
    color:var(--color_red);
    font-weight: 500;
}
.dashboard-cours-result .result-details-users:last-child{
    border:none;
}
.dashboard-cours-result .button_choice{
    margin-top: 10px;
}
.dashboard-cours-result .button_choice button{
    padding: 5px 10px;
    background: var(--color_red);
    border:none;
    margin-right: 5px;
    color:#fff;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
}
.dashboard-cours-result .button_choice a{
    color:var(--color_red);
    font-weight: 600;
    float: right;
    padding: 5px 10px;
    border:1px solid var(--color_red);
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 14px;
}
.result-details-users.color-orange{
    color:orange;
}
.result-details-users.color-gray{
    color:var(--color_gray);
    text-decoration: line-through;
}
.result-details-users.color-orange a{
    background-color: orange;
}

.profil_container{
    display: flex;
    justify-content: space-between;
    max-width: 600px;
    margin:10px auto;
}
.profil_container .container{
    background: #fff;
    width: 33%;
    padding: 10px;
    text-align: center;border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
}
.profil_container .container p{
    text-transform: uppercase;
    font-weight: 600;
    font-size: 18px;
}
.profil_container .container span{
    display: block;
    color:var(--color_red);
    font-weight: 500;
    font-size: 30px;
}
.profil_container .container hr{
    border:none;
    border-top:1px solid rgba(0,0,0,0.1);
    margin-top:10px;
    margin-bottom: 5px;
}
.profil_container .container a{
    text-decoration: underline;
    font-size: 14px;
}
.profil_content{
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
    padding: 3px 10px;
    max-width: 600px;
    margin:10px auto;
}
.profil_content h1{
    font-size: 16px;
}
.profil_cour{
    display: flex;
    padding:10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.profil_cour h3{
    color:var(--color_gray);
    text-transform: uppercase;
    font-weight: 500;
}
.profil_cour:last-child{
    border:none;
}
.profil_cour .img-cours{
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 10px;
    display: block;
}
.profil_cour .cour_description h3{
    margin-top: -2px;
}
.profil_cour .cour_description span{
    font-size: 15px;
    padding-left: 5px;
    display: block;
    color:rgba(0, 0, 0, 0.6);
}
.profil_cour .cour_description span a{
    display: inline-block;
    margin-left: 10px;
    padding-bottom: 1px;
}
.user_infos{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    max-width: 600px;
    margin:10px auto;
}
.user_infos h1{
    height: 20px;
    padding-top: 15px;
}
.user_infos a{
    background:var(--color_red);
    padding: 10px;
    color:#fff;
    border-radius: 5px;
}
.profil_cour span a{
    color:var(--color_red);
    text-decoration: underline;
}
/* Couleurs Automatiques */
.clr-yoga{ color:var(--color_red); } 
.brd-yoga{ border:1px solid var(--color_red); }
.bck-yoga{ background: var(--color_red); }
.hvr-clr-yoga:hover{ color:var(--color_red); }
.hvr-brd-yoga:hover{ border:1px solid var(--color_red); }
.hvr-bck-yoga:hover{ background: var(--color_red); }

.clr-bols{ color:var(--color_red); } 
.brd-bols{ border:1px solid var(--color_red); }
.bck-bols{ background: var(--color_red); }
.hvr-clr-bols:hover{ color:var(--color_red); }
.hvr-brd-bols:hover{ border:1px solid var(--color_red); }
.hvr-bck-bols:hover{ background: var(--color_red); }

.clr-aquagym{ color:var(--color_aquagym); } 
.brd-aquagym{ border:1px solid var(--color_aquagym); }
.bck-aquagym{ background: var(--color_aquagym); }
.hvr-clr-aquagym:hover{ color:var(--color_aquagym); }
.hvr-brd-aquagym:hover{ border:1px solid var(--color_aquagym); }
.hvr-bck-aquagym:hover{ background: var(--color_aquagym); }

.clr-step{ color:var(--color_step); } 
.brd-step{ border:1px solid var(--color_step); }
.bck-step{ background: var(--color_step); }
.hvr-clr-step:hover{ color:var(--color_step); }
.hvr-brd-step:hover{ border:1px solid var(--color_step); }
.hvr-bck-step:hover{ background: var(--color_step); }

.clr-sauts{ color:var(--color_trampoline); } 
.brd-sauts{ border:1px solid var(--color_trampoline); }
.bck-sauts{ background: var(--color_trampoline); }
.hvr-clr-sauts:hover{ color:var(--color_trampoline); }
.hvr-brd-sauts:hover{ border:1px solid var(--color_trampoline); }
.hvr-bck-sauts:hover{ background: var(--color_trampoline); }

.clr-fitness{ color:var(--color_fitness); } 
.brd-fitness{ border:1px solid var(--color_fitness); }
.bck-fitness{ background: var(--color_fitness); }
.hvr-clr-fitness:hover{ color:var(--color_fitness); }
.hvr-brd-fitness:hover{ border:1px solid var(--color_fitness); }
.hvr-bck-fitness:hover{ background: var(--color_fitness); }

.clr-natation{ color:var(--color_natation); } 
.brd-natation{ border:1px solid var(--color_natation); }
.bck-natation{ background: var(--color_natation); }
.hvr-clr-natation:hover{ color:var(--color_natation); }
.hvr-brd-natation:hover{ border:1px solid var(--color_natation); }
.hvr-bck-natation:hover{ background: var(--color_natation); }

.clr-bébé{ color:var(--color_bébé); } 
.brd-bébé{ border:1px solid var(--color_bébé); }
.bck-bébé{ background: var(--color_bébé); }
.hvr-clr-bébé:hover{ color:var(--color_bébé); }
.hvr-brd-bébé:hover{ border:1px solid var(--color_bébé); }
.hvr-bck-bébé:hover{ background: var(--color_bébé); }

.wrapper{
    background: var(--color_red);
    font-size: 14px;
    padding: 5px 20px;
    text-align: justify;
    color:#fff;
    line-height: 15px;
}
.gallery_add{
    margin-bottom: 10px;
}
.gallery{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -3px;
}
.gallery .picture{
    width: 25%;
    padding: 0 3px;
    position: relative;
}
.gallery .picture img{
    width: 100%;
    object-fit: cover;
    border:1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}
.gallery .picture a{
    position: absolute;
    top:7px;
    right:9px;
    background: var(--color_red);
    padding: 0 5px;
    font-weight: bold;
    color:#fff;
    border-radius: 3px;
    opacity: 0;
}
.gallery .picture:hover > a{
    opacity: 1;
}

.gallery video{
    width: 100%;
    border-radius: 5px;
    position: absolute;
    width: 98.5%;
    height:98%;
    border:1px solid rgba(0, 0, 0, 0.3);
    background: #000;
    max-height: 270px;
}

/***************/
/* NOUVEAU CSS */
/***************/
.cours-container .cours-illustration{
    position: relative;
}
.cours-container .cours-illustration img{
    width: 100%;
    border-radius:5px;
    max-height: 500px;
    object-fit: cover;
}
.cours-illustration .cours-infos{
    background:#ff3939;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    position: absolute;
    bottom:15px;
    left:10px;
    border:1px solid #f5f6f8;
}
.cours-container h1.cours-title{
    color:#ff3939;
    text-transform: none;
    font-size: 1.5em;
    margin-bottom: 5px;
}
.cours-container .cours-details{
    padding:10px 0;
    color:#333031;
}
.cours-container .cours-details span{
    font-weight: 600;
    color:#ff3939;
}
.cours-container .cours-description{
    text-align: justify;
    color:#333031;
    padding-bottom: 10px;
    margin-top:-10px;
    font-size: 15px;
}
.cours-container .cours-description p{
    height: 63px;
    overflow-y: hidden;
}
.cours-container .cours-description p.show{
    height: auto;
}
.cours-container .cours-description .read-more{
    border-top:1px solid rgba(0, 0, 0, 0.1);
    display: block;
    margin-top:15px;
    padding-top: 10px;
    font-weight: 600;
    text-align: center;
    color:#ff3939;
}
.cours-container .cours-reservations{
    background: #fff;
    margin:5px -20px 0 -20px;
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-top:1px solid rgba(0, 0, 0, 0.1);
}
.cours-container .cours-reservations h1{
    color:#333031;
    font-size: 18px;
    font-weight: 600;
}
.cours-container .cours-reservations h2{
    color:#333031;
    font-size: 16px;
    font-weight: 600;
}
.cours-container .cours-reservations .disclaimer{
    padding: 5px 0;
}
.cours-container .cours-reservations .disclaimer p{
    color:#ff3939;
    font-size: 13px;
}
.cours-container .cours-reservations .dates-container{
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
}
.cours-container .cours-reservations .dates-container:last-child{
    border:none;
}
.cours-reservations input[type=checkbox]{
    display: none;
}
.cours-reservations input[type=checkbox] + label{   
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    border:1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    transition:all 0.3s ease-in-out;
}
.cours-reservations input[type=checkbox]:checked + label{
    background:#ff3939;
    border:1px solid #fff;
    color:#fff;
}
.cours-reservations .reservations-header{
    display: flex;
    margin-top: 5px;
    color:#fff;
    border-radius: 5px;
}
.cours-reservations .reservations-header p{
    margin-right: 5px;
    display: inline;
    background: #ff3939;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
}
.cours-reservations .reservations-header span{
    padding: 5px;
    border-radius: 5px;
    font-weight: 600;
}

.go_register{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}
.go_register p{
    font-weight: 600;
    
}
.go_register a{
    display: inline-block;
    background:var(--color_red);
    color:#fff;
    padding: 7px 10px;
    border-radius: 3px;
}

.file-uploader{
    width:600px;
    background: #fff;
    border-radius: 5px;
    border:1px solid rgba(0,0,0,0.1);
}
.file-uploader .uploader-header{
    display: flex;
    padding: 20px;
    background: #ff3939;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px 5px 0 0;
}
.uploader-header .uploader-title{
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color:#f9f9f9;
}
.uploader-header .file-completed-status{
    font: 1rem;
    font-weight: 500;
    color:#f1f1f1;
}
.file-uploader .file-list{
    list-style: none;
    width: 100%;
    padding-bottom: 10px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-color:#999 transparent;
    scrollbar-width: thin;
}
.file-uploader .file-list:has(li){
    padding: 20px;
}
.file-list .file-item{
    display: flex;
    gap:14px;
    margin-bottom: 23px;
}
.file-list .file-item .file-extension{
    height: 50px;
    width: 50px;
    background: #ff3939;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    border-radius: 15px;
    text-transform: uppercase;
}
.file-list .file-item .file-content-wrapper{
    flex:1;
}
.file-list .file-item .file-content{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.file-list .file-item .file-name{
    font-size: 1rem;
    font-weight: 600;
}
.file-list .file-item .file-info{
    display: flex;
    gap:5px;
}
.file-list .file-item .file-info small{
    font-size: 0.9rem;
    font-weight: 500;
    color:#5c5c5c;
    margin-top: 5px;
    display: block;
}
.file-list .file-item .file-info .file-status{
    color:#2980b9;
}
.file-list .file-item .cancel-button{
    align-self: center;
    border:none;
    outline:none;
    background: none;
    cursor: pointer;
    font-size: 1.4rem;
}
.file-list .file-item .cancel-button:hover{
    color:#ff3939;
}
.file-list .file-item .file-progress-bar{
    width: 100%;
    height: 3px;
    border-radius: 30px;
    background:#d9d9d9;
    margin-top: 10px;
}
.file-list .file-item .file-progress-bar .file-progress{
    width: 0%;
    height: inherit;
    border-radius: inherit;
    background: #ff3939;
}
.file-uploader .file-upload-box{
    margin: 10px 20px 20px;
    border-radius: 5px;
    min-height: 100px;
    border:1px dashed #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.file-uploader .file-upload-box.active{
    border:1px solid #ff3939;
    background: #f9f9f9;
}
.file-uploader .file-upload-box .box-title{
    font-size: 1.05rem;
    font-weight: 500;
    color:#626161;
}
.file-uploader .file-upload-box.active .box-title{
    pointer-events: none;
}
.file-upload-box .box-title .file-browse-button{
    color:#ff3939;
}
.file-upload-box .box-title .file-browse-button:hover{
    text-decoration: underline;
    cursor: pointer;
}
.grid{
    position: relative;
    column-count: 4;
    gap:10px;
}
.grid-item{
    margin:0;
    margin-bottom: 5px;
}
.grid-item img, video{
    width: 100%;
    border-radius: 5px;
}


.planning-cours{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}
.planning-cours .planning-day{
    width: calc(100%/4);
    padding: 5px;
}
.planning-cours .planning-day-title{
    text-align: center;
    padding: 5px 0;
    font-weight: 500;
    font-size: 25px;
    text-transform: uppercase;
}
.planning-cours .planning-room{
    display: flex;
    border:1px solid rgba(0, 0, 0, 0.1);
    background: #f9f9f9;
}
.planning-cours .planning-room-one{
    border-right:1px solid rgba(0, 0, 0, 0.1);
    width: 50%;
}
.planning-cours .planning-room-twee{
    width: 50%;
}
.planning-cours .planning-room .room-title{
    text-align: center;
    font-weight: 600;
    text-decoration: underline;
    margin-bottom: 10px;
    background: #fff;
    padding:10px;
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 7px;
}
.planning-cours .planning-room .cours-planning{
    text-align: center;
}
.planning-cours .planning-room .cours-planning-detail{
    background: #fff;
    width: 95%;
    margin:5px auto;
    border-radius: 3px;
}
.planning-cours .planning-room .title-cours{
    font-weight: 500;
}




.cours_mea .cour_container .cour{
    background: var(--color_red);
}
.cours_mea .cour_container .cour .content{
    color:#fff;
}
.cours_mea .cour_container .cour .content h3{
    color:#fff;
}

.cours_mea .cour_container .cour .content a{
    color:var(--color_gray);
}
.cours_mea .cour_container .cour .content a.btn-cour{
    background: var(--color_backsite);
}
.cours_mea .cour_container .cour .category{
    background: #fff;
    color:var(--color_gray);
}
.cours_mea .cour .more{
    background: var(--color_red);
}

.site-gestion-container{
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
}
.spacing-bloc{
    width: 20%;
    padding: 5px;
}
.bloc-container{
    width: 100%;
    text-align: center;
    background: #fff;
    border-radius: 3px;
    border:1px solid rgba(0, 0, 0, 0.1);
    color:var(--color_gray);
}
.bloc-container i{
    display: block;
    margin: 10px;
    font-size: 30px;
}
.bloc-container a{
    display: block;
    height: 40px;
    line-height: 40px;
    margin-top:10px;
    border-top:1px solid rgba(0, 0, 0, 0.1);
    background: var(--color_red);
    color:#fff;
}
.faq{
    margin-top: 5px;
}
.question {
    font-weight: 500;
    cursor: pointer;
    padding: 10px;
    background: #f1f1f1;
    border: 1px solid #ddd;
}
.question_show{
    font-weight: 500;
    background: #f1f1f1;
    border: 1px solid #ddd;
}
.question_show input{
    height: 100%;
    width: 100%;
    padding: 10px;
    font-weight: 500;
    border:none;
    background: transparent;
}
.reponse {
    display: none;
    padding: 10px;
    border: 1px solid #ddd;
    border-top: none;
}
.reponse_show{
    border: 1px solid #ddd;
    border-top: none;
}
.reponse_show textarea{
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 200px;
    padding: 10px;
    border:none;
    background: transparent;
}
.spacing{
    height: 5px;
}
.add-question{
    background: var(--color_red);
    padding:5px;
    color:#fff;
    float: right;
    margin-top: -35px;
    border-radius: 3px;
}
.add-question-btn{
    background: var(--color_red);
    color:#fff;
    padding: 10px;
    border:none;
    margin-top: 10px;
    cursor:pointer;
}
.tab-container{
    width: 100%;
    overflow-x: scroll;
    overflow-x: -moz-scrollbars-none;;
}
.tab-container::-webkit-scrollbar {
    display: none;
  }
.more-ticket{
    text-align: center;
    margin-top: 25px;
}
.more-ticket h1{
    margin-bottom: -10px;
}
.tab{
    display: flex;
    font-size: 14px;
    max-width: 700px;
    margin:0 auto;
}
.tckt-line{
    border-top:1px solid rgba(0, 0, 0, 0.1);
    height: 25px;
    line-height: 25px;
    overflow: hidden;
}
.tckt-col{
    flex:1;
    text-align: center;
    border:1px solid rgba(0, 0, 0, 0.1);
    font-weight: 500;
    min-width: 40px;
}
.tckt-col.col-cours{
    flex: auto;
    max-width: 130px;
    min-width: 130px;
    text-align: left;
    padding-left: 4px;
}
/* TABLEAU RESPONSIVE */
.gst-edit-cours td.center{
    text-align: center;
}

.contact-faq{
    background: #fff;
    padding: 10px;
    border:1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
.contact-faq h1{
    color:var(--color_red);
    font-weight: 600;
    font-size: 16px;
}
.contact-faq p{
    color:rgba(0, 0, 0, 0.8);
    margin-top: -3px;
}
.contact-faq a{
    background: var(--color_red);
    color:#fff;
    padding: 5px 10px;
    display: block;
    width: 250px;
    text-align: center;
    margin-top: 5px;
}
.gestion-planning table{
    width: 100%;
    max-width: 800px;
}
.gestion-planning table a{
    display: inline-block;
    width: 50%;
    text-align: center;
}
.gestion-edit-planning{
    margin-top: 10px;
    background: #fff;
    max-width: 400px;
    padding: 20px;
    border:1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin: 0 auto;
}
.gestion-edit-planning input, select{
    height: 30px;
    cursor:pointer;
}
.gestion-edit-planning label{
    width: 70px;
    display: inline-block;
    margin-bottom: 10px;
}
.gestion-edit-planning input[type=submit]{
    background: var(--color_red);
    color:#fff;
    padding:5px;
    border:none;
    border-radius: 3px;
    display: block;
    margin-top: 5px;
    margin-left: 73px;
}
.edit-planning-h1{
    text-align: center;
}
.maj-planning{
    max-width: 800px;
    margin:0 auto;
}
.maj-planning a{
    background: var(--color_red);
    color:#fff;
    font-size: 14px;
    padding: 5px;
    border-radius: 3px;
    float: right;
    margin-top: -5px;
}
.grille{
    display: flex;
    max-width: 800px;
    margin:0 auto;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.grille-day{
    width: calc(100%/5);
}

.grille-cours{
    border:1px solid rgba(0, 0, 0, 0.1);
    padding: 3px;
    height: 55px;
    background: #fff;
}

.gestion-edit-cours{
    max-width: 600px;
    background: #fff;
    margin:0 auto;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.gestion-edit-cours h1{
    background: var(--color_backsite);
    text-align: center;
    margin:-11px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border:1px solid var(--color_backsite);
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
}
.gestion-edit-cours label{
    display: block;
    font-weight: 500;
    margin-top: 3px;
}
.gestion-edit-cours input[type=text], textarea{
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding: 5px 10px;
    border:1px solid rgba(0, 0, 0, 0.3);
}
.gestion-edit-cours textarea{
    height: 160px;
    max-width: 100%;
    min-width: 100%;
}
.gestion-edit-cours input[type=submit]{
    background: var(--color_red);
    padding: 5px;
    color:#fff;
    border:none;
    border-radius:3px;
    display: block;
    margin-top: 5px;
    height: 30px;
    cursor:pointer;
}
.gestion-edit-cours select{
    margin-bottom: 5px;
    padding: 5px 10px;
    border:1px solid rgba(0, 0, 0, 0.3);
    min-width: 70px;
}
.gst-edit-cours{
    background: #fff;
}

.children{
    font-size: 13px;
    text-align: justify;
    padding-bottom: 5px;
}
.children .child{
    font-size: 15px;
}
.children p.title{
    font-size: 16px;
    padding-top:10px;
    color:#ff3939;
    font-weight: 500;
}
.children .nochildren{
    font-size: 15px;
}
.children hr{
    margin:10px 0;
}

.gestion-edit-user input,.gestion-edit-user label{
    display: block;
}
.gestion-edit-user label{
    margin-top: 5px;
    font-weight: 500;
}
.gestion-edit-user input[type=submit]{
    background: var(--color_red);
    padding: 5px;
    color:#fff;
    border:none;
    border-radius:3px;
    display: block;
    margin-top: 5px;
    height: 30px;
    cursor:pointer;
    height: 40px;
}
.gestion-edit-user select{
    margin-bottom: 5px;
    padding: 5px 10px;
    border:1px solid rgba(0, 0, 0, 0.3);
    width: 400px;
    font-size: 16px;
    height: 40px;
}
.gestion-edit-user input{
    display: block;
    margin-bottom: 5px;
    padding: 5px 10px;
    border:1px solid rgba(0, 0, 0, 0.3);
    width: 400px;
    font-size: 16px;
    height: 40px;
}
.new_profil{
    background: var(--color_red);
    color:#fff;
    padding:5px;
    border:none;
    border-radius: 3px;
    display: block;
    width: 150px;
    text-align: center;
    height: 40px;
    line-height: 30px;
    margin:10px auto;
}

/* ANIMATIONS */
@keyframes up{
    from{height: 0%;}
    to{height: 100%;}
}
@keyframes down{
    from{height: 100%;}
    to{height: 0%;}
}

@media (max-width:1080px) {

    /* COURS */
    .cour_container{
        width: 33.33%;
    }
    .planning .day_container{
        width: calc(100%/3);
    }
    .contact-container{
        display: block;
    }
    .contact-container h1{
        margin-top: 20px;
    }
    .contact-container iframe{
        width: 100%;
    }
    .contact-container textarea{
        min-width: 100%;
        max-width: 100%;
    }
    .locations-disp .dispo{
        width: 32%;
        margin-bottom: 5px;
    }
    .resetpassword input[type=text]{
        width: 100%;
    }
    .resetpassword input[type=password]{
        width: 100%;
    }
    .gallery .picture{
        width: 33.33%;
    }
    .grid{
        column-count: 3;
    }
    .planning-cours .planning-day{
        width: calc(100%/3);
    }
    .spacing-bloc{
        width: 25%;
    }
    

}

@media (max-width:820px) {
    .spacing-bloc{
        width: 33.3%;
    }
}

@media (max-width:780px) {

    /* COURS */
    .cour_container{
        width: 49.5%;
    }
    .planning .day_container{
        width: calc(100%/2);
    }
    .form_container{
        width: 100%;
    }
    .form_login{
        width: 100%;
    }
    .gallery .picture{
        width: 49.5%;
    }
    .grid{
        column-count: 2;
    }
    .planning-cours .planning-day{
        width: calc(100%/2);
    }

}

@media (max-width:750px) {
    
    .topbar .topbar_icon{
        display: block;
    }

    .topbar .topbar_menu{
        background: #fff;
        position: absolute;
        top:80px;
        right: 20px;
        border-radius: 3px;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
        display: none;
    }
    .topbar .topbar_menu a{
        display: block;
        border:none;
        width: 200px;
        height: 40px;
        line-height: 30px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        margin: 0;
        padding: 5px 15px;
    }
    .topbar .topbar_menu a:last-child{
        border:none;
    }
    .topbar .topbar_menu a:hover{
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .topbar .topbar_menu a:last-child:hover{
        border:none;
    }
    .topbar .topbar_menu a.members{
        padding-top: 5px;
        border-radius: 0;
        padding-left: 40px;
    }
    .topbar .topbar_menu a.members i{
        top:5px;
        left:15px;
    }
    .topbar .topbar_menu.show{
        display: block;
    }
    .topbar .topbar_menu a.tickets{
        background: #f7f7f7;
        border-radius: 0;
        padding: 4.5px;
        padding-left: 30px;
        position: relative;
        font-weight: 600;
        border-top:none;
        position: absolute;
        bottom:0;
        right:4px;
        z-index: 7000;
        width: 75px;
    }
    .topbar .topbar_menu a.tickets i{
        font-size: 20px;
        position: absolute;
        left:10px;
        bottom:-16px;
        font-weight: 500;
        top:5px;
    }
    .topbar .topbar_menu a.logout{
        background: var(--color_red);
        color:#fff;
        border-radius:0;
        padding: 4.5px;
        padding-left: 40px;
        position: relative;
        border:none;
    }
    .topbar .topbar_menu a.logout i{
        font-size: 20px;
        position: absolute;
        left:15px;
        bottom:-16px;
        top:5px;
    }
    .cookiesbox{
        right:20px;
        width:auto;
    }
    .description .text{
        width: 100%;
        text-align: left;
        border:none;
    }
    .description .text:first-child{
        margin-left: 10px;
    }
    .illustration{
        flex-direction: column;
    }
    .illustration .details{
        padding-left: 0px;
        width: 100%;
    }
    .planning .day_container{
        width: calc(100%);
    }
    .locations{
        display: block;
    }
    .locations .salle{
        width: auto;
        margin: 0;
    }
    .locations-disp .dispo{
        width: 49%;
    }
    .virement-container{
        width: 100%;
    }
    .profil{
        width: 100%;
    }
    .profil_reservations{
        width: 100%;
    }
    table{
        width: 100%;
    }
    .dashboard-cours-choice{
        display: block;
        width: 100%;
    }
    .dashboard-cours-choice .dashboard-cours-border{
        width: 100%;
        margin-bottom: 5px;
    }
    .dashboard-cours-result{
        width: 100%;
    }
    .file-uploader{
        width: 100%;
    }
    .grid{
        column-count: 1;
    }
    .planning-cours .planning-day{
        width: 100%;
    }
    .spacing-bloc{
        width: 50%;
    }

}

@media (max-width:580px) {

    /* COURS */
    .cour_container{
        width: 100%;
    }
    .locations-disp .dispo{
        width: 100%;
        margin-bottom: 10px;
    }
    .gallery .picture{
        width: 100%;
    }
    .gallery video{
        width: 100%;
    }


}