/*
 * Theme Name: Lalygue Custom Theme
 * Theme URI: https://lalygue.fr
 * Author: Aurélien Sohier
 * Description: Un thème personnalisé pour le site de La lygue.
 * Version: 1.0
 */

/* 
 * Couleurs principales:
 * - Jaune: #fff8d4
 * - Noir: #2b0e34
 *
 * Palette de dégradés:
 * - Bleu: #1d9595
 * - Violet: #a05aa0
 * - Orange: #e96c20
 * - Beige: #f7d4b6
 */

/* FONTS */

@font-face {
    font-family: "Dosis";
    src: url("assets/fonts/Dosis/Dosis-Regular.woff2") format("woff2"), url("Dosis-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Junigarden Swash";
    src: url("assets/fonts/Junigarden/JunigardenSwash-Regular.woff2") format("woff2"),
        url("assets/fonts/Junigarden/JunigardenSwash-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Junigarden Serif";
    src: url("assets/fonts/Junigarden/JunigardenSerif-Regular.woff2") format("woff2"),
        url("assets/fonts/Junigarden/JunigardenSerif-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arcane Nine";
    src: url("assets/fonts/ArcaneNine/Arcane_Nine.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-dosis {
    font-family: "Dosis";
}

.font-junigarden-swash {
    font-family: "Junigarden Swash";
}

.font-junigarden-serif {
    font-family: "Junigarden Serif";
}

.font-arcane-nine {
    font-family: "Arcane Nine";
}

/* END FONTS */

:root {
    color-scheme: light only;
}

body {
    margin: 0;
}

.vague1 {
    width: 100%;
    transform: rotate(180deg);
}

.vague2 {
    width: 100%;
}

/* HEADER CSS */

.header {
    background-color: #fff8d4;
    color: #2b0e34;
    padding: 20px 0;
}

.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* .header .logo {
    display: flex;
    justify-content: center;
    width: 100%;
} */

.header .logo img {
    max-height: 150px;
}

.navbar-toggler {
    /* position: absolute;
    right: 25px; */
    border: 2px solid #2b0e34;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        margin: auto;
    }

    .nav-item {
        margin: 10px 10px;
    }
}

@media (max-width: 992px) {
    .nav-item {
        margin: 10px auto;
    }
}

.header-buttons {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
}

.btn {
    background-color: transparent;
    color: #2b0e34;
    border: #2b0e34 2px solid;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 100;
    text-align: center;
    transition: background 0.3s;
    text-transform: uppercase;
    white-space: nowrap;
    width: auto;
}

.btn-white {
    color: #fff8d4;
    border-color: #fff8d4;
}

.btn:hover {
    background-color: #2b0e34;
    color: #fff8d4;
}

/* END HEADER CSS */

/* FOOTER CSS */

.footer {
    background-color: #fff8d4;
    color: #2b0e34;
    padding: 20px 0;
    padding-bottom: 75px;
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.link-wrapper {
    position: absolute;
    height: 0;
    max-width: 100%;
}

.footer-link {
    position: relative;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    transform: translateX(50%);
    top: 45px;
}

.footer-link a {
    color: #2b0e34;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    width: auto;
}

@media (max-width: 992px) {
    .footer-link {
        flex-direction: row;
        top: 150px;
    }
}

.footer .reseau-sociaux {
    display: flex;
    justify-content: center;
}

.footer .reseau-sociaux img {
    width: 750px;
    max-width: 100%;
}

/* END FOOTER CSS */

/* WAVE SECTION */

.with-waves {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.wave {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

.wave img {
    display: block;
    width: 100%;
    height: auto;
}

.wave-top {
    top: 0;
    transform: translateY(-1px); /* évite le blanc entre vague et section précédente */
}

.wave-bottom {
    bottom: 0;
    transform: translateY(1px); /* évite le blanc entre vague et section suivante */
}

.section-content {
    padding: 80px 20px;
    position: relative;
    z-index: 1;
    color: white;
}

/* END WAVE SECTION */

/* HOMEPAGE CSS */

#homepage-menu {
    background: linear-gradient(to bottom, #ffffff, #a05aa0, #e96c20);
    padding: 100px 20px 50px 20px;
}

.menus-section {
    display: flex;
    align-items: stretch; /* permet d'étirer les enfants verticalement */
    gap: 20px; /* un petit espace entre les deux colonnes */
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.menus-container {
    display: flex;
    flex-direction: column;
    flex: 5; /* prend plus de place que la colonne droite */
    gap: 20px;
}

#menu-pages a {
    display: inline-block;
    width: 75%;
    margin: auto;
}

#menu-pages img {
    width: 100% !important;
}

#menu-categories a {
    display: inline-block;
    width: 100%;
    margin: auto;
}

#menu-categories img {
    width: 100%;
}

.social-bar {
    position: absolute;
    right: 5%;
    height: 75%;
}

.social-bar img {
    max-height: 100%;
    width: auto;
}

#separator {
    padding: 100px 0;
    margin: auto;
    background-color: #fff8d4;
}

/* #separator img {
    max-height: 300px;
    width: auto;
} */

#separator .separator-text {
    text-align: center;
    margin: auto 0;
}

.separator-text button {
    margin-top: 20px;
}

.btn-infos {
    background-color: transparent;
    border-radius: 5px;
    height: 35px;
    border: #2b0e34 solid 2px;
    box-shadow: 2px 2px #2b0e34;
    font-size: 15px;
    font-family: "Arcane Nine";
    padding: 5px 10px;
    color: #2b0e34;
    text-decoration: none;
}

.btn-infos-white {
    color: #fff8d4;
    border-color: #fff8d4;
    box-shadow: 2px 2px #fff8d4;
}

.btn-infos:hover {
    cursor: pointer;
}

#homepage-content {
    background: linear-gradient(to bottom, #f7d4b6, #1d9595);
    padding: 100px 0;
    margin: auto;
}

.flex {
    display: flex;
    justify-content: space-around;
}

#homepage-content img {
    max-height: 300px;
    width: auto;
}

