* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }


    /*@font-face {
      font-family: "Asphalt";
      src: local("Asphalt"), url("../fonts/HelloRoti.otf") format("opentype");
    }*/

    /*.bodoni-moda-<uniquifier> {
        font-family: "Bodoni Moda", serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;
    }*/

    /*.unifrakturcook-bold {
        font-family: "UnifrakturCook", cursive;
        font-weight: 700;
        font-style: normal;
    }*/

    /*.archivo-black-regular {
        font-family: "Archivo Black", sans-serif;
        font-weight: 400;
        font-style: normal;
    }*/

    /*.pacifico-regular {
        font-family: "Pacifico", cursive;
        font-weight: 400;
        font-style: normal;
    }*/
/*****--**-----*****--|*******|-*****-----**--*****/
    html {
        scroll-behavior: smooth;
        overflow-x: hidden;
        width: 100vw;
    }
    body{
        background-color: SpringGreen;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    #sound-btn {
        position: fixed;
        top: 22px;
        left: 26px;
        font-size: 1.5rem;
        background: SpringGreen;
        color: white;
        border: 2px solid white;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        z-index: 999;
        cursor: pointer;
        transition: 0.2s;
    }

    #sound-btn:hover{
        transform: scale(1.2);
    }
/*****--**-----*****--|*******|-*****-----**--*****/

/*****--**-----*****--|BOUTON VOLUME|-*****-----**--*****/
    #local-sound-btn{
        position:fixed;
        bottom:16px;
        right:16px;
        z-index:998;
        font-size:22px;
        padding:8px 12px;
        border-radius:8px;
    }
/*****--**-----*****--|BOUTON VOLUME|-*****-----**--*****/

/*****--**-----*****--|ACCUEIL|-*****-----**--*****/
    #accueil{
        position: relative;
        width: 100vw;
        height: 100vh;
    }
    #logo {
        width: 22%;
        max-width: 340px;
        z-index: 2;
        position: absolute;
        top: 13vh;
        left: 50%;
        transform: translateX(-50%);
        padding: 10vh 0 5vh 0;
        animation: tortille 11s ease-in-out infinite;
        animation-delay: 7s;
    }

    .flashy {
        animation: flash 3s infinite;
    }

    #logo svg path{
        transition: 0.6s;
    }

    #logo svg path:hover, #logo svg polygon:hover{
        fill: white;
        transition: 0s;
        /*Effet néon en hover sur le logo..pas sur de le garder*/
        filter: drop-shadow(0 0 6px white) drop-shadow(0 0 10px white);
    }

    #headercta{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 999;
        top: 60vh;
        left: 50%;
        padding: 1.9vw 5vw;
        background-color: black;
        color: springgreen;
        text-decoration: none;
        margin: auto;
        font-family: "asphalt", sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: 21px;
        text-align: center;
        clip-path: polygon(4.57% 15.69%, 97.29% 3.04%, 90.91% 99.02%, 5.73% 93.04%);
        animation: pulsate-fwd 0.5s ease-in-out infinite both;
        transition: 0.2s;
    }

    @keyframes pulsate-fwd {
      0% {transform: scale(1) translateX(-50%);}
      50% {transform: scale(1.1) translateX(-47%);}
      100% {transform: scale(1) translateX(-50%);}
    }

    #headercta:hover{
        background-color: white;
        color: black;
    }


    nav{
        position: absolute;
        bottom: 10vh;
        margin: auto;
        font-family: 'Asphalt', sans-serif;
        font-weight: 800;
        font-style: normal;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    nav svg{
        width: 14vw;
    }

    nav a{
        text-decoration: none;
        color: black;
        font-size: 1.8vw;
        padding: 12px 21px;
        display: inline-block; /* Nécessaire pour les transform */
        will-change: transform;
        transition: 0.3s;
    }

    nav a:hover {
        font-size: 2vw;
    }

    nav a:nth-child(2) {
      animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.1s both;
    }
    nav a:nth-child(3) {
      animation: slide-in-blurred-bottom 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.3s both;
    }
    nav a:nth-child(4) {
      animation: slide-in-blurred-bottom 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s both;
    }
    nav a:nth-child(5) {
      animation: slide-in-blurred-bottom 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000) 1s both;
    }

    nav .draw-path {
        stroke: black;
        fill: none;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: draw 2s ease forwards;
    }

    nav #draw-target1{
        stroke-width: 25;
    }
    nav #draw-target2{
        stroke-width: 20;
    }

    @keyframes draw {
        to {stroke-dashoffset: 0;}
    }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
        @media screen and (max-width: 960px){
            #sound-btn{
                font-size: 2rem;
                width: 72px;
                height: 72px;
            }
            #accueil #logo{
                max-width: initial;
                width: 50vw;
                top: 8vh;
            }

            #accueil nav{
                flex-direction: column;
                align-items: flex-start;
                bottom: 10vw;
                left: 10vw;
                width: auto;
            }

            #accueil nav svg{
                display: none;
            }

            #accueil nav a{
                font-size: 5vw;
            }
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|MOBILE|-*****-----**--*****/
        @media screen and (max-width: 576px){
            #accueil #logo{
                width: 60vw;
                top: 6vh;
            }

            #accueil nav{
                left: 5vw;
                bottom: 8vw;
            }

            #accueil nav a{
                font-size: 6vw;
                padding: 7px 21px;
            }

            #headercta {
                top: 85vw;
                padding: 5vw 0vw;
                font-size: 6vw;
                width: 90vw;
            }
        }
    /*****--**-----*****--|MOBILE|-*****-----**--*****/

    /*****--**-----*****--|ANIMS|-*****-----**--*****/
        /*LOGO*/
        @keyframes tortille {
            0%, 2%     { transform: translateX(-50%) rotate(0deg); }
            3%, 5%     { transform: translateX(-50%) rotate(4deg); }
            6%, 8%     { transform: translateX(-50%) rotate(-6deg); }
            9%, 11%    { transform: translateX(-50%) rotate(5deg); }
            12%, 14%   { transform: translateX(-50%) rotate(-3deg); }
            15%, 17%   { transform: translateX(-50%) rotate(6deg); }
            18%, 20%   { transform: translateX(-50%) rotate(-2deg); }
            21%, 23%   { transform: translateX(-50%) rotate(3deg); }
            24%, 26%   { transform: translateX(-50%) rotate(-5deg); }
            27%, 29%   { transform: translateX(-50%) rotate(2deg); }
            30%, 32%   { transform: translateX(-50%) rotate(-4deg); }
            33%, 35%   { transform: translateX(-50%) rotate(1deg); }
            36%, 38%   { transform: translateX(-50%) rotate(-3deg); }
            39%, 41%   { transform: translateX(-50%) rotate(3deg); }
            42%, 44%   { transform: translateX(-50%) rotate(-2deg); }
            45%, 47%   { transform: translateX(-50%) rotate(2deg); }
            48%, 50%   { transform: translateX(-50%) rotate(5deg); }
            51%, 53%   { transform: translateX(-50%) rotate(-2deg); }
            54%, 57%   { transform: translateX(-50%) rotate(0deg); }
            58%, 62%   { transform: translateX(-50%) rotate(4deg); }
            63%, 67%   { transform: translateX(-50%) rotate(-6deg); }
            68%, 70%   { transform: translateX(-50%) rotate(5deg); }
            71%, 74%   { transform: translateX(-50%) rotate(-3deg); }
            75%, 77%   { transform: translateX(-50%) rotate(6deg); }
            78%, 80%   { transform: translateX(-50%) rotate(-2deg); }
            81%, 85%   { transform: translateX(-50%) rotate(3deg); }
            86%, 89%   { transform: translateX(-50%) rotate(-5deg); }
            90%, 92%   { transform: translateX(-50%) rotate(-4deg); }
            93%, 95%   { transform: translateX(-50%) rotate(1deg); }
            96%, 98%   { transform: translateX(-50%) rotate(-1deg); }
            99%, 100%  { transform: translateX(-50%) rotate(3deg); }
        }
        @keyframes flash {
            0%, 2%     { opacity: 1; }
            3%, 5%     { opacity: 0; }
            6%, 8%     { opacity: 1; }
            9%, 10%    { opacity: 1; }
            11%, 14%   { opacity: 0; }
            15%, 17%   { opacity: 0; }
            18%, 20%   { opacity: 1; }
            21%, 23%   { opacity: 0; }
            24%, 26%   { opacity: 1; }
            27%, 29%   { opacity: 0; }
            30%, 33%   { opacity: 1; }
            34%, 36%   { opacity: 0; }
            37%, 39%   { opacity: 1; }
            40%, 42%   { opacity: 0; }
            43%, 45%   { opacity: 0; }
            46%, 48%   { opacity: 1; }
            49%, 100%  { opacity: 1; }
        }
        /*MENU*/
        @keyframes slide-in-blurred-bottom {
            0% {
                transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
                transform-origin: 50% 100%;
                filter: blur(40px);
                opacity: 0;
            }
            100% {
                transform: translateY(0) scaleY(1) scaleX(1);
                transform-origin: 50% 50%;
                filter: blur(0);
                opacity: 1;
            }
        }
    /*****--**-----*****--|ANIMS|-*****-----**--*****/
