/*Tailles de polices*/

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 450) {
    html {
        font-size: 10px;
    }
}

.text-medium {
    font-size: 1.2rem;
}


/*Couleurs*/
.border-blue {
    border: 5px double hsl(191 70% 80%);
    box-shadow: hsl(191 70% 80%) 5px 5px 10px;
    filter: brightness(110%);
}

.border-yellow {
    border: 5px double hsl(48 75% 83%);
    box-shadow: hsl(48 75% 83%) 5px 5px 10px;
    filter: brightness(110%);
}

.border-purple {
    border: 5px double hsl(268 70% 81%);
    box-shadow: hsl(268 70% 81%) 5px 5px 10px;
    filter: brightness(110%);
}

.border-green {
    border: 5px double hsl(79 43% 75%);
    box-shadow: hsl(79 43% 75%) 5px 5px 10px;
    filter: brightness(110%);
}

.border-pink {
    border: 5px double hsl(313 82% 82%);
    box-shadow: hsl(313 82% 82%) 5px 5px 10px;
    filter: brightness(110%);
}

.border-gray {
    border: 5px double hsl(331 84% 35%);
    box-shadow: hsl(0 0% 50.2%) 5px 5px 10px;
    filter: brightness(110%);
}

.bg-burgundy {
    background-color: hsl(331 84% 35%);
}

.bg-lighterBurgundy {
    background-color: hsl(331 84% 35% / 15%);
}


.bg-lightBlueGradient {
    background: linear-gradient( hsl(191 70% 80% / 20%), hsl(191 70% 80%));
}

.bg-lighterBlue {
    background-color: hsl(191 70% 80% / 20%);
}

.bg-lightYellowGradient {
    background: linear-gradient( hsl(48 75% 83% /20% ), hsl(48 75% 83% ));
}

.bg-lightYellow {
    background-color: hsl(48 75% 83% / 20% );
}

.bg-lightPurpleGradient {
    background: linear-gradient( hsl(268 70% 81% / 20%), hsl(268 70% 81%));
}

.bg-lighterPurple {
    background-color: hsl(268 70% 81% / 20%);
}

.bg-lightPinkGradient {
    background: linear-gradient( hsl(313 82% 82% /20% ), hsl(313 82% 82%));
}

.bg-lighterPink {
    background-color: hsl(313 82% 82% /20% );
}

.bg-lightGreenGradient {
    background: linear-gradient( hsl(79 43% 75% /15% ), hsl(79 43% 75%));
}

.bg-lighterGreen {
    background-color: hsl(79 43% 75% /15% );
}

/*Sections*/
html {
    font-size: 14px;
    position: relative;
}

body {
    box-sizing: unset;
    margin-bottom: 50rem;
    font-family: "Inclusive Sans", sans-serif;
    font-optical-sizing: auto;
    overflow-x: hidden;
    width: 100%
}

.header {
    max-width: 100%;
    background-color: lightblue;
}

.logo {
    max-width: 100%;
    height: auto;
    margin: 1rem 0 1rem 0;
    display: relative;
    padding: 0 0 0 0;
}

.logo_svg {
    max-width: 100%;
}


@media (max-width: 500px) {
    .svg__draw {
    
    }
}



.navbar-nav {
    background-color: hsl(331 84% 35%);
    color: white;
    margin: 0 0 0 0;
    max-width: 100%;
}

.navbar {
    border-top: 1px solid hsl(331 84% 35%);
    border-bottom: 1px solid hsl(331 84% 35%);
    font-size: 1rem;
    align-content: center;
}

.navbar-brand {
    color: white;
    align-items: center;
    font-size:1rem;
    align-self: baseline;
    padding-left: 2rem
}

.nav-item:hover {
    font-weight: bold;
}

.dropdown-item {
    background-color: white;
    color: hsl(331 84% 35%);
    border-bottom: 1px solid hsl(331 84% 35%);
    font-size: clamp(0.7rem, 1vw, 2rem)
}

    .dropdown-item:hover {
        background-color: hsl(331 84% 35%);
        color: white;
    }