.infos {
    font-family: "Dosis";
    font-size: 18px;
    margin: 50px auto 0 auto;
}

.infos .infos-card {
    border: 3px solid #2b0e34;
    border-radius: 8px;
    box-shadow: 2px 2px #2b0e34;
    background-color: #fff8d4;
    text-align: center;
    padding-bottom: 20px;
    width: 80%;
}

.infos-card h3 {
    background-color: #e96c20;
    border-bottom: 3px solid #2b0e34;
    border-radius: 4px;
    margin: 0;
    margin-bottom: 15px;
    padding: 5px;
    font-size: 25px;
    font-weight: bold;
}

/* END HOMEPAGE CSS */

/* RESERVATION-PAGE CSS */

#reservation-top {
    background: linear-gradient(to bottom, #a05aa0, #e96c20);
    padding: 100px 0;
}

.reservation-forms {
    margin-bottom: 75px;
}

.reservation-forms .form-group {
    margin: 25px;
}

.reservation-forms label {
    font-weight: 500;
    margin-right: 20px;
}

.reservation-forms input {
    font-family: "Dosis";
    border: 1px solid #2b0e34;
    border-radius: 8px;
    background-color: #fff8d4;
    color: #2b0e34;
    outline: none;
    transition: border-color 0.3s ease;
    padding: 10px 15px;
    text-align: center;
}

.reservation-forms select {
    font-family: "Dosis";
    border: 1px solid #2b0e34;
    border-radius: 8px;
    background-color: #fff8d4;
    color: #2b0e34;
    outline: none;
    transition: border-color 0.3s ease;
    padding: 10px 15px;
    text-align: center;
}

.reservation-forms input:focus {
    border-color: #2b0e34;
    box-shadow: 0 0 0 1px #2b0e34;
}

.btn-form {
    background-color: transparent;
    border-radius: 5px;
    height: 35px;
    border: #2b0e34 solid 2px;
    box-shadow: 2px 2px #2b0e34;
    font-size: 15px;
    font-family: "Unigarden Serif";
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 500;
}

.btn-form:hover {
    cursor: pointer;
}

.reservation-card h3 {
    font-family: "Arcane Nine";
    font-weight: 500;
}

.reservation-card {
    background-color: #fff8d4;
    border-radius: 20px;
    color: #2b0e34;
    font-family: "Dosis";
    padding: 25px;
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    text-align: center;
}

.reservation-question img {
    max-height: 300px;
    max-width: 100%;
    width: auto;
}

.reservation-question .question-text {
    margin: auto 0;
    color: #fff8d4;
    text-align: center;
}

.reservation-question h3 {
    font-size: 25px;
    font-family: "Arcane Nine";
}

.reservation-question p {
    font-size: 20px;
    font-family: "Dosis";
}

.reservation-question .btn-question {
    color: #fff8d4;
    border-color: #fff8d4;
    box-shadow: none;
}

#reservation-content {
    background: linear-gradient(to bottom, #a05aa0, #e96c20);
    padding: 100px 0;
    margin: auto;
}

/* END RESERVATION-PAGE CSS */

#zones-jeux {
    background: linear-gradient(to bottom, #e96c20, #a05aa0);
    color: #fff8d4;
    padding: 100px 0;
}