/*****--**-----*****--|ACCUEIL|-*****-----**--*****/

/*****--**-----*****--|VIDEO|-*****-----**--*****/
    #video {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background-color: black;
    }

    #karaoke-video {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    #karaoke-overlay {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 20px 40px;
        color: white;
        z-index: 2;
        font-family: 'Asphalt', sans-serif;
        font-weight: 800;
        font-style: normal;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 20%, transparent 100%);
    }

    .video-title {
        font-size: 2vw;
        margin-bottom: 10px;
    }

    .video-title strong {
        display: block;
        font-size: 3vw;
    }

    .karaoke-lyrics {
        position: absolute;
        bottom: 30vh;
        left: 15%;
        width: 70%;
        font-size: 31px;
        text-shadow: 2px 2px 8px black;
        text-align: center;
        margin: auto;
        color: white;

    }

    .karaoke-line span {
        transition: color 0.2s ease, opacity 0.2s ease;
        color: white;
    }

    .video-controls {
        display: flex;
        gap: 20px;
        align-items: center;
        /*font-size: 1.6rem;*/
    }

    .video-controls button {
        background: none;
        border: none;
        padding: 4px;
        cursor: pointer;
        transition: 0.2s;
    }

    .video-controls button:hover{
    filter: drop-shadow(0 0 6px white) drop-shadow(0 0 10px white);
    }

    .video-controls button svg{
      width: 4vw;
      height: 4vw;
    }




    .video-controls .hidden {
        display: none;
    }



    #youtube-player-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }

    #youtube-player,
    #youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* désactive tous les clics */
    }

    .click-blocker {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }


    /*SURLIGNAGE MOT KARAOKE*/
        /* Zone des paroles */


    /* Une ligne de paroles */
    .karaoke-line {
        display: inline-block;
        white-space: pre-wrap;
        line-height: 1.25;
    }

    /* Chaque caractère */
    .karaoke-char {
        transition: color 100ms linear, opacity 100ms linear;
        color: rgba(255,255,255,0.35);
        opacity: .8;
    }

    /* Caractères "activés" par le ticker */
    .karaoke-char.active {
        color: SpringGreen;
        opacity: 1;
    }


    .lyrics-line{
        opacity:.35;
        transition:opacity .2s;
    }

    .lyrics-line.active{
        opacity:1;
    }













    .catalogue-access {
        position: absolute;
        bottom: 20px;
        right: 40px;
    }

    #catalogue-btn {
        background: SpringGreen;
        color: black;
        padding: 10px 14px;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        transition: 0.6s;
        font-family: coolvetica, sans-serif;
        font-size: 1.6vw;
        font-weight: 500;
    }

    #catalogue-btn:hover{
        filter: drop-shadow(0 0 6px white) drop-shadow(0 0 10px white);
    }

    #catalogue-popup {
        position: fixed;
        top: 0; left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.85);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    .hidden {
        display: none !important;
    }

    .popup-content {
        background: SpringGreen;
        padding: 40px;
        max-width: 600px;
        width: 90%;
        border-radius: 12px;
        position: relative;
        font-family: sans-serif;
    }

    .popup-content h2{
      font-family: "asphalt", sans-serif;
        font-weight: 800;
        font-style: normal;
      text-align: center;
      font-size: 41px;
    }

    .close-popup {
        position: absolute;
        top: 10px; right: 20px;
        background: none;
        border: none;
        font-size: 40px;
        cursor: pointer;
    }

    .close-popup:hover{
        color: white;
    }

    #alphabet-filter {
        margin: 10px 0;
        font-size: 1rem;
    }

    #alphabet-filter span {
        display: inline-block;
        margin: 0 5px;
        cursor: pointer;
    }

    #catalogue-list {
        margin-top: 10px;
        max-height: 300px;
        overflow-y: auto;
        padding-left: 20px;
        font-family: 'Coolvetica';
    }

    #search-bar {
        width: 100%;
        padding: 8px;
        margin: 10px 0;
        border: 2px solid springgreen;
        background-color: #222;
        border-radius: 100px;
        color: white;
        text-align: center;
        font-family: 'Coolvetica';
        font-size: 17px;
    }

   


    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
        @media screen and (max-width: 960px){
            .video-title{
                font-size: 4vw;
            }
            .video-title strong{
                font-size: 5vw;
            }
            .video-controls button{
                padding: 12px;
            }
            .video-controls button svg{
                height: 6vw;
                width: 6vw;
            }
            #catalogue-btn{
                font-size: 3vw;
            }
            .karaoke-lyrics{
                bottom: 24vh;
                left: 10%;
                width: 80%;
            }
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|MOBILE|-*****-----**--*****/
        @media screen and (max-width: 576px){
            #youtube-player {
                height: 100%;
                width: 400%;
                left: 50%;
                transform: translateX(-50%);
            }

            #karaoke-overlay{
                display: flex;
                flex-direction: column;
                padding: 40px;
            }
            #karaoke-overlay .video-title{
                text-align: center;
            }
            #karaoke-overlay .video-title{
                font-size: 5vw;
            }
            #karaoke-overlay .video-title strong {
                font-size: 6vw;
            }

            #karaoke-overlay .video-controls{
                justify-content: space-between;
            }
            #karaoke-overlay .video-controls button svg {
                height: 15vw;
                width: 15vw;
            }

            #karaoke-overlay .catalogue-access{
                position: relative;
                bottom: 0;
                right: 0;
                margin-top: 10px;
            }

            #karaoke-overlay .catalogue-access #catalogue-btn {
                font-size: 5vw;
                width: 100%;
            }

            .karaoke-lyrics {
                bottom: 45vh;
                font-size: 21px;
            }
        }
    /*****--**-----*****--|MOBILE|-*****-----**--*****/
/*****--**-----*****--|VIDEO|-*****-----**--*****/

