html {
    scroll-behavior: smooth;
}

* {
    --main-color: #4892E8;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
}

a {
    color: white !important;
    text-decoration: none;
}

h1 {
    color: var(--main-color);
    font-size: 40px;
}

h2 {
    color: var(--main-color);
    font-weight: bold;
    font-size: 45px;
    margin-bottom: 20px;
}

strong {
    color: var(--main-color);
}

.grid-wrapper img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    display: inline-block;
}

.grid-wrapper > div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.grid-wrapper div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    margin-bottom: 100px;
}

.grid-wrapper .wide {
    grid-column: span 2;
}

.grid-wrapper .tall {
    grid-row: span 2;
}

.grid-wrapper .big {
    grid-column: span 2;
    grid-row: span 2;
}



/* ######################################################
    Header
###################################################### */

header {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    position: absolute;
}

.formation header, .cours header, .prive header, .retours header {
    background: linear-gradient(98deg, #4892E8 0.61%, rgba(72, 146, 232, 0.00) 100%),
    linear-gradient(262deg, #4892E8 0.39%, rgba(72, 146, 232, 0.00) 100.65%);
    position: relative;
    margin-bottom: 20px;
}

header ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: 40px;
    z-index: 1000;
    transition: .3s;
}

header .move {
    transform: translateX(0) !important;
    display: flex;
}

header a {
    text-decoration: none;
}

header .active {
    border-bottom: white solid 4px;
}

header nav {
    width: 100%;
    padding-inline: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .menu_btn {
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    appearance: none;
    display: none;
    outline: none;
    cursor: pointer;
}

header .menu_btn span{
    width: 100%;
    height: 2px;
    background-color: white;
    border-radius: 5px;
}

header .menu_btn span:nth-child(3) {
    width: 70%;
}

header nav img:last-of-type {
    width: 40px;
    height: 40px;
}

/* ######################################################
    Accueil
###################################################### */

.accueil .main {
    max-width: 1350px;
    margin: 0 auto;
}

.accueil .main-header {
    position: absolute;
    color: white;
    right: 30px;
    top: 5px;
    z-index: 2;
}

.accueil .top-section {
    background: linear-gradient(98deg, #4892E8 0.61%, rgba(72, 146, 232, 0.00) 100%),
    linear-gradient(262deg, #4892E8 0.39%, rgba(72, 146, 232, 0.00) 100.65%);
    text-align: center;
    height: 600px;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-bottom: 20px;
    scroll-behavior: smooth;
}

.accueil .top-section img {
    transform: translateY(-50px);
}

.accueil .introduction-container {
    display: flex;
    justify-content: space-between;
    margin: 100px 0;
}

.presentation-container p {
    max-width: 700px;
    font-size: 24px;
}

.accueil .contact-container {
    background-color: var(--main-color);
    color: white;
    max-width: 500px;
    width: 100%;
    height: 200px;
    border-radius: 15px;
    position: relative;
    text-align: center;
}

.contact-container h2 {
    color: white;
    margin: 10px 0;
}

.contact-container img {
    position: absolute;
    top: 10px;
    left: 10px;
    transition: 0.3s;
}

.contact-container img:hover {
    scale: 110%;
}

.contact-container > div a {
    transition: 0.3s;
}

.contact-container > div a:hover {
    font-size: 18px;
}

.paragraphes-container {
    text-align: center;
    height: 1000px;
    margin-top: 250px;
    margin-bottom: 100px;
}

.accueil .main-bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1150px;
    transform: translateY(-130px);
}

.paragraphes-container .paragraphes div {
    background-color: var(--main-color);
    color: white;
    padding: 50px 120px;
    border-radius: 20px;
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    text-align: left;
}

.paragraphes-container div img {
    position: absolute;
    top: 10px;
    left: 10px;
}

.paragraphes-container .paragraphes div:nth-child(odd) {
    filter: drop-shadow(-4px -4px 25px rgba(0, 0, 0, 0.25));
    transform: translateX(20px);
}

.paragraphes-container .paragraphes div:nth-child(even) {
    filter: drop-shadow(-10px -6px 25px rgba(0, 0, 0, 0.25));
}


.paragraphes-container .paragraphes div:nth-child(1) {
    transform: translateX(-320px);
}

.paragraphes-container .paragraphes div:nth-child(2) {
    transform: translateX(320px) translateY(-120px);
}

.paragraphes-container .paragraphes div:nth-child(3) {
    transform: translateX(-320px) translateY(-250px);
}

.paragraphes-container .paragraphes div:nth-child(4) {
    transform: translateX(320px) translateY(-350px);
}

.paragraphes-container .paragraphes div:nth-child(5) {
    transform: translateX(-320px) translateY(-420px);
}

.info-container {
    display: flex;
    justify-content: space-between;
}

.info-rect-container {
    display: flex;
    gap: 10px;
    max-width: 600px;
}

.info-rect-container > div p:first-of-type {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
}

.info-rect-container div {
    background-color: var(--main-color);
    color: white;
    border-radius: 20px;
    width: 100%;
    height: 400px;
    font-size: 18px;
    padding: 20px 40px 0 40px;
}

.info-rect-container button {
    border: none;
    width: 100%;
    height: 50px;
    background-color: white;
    font-size: 26px;
    border-radius: 10px;
    color: var(--main-color);
    margin-top: 40px;
    cursor: pointer;
}

.info-rect-container ul {
    margin-top: 20px;
    margin-left: 30px;
}

.info-rect-container li {
    font-size: 24px;
}

.information-container {
    margin-bottom: 150px;
}

.price-container {
    position: relative;
    z-index: -1;
}

.price-container p {
    position: absolute;
    font-size: 45px;
    color: var(--main-color);
    font-weight: bold;
    top: 60px;
    left: 80px;
}

.accueil .main-icon {
    max-width: 900px;
    width: 100%;
    display: block;
}

.accueil .bg-img {
    position: absolute;
    top: 300px;
    max-width: 1000px;
}

hr {
    display: none;
}


/* ######################################################
    Formation
###################################################### */

.formation main {
    position: relative;
}

.formation main > div {
    padding: 50px 50px;
    max-width: 1700px;
    margin: 0 auto;
}

.formation .images {
    position: relative;
}

.formation .images img {
    width: 400px;
    position: absolute;
    right: 0;
    box-shadow: 10px 6px 18.6px 6px rgba(0, 0, 0, 0.25);
}

.formation .images img:last-of-type {
    transform: translateX(-300px) translateY(250px);
}

.formation .formation-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -7;
}

.formation .formation-container {
    display: flex;
    justify-content: space-between;
}

.formation .formation-container p:first-of-type {
    font-size: 24px;
    max-width: 700px;
    margin: 20px;
}

.formation main li {
    font-size: 20px;
    max-width: 800px;
    margin-bottom: 10px;
}

.formation .barre-image {
    z-index: 300;
    max-width: 400px;
    margin: 60px 0 50vh 0;
}


/* ######################################################
    Cours
###################################################### */

.cours main {
    padding: 50px 50px;
    max-width: 1700px;
    margin: 0 auto;
}

.cours .main-container {
    display: flex;
    justify-content: space-between;
}

.cours .main-container p {
    font-size: 20px;
    max-width: 800px;
    min-width: 600px;
    margin-top: 10px;
}

.cours .main-container > div {
    flex: 1;
}

.cours table {
    border-radius: 7px;
    background: #FFF;
    box-shadow: 12px 11px 30px 0 rgba(0, 0, 0, 0.25);
    padding: 30px;
    border-collapse: separate;
    border-spacing: 30px;
    margin-left: 20px;
}

.cours tr > :first-child {
    font-weight: bold;
    width: 50px;
}

.cours table ul li {
    font-size: 18px;
}

.cours .price-container {
    position: relative;
    margin-top: 20px;
}

.cours .price-container p {
    position: absolute;
    font-size: 45px;
    color: var(--main-color);
    font-weight: bold;
    top: 60px;
    left: 80px;
}

.cours .cours-bg {
    position: absolute;
    width: 100%;
    height: 1150px;
    left: 0;
    z-index: -1;
}

/* ######################################################
    Retours
###################################################### */

.retours .modal #imdb img {
    width: 25px;
    margin: 5px;
}

.retours dl, ol, ul {
    margin-bottom: 0 !important;
}

.retours .modal .star {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.retours .modal .star .star-fill {
    background-image: url(../src/icones/gray-star-icon.svg);
    height: 30px;
    width: 35px;
    background-size: 35px;
    cursor: pointer;
}

.retours .modal .star .star-fill.active {
    background-image: url(../src/icones/star-icon.svg);
}

.retours #feedBack-list {
    margin-bottom: 100px;
}

.retours #feedBack-list > div {
    padding: 20px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 5px;
    background-color: #f3f3f3;
}