#zones-jeux .btn {
    border-color: #fff8d4;
    color: #fff8d4;
}

#zones-jeux .jeux1 {
    text-align: left;
}

#zones-jeux .jeux2 {
    text-align: right;
}

@media (max-width: 992px) {
    #zones-jeux .jeux1,
    #zones-jeux .jeux2 {
        text-align: center;
    }
}

#zones-jeux h3 {
    font-size: 35px;
}

#zones-jeux img {
    width: 100%;
}

#zones-jeux button {
    color: #fff8d4;
    border-color: #fff8d4;
    box-shadow: none;
}

#zones-jeux-content {
    background: linear-gradient(to bottom, #a05aa0, #e96c20);
    padding: 100px 0;
}

#zones-jeux-content .reservation-text {
    color: #fff8d4;
    text-align: center;
    margin: auto 0;
    font-family: "Dosis";
}

.reservation-text h3 {
    margin: 0;
}

.reservation-text p {
    margin: 0;
}

#zones-jeux-content .reservation-text button {
    margin-top: 20px;
    border-color: #fff8d4;
    color: #fff8d4;
    box-shadow: 2px 2px #fff8d4;
}

#zones-jeux-content img {
    max-height: 300px;
    width: auto;
}

#boissons-menus {
    background: linear-gradient(to bottom, #a05aa0, #1d9595);
    padding: 100px 0;
}

#boissons-content {
    background: linear-gradient(to bottom, #a05aa0, #e96c20);
    padding: 100px 0;
}

#boissons-menus .boissons-text {
    color: #fff8d4;
    text-align: center;
    margin: auto 0;
    font-family: "Dosis";
    margin-bottom: 100px;
}

.prix-boisson {
    font-family: "Arcane Nine";
}

.boissons-text h1 {
    font-size: 100px;
    margin: 0;
}

.boissons-text h3 {
    font-size: 35px;
    margin: 0 0 30px 0;
}

.boissons-text p {
    font-size: 20px;
    margin: 0;
}

.boissons-cartes {
    margin-bottom: 50px;
}

.boissons-carte {
    color: #fff8d4;
    border: 2px solid #fff8d4;
    border-radius: 5px;
    text-align: center;
    padding: 10px 20px 5px 20px;
    margin: auto 0px;
    background-color: transparent;
}

@media (max-width: 992px) {
    .boissons-carte {
        width: 100%;
    }
}

.boissons-carte p {
    margin: 0;
    font-size: 18px;
    font-family: "Dosis";
}

.boissons-carte .boisson-type {
    font-size: 30px;
    font-family: "Junigarden Swash";
}

.boissons-menu-text {
    text-align: center;
    color: #fff8d4;
    font-size: 30px;
    margin: 100px auto 50px auto;
}

.boissons-menu {
    color: #fff8d4;
    font-weight: bold;
    font-family: "Dosis";
    font-size: 20px;
    border: 2px dashed #fff8d4;
    border-radius: 15px;
}

.boissons-menu .detail-boisson {
    font-weight: 500;
}

.boisson {
    margin: 20px 0;
}

.row-menus {
    display: flex;
    justify-content: space-between;
}

.nos-desserts .row {
    display: flex;
    justify-content: unset;
}

.glaces .row {
    display: flex;
    justify-content: unset;
}

.sucreries .row {
    display: flex;
    justify-content: unset;
}

.boissons-menu .nom-boisson {
    margin: 0;
    font-family: "Arcane Nine";
}

.degustation-decouverte {
    width: 90%;
    background-color: #fff8d4;
    color: #2b0e34;
    margin: auto;
    border: 3px solid #2b0e34;
    border-radius: 10px;
    margin-top: 50px;
}

.degustation-decouverte .nom-boisson {
    text-align: center;
}

.degustation-text {
    margin: auto 0;
    text-align: center;
}

.degustation-decouverte .prix {
    position: relative;
    top: -5px;
    left: -5px;
    font-weight: bold;
}

.encart-prix {
    position: relative;
    top: -35px;
    left: -35px;
    height: 100px;
    width: auto;
}

@media (max-width: 992px) {
    .degustation-decouverte .prix {
        left: -5px;
    }
}

.img-bieres {
    height: 175px;
    width: auto;
}

#restauration-menus {
    background: linear-gradient(to bottom, #f7d4b6, #1d9595);
    padding: 100px 0;
}

#restauration-content {
    background: linear-gradient(to bottom, #a05aa0, #e96c20);
    padding: 100px 0;
}

#restauration-content img {
    max-height: 300px;
    width: auto;
}