/*****--**-----*****--|PLAN|-*****-----**--*****/
    #plan {
      background: black;
      color: springgreen;
      padding: 4rem 2rem;
      position: relative;
      font-family: 'Arial Black', sans-serif;
    }

    #plan .texte{
        position: sticky;
        top: 0;
        transform: rotate(-8deg);
        margin-top: -60px;
        margin-left: 20px;
        padding-bottom: 30px;
    }

    #plan .texte h2 {
        font-size: 5vw;
        text-transform: uppercase;
        margin: 0;
        font-family: 'Asphalt', sans-serif;
        font-weight: 800;
        font-style: normal;
    }

    #plan .texte h3 {
        font-size: 3vw;
        margin: 1vw auto;
        transform: rotate(2deg);
        font-family: coolvetica, sans-serif;
    }

    #plan .texte h3 small {
      font-size: 18px;
      color: springgreen;
      margin-left: 6px;
      font-family: coolvetica, sans-serif;
      font-weight: 400;
      font-variant-position: super;
    }

    #plan .texte p {
      margin-top: 31px;
      font-size: 21px;
      line-height: 26px;
      font-family: sans-serif;
      transform: rotate(4deg);
      font-family: coolvetica, sans-serif;
    }

    .carte-container {
      position: relative;
      margin-top: -7vw;
      /*background-color: red;*/
    }

    .carte-containermobile{
        display: none;
    }

    svg#carte {
      width: 100%;
      max-width: 800px;
      display: block;
      margin: auto;
    }

    polygon.zone {
      stroke: #00ffae;
      stroke-width: 2;
      fill: transparent;
      cursor: pointer;
      transition: fill 0.2s;
    }

    polygon.zone:hover {
      fill: blue;
    }

    .infobulle {
      position: absolute;
      transform: scale(0.6);
      opacity: 0;
      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
      pointer-events: none;
      z-index: 9999;
    }

    .infobulle.visible {
      transform: scale(1);
      opacity: 1;
      pointer-events: auto;
      background-color: white;
    }





    .infobulle h4 {
      margin: 0 0 0.5rem;
      font-size: 1.2rem;
      color: black;
    }

    .infobulle p {
      font-size: 0.9rem;
      margin: 0 0 1rem;
      color: #333;
    }

    .infobulle a {
      display: inline-block;
      padding: 0.5rem 1rem;
      background: #00ffae;
      color: black;
      border-radius: 20px;
      font-weight: bold;
      text-decoration: none;
      font-size: 0.9rem;
    }



    @media (max-width: 768px) {
      .infobulle {
        transform: translate(-50%, -50%);
        left: 50% !important;
        top: 50% !important;
        max-width: 90vw;
      }
    }
/*****--**-----*****--|PLAN|-*****-----**--*****/

/*****--**-----*****--|PROCHAINEMENT|-*****-----**--*****/
    #prochainement {
        background-color: SpringGreen;
        padding: 6vw;
        color: black;
        text-align: center;
    }

    #prochainement h2 {
        font-size: 3.5vw;
        font-weight: bold;
        margin-bottom: 2em;
        font-family: 'Asphalt', sans-serif;
        font-weight: 800;
        font-style: normal;
        letter-spacing: 1px;
    }

    #prochainement .events-list {
        display: flex;
        flex-direction: column;
        max-width: 800px;
        margin: 0 auto;
    }

    #prochainement .event {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 2px solid black;
        padding: 1em 3em;
        font-size: 1.5em;
        font-family: coolvetica, sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    #prochainement .event:last-child {
        border-bottom: 2px solid black;
        padding-bottom: 1em;
    }

    #prochainement .event-title {
        text-align: left;
    }

    #prochainement .event-date {
        text-align: right;
        font-weight: bold;
    }

    #prochainement .notification-optin {
        margin-top: 3em;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
        font-size: 1.3em;
        font-family: coolvetica, sans-serif;
    }

    #prochainement .notification-optin button {
        font-size: 1.5em;
        padding: 0.6em 1.5em;
        border: none;
        border-radius: 50px;
        background-color: black;
        color: SpringGreen;
        font-weight: bold;
        cursor: pointer;
        /*filter: drop-shadow(0 0 0 black);*/
        transition: 0.2s;
    }

    #prochainement .notification-optin button:hover {
        transform: scale(1.1);
        /*filter: drop-shadow(0 0 6px black);*/
    }

    #prochainement .notification-optin small {
        font-size: 16px;
        text-align: center;
        line-height: 1;
    }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
        @media screen and (max-width: 960px){
            #prochainement h2 {
                font-size: 6vw;
            }
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|MOBILE|-*****-----**--*****/
        @media screen and (max-width: 576px){
            #prochainement{
                padding: 10vw 6vw;
            }
            #prochainement .event{
                padding: 16px;
            }
        }
    /*****--**-----*****--|MOBILE|-*****-----**--*****/
/*****--**-----*****--|PROCHAINEMENT|-*****-----**--*****/