.retours .feedback-date {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 50%;
}

.retours .feedback-name {
    font-weight: bold;
    margin: 10px 0;
    font-size: 20px;
}

.retours .outer {
    background-image: url(../src/icones/gray-star-icon.svg);
    height: 20px;
    width: 125px;
    background-size: 25px;
}

.retours .inner {
    background-image: url(../src/icones/star-icon.svg);
    height: 20px;
    width: 0;
    background-size: 25px;
}

.retours .stars-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 0;
}

.retours .stars-container p {
    font-size: 20px;
    font-weight: 900;
}

.retours .ratting {
    margin: 0 auto;
}

.retours #addFeedBack {
    border: none;
    background-color: #E13207;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
    margin-bottom: 30px;
}

.retours main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.retours .top {
    text-align: center;

}

.retours .top h1 {

    font-size: 60px;
    font-weight: bold;
}

.retours .top p {
    font-size: 25px;
}

.retours .modal-body > p:first-of-type {
    text-align: center;
}

.retours #alert {
    display: none;
    margin-bottom: 30px;
}

/* ######################################################
    Prive
###################################################### */

.prive .container a {
    text-decoration: none;
    color: black !important;

}

.prive header h1 {
    color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.prive #calendrier table {
    border-collapse: collapse;
    height: 400px;
    width: 100%;
}