.restauration-text {
    text-align: center;
    color: #2b0e34;
    font-size: 30px;
    margin: 75px auto 0px auto;
}

.restauration-text h1 {
    margin: 0;
}

.nom-planche {
    font-family: "Junigarden Swash";
    font-size: 25px;
    margin: 0;
}

.nom {
    font-family: "Arcane Nine";
    text-transform: uppercase;
    font-size: 25px;
    margin: 0;
    line-height: 25px;
}

.detail {
    text-transform: none;
    font-family: "Dosis";
    font-size: 18px;
    font-weight: 500;
}

.img-wrapper-prix {
    position: absolute;
    z-index: 0;
    height: 0;
    width: 0;
}

.encart-prix-rose {
    position: relative;
    top: -23px;
    left: -23px;
    height: 85px;
    width: auto;
}

.prix {
    font-family: "Arcane Nine";
    font-weight: bold;
    font-size: 25px;
    z-index: 1;
}

.menus-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}

.planches-aperos {
    border: 2px dashed #2b0e34;
    border-radius: 5px;
    padding: 0px 30px 0 30px;
}

.planche-img {
    position: relative;
    top: -45px;
    left: -100px;
    max-height: 125px;
}

@media (max-width: 992px) {
    .planche-img {
        left: -15px;
    }
}

.formules .detail {
    text-align: right;
    width: 100%;
}

.formules .formules-img {
    position: relative;
    top: -50px;
    right: -100px;
    max-height: 140px;
}

@media (max-width: 992px) {
    .formules .formules-img {
        top: -30px;
        right: 20px;
    }
}

.formules {
    border: 2px solid #2b0e34;
    background-color: #fff8d4;
    box-shadow: 3px 5px#2b0e34;
    border-radius: 5px;
    padding: 0 30px 0 30px;
    height: 100%;
}

.menu-snack .row {
    margin-bottom: 10px;
}

.menu-snack {
    border: 2px dashed #2b0e34;
    border-radius: 5px;
    margin-top: 0;
    padding: 0 30px 20px 30px;
}

.menu-snack .snacks-img {
    position: relative;
    top: -75px;
    max-height: 150px;
}

@media (max-width: 992px) {
    .menu-snack .snacks-img {
        top: -25px;
    }
}

.planche {
    margin-bottom: 30px;
}

.formule {
    margin-bottom: 30px;
}

.tacos-img {
    max-height: 175px;
    position: relative;
    right: 50px;
}

.nos-desserts {
    display: flex;
    justify-content: space-between;
    border: 2px dashed #2b0e34;
    border-radius: 5px;
    margin-top: 150px;
}

.menus-douceurs {
    margin: 100px 0;
}

.glaces {
    border: 2px solid #2b0e34;
    border-radius: 5px;
    box-shadow: 4px 3px #2b0e34;
    background-color: #f4efb5;
    padding: 30px;
    padding-top: 75px;
    z-index: 1;
}

.sucreries {
    border: 2px solid #2b0e34;
    border-radius: 5px;
    box-shadow: 4px 3px #2b0e34;
    background-color: #f4efb5;
    padding: 30px;
    padding-top: 75px;
    z-index: 1;
}

.desserts-left {
    padding-top: 30px;
}

.desserts-img {
    max-height: 150px !important;
    position: absolute;
    left: 150px;
    bottom: -40px;
}

@media (max-width: 992px) {
    .desserts-img {
        left: 50px;
        top: -120px;
    }
}

.nos-glaces-img {
    max-height: 150px !important;
    position: relative;
    right: 75px;
    top: -165px;
    z-index: 2;
}

.sucreries-img {
    max-height: 150px !important;
    position: relative;
    top: -165px;
    left: 115px;
    z-index: 2;
}

@media (max-width: 992px) {
    .nos-glaces-img {
        max-height: 100px !important;
        right: 28px;
        top: -115px;
    }
    .sucreries-img {
        max-height: 100px !important;
        top: -115px;
        left: 35px;
    }
}

.fraises-img {
    max-height: 125px !important;
    position: absolute;
    top: -130px;
    left: 375px;
    z-index: 2;
}

#evenements-list {
    background: linear-gradient(to bottom, #1d9595, #a05aa0);
    padding: 100px 0;
}

#evenements-content {
    background: linear-gradient(to bottom, #a05aa0, #e96c20);
    padding: 100px 0;
}

.evenements-text {
    text-align: center;
    color: #fff;
    font-size: 25px;
    margin: 75px auto;
}

.evenements-text h1 {
    margin: 0;
    font-size: 80px;
}

.evenements-text p {
    margin: 0;
    text-transform: uppercase;
    margin: 0;
}