/*****--**-----*****--|LES SALLES|-*****-----**--*****/
    #lessalles {
      padding: 50px 20px;
      color: black;
      transition: background-color 0.2s ease;
    }
    #lessalles.salle-1 { background: hotpink; }
    #lessalles.salle-2 { background: #69B4FF;}
    #lessalles.salle-3 { background: #FFFF69; }
    #lessalles.salle-4 { background: #9d17ff;}

    #lessalles .salle-tabs button{
        color: black;
    }


    #lessalles .salle-tabs button:nth-child(4){
        font-family: "Pacifico", cursive;
        font-weight: 900;
        font-size: 1.7vw;!important
    }
    #lessalles.salle-1 h3{
        font-family: "Pacifico", cursive;
    }

    #lessalles .salle-tabs button:nth-child(3){
        font-family: "Archivo Black", sans-serif;
        font-weight: 900;
        font-size: 1.7vw;!important
    }
    #lessalles.salle-2 h3{
        font-family: "Archivo Black", sans-serif;
    }


    #lessalles .salle-tabs button:nth-child(1){
        font-family: "UnifrakturCook", cursive;
        font-weight: 900;
        font-size: 1.7vw;!important
    }
    #lessalles.salle-3 h3{
        font-family: "UnifrakturCook", cursive;
    }

    #lessalles .salle-tabs button:nth-child(2){
        font-family: "Bodoni Moda", serif;
        font-weight: 900;
        font-style: italic;
        font-size: 1.7vw;!important
    }
    #lessalles.salle-4 h3{
        font-family: "Bodoni Moda", serif;
    }

    #lessalles .section-title {
        text-align: center;
        font-size: 6vw;
        margin-bottom: 0;
        font-family: "asphalt", sans-serif;
        font-weight: 800;
        font-style: normal;
    }

    #lessalles .salle-tabs {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 30px;
      font-size: 14px;
    }

    #lessalles .salle-tabs button {
      font-family: 'Upgrade';
      font-size: 1.8vw;
      padding: 7px 56px;
      font-weight: bold;
      border-radius: 100px;
      background: white;
      cursor: pointer;
      transition: 0.2s;
      border: none;
    }

    #lessalles .salle-tabs button:nth-child(4).active{background-color: hotpink;}
    #lessalles .salle-tabs button:nth-child(3).active{background-color: #69B4FF;}
    #lessalles .salle-tabs button:nth-child(1).active{background-color: #FFFF69;}
    #lessalles .salle-tabs button:nth-child(2).active{background-color: #9d17ff;}


    #lessalles .salle-tabs button:hover{
      border: none;
    }

    #lessalles .salle-tabs button:nth-child(4):hover{background-color: hotpink;}
    #lessalles .salle-tabs button:nth-child(3):hover{background-color: #69B4FF;}
    #lessalles .salle-tabs button:nth-child(1):hover{background-color: #FFFF69;}
    #lessalles .salle-tabs button:nth-child(2):hover{background-color: #9d17ff;}



    #lessalles .salle-content {
      display: flex;
      gap: 4%;
      flex-wrap: wrap;
      justify-content: center;
      margin: auto;
      width: 80%;
      max-width: 960px;
    }

    #lessalles .salle-photos {
      flex: 1 1 56%;
    }
    
    #lessalles .main-photo-wrapper {
        width: 100%;
        height: 60vh;
        overflow: hidden;
        position: relative;
        transition: 0.2s;
    }

    #lessalles .main-photo-wrapper #main-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease; 
        cursor: pointer;
        transition: 0.2s;
    }

    #lessalles .main-photo-wrapper:hover{
        transform: scale(1.05);
    }
    #lessalles .main-photo-wrapper:hover #main-photo {
        transform: scale(1.5);
        transform-origin: center;
    }

    #lessalles .salle-thumbs {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }
    #lessalles .salle-thumbs img {
      width: 22%;
      height: 8vw;
      cursor: pointer;
      object-fit: cover;
      transition: 0.2s;
    }

    #lessalles .salle-thumbs img:hover{
        transform: scale(1.1);
    }

    #lessalles .salle-infos {
        flex: 1 1 40%;
        font-family: 'Coolvetica';
        font-size: 1.8vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #lessalles .salle-infos h3 {
      text-align: center;
      padding-bottom: 21px;
    }

    #lessalles .salle-4 h3 {
      font-family: 'Rock Salt', cursive;
      color: #ff3333;
      font-size: 2.2rem;
      text-shadow: 2px 2px #000;
    }

    #lessalles .salle-infos ul {
      list-style: none;
      padding: 0;
      margin-top: 10px;
    }
    #lessalles .salle-infos li {
      margin-bottom: 10px;
    }

    #lessalles .btn-reservation {
      display: inline-block;
      text-decoration: none;
      background: black;
      padding: 15px 25px;
      border: none;
      transform: rotate(-3deg);
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      margin: 2vw 0 2vw 2vw;
      font-family: 'Coolvetica' sans-serif;
      text-transform: uppercase;
      color: white;
        transition: 0.2s;
    }

    #lessalles .btn-reservation:hover{
        background-color: white;
        color: black;
        transform: rotate(-3deg) scale(1.2);
    }

    #lessalles aside p{
        font-family: 'Coolvetica';
        font-weight: bold;
        text-align: center;
        font-size: 1.6rem;
        padding: 0 21px 21px 21px;
    }

    #lessalles #photo-popup {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }
    #lessalles #photo-popup.hidden {
      display: none;
    }
    #lessalles #photo-popup img {
      max-height: 80%;
      max-width: 80%;
    }
    #lessalles #close-popup {
      position: absolute;
      top: 18px;
      right: 26px;
      width: 48px;
      font-size: 3rem;
      color: white;
      cursor: pointer;
      text-align: center;
      transition: 0.2s;
    }

    #lessalles #close-popup:hover{
        color: springgreen;
        transform: scale(1.2);
    }

    #lessalles #photo-popup #next-photo, #lessalles #photo-popup #prev-photo {
      background: none;
      border: none;
      cursor: pointer;
      position: absolute;
      font-size: 94px;
      color: white;
      padding: 20vh 36px;
      cursor: pointer;
      transition: 0.2s;
    }
    #lessalles #photo-popup #prev-photo{left: 0;}
    #lessalles #photo-popup #next-photo{right: 0;}

    #lessalles #photo-popup #next-photo:hover, #lessalles #photo-popup #prev-photo:hover {
        color: springgreen;
        transform: scale(1.2);
    }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
        @media screen and (max-width: 960px){
            .salle-tabs {
                flex-direction: column;
                width: 60%;
                margin: auto;
            }
            #lessalles .salle-tabs button:nth-child(1),
            #lessalles .salle-tabs button:nth-child(2),
            #lessalles .salle-tabs button:nth-child(3),
            #lessalles .salle-tabs button:nth-child(4){
                font-size: 3.5vw;
            }
            #lessalles .salle-content{
                flex-direction: column;
            }
            #lessalles .salle-infos{
                justify-content: space-between;
                text-align: center;
                padding-top: 31px;
                font-size: 4vw;
            }
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|MOBILE|-*****-----**--*****/
        @media screen and (max-width: 576px){
            #lessalles .section-title{
                font-size: 10vw;
            }
            #lessalles .salle-tabs{
                width: 80%;
            }
            #lessalles .salle-tabs button:nth-child(1),
            #lessalles .salle-tabs button:nth-child(2),
            #lessalles .salle-tabs button:nth-child(3),
            #lessalles .salle-tabs button:nth-child(4){
                font-size: 5vw;
            }

            #lessalles .salle-content{
                width: 100%;
            }

            #lessalles #main-photo {
                height: 40vh;
            }
            #lessalles .salle-infos {
                font-size: 4vw;
            }
            #lessalles .salle-thumbs {
                display: flex;
                justify-content: space-between;
                gap: 0;
            }
            #lessalles .salle-thumbs img {
                width: 23%;
                height: 17vw;
            }

            #lessalles .btn-reservation {
                margin: 2vw 2vw 2vw 2vw;
                font-size: 10vw;
            }
            #lessalles aside p {
                padding-top: 5vh;
            }
        }
    /*****--**-----*****--|MOBILE|-*****-----**--*****/
/*****--**-----*****--|LES SALLES|-*****-----**--*****/

/*****--**-----*****--|INFOS|-*****-----**--*****/
    #infos-globales {
        display: flex;
        flex-wrap: wrap;
    }

    #infos-globales #lebar, #faq {
        flex: 1 1 50%;
        padding: 3rem;
        box-sizing: border-box;
    }

    #infos-globales #lebar {
        background: #00ff83;
        display: flex;
        flex-direction: column;
    }

    #infos-globales #faq {
        background: #9e6cfb;
    }

    #infos-globales #lebar h2, #infos-globales #faq h2 {
        font-family: 'Asphalt', sans-serif;
        font-weight: 800;
        font-style: normal;
        text-align: center;
    }

    #infos-globales #lebar h2{
        font-size: 7vw;
        margin-bottom: 21px;
    }

    #infos-globales #faq h2{
        font-size: 4vw;
        line-height: 1;
        color: white;
        margin-bottom: 21px;
    }

    #infos-globales #lebar img {
        display: block;
        height: 80vh;
        margin: 0 auto;
    }

    #infos-globales .bar-description {
        list-style: none;
        margin: 16px auto 26px auto;
        font-family: 'Coolvetica';
        text-align: center;
    }

    #infos-globales .bar-description p{
        width: 60%;
        margin: auto;
        padding-bottom: 12px;
    }

    #infos-globales .bar-description li::before {
        content: "• ";
        margin-right: 0.5rem;
    }

    #infos-globales .bar-description li{
        font-size: 20px;
    }

    #infos-globales #lebar a {
        display: block;
        width: 80%;
        background: white;
        padding: 1rem 2rem;
        border-radius: 100px;
        border: 2px solid black;
        font-family: 'Coolvetica';
        font-weight: 700;
        text-align: center;
        color: black;
        text-decoration: none;
        font-size: 24px;
        cursor: pointer;
        margin: auto;
        transition: 0.2s;
    }

    #infos-globales #lebar a:hover{
        box-shadow: 0px 10px 0px 0px #000000;
        transform: translateY(-10px);
    }

    #infos-globales #lebar #cartebar-popup-close:hover{
        color: springgreen;
        transform: scale(1.2);
    }

    .cartebar-popup {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0,0,0,0.85);
        justify-content: center;
        align-items: center;
    }

    .cartebar-popup.is-open {
        display: flex;
    }

    .cartebar-popup-inner {
        position: relative;
        height: 100vh;
        width: 100vw;
    }

    #popupCarteBar .cartebar-popup-inner img {
        display: block;
        max-width: 100vw;
        max-height: 100dvh;
        width: auto;
        height: auto;
        object-fit: contain;
    }


    .cartebar-popup-close {
        position: absolute;
        background: none;
        border: none;
        display: grid;
        place-items: center;
        top: 18px;
        right: 26px;
        width: 48px;
        height: 48px;
        font-size: 3rem;
        color: white;
        cursor: pointer;
        text-align: center;
        transition: 0.2s;
    }

    .cartebar-popup-close:hover{
        transform: scale(1.2);
        color: springgreen;
    }

    #infos-globales .map-container {
        margin: 2rem 0;
        text-align: center;
    }

    #infos-globales #map {
        height: 50vh;
        width: 100%;
        border-radius: 10px;
    }

    #infos-globales .open-map-link {
        display: inline-block;
        margin-top: 10px;
        background: #9e6cfb;
        color: yellow;
        padding: 0.5rem 1rem;
        border-radius: 10px;
        font-weight: bold;
        text-decoration: none;
        border: 1px solid white;
        transition: 0.2s;
        width: 100%;
        font-family: 'Coolvetica';
    }

    #infos-globales .open-map-link:hover {
        background: yellow;
        color: black;
    }

    #infos-globales #faq .practical {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 2rem;
        color: yellow;
        font-family: 'Coolvetica';
    }

    #infos-globales .leaflet-control-attribution{
        display: none;
    }

    #infos-globales .leaflet-control-zoom{
        border: none!important;
    }

    #infos-globales .leaflet-control-zoom-out, .leaflet-control-zoom-in{
        background-color: yellow!important;
        border: none;
    }

    #infos-globales #faq .practical div:nth-child(2){
        text-align: right;
    }

    #infos-globales .faq-item {
        margin-bottom: 3px;
        text-align: center;
        max-width: 560px;
        margin: 9px auto;
    }

    #infos-globales .faq-question {
        width: 100%;
        font-family: 'Coolvetica';
        background: yellow;
        padding: 1rem;
        border: none;
        font-weight: bold;
        cursor: pointer;
        font-size: 21px;
        text-align: left;
        color: black;
    }

    #infos-globales .faq-question:hover{
        background: white;
    }

    #infos-globales .faq-answer {
        background: white;
        text-align: left;
        font-family: 'Coolvetica';
        padding: 19px 28px;
        display: none;
        animation: fadeIn 0.3s ease-in-out;
        font-size: 18px;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
        @media screen and (max-width: 960px){
            #infos-globales {
                flex-direction: column;
            }
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|MOBILE|-*****-----**--*****/
        @media screen and (max-width: 576px){
            #infos-globales #faq{
                padding: 2rem;
            }
            #infos-globales #lebar img{
                width: 100%;
                padding-top: 10vh;
            }
            #infos-globales .bar-description p {
                width: 100%;
            }
            #infos-globales #lebar h2, #infos-globales #faq h2{
                font-size: 12vw;
            }
            #infos-globales #faq .practical div:nth-child(2){
                width: 60%;
            }
        }
    /*****--**-----*****--|MOBILE|-*****-----**--*****/
