*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
::-webkit-scrollbar {
    display: none;
}

@media print{
	.ecran {display: none;}
}

@font-face {
    font-family: 'Montserrat';
    src: url(fonts/Montserrat-VariableFont_wght.ttf);
 }
 @font-face {
    font-family: 'Birds';
    src: url(fonts/Back.ttf);
 }

body {
    height: 100%;
    font-family: 'Montserrat';
    overflow-x: hidden;
    
}
option {
    color: #000;
}
.feu {
    /*background-image: url('./video/1fire-15.gif');*/
    background-repeat: no-repeat;
    background-size: 120%;
}
.formulaire_up2pay {
    border:solid 2px black;
    border-radius:10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 50px black;
}
.titreassiettes{
    position:absolute;
    margin:3vh 15vw;
    background:rgba(255, 0, 0, 0.589);
    font-size:2vw;
    border:none;
    padding: 2vh 1vw;
    border-radius: 5px;
    font-family: 'Birds';
    text-shadow: 1px 1px 0 black;
    transform: scale(2.5,1.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.titrepanini{
    text-align: center;
    position:absolute;
    margin:1.8vh 9vw;
    width:14vw;
    height:13.5vh;
    background:rgba(255, 0, 0, 0.589);
    font-size:1.8vw;
    border:none;
    padding: 4vh 1vw;
    border-radius: 5px;
    font-family: 'Birds';
    text-shadow: 1px 1px 0 black;
    transform: scale(2,1.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.titrepanini2{
    text-align: center;
    position:absolute;
    margin:2.7vh 55vw;
    width:8.5vw;
    height:5vh;
    background:rgba(255, 0, 0, 0.589);
    font-size:1.2vw;
    border:none;
    padding: 0.1vh 1vw;
    border-radius: 5px;
    font-family: 'Birds';
    text-shadow: 1px 1px 0 black;
    transform: scale(2,1.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.panini2{
    margin:2.7vh 83vw;
}
.panini3{
    margin:50vh 55vw;
}
.titreburger{
    position:absolute;
    margin:1.8vh 6vw;
    background:rgba(255, 0, 0, 0.589);
    font-size:1.4vw;
    border:none;
    padding: 2vh 1vw;
    border-radius: 5px;
    font-family: 'Birds';
    text-shadow: 1px 1px 0 black;
    transform: scale(2,1.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.titresand{
    position:absolute;
    margin:1.5vh 7vw;
    background:rgba(255, 0, 0, 0.589);
    font-size:1vw;
    border:none;
    padding: 2vh 0.5vw;
    border-radius: 5px;
    font-family: 'Birds';
    text-shadow: 1px 0 black, 0 1px black;
    transform: scale(2.5,1.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.assietedescript{
    position:absolute;
    font-size: 1vw;
    margin: 10vh 0 5vh 0;
    color:gold;
    /*backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);*/
}
.sanddescript{
    position:absolute;
    width: 18vw;
    font-size: 1vw;
    margin: 4.5vh 0 5vh 0;
    color:gold;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.assieteprix{
    position:absolute;
    margin:15vh 5vw;
    background:rgba(255, 0, 0, 0.589);
    font-size:1.2vw;
    border:none;
    padding: 0.8vh 0.8vw;
    border-radius: 5px;
    backdrop-filter: blur(15px);-webkit-backdrop-filter: blur(15px);-moz-backdrop-filter: blur(15px);-ms-backdrop-filter: blur(15px);
}
.lespoints{
    position:absolute;
    margin-top:2.7vh;width:3vw;
    border-bottom:dashed 2px white;
    text-align:right;
}
.boutmenuenf {
    display:none;
}
#bme.show {
    display:block;
}
#bmeb.show {
    display:none;
}

#boissonAS_text.show {
    display:none;

}
#sansfritepanini.show {
    display:none;
}
.viandburg {
    color:black;
    position:absolute;
    top:16vh;
    left:28vw;
    /*font-size:2.5vh;
    background:rgba(255, 0, 0, 0.63);*/
    border-radius: 5px;
    padding: 2px 2px 2px 15px;
    cursor: pointer;
    font-size:2vh;
    width:40vw;
}

.cv {
    visibility:hidden;
    height:0px;
}
.ss {
    visibility:hidden;
    height:0px;
}

#viandeschoix.show {
    visibility:visible;
    height:10vh;
}
#sanssauce.show {
    visibility:visible;
    height:6vh;
}


.FCASS{
    position:fixed;
    top:2.5%;
    left:2.5%;
    width:95%;
    height:95%;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
    border-radius: 10px;
    border:solid 2px rgb(255, 255, 255);
    color: white;
    box-shadow: 0 0 50px #000 ;
    z-index: 1;
    transition: all .1s ease-in-out;
}
.titregalette {
    position:absolute;
    top:3.8vh;
    width:110vw;
    padding-right:25vw;
    height:8.5vh;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
    text-align:center;
    font-size:2.5rem;
    letter-spacing: .03rem;
    color:red;
    text-shadow: 1px 1px 0 black;
    transform:scale(1, 0.7);
}
.titregalette2 {
    position:absolute;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
    text-align:center;
    border-radius: 5px;
    font-family: 'Birds';
    font-size:2rem;
    letter-spacing: .03rem;
    background:rgba(255, 0, 0, 0.589);
    text-shadow: 1px 1px 0 black;
    padding: 1vh 1vw ;
    transform:scale(1, 0.7);
}
.galette{
    top:15vh;
    left:32vw;
    width:12vw;
    height:9vh;
}
.viande{
    top:15vh;
    left:49vw;
    width:13vw;
    height:9vh;
}
.sauces{
    top:15vh;
    left:67.8vw;
    width:12.5vw;
    height:9vh;
}
.supplement{
    top:15vh;
    left:82vw;
    width:15vw;
    height:9vh;
    font-size:1.6rem;

}
#faitchoix.show{
    top:-100%;
}
.boiass {
    position:absolute;
    top:20vh;
    left:11vw;
    font-size:2.5vh;
    background:rgba(255, 0, 0, 0.63);
    border-radius: 5px;
    padding-left: 15px;
    width:28vw;
}
.saucesass {
    color:black;
    position:absolute;
    top:16vh;
    left:30vw;
    border-radius: 5px;
    padding: 2px 2px 2px 15px;
    cursor: pointer;
    font-size:2.5vh ;
    width:45vw;
    display:inline-block;

}

.saucestacos {
    color:black;
    position:absolute;
    top:37vh;
    left:0vw;
    border-radius: 5px;
    padding: 2px 2px 2px 15px;
    cursor: pointer;
    font-size:2.5vh;
    width:35vw;
    display:inline-block;

}
.saucesgalette {
    color:black;
    position:absolute;
    top:36vh;
    left:0vw;
    border-radius: 5px;
    padding: 2px 2px 2px 15px;
    cursor: pointer;
    font-size:2.5vh;
    width:30vw;
    display:inline-block;

}
.saucesuppass {
    color:black;
    border-radius: 5px;
    padding: 2px 2px 2px 15px;
    cursor: pointer;
    font-size:2.5vh;
    width:28vw;
    display:inline-block;
}
.supplemass {
    color:black;
    position:absolute;
    top:0vh;
    left:40vw;
    padding: 2px 2px 2px 15px;
    border-radius: 5px;
    font-size:2.5vh;
    width:12.3vw;
    cursor: pointer;
    display:inline-block;
}
.saucessand {
    color:black;
    position:absolute;
    top:18vh;
    left:6.5vw;
    border-radius: 5px;
    padding: 2px 2px 2px 15px;
    cursor: pointer;
    font-size:2.5vh;
    width:21vw;
    display:inline-block;
}
.supplemsand {
    color:black;
    border-radius: 5px;
    font-size:2.5vh;
    width:9vw;
    cursor: pointer;
    display:inline-block;
}
.boisand {
    position:absolute;
    top:3vh;
    left:2vw;
    font-size:2vh;
    background:rgba(255, 0, 0, 0.63);
    border-radius: 5px;
    padding: 2px;
    width:21vw;
}
.arrirereplan {
    background-color: #000000;
    position: absolute;
    top:0px;
    left:-50%;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.liste {
    width: 100%;
    overflow: auto;

}
.fas {
	color: rgb(255, 0, 0);
	transition: all .1s ease-in-out;
    /*text-shadow: 1px 2px 1px #000000;*/
    filter: drop-shadow(1px 2px 1px #000000);

}
.fas:hover {
	transform: scale(1.5);
}

header {
    position: fixed;
    width:120%;
    left:-50px;
    padding-left: 50px;
    height:65px;
    background: #000;
    
    float: center;
    z-index: 1;
    box-shadow: 0px 15px 20px #000 ;
}
.logo {
    position: fixed;
    top:-10px;
    left:-10px;
    text-shadow: 1px 0 rgb(0, 0, 0),0 1px rgb(0, 0, 0), -1px 0 red,0 -1px red,  2px 2px 10px #ffffff;
}


.logo_profile{
    width: 75px;
    padding : 3px;
    margin: 2px 5px;
    height: 65px;
    /*border-radius: 50%;
    border:1px solid rgb(255, 0, 0);
    box-shadow:-1px -2px 4px black, 1px 2px 4px  white ;*/
}
.champsaisiachat {
    border:none;
    background:none;
    color:#000;
    width:98%;
    max-height: 45px;
    padding:5px;
    margin: 2px 5px;
    border-bottom: dashed 2px rgba(0, 0, 0, 0.486);
    font-size:2.6vh;
}
.champsaisiachattel {
    border:none;
    background:none;
    color:#000;
    width:160px;
    max-height: 45px;
    padding:5px;
    margin: 2px 5px;
    border-bottom: dashed 2px rgba(0, 0, 0, 0.486)  ;
    font-size:2.6vh;
}
.champsaisinom {
    border:none;
    background:none;
    color:#000;
    width:45%;
    max-height: 45px;
    padding:5px;
    margin: 2px 5px;
    border-bottom: dashed 2px rgba(0, 0, 0, 0.486)  ;
    font-size:2.6vh;
}
.champsaisicp {
    border:none;
    background:none;
    color:#000;
    width:24%;
    max-height: 45px;
    padding:5px;
    margin: 2px 5px;
    border-bottom: dashed 2px rgba(0, 0, 0, 0.486)  ;
    font-size:2.6vh;
}
.choixcpville{
    position: absolute;
    height:100px;
    overflow: auto;
    background-color: #000000c7;
    margin-bottom:-20px;
    font-size:2.6vh;
}
.champsaisiville {
    border:none;
    background:none;
    color:#000;
    width:68%;
    max-height: 45px;
    padding:5px;
    margin: 2px 5px;
    border-bottom: dashed 2px rgba(0, 0, 0, 0.486)  ;
    font-size:2.6vh;
}
.champsADRachat {
    border:none;
    background:none;
    color:#000;
    width:98%;
    max-width: 98%;
    min-width: 98%;
    min-height: 80px;
    max-height: 80px;
    padding:5px;
    vertical-align: top;
    border-bottom: dashed 2px rgba(0, 0, 0, 0.486)  ;
    font-size:2.6vh;
}
.champselectachat {
    border:none;
    background:none;
    color:#000;
    width:98%;
    max-width: 98%;
    min-width: 98%;
    max-height: 45px;
    padding:5px;
    margin: 2px 5px;
    border-bottom: dashed 2px rgba(0, 0, 0, 0.486) ;
    font-size:2.6vh;
}
.totalttc{
    font-size: 1.3rem;
    padding : 5px 0px 5px 35px;
    color: gold;
    background-image: url('./images/panier_achat.png');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 90px;
    text-align: right;
    position: fixed;
    top:35px;
    width:250px;
    cursor: pointer;
}
.totalttc2{
    font-size: 1.3rem;
    padding : 5px 0px 5px 35px;
    color: gold;
    background-image: url('./images/panier_achat.png');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 5px;
    text-align: right;
    cursor: pointer;
}
.vignette{
    width: 75px;
    height: 75px;
    position: relative;
    top: -170px;
    left: 25px;
    margin-bottom: -150px;
}
.minivignette{
    position: relative;
    width: 100%;
    height: 100%;
    top: -13vh;
    left: -5px;
    z-index: 1;

}
.minivignette img{
    width: 70%;
    height: 70%;
    object-fit: cover;
 
}
.vignette img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image_actue{
    width: 40%;
    height: cover;
    float: center;
    justify-content: center;
}
.image_actue img{
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 500px;
    object-fit: cover;
}
.vignette_avatar {
    position: absolute;
    width: 30px;
    height: 30px;
    border:solid 2px white;
    box-shadow: 0 0 1px #000000;
    padding: 2px;
    border-radius:50%;
    top: 10px;
    left: 5px;
    overflow: hidden;
}

.vignette_avatar img{
    width: 100%;
    height: 100%;
    border-radius:50%;
    object-fit: cover;
}
.vignette_avatar_actu {
    width: 30px;
    height: 30px;
    border:solid 2px white;
    box-shadow: 0 0 1px #000000;
    padding: 2px;
    border-radius:50%;
}
.vignette_avatar_actu img{
    width: 100%;
    height: 100%;
    border-radius:50%;
    object-fit: cover;
}

.timeactue {
    position: relative;
    float: left;
    top:-20px;
    left: 5px;
    color: rgb(255, 0, 0);
    font-size: 1rem;
}
.lescompositions{
    border: none;
    background: none;
    width:100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 35px;
    max-height: 35px;
    font-size: 0.9rem;
    color: gold;
}
.infoactue{
    position: relative;
    font-size: 0.9rem;
    height: 150px;
    padding:5px;
    top:-20px;
    margin-bottom: -22px;
    text-align:center;
    z-index: 1;
    /*background-color: rgb(255, 255, 255);
    opacity: 0.8;*/
}
.infoactue2{
    font-size: 1rem;
    height: 10vh;
    text-align:center;
    z-index: 1;
}
.infoactueune{
    font-size: 1.2rem;
    padding: 10px;
    text-align:justify;
    max-width: 60%;
    /*background-color: black;
    opacity: 0.9;*/
}
.infoactue a, .infoactueune a{
    color: #7d92a8;
}
.basactue{
    width:100%;
    bottom: 0;
    padding: 5px 10px 15px 0;
    text-align: right;
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(252, 197, 60, 0.7));
    font-weight: bold;
    font-size: 2vh;
}
.basactue_une{
    width:100%;
    padding: 15px 5px 12px 5px;
    text-align: right;
    font-weight: bold;
}
.basactue span, .basactue_une span{
    cursor: pointer;
}

label.logo{
    font-size: 2rem;
    font-weight: bolder;
    color:gold;
    padding: 0 100px;
    line-height: 65px;
}
nav {
    position: fixed;
    color:rgb(255, 0, 0);
    width:100%;
    height:65px;
    z-index: 10;
    padding-right: 4vw;
}
nav ul {
    float:right;
    list-style:none;
}
nav ul li {
    line-height: 65px;
    display:inline-block;
    padding:0 0.3vw;
    overflow: auto;
}
nav span{
    color:rgb(255, 0, 0);
    font-size: 1.2rem;
    display:inline-block;
    font-weight: bolder;
    text-transform: uppercase;
    border: 1px solid transparent;
    padding: 7px 5px;
    border-radius: 3px;
    cursor: pointer;
}
nav span.active,span:hover {
    border-radius: 3px;
    border: 1px solid white;
    transition: all .1s ease-in-out;
}
nav #icon{
    position: fixed;
    font-size: 30px;
    line-height: 65px;
    float: right;
    top: -5px;
    right: 50px;
    cursor: pointer;
    display: none;
}
@media (max-width: 1200px) {
    label.logo{
        font-size: 1.5rem;
        padding-left: 100px;
        margin-right: -60px;
        color:gold;
    }
    nav ul{
        margin-right: 20px;
    }
    nav span{
        font-size: 1rem;    
    }
    .lactue {
        width: 50%;
    }
    nav label.totalttc {
        font-size: 1.1rem;    
    }
}
@media (max-width: 500px) {
    label.logo{
        font-size: 0.8rem;
    }
    .boutons_tacos{
        font-size: 0.8rem;
    }
    #assiteimage{
        display: none;
    }
}
video {
    height: 100vh;
    width: 100%;
    object-fit: fill; 
    position: absolute;
}
.wrapperassiettes {
    display: grid;
    grid-template-columns: 43% 28.5% 28% ;
    grid-auto-rows: minmax(auto, auto);
    grid-auto-columns: minmax(auto, auto);

}
.wrapperassiettes2 {
    width:100vw;
    display: grid;
    grid-template-columns: 15% 20% 22% 22% 22% ;
    grid-auto-rows: minmax(auto, auto);
    grid-auto-columns: minmax(auto, auto);

}
.wrapperassiettes > div {
    height:32.5vh;
    font-weight:bold;
}
.wrapperassiettes2 > div {
    height:31.5vh;
    font-weight:bold;
}
.wrapperburgers {
    width:100vw;
    display: grid;
    grid-template-columns: 21.5% 20% 20% 20% 18% ;
    grid-auto-rows: minmax(auto, auto);
    grid-auto-columns: minmax(auto, auto);

}
.wrappertacos > div {
    /*padding: 15vh 0;
    height:33.3vh;
    border: 1px dashed rgb(102, 255, 0);
    /*background-color: #ED8;*/
    font-weight:bold ;
}
.wrappertacos {
    width:100vw;
    display: grid;
    grid-template-columns: 30.7% 15% 21% 14.5% 18.5% ;
    grid-auto-rows: minmax(auto, auto);
    grid-auto-columns: minmax(auto, auto);

}
.wrapperpanini > div {
    /*padding: 15vh 0;
    height:33.3vh;
    border: 1px dashed rgb(102, 255, 0);
    /*background-color: #ED8;*/
    font-weight:bold ;
}
.wrapperpanini {
    width:100vw;
    display: grid;
    grid-template-columns: 26.5% 19% 28.5% 25% ;
    grid-auto-rows: minmax(auto, auto);
    grid-auto-columns: minmax(auto, auto);

}
.wrapperburgers > div {
    /*padding: 15vh 0;
    height:33.3vh;
    border: 1px dashed rgb(102, 255, 0);
    /*background-color: #ED8;*/
    font-weight:bold ;
}
.wrappersandwichs {
    width:100vw;
    display: grid;
    grid-template-columns: 21% 19% 19% 20% 20% ;
    grid-auto-rows: minmax(auto, auto);
    grid-auto-columns: minmax(auto, auto);

}
.box1panini {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 6;
    height: 98vh;
}

.box2panini {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 6;
    height: 98vh;
}
.box3panini {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    height: 48vh;
}
.boxpanini {
    height: 48vh;
}
.prixfriteP{
    position: absolute;
    font-size: 1.3vw;
    background-color: rgba(255, 0, 0, 0.575);
    border-radius: 5px;
    padding: 1.5vh 1vw;
    margin: 2vh 0 2vh 12.7vw;
    cursor: pointer;
    text-shadow: 1px 1px 0 black;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);

    
}
.prixbarketP{
    position: absolute;
    font-size: 1.3vw;
    border-radius: 5px;
    padding: 1.5vh 1vw;
    margin: 2vh 0 2vh 13vw;
    cursor: pointer;
    text-shadow: 1px 1px 0 black;
    /*border:solid 1px red;*/
    width:5.8vw;
    height:6vh;
    /*background-color: rgba(255, 0, 0, 0.575);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);*/

}
.prixbarketG{
    position: absolute;
    font-size: 1.3vw;
    border-radius: 5px;
    padding: 1.5vh 1vw;
    margin: 2vh 0 2vh 19.3vw;
    cursor: pointer;
    text-shadow: 1px 1px 0 black;
    /*border:solid 1px red;*/
    width:5.8vw;
    height:6vh;
    /*background-color: rgba(255, 0, 0, 0.575);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);*/
}

.prixfriteP2{
    position: absolute;
    font-size: 1.3vw;
    border-radius: 5px;
    padding: 1vh 1vw;
    margin: 2vh 0 2vh 14.1vw;
    cursor: pointer;
    text-shadow: 1px 1px 0 black;
    /*border:solid 1px red;*/
    width:5vw;
    height:5.2vh;
    /*background-color: rgba(255, 0, 0, 0.575);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);*/

}
.prixfriteG{
    position: absolute;
    font-size: 1.3vw;
    background-color: rgba(255, 0, 0, 0.575);
    border-radius: 5px;
    padding: 1.5vh 1vw;
    margin: 2vh 0 2vh 19vw;
    cursor: pointer;
    text-shadow: 1px 1px 0 black;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.prixfriteG2{
    position: absolute;
    font-size: 1.3vw;
    border-radius: 5px;
    padding: 1vh 1vw;
    margin: 2vh 0 2vh 19.85vw;
    cursor: pointer;
    text-shadow: 1px 1px 0 black;
    /*border:solid 1px red;*/
    width:5vw;
    height:5.2vh;
    /*background-color: rgba(255, 0, 0, 0.575);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);*/
}
.prixdesserts{
    position: absolute;
    font-size: 1.3vw;
    background-color: rgba(255, 0, 0, 0.575);
    border-radius: 5px;
    width: 6vw;
    text-align: center;
    padding: 1.5vh 1vw;
    margin: -2vh -1vw 0 17.5vw;
    cursor: pointer;
    text-shadow: 1px 1px 0 black;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.prixboispani{
    font-size: 1.2vw;
    margin:0.77vh 14vw;
    padding:0.5vh 0.5vw;
    width: 4.5vw;
    height:3.7vh;
    background-color: rgba(255, 0, 0, 0.575);
    text-shadow: 1px 1px 0 black;
    border-radius: 5px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);

}

.wrappersandwichs > div {
    /*padding: 15vh 0;
    border: 1px dashed rgb(102, 255, 0);
    /*background-color: #ED8;*/
    height:25vh;
    font-weight:bold ;
}
.lesbox {
    margin: 1vh 1vw 0 ;
    padding: 1vh;
    border-radius: 5px;
    cursor: pointer;
}
.lesbox:hover {
    border: 2px dashed red;
    background-color: rgba(255, 230, 0, 0.541);
}
.lesbox.active {
    border: 2px dashed white;
    background-color: rgba(255, 0, 0, 0.575);
}
.lesbox p {
    margin: 0 1vw;
    border-radius: 5px;
    cursor: pointer;
    text-shadow: 1px 1px black;
}
.lesboxp:hover {
    border: 2px dashed red;
    background-color: rgba(255, 230, 0, 0.541);
}
.lesboxp.active {
    border: 2px dashed white;
    background-color: rgba(255, 0, 0, 0.575);
}
.box1assiettes {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 6;
}
.box1_2assiettes {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 12;
}
.box1burgers {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 1;
    height:13vh;
}
.FVCASS {
    position:absolute;
    top:1vh;
    left:2vw;
    font-size:2.7vw;
    width:45vw;
}
.tacos {
    top:4.5vh;   
}
.FVCSAND {
    position:absolute;
    top:9vh;
    left:2vw;
    font-size:3vh;
    width:25vw;
}
.boutons {
    font-size: 3vh;
    margin: 0.5vh 0.2vw;
    padding: 0 1vw;
    border-radius: 5px;
    border:solid 2px white;
    box-shadow: 1px 1px 0 black, inset 1px 1px 0 black;
    text-shadow: 1px 1px 0 black;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    display:inline-block;
    background-color:rgba(0, 0, 0, 0.603);
}
.boutonstacos {
    font-size:2vw;
    margin: 1vh 1vw;
    padding: 1vh 2vw;
    border-radius: 5px;
    border:solid 2px white;
    box-shadow: 1px 1px 0 black, inset 1px 1px 0 black;
    text-shadow: 1px 1px 0 black;
    cursor: pointer;
    text-align: center;
    color:white;
    /*text-transform: uppercase;*/
    display:inline-block;
    background-color:rgba(0, 0, 0, 0.603);
}
.boutons_tacos {
    font-size:2vh;
    margin: 2vh 1vw;
    padding: 1vh 2vw;
    border-radius: 5px;
    border:solid 2px white;
    box-shadow: 1px 1px 0 black, inset 1px 1px 0 black;
    text-shadow: 1px 1px 0 black;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    display:inline-block;

    background-color:rgba(0, 0, 0, 0.603);
}
.boutons_galette {
    font-size:2vh;
    margin: 0.5vh 0.5vw;
    padding: 1vh 1vw;
    border-radius: 5px;
    border:solid 2px white;
    box-shadow: 1px 1px 0 black, inset 1px 1px 0 black;
    text-shadow: 1px 1px 0 black;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    display:inline-block;

    background-color:rgba(0, 0, 0, 0.603);
}
.valid {
    background-color: green;
}
.boutonstacos:hover {
    background-color: rgba(255, 230, 0, 0.541);
}
.boutonstacos.active {
    background-color: rgba(255, 0, 0, 0.795);
}
.boutons_tacos:hover {
    background-color: rgba(255, 230, 0, 0.541);
}
.boutons_tacos.active {
    background-color: rgba(255, 0, 0, 0.795);
}
.boutons_galette:hover {
    background-color: rgba(255, 230, 0, 0.541);
}
.boutons_galette.active {
    background-color: rgba(255, 0, 0, 0.795);
}
.box1tacos {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 1;
    height:11.2vh;
}
.box2tacos {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 11;
    height:70vh;
}
.box3tacos {
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 2;
    height:15vh;
}
.box4tacos {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 5;
    height:70vh;
}
.tacos1v{
    font-size: 2vw;
    height:19vh;
    margin: 1.2vh 1vw;
    padding: 0.5vh 1vw;
    /*backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);*/
    text-align: center;

}
.box5tacos p {
    /*border: 1px dashed rgb(102, 255, 0);*/
    font-size: 1.8vw;
    color: rgba(255, 255, 255, 0.863);
    height: 5.7vh;
    margin: 0 1vw;
    text-align: center;

}
.box1panini p {
    /*border: 1px dashed rgb(102, 255, 0);*/
    font-size: 1.8vw;
    color: rgba(255, 255, 255, 0.863);
    height: 6.6vh;
    margin: 0.1vh 1vw;
    text-align: center;
    cursor: pointer;
}
.box1panini p:hover  {
    border: 2px dashed red;
    border-radius: 5px;
    background-color: rgba(255, 230, 0, 0.541);
}
.box2panini p {
    font-size: 1.8vw;
    color: rgba(255, 255, 255, 0.863);
    height: 6.6vh;
    margin: 0.2vh 1vw;
    text-align: center;
    cursor: pointer;
}
.box2panini p:hover  {
    border: 2px dashed red;
    border-radius: 5px;
    background-color: rgba(255, 230, 0, 0.541);
}
.box4panini p {
    font-size: 1.2vw;
    color: rgba(255, 255, 255, 0.863);
    height: 3.9vh;
    margin: 0.2vh 1vw;
    text-align: center;
    cursor: pointer;
}
.box4panini2 p {
    font-size: 1.2vw;
    color: rgba(255, 255, 255, 0.863);
    height: 4.8vh;
    margin: 0.2vh 1vw;
    text-align: center;
    cursor: pointer;
}
.box4panini p:hover  {
    border: 2px dashed red;
    border-radius: 5px;
    background-color: rgba(255, 230, 0, 0.541);
}
.box4panini2 p:hover  {
    border: 2px dashed red;
    border-radius: 5px;
    background-color: rgba(255, 230, 0, 0.541);
}
.box6panini p {
    font-size: 1.2vw;
    color: rgba(255, 255, 255, 0.863);
    height: 4.2vh;
    margin: 0.2vh 1vw;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    text-shadow: 1px 1px black;
}
.prixtacos{
    position:absolute;
    text-align: center;
    background:rgba(255, 0, 0, 0.589);
    font-size: 1.8vw;
    border-radius: 5px;
    margin: 9vh 2vw;
    padding:0.5vh 1vw;
    text-shadow: 1px 1px black;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.prixpaniniV {
    position:absolute;
    text-align: center;
    background:rgba(255, 0, 0, 0.589);
    font-size: 2vw;
    border-radius: 5px;
    margin: 28vh 9.5vw;
    padding:1.7vh 1vw 1.7vh 1vw;
    text-shadow: 1px 1px black;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.prixpaniniF {
    position:absolute;
    text-align: center;
    background:rgba(255, 0, 0, 0.589);
    text-shadow: 1px 1px black;
    font-size: 2vw;
    border-radius: 5px;
    margin: 28vh 5.2vw;
    padding:1.7vh 1vw 1.7vh 1vw;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}

.boxburgers{
    height:28vh;
}

.prixburg {
    position:absolute;
    text-align: center;
    background:rgba(255, 0, 0, 0.589);
    transform: rotate(-11deg);
    font-size: 1.7vw;
    border-radius: 5px;
    margin: 20vh 1vw;
    padding:1vh;
    text-shadow: 1px 1px 0 black;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);

}
.burgmenuenf{
    margin: 7.5vh 5vw;
}
.burgchicken {
    margin: 12.5vh 0.3vw;
}
.burgmust{
    margin: 13.5vh -0.3vw;
}
.burgmaster{
    margin: 12vh -0.4vw;
}
.burgchti{
    margin: 12.5vh -0.2vw;
}

.burgdoublechees{
    margin: 11.5vh 1.3vw;
}
.burgmaroille{
    margin: 11.5vh 0.4vw;
}
.burgcheeseb{
    margin: 11.5vh 0.8vw;
}
.burgbig{
    margin: 12.3vh 1.2vw;
}
.burgbigc{
    margin: 12.5vh 1.3vw;
}
.burgfish{
    margin: 11.5vh 0.5vw;
}
.burgbacon{
    margin: 12.5vh -0.1vw;
}
.prixsand {
    position:absolute;
    text-align: center;
    transform: rotate(-9deg);
    font-size: 1.4vw;
    padding : 1vh 1vw;
    border-radius: 5px;
    margin: 10vh 0vw;
    background:rgba(255, 0, 0, 0.589);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.prixsandpromo {
    position:absolute;
    text-align: center;
    transform: rotate(-9deg);
    font-size: 2vw;
    padding : 1vh 1vw;
    border-radius: 5px;
    border:dashed 2px white;
    margin: 20px 50px;
    background:rgba(255, 0, 0, 0.589);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.nomsand {
    position:absolute;
    text-align: center;
    height:6vh;
    background:rgba(255, 0, 0, 0.589);
    padding: 1vh 1vw;
    font-size: 1.4vw;
    border-radius: 5px;
    font-family: 'Birds';
    margin: 3.5vh 5vw;
    transform: scale(1.8,1.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
    z-index: 1;
    cursor:pointer;
}

.sandautre {
    margin: 15.5vh 1vw;

}
.sandmerguez {
    margin: 9.5vh 0vw;
}
.sandagneau {
    margin: 10vh 1vw;
}
.sandcordonble{
    margin: 10vh 0.5vw;   
}
.sandkofte{
    margin: 10vh 0.5vw;
}
.sandsuisse{ 
    margin: 14vh -0.3vw;
}
.sandradical{
    margin: 13vh 0vw;
}
.sandchicken {
    margin: 9vh 1vw;
}
.sandstmaroil{
    margin: 14vh 1.5vw;
}
.sandkebabmaroil{
    margin: 12vh 1.5vw;
}
.sandspecial{
    margin: 13.5vh -0.5vw;
}
.sandboursin{
    margin: 14vh 12vw ;
}
.sandfricadelles{
    margin: 11.5vh -2vw;
}
.sandmexicanos{
    margin: 11.8vh -1.5vw;
}
.sandgalette{
    margin: 14.5vh 0vw;
}
.sandmust{
    margin: 14.5vh -0.5vw;
}
.sandlibanais{
    margin: 17.5vh -0.5vw;
}
.sandphenomene{
    margin: 11vh -0.5vw;
}

.prixass {
    width:7vw;
    height:7vh;
    transform: rotate(-9deg);
    padding: 1.5vh 1vw;
    font-size: 1.6vw;
    border-radius: 5px;
    margin: 15.5vh 0.5vw;
    background:rgba(255, 0, 0, 0.589);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);

}
.nomass {
    text-align: center;
    height:7vh;
    background:rgba(255, 0, 0, 0.589);
    padding: 0.1vh 1vw;
    font-size: 2vw;
    border-radius: 5px;
    font-family: 'Birds';
    margin: 3vh 8vw;
    transform: scale(1.6,1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);

    
}

.box1sandwichs{
    height:8vh;
    padding: 1vh 0;
    text-align: left;
    font-size:2.5vh;
}
.box1sandwichs span {
    padding: 0.8vh 1vw;
    border-radius: 5px;
}
.box1sandwichs p:hover {
    border: 2px dashed red;
    border-radius: 5px;
    background-color: rgba(255, 230, 0, 0.541);
}
.box2assiettes{
    height:100%;
}
.box1assiettes p {
    height:8vh;
    padding: 1.4vh 0;
    text-align: right;
    font-size:2vh;
    cursor: pointer;
}
.box1assiettes span {
    padding: 0.8vh 0.8vw;
    border-radius: 5px;
}
.box1assiettes label {
    padding: 0.8vh 0.8vw;
    border-radius: 5px;
}
.box1assiettes p:hover {
    border: 2px dashed red;
    border-radius: 5px;
    background-color: rgba(255, 230, 0, 0.541);

}
@media(max-width: 1020px){
    .infoactueune{
        max-width: 100%;
    }
    .image_actue{
        width: 100%;
    }
    .main h2{
        color:white;
        font-size: 1.2rem;
    }
    nav {
        position:absolute;
    }
    nav #icon{
        display: block;
    }
    nav ul{
        position: absolute;
        width: 100%;
        height: 500px;
        background: #000;
        border-bottom: 1px solid #282937;
        top: -520px;
        left: 0px;
        text-align: center;
        transition: all .1s ease-in-out;
    }
    nav li{
        display: block;
        width: 100%;
        border-top: 1px solid #ffffff;
    }
    nav span{
        font-size: 1.4rem;
    }
    nav label.totalttc {
        font-size: 1.5rem;    
    }
    nav span.active,span:hover{
        border: none;
        /*color: #000;*/
    }
    nav ul.show{
        left: 0;
        top: 75px;
    }
}
.main {
    position: absolute;
    width: 100%;
    height: 88%;
    top:65px;
    transition: all .3s ease-in-out;
    color:rgb(255, 255, 255);
    text-shadow: 0 0 1px #000000,  2px 2px 3px #666565;
    left: -110%;
    border-left: solid 1px red;
    border-right: solid 1px red;
}
.main h2{
    width: 100%;
    text-align: center;
}
.main h3{
    width: 100%;
    text-align: center;
}
.conn h2{
    color:rgb(255, 255, 255);
    margin-bottom: 10px;
}
.ADMIN {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height:80vh;
    /*overflow: auto;
    /*border:solid 1px red;*/
}
.lesactions {
    padding: 10px;
    margin: 5px;
}
.lesactions span {
    padding:10px;
    margin: 5px;
    cursor: pointer;
}
.lesuser {
    /*display: flex;
    flex-direction: row;
    justify-content: center;*/
    width: 100%;
    max-height:80vh;
    border:solid 1px white;
    border-radius: 5px;
    overflow: auto;
}
.clients {
    /*display: flex;
    flex-direction: row;
    justify-content: center;*/
    width: 100%;
    max-height:80vh;
    border:solid 1px white;
    border-radius: 5px;
    overflow: auto;
}
.produits {
    /*display: flex;
    flex-direction: row;
    justify-content: center;*/
    width: 100%;
    max-height:80vh;
    border:solid 1px white;
    border-radius: 5px;
    overflow: auto;
}
.ajuser {
    position: fixed;
    width: 90%;
    max-width:375px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 3px;
    background-color: rgb(255, 255, 255);
    border: solid 2px rgb(255, 0, 0);
    border-radius: 5px;
    color:black;
    overflow: auto;

}

.muser {
    position: fixed;
    width: 90%;
    max-width:375px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 3px;
    background-color: rgb(255, 255, 255);
    border: solid 2px rgb(255, 0, 0);
    border-radius: 5px;
    color:black;
    overflow: auto;
}
.mproduit {
    /*display: block;
    flex-direction: row;
    flex-wrap: wrap;*/
    position: fixed;
    width: 90%;
    max-width:375px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 3px;
    background-color: rgb(255, 255, 255);
    border: solid 2px rgb(255, 0, 0);
    border-radius: 5px;
    color:black;
    overflow: auto;
}
.listecommande {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 30%;
    min-width: 330px;
    /*height: 80vh;*/
    padding: 3px;
    /*margin-bottom: 5px;*/
    border:solid 1px white;
    border-radius: 5px;
    overflow: auto;
}
.listecommande2 {
    display: flex;
    flex-direction: row;
    justify-content: left;
    width: 30%;
    min-width: 330px;
    max-height: 80vh;
    padding: 3px;
    margin-bottom: 3px;
    border:solid 1px white;
    border-radius: 5px;
    overflow: auto;
}
.unticket {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 30%;
    min-width: 330px;
    max-height: 80vh;
    padding: 3px;
    margin-bottom: 3px;
    border:solid 1px white;
    border-radius: 5px;
    overflow-x: hidden;
}
.recettes {
    /*display: flex;
    flex-direction: raw;
    justify-content: center;*/
    width: 330px;
    min-width: 330px;
    margin-bottom: 3px;
    border:solid 1px white;
    border-radius: 5px;
    overflow: hidden;

}


.menu01{cursor:pointer;width:95%;height:25px;padding:5px;}
.menu01:hover{background-color:#CCC;opacity:0.5;color:#666;}


.menu_client{
    width:30%;
    padding:5px;
    border-radius: 10px 10px 0 0 ;

}
.mask {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#00000090;
    z-index: 1;
}
.ajuser input, .ajuser select, .muser input, .muser select, .mproduit select, .mproduit input, .ajclient input, .ajclient select {
    background:none;
    color:black;
    font-size:1.2rem;
    padding:5px;
}
.ajclient textarea {
    background:none;
    color:white;
    width:100%;
    min-width: 100%;
    max-width: 100%;
    height: 55px;
    min-height: 50px;
    max-height: 50px;
    font-size:1.2rem;
    padding:5px;
}
.ajuser p, .muser p, .ajclient p, .mproduit p {
    text-align:left;
}
.ajclient {
    position: fixed;
    width: 90%;
    max-width:375px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background-color: rgb(255, 255, 255);
    border: solid 1px rgb(255, 0, 0);
    border-radius : 5px;
    padding: 5px;
    color:black;
    overflow: auto;
    text-align: left;

}
.Accueil {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    transition: all .3s ease-in-out;
    color:rgb(255, 0, 0);
    text-shadow: 0 0 1px #000000,  2px 2px 3px #666565;
    top: 65px;
    left: 0;
    text-align: center;
    justify-content: center;
    line-height: 40px;
    overflow: auto;
}

#username {
    position:fixed;
    left: 105px;
    top:57px;
    font-size: 17px;
}

.patientersvp{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:black;
    background-image: url('./images/patienter01.gif') ;
    background-size: 10%;
    background-position:50% 50%;
    background-repeat: no-repeat;
    display: none;
    /*z-index: 100;*/
}
#ACCUEIL.show{
    left: -100%;
    /*height: 100%;*/
}
#MENU.show{
    left:0;
    /*height: 100%;*/
}
#ASSIETTES.show{
    left:0;
    /*height: 100%;*/
}
#SANDWICHS.show{
    left:0;
    /*height: 100%;*/
}
#TACOS.show{
    left:0;
    /*height: 100%;*/
}
#GALETTE.show{
    left:0;
    /*height: 100%;*/
}
#BURGERS.show{
    left:0;
    /*height: 100%;*/
}
#PANINI.show{
    left:0;
    /*height: 100%;*/
}
#patienter.show{
    left:0;
    /*height: 100%;*/
}