.evenements-list {
    border: 2px dashed #fff;
    border-radius: 15px;
    color: #fff;
}

.event-row {
    margin-bottom: 20px;
}

.event-title {
    font-weight: bold;
    font-size: 18px;
    font-family: "Dosis";
    margin: 0;
    text-transform: uppercase;
}

.event-description {
    font-size: 16px;
    font-family: "Dosis";
    margin: 0;
}

@media (min-width: 992px) {
    .karaoke-event {
        text-align: right;
        padding-top: 40px;
    }
}

.pub-event img {
    max-width: 750px;
    margin: 100px auto;
    width: 100%;
}

.sous-traitance {
    color: #fff;
    font-family: "Dosis";
    text-align: center;
}

.sous-traitance h1 {
    margin: 0;
    margin-bottom: 20px;
}

.sous-traitance-text {
    font-size: 15px;
    margin: 0;
}

.sous-traitance button {
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    padding: 5px;
    margin: 10px;
}

.micro {
    max-height: 150px;
    position: relative;
    right: 25px;
    top: 50px;
}

.disco {
    max-height: 150px;
    position: relative;
    bottom: 25px;
}

.event-img {
    display: flex;
    justify-content: space-between;
}

#contact-top {
    background: linear-gradient(to bottom, #1d9595, #a05aa0);
    color: #fff8d4;
    padding: 100px 0;
}

.contact-text {
    text-align: center;
    color: #fff;
    margin: 75px auto;
}

.contact-text h1 {
    margin: 0;
    font-size: 80px;
}

.contact-text p {
    margin: 0;
    font-size: 20px;
}

.contact-form {
    background-color: #fff8d4;
    border-radius: 15px;
    padding: 25px;
    color: #2b0e34;
    font-family: "Dosis";
    font-size: 20px;
}

.contact-form input {
    font-family: "Dosis";
    border: 1px solid #2b0e34;
    border-radius: 8px;
    background-color: #fff8d4;
    color: #2b0e34;
    outline: none;
    transition: border-color 0.3s ease;
    padding: 10px 15px;
    text-align: center;
}

.contact-form input[type="text"] {
    width: 100%;
    margin-right: 35px;
}

.contact-form input[type="radio"] {
    accent-color: #232323;
}

.contact-form input:focus {
    border-color: #2b0e34;
    box-shadow: 0 0 0 1px #2b0e34;
}

.contact-form textarea {
    font-family: "Dosis";
    border: 1px solid #2b0e34;
    border-radius: 8px;
    background-color: #fff8d4;
    color: #2b0e34;
    outline: none;
    transition: border-color 0.3s ease;
    padding: 10px 15px;
    text-align: center;
    width: 100%;
    height: 300px;
}

.contact-form select {
    font-family: "Dosis";
    border: 1px solid #2b0e34;
    border-radius: 8px;
    background-color: #fff8d4;
    color: #2b0e34;
    outline: none;
    transition: border-color 0.3s ease;
    padding: 10px 15px;
    text-align: center;
    width: 100%;
}

.mandatory {
    display: block;
    text-align: end;
}

#qui-sommes-nous-top {
    background: linear-gradient(to bottom, #a05aa0, #ed6b53);
    padding: 100px 0;
}

.couple-img {
    max-width: 100%;
    height: auto;
    z-index: 1;
}

.img-mosaique {
    height: auto;
}

.amis-img,
.cartes-img,
.flechettes-img {
    border-radius: 15px;
}

.presentation {
    margin-bottom: 100px;
}

.presentation .presentation-text {
    text-align: center;
    color: #fff8d4;
    font-family: "Dosis";
    height: 100%;
    margin: auto;
}

.qsn-title {
    font-size: 30px;
    font-family: "Arcane Nine";
}

.qsn-text {
    font-size: 18px;
    margin: 0;
}