/*****--**-----*****--|INFOS|-*****-----**--*****/

/*****--**-----*****--|RESERVATIONS|-*****-----**--*****/
    #reservation{
        height: 50vh;
        background-color: #333333;
    }

    .f-cart{
        z-index: 998!important;
    }

    .f-cart-toggle-btn-amount,
    .f-timeout-countdown{
        display: none!important;
    }

    /*CESSION RESERVATION*/
    /* --- Réservation --- */
    #reservation {
      background: black;
      color: #000;
      padding: clamp(24px, 6vw, 60px);
      height: auto;
      padding: 5vh 5vw 35vh 5vw;
      position: relative;
    }

    .booking-wrap {
      max-width: 1100px;
      margin: 0 auto;
    }

    .booking-header {
      display: grid;
      gap: .5rem;
      margin-bottom: 1rem;
    }

    .booking-header h2 {
      font-family: "asphalt", sans-serif;
        font-weight: 800;
        font-style: normal;
      letter-spacing: 1px;
      font-size: clamp(28px, 4vw, 40px);
      color: #00ff83;
      text-align: center;
    }

    .booking-header p {
      font-family: 'Coolvetica', sans-serif;
      color: #00ff83;
      text-align: center;
    }

    .booking-header p:nth-child(3){
        font-size: 21px;
    }

    /*4ESCAPE STYLE*/
        .forescape .f-cart{
            border: none!important;
            background: none!important;
        }
        .forescape .f-cart-content{
            background-color: white!important;
            border: 0px!important;
            border-radius: 120px 0 0 120px;
            transition: 0.2s;
        }

        .forescape .f-cart-content svg{
            width: 30px!important;
            height: 30px!important;
        }

        .forescape .f-cart-content svg path{
            fill: black!important;
        }
        .forescape .f-cart-toggle-btn-size{
            color: black!important;
            font-family: 'Coolvetica';
            font-size: 21px!important;
        }

        .forescape .f-cart-content:hover{
            padding-right: 30px;
            border-radius: 120px 0 0 120px;
        }

        .forescape .md\:f-p-8 {
            background: none!important;
        }

        .forescape .f-p-4{

        }

        .f-cart-panel{
            padding: 36px 21px 21px 21px!important;
        }

        .f-btn{
            background-color: SpringGreen!important;
            color: black!important;
            font-family: 'Coolvetica', sans-serif!important;
            border-radius: 50px!important;
            font-size: 21px!important;
            padding: 21px!important;
            transition: 0.2s;
        }

        .f-btn:hover{
            background-color: white!important;
        }

        .f-cart-panel{
            background-color: black!important;
        }

        .f-cart-panel .f-rounded-md svg{
            width: 50px!important;
            height: 50px!important;
            stroke: white!important;
            stroke-width: 3;
        }

        .f-cart-panel .f-rounded-md svg:hover{
            stroke: SpringGreen!important;
        }

        .f-cart-panel .f-text-lg{
            font-size: 31px!important;
        }

        .f-cart-panel .f-paragraph{
            display: none;
        }

        .f-cart-panel .f-text-sm{
            font-size: 21px!important;
        }
        .f-cart-panel .f-text-xs{
            font-size: 16px!important;
        }
        .f-cart-panel .f-font-medium div {
            padding: 21px!important;
            font-size: 21px!important;
        }


        .f-border-t{
            border-top: 3px solid white!important;
        }

        .f-text-lg,
        .f-paragraph,
        .f-flex{
            font-family: 'Coolvetica', sans-serif!important;
            color: white!important;
        }

        .f-text-xs{
            color: white!important;
            text-decoration: none;
        }

        .f-datepicker{
            max-width: 600px!important;
        }
        .f-datepicker-input-icon svg{
            width: 50px!important;
            height: 30px!important;
        }

        .forescape .f-datepicker-calendar{
            margin-top: 21px!important;
        }

        .forescape .f-datepicker-calendar-container{
            border: solid 0px black!important;
            padding: 21px!important;
            font-family: 'Coolvetica', sans-serif;
            font-size: 21px!important;
            gap: 60px!important;
            max-width: 500px!important;
        }

        .f-datepicker-calendar-day-content{
            font-size: 21px!important;
            padding: 21px;
            overflow: visible!important;
        }

        .f-datepicker-calendar-today .f-datepicker-calendar-day-content{
            border: none!important;
            background: black!important;
            color: white!important;
        }

        .f-datepicker-calendar-selected .f-datepicker-calendar-day-content{
            border: none!important;
            background: SpringGreen!important;
        }

        .f-datepicker-input{
            font-family: 'Coolvetica', sans-serif;
        }

        .f-datepicker-input span{
            font-size: 19px!important;
        }

        .forescape .f-datepicker-btn--left{
            background-color: SpringGreen!important;
            border-radius: 120px 0 0 120px!important;
        }
        .forescape .f-datepicker-btn--right{
            background-color: SpringGreen!important;
            border-radius: 0 120px 120px 0!important;
        }

        .forescape .f-datepicker-btn svg{
            stroke: black!important;
            stroke-width: 3;
            width: 48px;
            height: 48px;
        }

        .forescape .f-datepicker-btn:hover{
            background-color: white!important;
        }

        .forescape .f-datepicker-btn--right svg{transform: translateX(0px);transition: 0.2s;}
        .forescape .f-datepicker-btn--left svg{transform: translateX(0px);transition: 0.2s;}
        .forescape .f-datepicker-btn--right:hover svg{transform: translateX(10px);}
        .forescape .f-datepicker-btn--left:hover svg{transform: translateX(-10px);}

        .f-flex-grow{
            color: black!important;
        }

        .f-availability-hero-rooms{
            /*width: 80vw!important;*/
            margin: auto!important;
        }

        .f-availability-hero--no-availability{
            display: none;
        }

        .f-availability-hero-room-show-mission{
            display: none!important;
        }

        .forescape .f-card .f-availability-hero-room-content{
            color: black;
            padding-top: 0 !important;
        }
        .f-card .f-availability-hero-room{
            border: none!important;
        }

        .f-availability-hero-room--68cac43f83e09191f9b9e939 {border: none!important;}
        .f-availability-hero-room--68cac9d683e09191f9ba0401 {border: none!important;}
        .f-availability-hero-room--68cacca3ab70016ffd091201 {border: none!important;}
        .f-availability-hero-room--68cad123ab70016ffd092b24 {border: none!important;}

        .f-availability-hero-room-title{
            text-align: center!important;
            background: none!important;
        }

        .f-availability-hero-room--68cac43f83e09191f9b9e939,
        .f-availability-hero-room--68cac9d683e09191f9ba0401,
        .f-availability-hero-room--68cacca3ab70016ffd091201,
        .f-availability-hero-room--68cad123ab70016ffd092b24{
            max-width: 420px!important;
            margin: auto!important;
        }

        .f-availability-hero-rooms > div:nth-child(1){transform: rotate(-1deg);}
        .f-availability-hero-rooms > div:nth-child(2){transform: rotate(2deg);}
        .f-availability-hero-rooms > div:nth-child(3){transform: rotate(-3deg);}
        .f-availability-hero-rooms > div:nth-child(4){transform: rotate(1deg);}


        .f-availability-hero-room--68cac43f83e09191f9b9e939 > div:nth-child(1),
        .f-availability-hero-room--68cac9d683e09191f9ba0401 > div:nth-child(1),
        .f-availability-hero-room--68cacca3ab70016ffd091201 > div:nth-child(1),
        .f-availability-hero-room--68cad123ab70016ffd092b24 > div:nth-child(1){
            font-family: "asphalt", sans-serif!important;
            font-weight: 800;
            font-style: normal;
            background-color: #fffa17;
            margin: -1px;
            text-transform: uppercase!important;
            color: white!important;
            padding-bottom: 0 !important;
        }

        .forescape .f-availability-hero-room{
            background: none!important;
        }


        .forescape .f-grid-cols-4 {
            grid-template-columns: repeat(2,minmax(0,1fr))!important;
        }

        .f-availability-hero-room-slot-time{
            font-family: "asphalt", sans-serif!important;
            font-weight: 800;
            font-style: normal;
            font-size: 31px!important;
        }

        .f-availability-hero-room-slot--available{
            padding: 31px 0!important;
            background: none!important;
        }

        .f-availability-hero-room-heading-title{
            animation: animforescapehero 3s linear infinite both;
            filter:
                drop-shadow(0 0 1px  white);
            font-size: 43px!important;
            line-height: 43px!important;
            text-align: center;
        }

    @keyframes animforescapehero {
        0% {transform: scale(1.0);filter:
            drop-shadow(0 0 1px  white);}
        50% {transform: scale(1.01);filter:
            drop-shadow(0 0 2px  white);}
        100% {transform: scale(1.0);filter:
            drop-shadow(0 0 1px  white);}
    }

        /*PASTILLES CRENEAUX DISPOS*/
        .f-availability-hero-room .f-availability-hero-room-slot--available{
            border-radius: 150px!important;
            transition: 0s!important;}
        .f-availability-hero-room .f-availability-hero-room-slot--available:hover .f-availability-hero-room-slot-time{
            color: black!important;}

        /*QUEEN*/
        .f-availability-hero-room--68cac43f83e09191f9b9e939 .f-availability-hero-room-slot--available{
            border: #FFFF69 5px solid!important;}
        .f-availability-hero-room--68cac43f83e09191f9b9e939 .f-availability-hero-room-slot--available:hover{
            background-color: #FFFF69!important;}
        .f-availability-hero-room--68cac43f83e09191f9b9e939 .f-availability-hero-room-slot-time{
            color: #FFFF69!important;}

        /*NIRVANA*/
        .f-availability-hero-room--68cac9d683e09191f9ba0401 .f-availability-hero-room-slot--available{
            border: #9d17ff 5px solid!important;}
        .f-availability-hero-room--68cac9d683e09191f9ba0401 .f-availability-hero-room-slot--available:hover{
            background-color: #9d17ff!important;}
        .f-availability-hero-room--68cac9d683e09191f9ba0401 .f-availability-hero-room-slot-time{
            color: #9d17ff!important;}

        /*MADONNA*/
        .f-availability-hero-room--68cacca3ab70016ffd091201 .f-availability-hero-room-slot--available{
            border: #69B4FF 5px solid!important;}
        .f-availability-hero-room--68cacca3ab70016ffd091201 .f-availability-hero-room-slot--available:hover{
            background-color: #69B4FF!important;}
        .f-availability-hero-room--68cacca3ab70016ffd091201 .f-availability-hero-room-slot-time{
            color: #69B4FF!important;}

        /*BRITNEY*/
        .f-availability-hero-room--68cad123ab70016ffd092b24 .f-availability-hero-room-slot--available{
            border: hotpink 5px solid!important;}
        .f-availability-hero-room--68cad123ab70016ffd092b24 .f-availability-hero-room-slot--available:hover{
            background-color: hotpink!important;}
        .f-availability-hero-room--68cad123ab70016ffd092b24 .f-availability-hero-room-slot-time{
            color: hotpink!important;}

        .f-room-slot-unavailable-text{
            font-family: 'Coolvetica'!important;
            padding: 6px!important;
            font-size: 16px!important;
        }

        /*MODAL AJOUT PANIER*/
        .forescape {
            --f-modal-backdrop-color: rgba(0,0,0,0.7) !important;
            --f-primary: #000!important;
        }


        .f-modal-panel{
            background-color: black!important;
            border-radius: 11px!important;
            padding: 21px 21px 11px 21px!important;
        }

        .f-modal-panel .f-close-button{
            opacity: 1!important;
        }
        .f-modal-panel .f-close-button svg{
            stroke: SpringGreen!important;
            stroke-width: 3;
            width: 48px;
            height: 48px;
        }

        .f-modal-panel .f-close-button:hover svg{
            stroke: white!important;
        }

        .f-modal-panel .f-font-bold{
            font-family: "asphalt", sans-serif!important;
            font-weight: 800;
            font-style: normal;
            font-size: 31px!important;
        }

        .f-modal-panel .f-panel{
            background: none!important;
        }

        .f-modal-panel .f-block-title{
            display: none!important;
        }

        .f-modal-panel .f-player-picker-row{
            font-family: 'Coolvetica';
            color: white!important;
        }

        .f-modal-panel .f-text-right{
            display: none!important;
        }

        .f-modal-panel .f-player-picker-button{
            background-color: springgreen!important;
        }

        .f-modal-panel .f-player-picker-button:hover{
            transform: scale(1.1);
        }

        .f-modal-panel .f-player-picker-button svg{
            color: black!important;
            stroke-width: 3px;
        }

        .f-modal-panel .f-btn .f-flex div{
            color: black!important;
            font-size: 24px;
        }

        .f-modal-panel .f-btn .f-flex div:nth-child(2){
            font-size: 16px;
            padding-top: 6px;
        }

        .f-ui-picture{
            height: 120px;
            width: 100%;
            background: none!important;
        }

        .f-ui-picture img{
            display: none!important;
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
        @media screen and (max-width: 960px){
            .forescape .f-cart {
                left: initial!important;
                right: 0!important;
                top: 21px!important;
                bottom: initial!important;
            }
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
    
    /*****--**-----*****--|MOBILE|-*****-----**--*****/
        @media screen and (max-width: 576px){
            .f-cart-panel .f-px-4 {
                padding-left: 0!important;
                padding-right: 0!important;
                z-index: 999!important;
            }

            .forescape .f-datepicker-btn svg{
                stroke-width: 3;
                width: 31px;
                height: 31px;
            }

            .forescape .f-availability-hero-datepicker {
                padding: 0px!important;
            }

            .f-availability-hero-room-heading-title {
                font-size: 30px !important;
                line-height: 30px !important;
            }
        }
/*****--**-----*****--|RESERVATIONS|-*****-----**--*****/

/*****--**-----*****--|FOOTER|-*****-----**--*****/
    footer {
        background-color: #00FF7F;
        padding: 21px 51px;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        font-family: coolvetica, sans-serif;
        color: black;
    }

    footer aside{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        width: 90%;
        max-width: 810px;
        padding: 10vh 0 5vh 0;
    }

    footer .footer-contact {
        text-align: left;
        max-width: 600px;
    }

    footer #footer-contact-appel{
        margin: 11px 0;
    }

    footer .footer-contact .footer-title {
        font-size: 51px;
        font-weight: 800;
    }

    .footer-contact p {
        font-size: 1.5rem;
        line-height: 1;
    }

    .footer-contact a {
        font-weight: bold;
        text-decoration: none;
        border-bottom: 2px solid black;
        color: black;
        transition: 0.2s;
    }

    .footer-contact a:hover{
        border-bottom: 4px solid black;
    }

    .footer-socials {
        display: flex;
        flex-direction: column;
        text-decoration: none;
    }

    .social-link {
        display: flex;
        align-items: center;
        padding: 6px;
        gap: 1rem;
        font-weight: bold;
        font-size: 1.3rem;
        text-decoration: none;
        color: black;
    }

    .social-icon {
        width: 40px;
        height: 40px;
        transition: 0.1s;
    }

    .social-link:hover .social-icon{
        transform: scale(1.1);
    }

    .footer-bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        flex-wrap: wrap;
    }

    .footer-bottom div{
        display: flex;
        flex-direction: column;
    }

    .footer-bottom a{
        text-decoration: none;
        font-size: 14px;
        color: black;
    }

    .footer-bottom div a:hover{
        color: white;
        background-color: black;
    }

    .footer-bottom a span{
        background-color: black;
        color: white;
        padding: 4px 9px;
    }

    .footer-bottom a:hover span{
        background-color: white;
        color: black;
    }

    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
        @media screen and (max-width: 960px){
            footer aside{
                flex-direction: column;
                gap: 8vw;
                align-items: flex-start;
                padding: 8vw 5vw 4vw 5vw;
            }
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|MOBILE|-*****-----**--*****/
        @media screen and (max-width: 576px){
            footer{
                min-height:80vh;
                padding: 21px;
            }

            footer aside .footer-contact .footer-title{
                padding-bottom: 31px;
                line-height: 2.5rem;
            }

            footer aside {
                padding: 8vw 0vw 4vw 0vw;
            }
        }
    /*****--**-----*****--|MOBILE|-*****-----**--*****/
/*****--**-----*****--|FOOTER|-*****-----**--*****/


/*****--**-----*****--|CHECKOUT|-*****-----**--*****/
    .f-checkout-view-content .f-highlight{
        /*display: none;*/
    }

    .f-checkout-view-content .f-panel{
        background-color: SpringGreen!important;
        border-radius: 11px!important;
        padding: 31px!important;
    }

    .f-checkout-view-content .f-panel .f-input-label{
        color: black!important;
        font-size: 19px;
    }

    .f-checkout-view-content .f-panel .f-ms-2{
        color: black!important;
    }
    .f-checkout-view-content .f-panel .f-input{
        border: none;
    }

    .f-checkout-view-content .f-p-4{
        background: springgreen!important;
        border-radius: 11px!important;
    }

    .f-checkout-view-content .f-switchgroup-label .f-text-sm,
    .f-checkout-view-content .f-text-sm{
        color: black!important;
        font-family: 'Coolvetica'!important;
    }

    .f-checkout-view-content .f-p-4 .f-h3{
        font-family: "asphalt", sans-serif!important;
        font-weight: 800!important;
        font-style: normal;
        color: black!important;
    }

    .f-checkout-view-side .f-panel{
        background: none!important;
    }
    .f-checkout-view-side .f-panel .f-block-title{
        font-family: "asphalt", sans-serif!important;
        font-weight: 800!important;
        font-style: normal;
        color: white!important;
        text-align: center;
    }

    .f-checkout-view-side .f-checkout-side-cart-subtitle{
        display: none!important;
    }

    .f-checkout-view-side .f-opacity-70{
        font-family: 'Coolvetica';
    }

    .f-checkout-view-side .f-checkout-side-cart-participants-teams{
        display: none!important;
    }

    .f-panel .f-divider-text{
        color: black!important;
    }

    .f-panel .f-link{
        font-weight: 900;
        color: black!important;
    }

    /*INFO PANIER VIDE*/
            .f-catalog-container .f-text-center{
                background: none!important;
            }

            .f-catalog-container .f-h1,
            .f-catalog-container .f-py-4{
                color: white!important;
                font-family: 'Coolvetica'!important;
            }

            .f-catalog-container .f-btn-md{
                width: 80vw!important;
                max-width: 290px!important;
            }
        /*INFO PANIER VIDE*/
/*****--**-----*****--|CHECKOUT|-*****-----**--*****/

/*****--**-----*****--|ANIMATIONS PLAN SVG|-*****-----**--*****/
    .carte-container svg{
        overflow: visible;
    }

    #plan #BASE{
        filter:
            drop-shadow(0 0 2px  #ff5b17)
            drop-shadow(0 0 6px  #ff5b17)
            drop-shadow(0 0 12px #ff5b17); 
        animation: planbaseglow 1.8s ease-in-out infinite;
    }

    @keyframes planbaseglow{
        0%{filter:
            drop-shadow(0 0 1px  green)
            drop-shadow(0 0 3px  green)
            drop-shadow(0 0 3px green);}
        50%{filter:
            drop-shadow(0 0 2px  springgreen)
            drop-shadow(0 0 6px springgreen)
            drop-shadow(0 0 12px springgreen);}
        100%{filter:
            drop-shadow(0 0 1px  green)
            drop-shadow(0 0 3px  green)
            drop-shadow(0 0 3px green);}
    }

    #hoverMadonna, #hoverQueen, #hoverBritney, #hoverNirvana{
        opacity: 0;
        cursor: pointer;
    }

    #MADONNA, #NIRVANA, #BRITNEY, #QUEEN{
        opacity: 0;
    }

    /*ANIMATIONS SALLES*/
    #NIRVANA #sallenirvana, #QUEEN #salle, #MADONNA #sallemadonna, #BRITNEY #salle-2,
    {
        animation: animsalle 1s linear infinite both;
        filter:
            drop-shadow(0 0 1px  white)
            drop-shadow(0 0 3px  white)
            drop-shadow(0 0 3px white);
        }

    @keyframes animsalle {
        0% {transform: scale(1.0);filter:
            drop-shadow(0 0 1px  white)
            drop-shadow(0 0 3px  white)
            drop-shadow(0 0 3px white);}
        50% {transform: scale(1.01);filter:
            drop-shadow(0 0 1px  white)
            drop-shadow(0 0 6px  white)
            drop-shadow(0 0 9px white);}
        100% {transform: scale(1.0);filter:
            drop-shadow(0 0 1px  white)
            drop-shadow(0 0 3px  white)
            drop-shadow(0 0 6px white);}
    }

    #NIRVANA #objetsnirvana #mainnirvana{
        animation: animhautbas 0.5s linear infinite both;
    }

    @keyframes animhautbas {
        0% {transform: translateY(0px);}
        50% {transform: translateY(12px);}
        100% {transform: translateY(0px);}
    }

    #NIRVANA #objetsnirvana #eclair1, #NIRVANA #objetsnirvana #eclair2{animation: vibrate 0.5s linear infinite both;}

    @keyframes vibrate {
        0% {transform: translate(0);}
        10% {transform: translate(-2px, -2px);}
        20% {transform: translate(2px, -2px);}
        30% {transform: translate(-2px, 2px);}
        40% {transform: translate(2px, 2px);}
        50% {transform: translate(-2px, -2px);}
        60% {transform: translate(2px, -2px);}
        70% {transform: translate(-2px, 2px);}
        80% {transform: translate(-2px, -2px);}
        90% {transform: translate(2px, -2px);}
        100% {transform: translate(0);}
    }

    #NIRVANA #objetsnirvana #guitare {
        filter:
            drop-shadow(0 0 2px  #ff5b17)
            drop-shadow(0 0 6px  #ff5b17)
            drop-shadow(0 0 12px #ff5b17); 
        animation: rotationsaccade 1.8s ease-in-out infinite;
    }

    @keyframes rotationsaccade{
        0%,32%, 100%{ transform: rotate(-1deg); filter:
            drop-shadow(0 0 2px  #ff5b17)
            drop-shadow(0 0 6px  #ff5b17)
            drop-shadow(0 0 12px #ff5b17);}
        33%,65%{ transform: rotate(1deg);filter:
            drop-shadow(0 0 4px  white)
            drop-shadow(0 0 12px white)
            drop-shadow(0 0 24px white);}
        66%,99%{ transform: rotate(3deg);filter:
            drop-shadow(0 0 2px  yellow)
            drop-shadow(0 0 6px  yellow)
            drop-shadow(0 0 12px yellow);}
    }


    #MADONNA #objetsmadonna #boule{
        animation: animsalle 0.5s linear infinite both;
    }

    #MADONNA #objetsmadonna #laser1{animation: laser 0.7s infinite both;}
    #MADONNA #objetsmadonna #laser2{animation: laser 0.9s infinite both;}

    @keyframes laser {
        0% {opacity: 1; transform: translateX(4px);}
        50% {opacity: 0.2; transform: translateX(-4px);}
        100% {opacity: 1; transform: translateX(4px);}
    }       

    #MADONNA #objetsmadonna #etoile1{animation: etoiles 1.8s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile2{animation: etoiles 2.1s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile3{animation: etoiles 1.2s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile4{animation: etoiles 1.3s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile5{animation: etoiles 2.1s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile6{animation: etoiles 1.5s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile7{animation: etoiles 1.6s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile1-2{animation: etoiles 1.1s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile2-2{animation: etoiles 2s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile3-2{animation: etoiles 1.9s ease-in-out infinite;}
    #MADONNA #objetsmadonna #etoile5-2{animation: etoiles 1.4s ease-in-out infinite;}

    @keyframes etoiles{
        0%,32%, 100%{ transform: rotate(-1deg);}
        33%,65%{ transform: rotate(1deg);}
        66%,99%{ transform: rotate(3deg);}
    }

    #BRITNEY #objetsbritney #cd1-2{animation: cd 1.8s ease-in-out infinite;}
    #BRITNEY #objetsbritney #cd2{animation: cd 3s ease-in-out infinite;}

    @keyframes cd{
        0%{transform: translateY(0px);}
        50%{transform: translateY(20px);}
        100%{transform: translateY(0px);}
    }

    #BRITNEY #objetsbritney #etoile1 {animation: etoilebritney 0.6s infinite both;}
    #BRITNEY #objetsbritney #etoile2 {animation: etoilebritney 0.9s infinite both;}
    #BRITNEY #objetsbritney #etoile3 {animation: etoilebritney 1.2s infinite both;}

    @keyframes etoilebritney {
        0%,50%,100% {opacity: 1;}
        25%,75% {opacity: 0;}
    }

    #BRITNEY #objetsbritney #micro {animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;}

    @keyframes text-pop-up-top {
        0% {transform: translateY(0);transform-origin: 50% 50%;}
        100% {transform: translateY(-50px);transform-origin: 50% 50%;}
    }

    #QUEEN #objets #fleur1{animation: fleurqueen 3s infinite both;}
    #QUEEN #objets #fleur2{animation: fleurqueen 2.5s infinite both;}
    #QUEEN #objets #fleur3{animation: fleurqueen 3.6s infinite both;}


    @keyframes fleurqueen {
        0% {transform: rotate(0);}
        50% {transform: rotate(-5deg);}
        100% {transform: rotate(0deg);}
    }

    #QUEEN #objets #peace1{animation: peace 8s infinite both;}
    #QUEEN #objets #peace2{animation: peace 12s infinite both;}
    #QUEEN #objets #coeur{animation: peace 5s infinite both;}
    @keyframes peace {
        0%   { fill: black; }
        10%  { fill: red; }
        20%  { fill: orange; }
        30%  { fill: yellow; }
        40%  { fill: lime; }
        50%  { fill: cyan; }
        60%  { fill: blue; }
        70%  { fill: purple; }
        80%  { fill: hotpink; }
        90%  { fill: gold; }
        100% { fill: black; }
    }

    #QUEEN #objets #psyche{
        transform-origin: left;
        animation: flip-in-ver-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
    }

    @keyframes flip-in-ver-right {
        0% {
            transform: skew(0, 0);
        }
        100% {
            transform: skew(-10deg, 0);
        }
    }

    /*****--**-----*****--|TABLETTE|-*****-----**--*****/
        @media screen and (max-width: 960px){
            .carte-container{
                width: calc(100% + 4rem);
                margin-left: -2rem;
            }
        }
    /*****--**-----*****--|TABLETTE|-*****-----**--*****/

    /*****--**-----*****--|MOBILE|-*****-----**--*****/
        @media screen and (max-width: 576px){
            .carte-container{
                display: none;
            }

            #plan .texte{
                transform: rotate(-4deg);
                margin-top: 0;
            }

            #plan .texte h2{
                font-size: 40px;
            }

            #plan .texte h3{
                font-size: 21px;
            }


            .carte-containermobile{
                display: block;
                width: 90%;
                margin: auto;
            }
            .carte-containermobile svg{
                overflow: visible;
            }

            .carte-containermobile #QUEEN,
            .carte-containermobile #NIRVANA,
            .carte-containermobile #MADONNA,
            .carte-containermobile #BRITNEY{
                opacity: 1!important;
            }
        }
    /*****--**-----*****--|MOBILE|-*****-----**--*****/    
/*****--**-----*****--|ANIMATIONS PLAN SVG|-*****-----**--*****/

/*****--**-----*****--|BOUTON BONS CADEAUX|-*****-----**--*****/
    .popup-bons.hidden { display: none; }

    .popup-bons {
        position: fixed;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .popup-bons-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.7);
    }

    .popup-bons-content {
        position: relative;
        background: springgreen;
        width: min(1000px, 90vw);
        height: min(800px, 90vh);
        padding: 21px;
        box-shadow: 0 0 30px rgba(0,0,0,0.8);
        display: flex;
        flex-direction: column;
        border-radius: 21px;
    }

    .popup-bons-content #close-bons{
        position: absolute;
        right: 21px;
        font-size: 36px;
        border: none;
        background: none;
        color: black;
    }

    .popup-bons-iframe {
        border: 0;
        width: 80%;
        margin: auto;
        flex: 1;
    }

    #open-bons{
        position: absolute;
        bottom: 15vh;
        padding: 21px 36px;
        border: none;
        background-color: black;
        font-family: "asphalt", sans-serif;
        font-weight: 800;
        font-style: normal;
        transform: rotate(2deg) translateX(90%);
        font-size: 2vw;
        transition: 0.3s;
        cursor: pointer;
        border: solid 6px springgreen;
        border-radius: 120px;
        color: springgreen;
    }

    #open-bons:hover{
        transform: rotate(2deg) translateX(90%) scale(1.1);
        color: black;
        background-color: springgreen;
    }

    #headlessui-dialog-panel-22{
        display: block!important;
    }

    @media screen and (max-width: 576px){
        .popup-bons-iframe {
            width: 80%;
        }

        #open-bons{
            font-family: "asphalt", sans-serif;
            font-weight: 800;
            font-style: normal;
            transform: rotate(2deg) translateX(0);
            font-size: 1.2em;
            transition: 0.3s;
            cursor: pointer;
            border: solid 6px springgreen;
            border-radius: 120px;
            color: springgreen;
        }

        #open-bons:hover{
            transform: rotate(0deg) translateX(0) scale(1);
            color: black;
            background-color: springgreen;
        }
    }

/*****--**-----*****--|BOUTON BONS CADEAUX|-*****-----**--*****/