.prive #calendrier th {
    background-color: #f2f2f2;
    border: 1px solid #ddd;
}

.prive #calendrier td {
    cursor: pointer;
    height: 80px;
    border: 1px solid #ddd;
    position: relative;
    text-align: left;
    padding: 5px;
}

.prive #calendrier td p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    opacity: 40%;
}

.prive td span {
    position: absolute;
    top: 5px;
    right: 5px;
}

.prive #calendrier .selected {
    background-color: #4CAF50;
    color: white;
}

.prive #inscription-container {
    width: 500px;
    height: 500px;
    background-color: gray;
}

.prive #inscription-container input[type="button"] {
    width: 100%;
}

.prive .top-container {
    display: flex;
    gap: 100px;
    flex-direction: row;
}

.prive .container {
    margin-top: 50px;
    max-width: 1500px;
    display: block !important;
}

.prive #calendrier-container {
    text-align: center;
    position: relative;
    flex: 1.5;
}

.prive .calendar-btn {
    display: flex;
    justify-content: space-between;
    width: 220px;
    margin: 0 auto;
}

.prive .calendar-btn button {
    border: none;
    height: 25px;
    background-color: #DFDFDF;
    cursor: pointer;
    margin-bottom: 10px;
    border-radius: 3px;
}


.prive .reservation-element {
    background-color: #DFDFDF;
    width: 100%;
    position: relative;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.prive .reservation-element div {
    position: absolute;
    top: 0;
    right: 10px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 25px;
}

.prive .reservation-nom {
    font-weight: bold;
    font-size: 30px;
    margin: 0;
}

.prive .zone-texte {
    text-align: left;
    margin-top: 30px;
}

.prive .changeMdp {
    text-align: left;
    margin-top: 80px;
}

.prive .galerie-photo {
    text-align: left;
    max-width: 1500px;
    margin: 100px auto;
}

.prive .galerie-photo .btn {
    margin-bottom: 20px;
}

.prive .zone-texte button {
    margin-top: 20px;
}

.prive .reservation-container {
    flex: 1;
}

.prive #next-date {
    opacity: 40%;
    font-size: 25px;
}

.prive #ancienne-date-txt {
    font-size: 22px;
    margin-top: 40px;
}

.prive h1 {
    opacity: 75%;
}

.prive #image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin-bottom: 100px;
    margin-top: 20px;
}

.prive .small {
    position: absolute;
    background-color: gray;
    right: 5px;
    top: 40px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    cursor: pointer;
}

.prive #access-page div {
    width: 400px;
    padding: 20px;
    background-color: #F2F2F2;
    margin: 100px auto 0 auto;
    text-align: center;
    border-radius: 10px;
}

.prive #access-page #password {
    margin-bottom: 20px;
}