#BOISSON.show{
    left:0;
    /*height: 100%;*/
}
#BOISSON1e.show{
    left:0;
    /*height: 100%;*/
}
#SAUCES.show{
    left:0;
    /*height: 100%;*/
}
#payerCA.show{
    left:0;
}
#COMMANDE.show{
    left:0;
    /*height: 100%;*/
}
#MEMBRE.show{
    left:0;
    /*height: 100%;*/
}
#uneactue.show{
    top: 65px;
    left: 0;
    /*height: 100%;*/
}
#Composi.show{
    top: 65px;
    left: 0;
    background-color: #000000e0;
    /*height: 100%;*/
}
.boutton_c{
    border:solid 1px #000;
    border-radius: 3px;
    font-size: 1.4rem;
    padding: 5px 10px;
    color: gold;
    cursor: pointer;
}
.boutton_t{
    background: #ff0000;
    border:solid 1px #fff;
    border-radius: 3px;
    font-size: 1.4rem;
    padding: 5px 20px;
    margin:15px;
    color: gold;
    cursor: pointer;
}
.fermerf{
    font-size: 1.2rem;
    font-weight: bolder;
    position:absolute;
    top:10px;
    left:80px;
    border:solid 1px #000000;
    border-radius: 3px;
    padding: 5px;
    cursor: pointer;
}
.valider_choix{
    font-size: 1.2rem;
    font-weight: bolder;
    color:red;
    position:absolute;
    top:10px;
    right:5%;
    border:solid 1px #000000;
    border-radius: 3px;
    padding: 5px;
    cursor: pointer;
}
.lescompos{
    display: flex;
    flex-wrap: wrap;
}
.conn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;
    justify-items: center;*/
    height: 85vh;
    text-shadow: 0 0 1px #000000,  2px 2px 5px #666565;
    overflow: auto;
}
.c_commandes {
    color: white;
    width: 100%;
    height: 90vh;
    box-shadow: 0 0 1px #000000, inset 0 0 1px #000000,  1px 1px 3px #000000;
    overflow: auto;

}
.c_membre {
    color: white;
    width: 350px;
    height: 50vh;
    box-shadow: 0 0 1px #000000, inset 0 0 1px #000000,  1px 1px 3px #000000;

}
.FHMAC {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
    transform: scale(1,0.9);
    /*background-color: rgb(255, 255, 255);*/
    overflow: auto;

}
.i_membre {
    color: white;
    width: 350px;
    height: 80vh;
    box-shadow: 0 0 1px #000000, inset 0 0 1px #000000,  1px 1px 3px #000000;
    overflow: auto;
}
.membreconnexion{
    font-size: 1.3rem;
    margin:5px;
    padding: 2px;
    background-color: white;
    overflow: auto;
    
}
.mess_ic{
    background: #f8adad;
    width:100%;
    padding:1px;
    font-size:1.2rem;
}
.lesactues{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content:space-between;
    position: absolute;
    top:65px;
    width: 108%;
    height: 80vh;
    padding: 2vh 10vw 5vh 2.5vw;
    overflow-x: hidden;

}