.concept-card {
    border: 2px solid #fff8d4;
    border-radius: 15px;
    padding: 20px 50px;
    margin-top: 50px;
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.concept-text {
    font-size: 20px;
    margin: 0;
}

.complement-presentation {
    text-align: center;
    color: #fff8d4;
}

.complement-presentation p {
    font-family: "Dosis";
    font-size: 18px;
    margin: 0;
}

.complement-presentation h3 {
    font-family: "Arcane Nine";
    font-size: 30px;
}

.long-nuage-blanc-img {
    position: absolute;
    max-height: 150px;
    right: 0px;
}

.img-wrapper-droite {
    position: absolute;
    right: 0;
}

.long-nuage-droite-blanc-img {
    max-height: 150px;
    position: relative;
    top: 150px;
    right: -150px;
}

.nuage-blanc-couple-img {
    max-height: 150px;
    position: relative;
    z-index: 0;
    top: 325px;
    left: -150px;
}

.nuage-blanc-gauche-img {
    max-height: 150px;
    position: relative;
    left: -350px;
    top: 50px;
}

.nuage-bottom-droite-blanc-img {
    max-height: 150px;
    position: relative;
    right: -250px;
}

/* CSS STYLE */

.font-color-white {
    color: #fff8d4;
}

.font-color-black {
    color: #2b0e34;
}

/* END CSS STYLE */

/* CSS COMMUN */

.header-text {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 75px;
}

.header-text h1 {
    font-family: "Junigarden Swash";
    font-size: 55px;
    margin: 0;
}

.header-text h3 {
    font-family: "Arcane Nine";
    font-size: 25px;
    margin: 0;
}

.header-text p {
    font-family: "Dosis";
    font-size: 20px;
    text-transform: uppercase;
    margin: 0;
    margin-top: 50px;
}

.header-text span {
    display: inline-block;
    width: 100%;
}

/* END CSS COMMUN */

/* RESERVATION SEPARATOR CSS */

.reservation-separator-text {
    margin: auto 0px;
}

.reservation-separator img {
    width: auto;
    max-width: 100%;
    max-height: 300px;
}

.reservation-separator h3 {
    font-family: "Junigarden Swash";
    font-size: 25px;
    margin: 0;
    padding-left: 50px;
}

.reservation-separator h1 {
    font-family: "Junigarden Swash";
    font-size: 60px;
    margin: 0;
}

.reservation-separator p {
    font-family: "Dosis";
    font-size: 20px;
    margin: 0;
    margin-bottom: 15px;
    padding-left: 50px;
}

.reservation-separator .black-btn-infos-reservation:visited {
    color: #2b0e34;
}

.reservation-separator .black-btn-infos-reservation {
    background-color: #fff8d4;
    border: 2px solid #2b0e34;
    padding: 5px 10px;
    box-shadow: 2px 2px #2b0e34;
    font-family: "Arcane Nine";
    text-decoration: none;
    text-transform: capitalize;
    margin-left: 50px;
    border-radius: 5px;
}

.reservation-separator .white-btn-infos-reservation {
    background-color: transparent;
    border: 2px solid #fff;
    padding: 5px 10px;
    box-shadow: 2px 2px #fff;
    font-family: "Arcane Nine";
    text-decoration: none;
    text-transform: capitalize;
    margin-left: 50px;
    border-radius: 5px;
}

.reservation-separator .black-btn-infos-reservation:visited {
    color: #232323 !important;
}

.reservation-separator .white-btn-infos-reservation:visited {
    color: #232323 !important;
}

/* END RESERVATION SEPARATOR CSS */

/* DEFIS IMPOSSIBLE CSS */

.defis-separator img {
    width: auto;
    max-width: 100%;
    max-height: 300px;
}

.defis-text {
    margin: auto 0px;
}

.defis-text h3 {
    font-family: "Junigarden Swash";
    font-size: 25px;
    margin: 0;
    padding-left: 50px;
}

.defis-text h1 {
    font-family: "Junigarden Swash";
    font-size: 60px;
    margin: 0;
}

.defis-text p {
    font-family: "Dosis";
    font-size: 20px;
    margin: 0;
    margin-bottom: 15px;
    padding-left: 50px;
}

.defis-text span {
    display: block;
}

.defis-text .btn-infos-defis {
    border: 2px solid #2b0e34;
    padding: 5px 10px;
    box-shadow: 2px 2px #2b0e34;
    font-family: "Arcane Nine";
    text-decoration: none;
    text-transform: capitalize;
    margin-left: 50px;
    border-radius: 5px;
    background-color: #fff8d4;
}

.defis-text .btn-infos-defis:visited {
    color: #2b0e34 !important;
}

/* END DEFIS IMPOSSIBLE SEPARATOR CSS */

.img-wrapper {
    position: relative;
    height: 0;
    width: 0;
}

.img-wrapper-disco {
    position: relative;
    height: 0;
    width: 150px;
}

.long-nuage-img {
    position: absolute;
    max-height: 150px;
    right: -120px;
    top: 75px;
}

.nuage-gauche-img {
    position: absolute;
    max-height: 125px;
    right: -100px;
    top: -125px;
}

.nuage-milieu-img {
    position: absolute;
    max-height: 125px;
    left: 500px;
    z-index: 0;
}

@media (max-width: 992px) {
    .nuage-milieu-img {
        top: -80px;
        left: 225px;
    }
}

.nuage-droite-img {
    max-height: 175px;
    position: absolute;
    top: 275px;
}

.glace-img {
    max-height: 225px;
    position: absolute;
    right: 75px;
    top: 175px;
}

/* DEFIS CSS */

#defis-top {
    background: linear-gradient(to bottom, #1d9595, #a05aa0);
    padding: 100px 0;
}

.concept-block {
    color: #fff8d4;
    text-align: center;
    display: flex;
    justify-content: space-around;
}

.concept-block img {
    max-height: 300px;
    width: auto;
    max-width: 100%;
    transform: scaleX(-1);
}

.concept-text h3 {
    font-family: "Arcane Nine";
    font-size: 40px;
    text-transform: uppercase;
    margin-top: 0;
}

.concept-text p {
    font-family: "Dosis";
    font-size: 20px;
}

.concept-text span {
    display: inline-block;
    width: 100%;
}

.infos-block {
    background-color: #f4efb5;
    color: #2b0e34;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
}

.infos-block h3 {
    font-family: "Arcane Nine";
    font-size: 30px;
    margin-top: 0;
}

.infos-block p {
    font-family: "Dosis";
    font-size: 20px;
}

.infos-block span {
    display: inline-block;
    width: 100%;
}

.but-block {
    color: #fff8d4;
    text-align: center;
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}

.but-block img {
    max-height: 350px;
}

.but-text h3 {
    font-family: "Arcane Nine";
    font-size: 35px;
    text-transform: uppercase;
    margin: 0;
}

.but-text p {
    font-family: "Dosis";
    font-size: 20px;
}

.but-text span {
    display: inline-block;
    width: 100%;
}

#defis-top .long-nuage-droite-blanc-img {
    top: -100px;
    right: -200px;
    transform: scaleX(-1);
}