.main {
    max-width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: 1rem 1rem 2rem 1rem;
}

.socialNetworksandContact {
    border: 1px solid lightgray;
    border-radius: 5px 5px;
    box-shadow: 5px 5px 10px lightgray;
    padding: 1.2rem;
    width: 80vw;
    margin: 1rem auto 5rem auto;
}

    .socialNetworksandContact:hover {
        box-shadow: 5px 5px 30px lightgray;
    }

.contact {
    display: flex;
    flex-direction: column;
}

 /*style du footer*/
.footer {
    position: absolute;
    bottom: -8%;
    transform: translateY(65%);
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    line-height: 1.5rem;
    border-top: 1px solid hsl(331 84% 35%);
    padding: 2rem 0 0 0;
}

.footer__contact {
    display: flex;
    justify-content: space-around;
    padding-top: 1rem;
}

.footer__contactDetail {
    color: white;
    line-height: 1rem;
    font-size: clamp(0.5rem, 2vw, 1rem);
    text-wrap: auto;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.footer__contactDetailLink {
    color: white;
    text-decoration: none;
}

    .footer__contactDetailLink:hover {
        text-decoration: underline;
    }

.footer__img {
    width: clamp(1.5rem, 5vw, 3rem);
}

.footer__link {
    color: white;
}

.footer__websiteDetails {
    background-color: hsl(60 9.1% 2.2 / 0.5);
    margin-top: 1rem;
    padding: 1rem;
    color: white;
    font-weight: 100;
    font-size: small;
    display: block;
    text-align: left;
}

@media (max-width: 800px) {
    .footer__websiteDetails {
        font-size: x-small;
    }
}


.footer__columnTitle {
    font-size:medium;
}

.footer__bottom {
    margin-top: 2rem;
    text-align:center;
}

.footer__eventsSublist {
    padding-left: 2rem;
}

/*Autres élements de stylisation*/
.full-width {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.activitiLink {
    font-weight: bolder;
    color: black;
}

    .activitiLink:hover {
        color: hsl(331 84% 35%);
    }

.pointer {
    cursor: pointer;
}

.btn-outline-burgundy {
    border: 5px double hsl(331 84% 35%);
    color: hsl(331 84% 35%);
    font-weight: 500;
    position:relative;
    z-index: 8;
}

    .btn-outline-burgundy:hover {
        background-color: hsl(331 84% 35%);
        color: white;
    }

.btn-outline-gold {
    border: 5px double hsl(30 50% 65%);
    background-color: hsl(30 50% 65%);
    color: white;
    font-weight: 500;
    position: relative;
    z-index: 8;
}

    .btn-outline-gold:hover {
        background: linear-gradient(hsl(30 50% 65% / 20%), hsl(30 50% 65%),hsl(30 50% 65% / 20%));
        color: hsl(30 22.2% 10.6%);
    }

.creditPhoto {
    font-size: clamp(0.2rem,2vw,0.8rem);
    text-align: left;
    color: hsl(0 0% 16.1%);
}

/*style des pages prestations: mini'mouv, school'mouv, danse'mouv, slow'mouv et event'mouv + about*/
.presentation {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.5rem 2rem 0.5rem;
    padding: 1rem;
    border: 1px solid lightgray;
    border-radius: 5px 5px;
    box-shadow: 15px 15px 20px lightgray;
}

.presentation__background {
    background-color: hsl(0 0% 96%);
    border: 1px solid;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    height: 80%;
    width: 80%;
    border: 1px solid lightgray;
    border-radius: 5px 5px;
    box-shadow: 15px 15px 20px lightgray;
    padding: 1.2rem;
    box-sizing:content-box;
}

.presentation__text {
    width: 70%;
    padding: 1.5rem;
    margin-top: 2rem;
    background-color: white;
    border-radius: 10px;
    position: relative;
    bottom: calc(100-1rem);
    box-sizing: content-box;
    font-size: clamp(1rem, 2vw, 1.5rem);
}
/*-----------------------------------------------------------------*/