.conectinscr {
    height: 85vh;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-evenly;
    /*border:solid 1px green;*/
}

.uneactue{
    /*position: relative;
    width: 100%;
    top:100px;
    object-fit: cover;
    display: flex;
    flex-wrap: wrap;
    */

    position: fixed;
    width: 100%;
    height: 95vh;
    transition: all .3s ease-in-out;
    color:rgb(255, 0, 0);
    background-color:rgba(0, 0, 0, 0.9);
    /*background-color: #282937;*/
    text-shadow: 0 0 1px #000000,  2px 2px 3px #666565;
    top: 65px;
    left: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center ;
    overflow-y: hidden;

}
.lactue{
    width: 100%;
    text-align: center;
    height: 100%;
    padding: 20px;
    padding-right:80px;
    border-radius: 3px;
    color:rgb(255, 0, 0);
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;


}
.lescategories{
    text-align: left;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bolder;
    padding: 3px 0px;
    margin-top: 10px;
    border-top: solid 1px #000000;
}
.vingnetteactue{
    width: 25vw;
    height: 125px;
    border:1px solid rgb(255, 255, 255);
    border-radius: 3px;
    box-shadow: 3px 3px 5px #000000;
    margin: 5px 5px;
    overflow: hidden;
    min-width: 130px;
    max-width: 130px;
    background-color: rgba(255, 0, 0, 0.63);

}
.vingnetteactue:active{
    transform: scale(0.9);
    box-shadow: 0 0 20px gold;
}
.aribon {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    -moz-backdrop-filter: blur(15px);
    -ms-backdrop-filter: blur(15px);
}
.vingnettegarniture{
    width: 20vw;
    height: 80px;
    border:1px solid rgb(255, 255, 255);
    border-radius: 3px;
    box-shadow: 3px 3px 5px #000000;
    margin: 3px 3px;
    overflow: hidden;
    min-width: 80px;
    max-width: 80px;
    background-color: rgba(255, 0, 0, 0.63);
    font-size: 0.7rem;

}
.vingnetteboissonmenu{
    height: 15vh;
    width: 15vw;
    max-width: 15vh;
    min-width: 15vh;
    border:1px solid rgb(255, 255, 255);
    border-radius: 3px;
    box-shadow: 5px 5px 15px #000000;
    margin: 1vh 1vw;
    background-color: rgba(255, 0, 0, 0.63);
    overflow: hidden;
    cursor: pointer;
}
.vingnetteboissonmenu:active{
    transform: scale(0.9);
    box-shadow: 0 0 20px gold;
}