#defis-top .long-nuage-blanc-img {
    top: -100px;
    right: -40px;
    transform: scaleX(-1);
}

/* END DEFIS CSS */

/* MODAL CSS  */

.modal-backdrop {
    width: 0 !important; /* Suppression du backdrop lié à bootstrap */
}

.modal-dialog-scrollable .modal-body {
    overflow-x: hidden;
}

.header-modal {
    align-items: normal;
}

#modal-jeux {
    background-color: rgba(0, 0, 0, 0.5);
}

#modal-jeux .modal-header,
#modal-jeux .modal-footer {
    border: none;
}

#modal-jeux .modal-content {
    background: linear-gradient(to bottom, #e96c20, #a05aa0);
    color: #fff8d4;
}

@media (min-width: 992px) {
    #modal-jeux .id-jeux {
        font-family: "Arcane Nine";
        font-size: 30px;
        position: relative;
        top: -15px;
        left: -50px;
        height: 65px;
        width: 65px;
        text-align: center;
        display: flex;
        border: #fff8d4 solid 2px;
        border-radius: 50px;
    }
}

@media (max-width: 992px) {
    #modal-jeux .id-jeux {
        font-family: "Arcane Nine";
        font-size: 30px;
        position: relative;
        top: -30px;
        left: -25px;
        height: 65px;
        width: 65px;
        text-align: center;
        display: flex;
        border: #fff8d4 solid 2px;
        border-radius: 50px;
    }
}

#modal-jeux .id-jeux p {
    margin: auto;
}

#modal-jeux .titre-jeux {
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

#modal-jeux .categorie-jeux {
    font-family: "Dosis";
    font-size: 25px;
    text-transform: uppercase;
    margin: 0;
}

#modal-jeux .nom-jeux {
    font-family: "Junigarden Swash";
    font-size: 50px;
    margin: 0;
}

#modal-jeux .close-btn {
    position: relative;
    height: 65px;
    width: 65px;
    display: flex;
}

#modal-jeux .close-btn img {
    height: 35px;
    margin: auto;
}

#modal-jeux .presentation-jeux {
    padding-top: 25px;
}

#modal-jeux .regles-jeux {
    font-family: "Dosis";
    padding-left: 10px;
}

#modal-jeux .photo-jeux {
    display: flex;
}

#modal-jeux .photo-jeux img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    border-radius: 15px;
}

#modal-jeux .presentation-jeux p {
    margin: 0;
}

#modal-jeux .but-jeux {
    margin-bottom: 15px !important;
}

#modal-jeux .specifications-jeux {
    text-transform: uppercase;
    font-family: "Arcane Nine";
}

#modal-jeux .modal-body h3 {
    font-family: "Junigarden Swash";
    margin-top: 25px;
    text-align: center;
}

#modal-jeux .explications-jeux {
    white-space: pre-line;
}

#modal-jeux .footer-modal,
#modal-mur-excellence .footer-modal {
    justify-content: center;
}