.prive .galerie-info-container {
    background-color: black;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.prive .galerie-info-container:hover {
    opacity: 100%;
}

.prive .galerie-action-container {
    display: flex;
    gap: 10px;
    color: white;
    font-size: 30px;
}

.prive .galerie-action-container i {
    color: white;
    font-size: 30px;
    cursor: pointer;
    border: white 2px solid;
    padding: 5px;
    border-radius: 5px;
}

.prive #feedback-list {
    margin-bottom: 100px;
}

.prive #feedback-list > div {
    padding: 20px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 5px;
    background-color: #f3f3f3;
}

.prive .feedback-date {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 50%;
}

.prive .feedback-name {
    font-weight: bold;
    margin: 10px 0;
    font-size: 20px;
}

.prive .outer {
    background-image: url(../src/icones/gray-star-icon.svg);
    height: 20px;
    width: 125px;
    background-size: 25px;
}

.prive .inner {
    background-image: url(../src/icones/star-icon.svg);
    height: 20px;
    width: 0;
    background-size: 25px;
}

.prive .stars-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 0;
}

.prive .stars-container p {
    font-size: 20px;
    font-weight: 900;
}

.prive .ratting {
    margin: 0 auto;
}

.prive #feedback-list button {
    border: none;
    background-color: #dc3545;
    border-radius: 10px;
    padding: 5px 10px;
    color: white;
}

.prive .fa-location-dot {
    margin: 0 3px 0 10px;
}

.prive .fa-user {
    margin-right: 5px;
}

/* ######################################################
    Footer
###################################################### */