.baspage{
    width: 100%;
    overflow: hidden;
    text-align: center;
}
footer {
    position:fixed;
    bottom:-15px;
    left:-15px;
    width:105%;
    height: 35px;
    padding-right: 100px;
    padding-left: 50px;
    text-align:center;
    background: #000;
    color:rgb(255, 0, 0);
    display: flex;
    justify-content: space-between;
    z-index: 9999;
    box-shadow: 0px -15px 20px #000 ;

    /*visibility: hidden;*/
}
.mess_serv {
    position:fixed;
    width : 100%;
    height: 100%;
    overflow-x: hidden;
    top: 65px;
    display: flex;
    flex-wrap: wrap;
    text-align:center;
}
.mess_arriereplan{
    position: fixed;
    width : 100%;
    height: 100%;
    overflow: hidden;
    background: none ;
    opacity: 0.5;
    z-index: -1;
}
.mess_cotchou {
    color:rgb(255, 0, 0);
    width:100%;
    height: 300px;
    background: #000 ;
    border-radius: 3px;
    margin: 20px 20% 150px 20%;
    padding: 15px;
}
.introduction {
    position: relative;
    width: 370px;
    height:100vh;
    line-height: 40px;
    text-shadow: 1px 0 rgb(0, 0, 0),0 1px rgb(0, 0, 0), -1px 0 goldenrod,0 -1px goldenrod,  2px 2px 4px #ffffff;
    background-color: #00000075;
    color:white;
    overflow: auto;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    z-index: 1001;

}
.note_actue {
    display: hidden;
}
.quitter {
    position: fixed;
    top:15px;
    right:1vw;
    width:28px;
    cursor: pointer;
}
.quitter2 {
    position: absolute;
    top:25px;
    right:1vw;
    width:28px;
    cursor: pointer;
    z-index: 1000;
}
.quitter_actu{
    position: fixed;
    float: right;
    top: 90px;
    right:20px;
    cursor: pointer;
    font-size: 17px;
    font-weight: bold;
    color: red;
    padding: 2px 5px;
    border: 4px solid red;
    border-radius: 50%;
    z-index:0;
    box-shadow: 1px 2px 1px #000000,inset 1px 2px 1px #000000;
    text-shadow: 1px 2px 1px #000000;
}
.recherche {
    background:none;
    color:white;
    width:120px;
    font-size:1rem;
    padding:2px 10px;
    margin:5px;
    border-radius: 50px;
}
.div_tiket_achat {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    align-items: flex-start;
    overflow: auto;
}
.venclien{
    background-color: rgba(255, 255, 255, 0.90);
    width: 25%;
    min-width: 330px;
    font-size:2vh;
    color:red;
    border: solid 1px white;
    border-radius: 10px;
    margin: 2px;
    padding:5px;
}
.typcom {
    background-color: rgba(255, 255, 255, 0.90);
    width: 25%;
    min-width: 330px;
    font-size:1.4rem;
    color:red;
    border: solid 1px white;
    border-radius: 10px;
    margin: 2px;
    padding:5px;
}
.tiquet {
    background-color: rgba(255, 255, 255, 0.90);
    width: 330px;
    font-size:1.4rem;
    color:red;
    border: solid 1px white;
    border-radius: 10px;
    margin: 2px;
    padding:5px;
}
#delogue2 {
    z-index: 100;
}
#delogue {
    display: none;
    z-index: 10;
}
.choix_client {
    position: absolute;
    display: flex;
    justify-content: center;
    width:23vw;
    max-height: 250px;
    overflow: auto;
    color: white;
    background-color: #000000c7;
    margin-left:0.5vw;

}
.bouton_paye{
    cursor: pointer;
}
.laligne {
    cursor: pointer;
}
.laligne:hover {
    background-color: rgba(255, 241, 47, 0.678);
    color: #000;
}
.laligne.active {
    background-color: rgba(155, 155, 155, 0.678);
    color: #000;
}

.boutonplusmoin {
    cursor: pointer;
}

.montpayer {
    font-size: 1.2rem;
    background: none;
    cursor:pointer;
    width: 65px;
    text-align: center;
    border-radius: 3px;
}
.boitealert_style {
    position: fixed;
    top: -25%;
    left : 50%;
    width: 50%;
    min-width: 350px;
    height: 50vh;
	transform: scale(0.1);
    background-color: red;
    border: solid 2px white;
    border-radius: 10px;
    transition: all .3s ease-in-out;
    box-shadow: 0 0 50px #000 ;

}
#boitealert.show {
    top:50%;
	transform: scale(0.8);
    transform: translate(-50%, -50%);
}
.boitealertBU_style {
    position: fixed;
    top: -50%;
    left :25%;
    width: 50vw;
    height: 50vh;
    background-color: red;
    border: solid 2px white;
    border-radius: 10px;
	transform: scale(0.1);
    transition: all .3s ease-in-out;
    box-shadow: 0 0 50px #000 ;

}
#boitealertBU.show {
    top:25%;
	transform: scale(0.8);
}