#modal-jeux .footer-modal img,
#modal-mur-excellence .footer-modal img {
    height: 150px;
    width: auto;
}

#modal-boissons,
#modal-mur-excellence {
    background-color: rgba(0, 0, 0, 0.5);
}

#modal-boissons .modal-content,
#modal-mur-excellence .modal-content {
    background: linear-gradient(to bottom, #a05aa0, #1d9595);
    color: #fff8d4;
    padding: 20px 0;
}

#modal-boissons .titre-boissons,
#modal-mur-excellence .titre-boissons {
    text-align: center;
    width: 100%;
}

#modal-boissons .titre-boissons p,
#modal-mur-excellence .titre-boissons p {
    margin: 0;
    line-height: 45px;
}

#modal-boissons .carte-text,
#modal-mur-excellence .carte-text {
    font-family: "Dosis";
    text-transform: uppercase;
    font-size: 35px;
}

#modal-boissons .type-boissons,
#modal-boissons .details-type,
#modal-mur-excellence .type-boissons,
#modal-mur-excellence .details-type {
    font-family: "Junigarden Swash";
}

#modal-boissons .type-boissons,
#modal-mur-excellence .type-boissons {
    font-size: 50px;
}

#modal-boissons .details-type,
#modal-mur-excellence .details-type {
    font-size: 16px;
}

#modal-boissons .header-modal,
#modal-mur-excellence .header-modal {
    display: flex;
}

#modal-boissons .close-btn,
#modal-mur-excellence .close-btn {
    position: relative;
    right: 40px;
}

#modal-boissons .boissons-liste {
    margin-top: 15px;
}

#modal-boissons .boissons-liste p {
    margin-bottom: 5px;
}

#modal-boissons .nom-boisson {
    font-family: "Arcane Nine";
    font-size: 20px;
    text-transform: uppercase;
}

#modal-boissons .recette,
#modal-boissons .infos-boisson {
    font-family: "Dosis";
    font-size: 15px;
}

#modal-boissons .boisson img {
    max-height: 150px;
    margin: auto;
}

@media (max-width: 992px) {
    .row-logo {
        flex-direction: column-reverse;
    }
}

#modal-boissons .boisson .citron-img {
    max-height: 200px;
    margin: 0;
}

#modal-boissons .boisson .logo {
    position: relative;
    bottom: -100px;
    left: -25px;
    max-height: 100px;
    margin: 0;
}

#modal-mur-excellence .presentation-text {
    font-family: "Dosis";
    font-size: 18px;
}

#modal-mur-excellence .presentation-text {
    margin: 25px 0;
}

#modal-mur-excellence .presentation-text .presentation-service,
#modal-mur-excellence .presentation-text .description-service {
    margin: 15px 0;
}

#modal-mur-excellence .presentation-text ul {
    list-style: none;
}

#modal-mur-excellence .presentation-text li:before {
    content: "- ";
}

#modal-mur-excellence .tableau-excellence table {
    width: 100%;
    text-align: center;
    font-size: 20px;
}

#modal-mur-excellence .tableau-excellence th,
#modal-mur-excellence .tableau-excellence td {
    border: #fff8d4 2px solid;
    padding: 2px;
}

#modal-mur-excellence .tableau-excellence th {
    font-family: "Arcane Nine";
}

#modal-mur-excellence .tableau-excellence td {
    font-family: "Dosis";
}

#modal-mur-excellence .infos-supp {
    font-family: "Dosis";
    font-size: 18px;
    margin: 15px 0 30px 0;
}

#modal-mur-excellence .footer-modal {
    justify-content: space-between;
}

#modal-mur-excellence .ice-left,
#modal-mur-excellence .ice-right {
    height: 150px;
    position: relative;
}

@media (max-width: 992px) {
    #modal-mur-excellence .logo,
    #modal-mur-excellence .ice-left,
    #modal-mur-excellence .ice-right {
        height: 100px !important;
    }
}

#modal-mur-excellence .ice-right {
    transform: scaleX(-1);
}

/* END MODAL CSS  */

/* LISTE JEUX CSS */

#liste-jeux {
    background: linear-gradient(to bottom, #e96c20, #a05aa0);
    color: #fff8d4;
    padding: 100px 0;
}

#liste-jeux .jeu {
    padding: 0 25px;
    text-align: center;
}

.jeux-liste .nom-jeu {
    font-family: "Arcane Nine";
    font-size: 25px;
    text-transform: uppercase;
}

.jeux-liste img {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    margin: auto;
}

.jeu .btn {
    margin-top: 15px;
    color: #fff8d4;
    border-color: #fff8d4;
}

/* END LISTE JEUX CSS */