footer {
    position: relative;
    background: linear-gradient(98deg, #4892E8 0.61%, rgba(72, 146, 232, 0.00) 100%),
    linear-gradient(262deg, #4892E8 0.39%, rgba(72, 146, 232, 0.00) 100.65%);
    height: 400px;
    text-align: center;
    color: white;
    padding-top: 20px;
    width: 100%;
}

footer .mail-container {
    display: flex;
    text-align: left;
    gap: 10px;
    position: absolute;
    right: 10vw;
    top: 150px;
}

footer .credit {
    margin-top: 120px;
}

footer .footer-img {
    max-width: 500px;
    width: 100%;
}

/* ######################################################
    Responsive
###################################################### */

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

    h1 {
        font-size: 25px !important;
    }

    h2 {
        text-align: center;
        font-size: 30px !important;
    }

    .container {
        display: block;
    }

    .main {
        padding: 0 20px !important;
    }

    .mail-container {
        display: none !important;
    }

    .grid-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    }


    /* ######################################################
        Header
    ###################################################### */

    header nav {
        padding-inline: 20px;
    }

    header ul {
        flex-direction: column;
        justify-content: flex-start;
        background-color: var(--main-color);
        width: 250px;
        height: 100vh;
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1;
        transform: translateX(140%);
        padding-top: 100px;
        transition: 0.3s;
    }

    header .menu_btn {
        z-index: 1000;
        display: block;
    }

    header .menu_btn>span {
        z-index: 1000;
        display: block;
        margin-top: 5px;
        transition: .3s;
    }

    header .menu_btn.activeMenu>span:nth-child(2) {
        display: none;
    }

    header .menu_btn.activeMenu>span:nth-child(3) {
        width: 100%;
        transform: rotate(45deg) translateY(-5px);
    }

    header .menu_btn.activeMenu>span:nth-child(1) {
        transform: rotate(-45deg) translateY(5px);
    }

    /* ######################################################
        Accueil
    ###################################################### */

    .accueil .top-section {
        height: 25vh !important;
        padding: 80px 40px 0 40px;
    }

    .accueil .paragraphes-container {
        margin-top: 0 !important;
    }

    .accueil .paragraphes-container .paragraphes div {
        all: inherit !important;
        background-color: var(--main-color) !important;
        color: white !important;
        border-radius: 20px !important;
        padding: 50px 10px 10px 10px !important;
        width: 100% !important;
        font-size: 16px !important;
        text-align: left !important;
        margin-bottom: 15px !important;
        position: relative !important;
    }

    .accueil .paragraphes-container .paragraphes img {
        width: 40px;
        left: 50%;
        transform: translateX(-50%);
    }

    .accueil .contact-container {
        height: 165px !important;
        padding-top: 3px;
    }

    .accueil .bg-img {
        display: none;
    }

    .accueil .main-bg {
        display: none;
    }

    .accueil .introduction-container {
        text-align: center;
    }

    .accueil .information-container {
        position: relative;
        margin-bottom: 0 !important;
    }

    .accueil .price-container {
        position: absolute !important;
        right: -20px;
        top: 50px;
    }

    .accueil .introduction-container {
        display: block !important;
        margin: 0 !important;
    }

    .accueil .presentation-container {
        margin-bottom: 50px;
    }

    .accueil .info-container {
        display: block !important;
    }

    .accueil .info-container .title {
        font-size: 22px !important;
    }

    .accueil .info-rect-container {
        margin-top: 150px;
    }

    .accueil .info-rect-container p {
        font-size: 16px !important;
    }

    .accueil .info-pc {
        display: none !important;
    }

    .accueil .info-mobile {
        display: block !important;
    }

    .accueil .info-mobile h2 {
        text-align: left;
    }

    .accueil .info-rect-container li {
        font-size: 18px !important;
        text-align: left;
    }

    .accueil .info-rect-container div {
        font-size: 10px;
        padding: 10px !important;
        height: 300px !important;
        text-align: center;
    }

    .accueil .info-rect-container button {
        font-size: 18px !important;
        margin-top: 17px !important;
    }

    .accueil .presentation {
        font-size: 16px !important;
    }

    .accueil .galerie {
        transform: translateY(140px);
        margin-bottom: 200px;
    }

    .accueil hr {
        display: block;
        margin: 50px 0;
        opacity: 50%;
    }

    .accueil .price-container p {
        font-size: 24px !important;
        left: 60px !important;
        top: 30px !important;
    }

    .accueil .price-container img {
        max-width: 35vh !important;
    }


    /* ######################################################
        Formation
    ###################################################### */

    .formation h1, .cours h1, .retours h1 {
        text-align: center;
        font-size: 30px !important;
    }

    .formation ul {
        margin: 0 0 50px 20px;
    }

    .formation main img {
        all: inherit !important;
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    .formation main .images {
        width: 80%;
        margin: 0 auto;
    }

    .formation main .images img:last-of-type {
        box-shadow: 10px 6px 18px 6px rgba(0, 0, 0, 0.25) !important;
    }

    .formation .formation-container {
        display: block !important;
    }

    .formation .formation-bg {
        display: none !important;
    }

    .formation main > div {
        padding: 0 !important;
    }

    .formation-container p:first-of-type {
        text-align: center;
        margin-bottom: 30px;
        font-size: 20px !important;
    }

    .formation li{
        font-size: 18px !important;
    }

    /* ######################################################
        Cours
    ###################################################### */

    .cours .main-container {
        display: block !important;
    }

    .cours .cours-bg {
        display: none !important;
    }

    .cours tr > :first-child {
        width: 35px;
        font-size: 12px;
        white-space: nowrap;
    }

    .cours table {
        margin-bottom: 50px !important;
        margin-left: 0;
        padding: 0 !important;
        transform: translateY(0) !important;
    }

    .cours table li {
        font-size: 14px !important;
    }

    .cours .price-container {
        display: none !important;
    }

    .cours .main-container p {
        font-size: 18px !important;
        min-width: inherit;
        text-align: center;
        margin-bottom: 40px;
    }

    ,

    /* ######################################################
        Retours
    ###################################################### */

    .retours #addFeedBack{
        margin-bottom: 60px !important;
    }

    /* ######################################################
        Prive
    ###################################################### */

    .prive .top-container {
        display: block;
    }

    .prive td p {
        display: none;
    }

    .prive h2 {
        margin-top: 50px;
    }

    .prive #calendrier td {
        height: 60px;
    }

    .prive .reservation-container {
        width: 100%;
    }

    /* ######################################################
        Footer
    ###################################################### */

    footer {
        height: 200px !important;
    }

    footer .credit {
        margin-top: 0 !important;
    }

    footer .footer-img {
        max-width: 300px !important;
    }
}

@media screen and (max-width: 1600px) {
    .formation .images img:last-of-type {
        transform: translateX(0px) translateY(330px);
    }

    .images {
        width: 400px;
        margin-left: 20px;
    }

    footer .mail-container {
        right: 3vw;
    }
}

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}