:root {
  --chartePetite: #D4FFDF;
  --charteMoyenne: #00AB37;
  --charteGrande: #DC3703;
  --chartePUber: #6B1B02;
  --charteGUber: #6B1B02;
  --charteSilverLight: #F2F3F4;
  --charteSilver: silver;
  --charteSilverDark: #676767;
  --charteBlueSky: #87CEFA;
  --charteBlue: #005c9f;
  --charteRed: #C12B44;
  --charteRedLight: #FF8B9F;
  --charteGreen: #8BFF94;
  --charteGreenLight: #D1FFD4;
  --charteGreenDark: #068200;
  
}

*{
	
box-sizing: border-box; font-family:sans-serif;
font-size:12px;
}
body{padding:0; margin:0;
background : #F2F3F4;
position:relative;
}

table
{
border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
padding:0px;
margin:0px;
background : white;
border-radius:10px;
}


A { 

text-decoration:none; 
}

.corps{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	width:100%;
}
.flex1{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :space-between;
	width:100%;
	/* border:1px solid red; */
}
.notif{
	display:none;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;	
	
	position:absolute;
	top:-8px;
	right:-8px;

width:20px;
height:20px;
background-color:red;
border-radius:50%;

color:white;
font-weight:bold;
font-size:12px;

/* box-shadow: 0px 0px 4px 4px #C4FFF7; */
border:1px solid white;
z-index:2;
}

.alert{
	border:1px solid #C12B44;
	border-radius:4px;
	color:#C12B44;
	background-color:#C12B4433;
	padding:5px;
	margin:5px;
	font-size:14px;
	font-weight:bold;
	width:100%;
	text-align:center;
	
	
}
.center{text-align:center; justify-content:center;}

.activeGratuit{
	Position:absolute;
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	right:70px;
	top:5px;
	width:180px;
	
	font-size:20px;
	
}

.activeGratuit i{
	font-size:70px;
}

.activeGratuit span{
		display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	font-size:15px;	
	height:30px;
}

.afficheData{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	border-bottom:1px solid var(--charteSilver);
	width:100%;
	font-size:14px;
}

.afficheData div{
font-size:14px;

}

.afficheData2{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
	border:1px solid var(--charteBlue);
	background-color:var(--charteBlueSky);
	border-radius:5px;
	width:100%;
	font-size:20px;
	font-weight:bold;
	margin:5px;
	padding:5px;
	
	
}

.afficheData2 div{
font-size:14px;

}

.afficheData2 i:nth-child(1){
	font-size:20px;
	margin-right:10px;
}

.afficheData3{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
	border:1px solid var(--charteRed);
	background-color:var(--charteRedLight);
	border-radius:5px;
	width:100%;
	font-size:20px;
	font-weight:bold;
	margin:5px;
	padding:20px;
	
	
}

.afficheData3 div{
font-size:14px;

}

.afficheData3 i:nth-child(1){
	font-size:20px;
	margin-right:10px;
}


.afficheData i:nth-child(1){
	font-size:20px;
	margin-right:10px;
}

.recherche1{
	/* border:1px solid red; */
	margin:5px;
	width:100%;
}

.recherche1 input{
	width:100%;
	height:30px;
	font-size:25px;
	border:1px solid var(--charteSilver);
	border-radius:5px;
}

/* main index--------------------------------------- */
.main{
	position:relative;
	
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
	width:100vw;
	height:100vh;
	/* border:3px solid red; */
}


.screen1{
	position:absolute;
	top:0px;
	left:0px;
	
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
	width:60%;
	height:50%;
	/* border:3px solid blue; */
	padding-right:5px;
	background-color:#F2F3F4;
}

.screen2{
	position:absolute;
	top:0;
	right:0;

	display:flex;
	flex-direction:column;   /* important */

	width:calc(40% - 2px);
	height:calc(100% - 4px);

	border:1px solid black;
	border-radius:10px;

	margin-top:2px;
	margin-right:2px;
}

.screen3{
	position:absolute;
	bottom:0px;
	left:0px;
	
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
	width:calc(60%);
	height:50%;
	/* border:3px solid purple; */
	/* padding:5px; */

}

.screen3Top{
display:flex;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;

width:100%;
height:40px;
/* border:1px solid purple; */
padding-right:5px;
}

.screen3Top>input{
	width:calc(100% - 200px - 2px);
	height:100%;
	padding-left:3px;
	font-size:1.5em;
}

.newClientButton{
	width:200px;
	height:100%;
	margin-left:2px;
	font-size:16px;
	border:1px solid var(--charteGreenDark);
	border-radius:4px;
	background-color:var(--charteGreenLight);
	color:var(--charteGreenDark);
	font-weight:bold;
	
}

.screen3Left{
display:flex;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;

width:55%;
height:calc(100% - 40px);
padding-right:5px;

}

.screen3Right{
display:flex;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;

width:45%;
height:calc(100% - 40px);
/* border:1px solid purple; */
padding-right:5px;

}




.screen4{
	position:absolute;
	bottom:0px;
	right:0px;
	
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
	width:calc(40% - 2px);
	height:calc(35% - 7px);
	border:1px solid black;
	border-radius:10px;
	margin-bottom:2px;
	margin-right:2px;
	
}
/* main index--------------------------------------- */
/* popups--------------------------------------- */
.popup3
{
position:absolute;
background:white;
top:40px;
left:0px;
bottom:5px;
right:5px;

display:none;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;	
overflow:auto;
}

.popup2
{
position:absolute;
background:white;
top:2px;
left:60%;
right:2px;
bottom:2px;

border:1px solid var(--charteSilverDark);
border-radius:10px;
padding:5px;

display:none;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;	
overflow:auto;
z-index:3;
}

.popup6
{
position:absolute;
background:white;
top:2px;
left:20%;
right:calc(40% + 3px);
bottom:2px;

border:1px solid var(--charteSilverDark);
border-radius:10px;
padding:5px;

display:none;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;	
overflow:auto;
z-index:4;
}

.popup5
{
position:absolute;
background:white;
top:0px;
left:0px;
right:calc(40%);
bottom:0px;

border:1px solid var(--charteSilverDark);
border-radius:10px;
padding:5px;

display:none;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;	
overflow:auto;
z-index:3;
}
/* popups--------------------------------------- */

/* boutons --------------------------------------- */

.boutonList1{
	position:relative;
	
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content : space-between;
	
	width:100%;
	border:1px solid var(--charteSilver);
	min-height:40px;
	margin-bottom:5px;
	font-size:14px;
	text-align:left;
	padding-left:10px;
	border-radius:5px;
	padding-bottom:3px;
	background-color:var(--charteSilverLight);
}

.boutonList2 i:nth-child(1){
	position:absolute;
	top:2px;
	left:2px;
	color:black;
	font-size:20px;
	padding-top:3px;
}

.boutonList2{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:left;
	justify-content : space-between;
	/* border:1px solid red; */
	flex:1;
}

.boutonList2>div:nth-child(1){
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content : space-between;
	/* border:1px solid pink; */
	width:100%;

}

.boutonList2>div:nth-child(2){
		display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content : space-between;
	/* border:1px solid Green; */
	width:100%;

}

.boutonList2>div:nth-child(3){
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
	color:var(--charteBlue);
	width:100%;

}

.boutonList3 i:nth-child(1){
	color:var(--charteBlue);
	font-size:25px;
}

.boutonList3{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content : center;
	/* border:1px solid red; */
	width:70px;
	min-height:40px;
	cursor:pointer;
	border-left:1px solid var(--charteSilverDark);
	margin-left:4px;
}

.historiqueFact1Prix{
	position:absolute;
	top:0px;
	right:-0px;
	/* border:1px solid red; */
	font-weight:bold;
	background-color:var(--charteBlue);
	color:white;
	border-radius:5px;
	padding:3px;
	width:200px;
	text-align:right;

}
.historiqueFact1Id{
	position:absolute;
	top:0px;
	left:0px;
	/* border:1px solid red; */
	font-weight:bold;
	background-color:var(--charteSilverDark);
	color:white;
	border-radius:5px;
	padding:3px;
	width:100px;
	text-align:center;

}

.historiqueFact1Content{
	position:relative;
	width:calc(100%);
	height:50px;
		padding-top:10px;
		margin-bottom:5px;

	
	/* display:flex; */
	/* white-space: nowrap; */
	/* text-overflow: ellipsis; */
	/* overflow: hidden; */
	/* border:1px solid red; */

}
.historiqueFact2{

	width:80px;
	height:60px;
	font-size:1.5em;
	/* margin:1px; */

	border:1px solid var(-charteSilverDark);	
}

.historiqueFact2>i{
		font-size:1.5em;
		color:var(--charteBlue);
}

.historiqueFact1{
	position:relative;
	width:calc(100% - 80px);
	height:60px;
	font-size:1em;
	/* margin:1px; */
	border:1px solid var(-charteSilverDark);	
	text-align:left;
	padding-left:10px;
	padding-top:25px;
	
}

.navigation{
	width:calc(50% - 2px);
	height:40px;
	font-size:1.5em;
	margin:1px;

	border:1px solid var(-charteSilverDark);
	margin-top:10px;
	margin-bottom:10px;
}
.navigation i{
font-size:1.5em;
color:var(--charteBlueSky);
}



.buttonTimer,.buttonTimerSelect{
	width:calc(20% - 2px);
	height:60px;
	font-size:15px;
	margin:1px;

	border:1px solid var(--charteSilverDark);
	border-radius:4px;
	padding:0px;
	}
	
.buttonTimerSelect{
	border:2px solid var(--charteBlue);
	background-color:var(--charteBlueSky);
	}
	

.demandeClient{
	border:1px solid blue;
	background-color:white;
	color:blue;
	/* font-weight:bold; */
}

.demandeClientSelect{
border:1px solid blue;
	background-color:blue;
	color:white;	
	font-weight:bold;
}

	
.buttonDel{
position:flex; 
width:calc(100% - 10px);
height:40px;
border-radius:5px;
border:2px solid var(--charteRed);
background-color:var(--charteRedLight);
font-size:1.5em;
margin:5px;
}

.buttonBack{
position:absolute; 
bottom:10px; 
left:10px;
height:40px;

background-color:var(--charteBlueSky);
width:calc(100% - 20px);
border-radius:5px;
border:1px solid var(--charteSilverDark);
font-size:1.5em;
}

.buttonClose{
position:absolute; 
bottom:10px; 
left:10px;
height:40px;

width:calc(100% - 20px);
border-radius:5px;
border:1px solid var(--charteSilver);
font-size:1.5em;
}


.buttonClose2{

height:40px;

width:calc(100% - 20px);
border-radius:5px;
border:1px solid var(--charteSilver);
font-size:1.5em;
margin-left:10px;
margin-top:20px;
}

.buttonCate{
	width:calc(33.33% - 2px);
	height:calc(20% - 2px);
	
	font-size:1.2em;
	
	border:1px solid #138D75;
	border-radius:5px;
	background-color:#82E0AA;
	margin:1px;
}

.catePagination{
	background-color:#999 !important;
	border-color:#888 !important;
	font-size:2em;
	color:#333;
}

.buttonProduit{
	position:relative;
	width:calc(20% - 2px);
	height:calc(20% - 2px);
	border:1px solid silver;
	border-radius:5px;
	margin:1px;
		font-size:1.2em;
			font-weight:bold;


}

.buttonProduit div:nth-child(1){
	/* position:absolute; */
	/* top:2px; */
	/* left:2px; */
	/* font-weight:bold; */
	font-size:0.8em;
}
.buttonProduit div:nth-child(2){
	position:absolute;
	bottom:2px;
	right:2px;
	font-weight:bold;
	font-size:0.8em;
	
}
/* boutons --------------------------------------- */
/* screen 1 content --------------------------------------- */
.contentPagination{
	display:flex;
	position:absolute;
	border-top:2px solid silver;
	width:calc(100% - 5px);
	bottom:0px;
	left:0px;
	height:20%;
	
}

.contentPagination button:nth-child(n + 3){
	border:1px solid silver;
	/* color:white; */
	font-weight:bold;
}





.buttonNextPage{
	width:calc(14.28% - 2px);
	height:calc(100% - 2px);
	margin:1px;
	border-radius:5px;
	border:1px solid silver;
}

.buttonAdmin{
	position:relative;
	width:calc(33% - 2px);
	height:calc(20% - 2px);
	font-size:1em; 
	margin:1px;
	border-radius:5px;
	border:1px solid #2980B9;
	background-color:#85C1E9;
	
}
/* screen 1 content --------------------------------------- */
/* Caisse --------------------------------------- */

.modifCaisseOn{
position:absolute;

display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
top:0px;
bottom:0px;
right:0px;
left:0px;

/* border:1px solid red; */
}

.modifCaisseOn div{
	
color:white;
font-weight:bold;
transform: rotate(-45deg);

font-size:65px;
}


.encaissementL{
display:flex;
	FLEX-WRAP:wrap;	
	ALIGN-ITEMS:start-left;
	ALIGN-CONTENT:start-left;
	/* border:1px solid red; */
	width:60%;
}

.encaissementR{
display:flex;
	FLEX-WRAP:wrap;	
	ALIGN-ITEMS:start-left;
	ALIGN-CONTENT:start-left;
	/* border:1px solid red; */
	width:40%;
	margin-top:50px;
}
.boutonChoixCaissier{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content:center;
	
	font-size:1.5em;
	margin:5px;
	
	width:calc(33.33% - 10px);
	height:100px;
	border-radius:5px;
	border:1px solid var(--charteSilver);
}

.blockButtonEncaissement{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
	width:100%;
	height:123px;
	
	
}

.blockButtonEncaissement>button{
	width:calc(33.33% - 2px);
	height:calc(50% - 2px);
	font-size:1.2em;
	border:1px solid var(--charteSilverDark);
	margin:1px;
	/* border-radius:10px; */

	
}

.blockButtonEncaissement>button:nth-child(1){
background:blue;
color:white;
font-size:1.5em;
	
}

.blockButtonEncaissement>button:nth-child(3){
/* background:blue; */
/* color:white; */
font-size:1.2em;
	
}

.blockButtonEncaissement>button:nth-child(2){
background:green;
color:white;
font-size:1.5em;
	
}
 
.blockButtonEncaissement>button:nth-child(5){
font-size:1.2em;	
}

.blockButtonEncaissement>button:nth-child(6){
border-radius:0px 0px 10px 0px;
}

.blockButtonEncaissement>button:nth-child(4){
border-radius:0px 0px 0px 10px;
	
}

.caisseClientBlock{
	width:100%;
	min-height:126px;
	/* border:1px solid red; */
}

.listAdds{
	width:100%;
	color:green;
	/* border:1px solid red; */
}

.listDels{
	width:100%;
	color:var(--charteRed);
	/* border:1px solid red; */
	font-weight:bold;
}
.caisseArticles{
	position:relative;
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;	
	overflow:auto;

	width:100%;
	height:calc(100% - 119px - 158px);
	/* border:1px solid red; */
	/* background-color:white; */
	border-radius:0px 0px 10px 10px;
	background:white;
}

.ligneCaisse{
position:relative;
display:flex;
flex-wrap:wrap;
ALIGN-ITEMS:Center;
ALIGN-CONTENT:flex-start;

width:100%;
min-height:35px;

padding-left:3px;
padding-right:3px;
margin:2px;

border-bottom:1px solid var(--charteSilverDark);
border-radius:3px;
/* background-color:var(--charteSilverLight); */
}

.ligneCaisseNom{
	
	/* white-space: nowrap; */
	/* text-overflow: ellipsis; */
	/* overflow: hidden; */
	/* border:1px solid red; */
	width:calc(100% - 180px);
	font-size:1.2em;

}

.ligneCaissePrix{
	/* border:1px solid red; */
	text-align:right;
	width:50px;
	font-size:1.2em;
}



.ligneCaisseButton{
	width:40px;
	height:35px;
	margin-left:1px;
	/* border:1px solid red; */
	
}
.ligneCaisseButton i{
	font-size:15px;
}
.ligneCaisseButton>button{
	width:100%;
	height:100%;
	font-size:2em;
	border:1px solid var(--charteSilverDark);
	border-radius:4px;
}

.caisseTtc{
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	border:1px solid var(--charteSilverDark);
	width:100%;
	margin-top:0px;
	border-radius:10px 10px 0px 0px;
	background-color:var(--charteSilverDark);
	color:white;
	height:28px;
}

.caisseTtc div:nth-child(2){
	/* border:1px solid var(--charteSilverDark); */
	width:50%;
	font-size:1.8em;
	padding-right:3px;
	text-align:right;
	font-weight:bold;
}

.caisseTtc div:nth-child(1){
	/* border:1px solid var(--charteSilverDark); */
	width:calc(50%);
	font-size:1.8em;
	padding-left:3px;
	text-align:right;
}

.caisseTtc div:nth-child(2):after{
	content:" €";
}




/* Caisse --------------------------------------- */
/* recherche client --------------------------------------- */
.findClientDiv{
/* display:flex; */
justify-content:center;
align-items:center;
border:1px solid var(--charteSilverDark);
width:100%;
min-height:40px;
margin:1px;
border-radius:5px;
font-size:1.5em;
padding:3px;
background-color:var(--charteSilverLight);
}

.findClientDiv span{
	color:var(--charteSilverDark);
	font-size:1.2em;

}
/* recherche client --------------------------------------- */
/* caisse client --------------------------------------- */

.titreDate{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
	
	/* border:1px solid red; */
	width:100%;
	padding:5px;
}

.titreDate>input{
	width:80%;
	font-size:40px;
	text-align:center;
}

.caisseButtonAddIngredients{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:40%;
/* border:1px solid red; */
}

.caisseButtonDelIngredients{
position:absolute;
top:0px;
left:60%;
bottom:0px;
right:42px;
/* border:1px solid blue; */
}

.caisseClientInfo1{
	display:flex;
	JUSTIFY-CONTENT:space-between;
	width:100%;
	
	
	font-weight:bold;
	
	border-bottom:1px solid var(--charteSilverDark);
	border-radius:10px 10px 0px 0px;
	padding:5px;
	/* padding-right:5px; */
	background-color:var(--charteBlueSky);
	color:white;
}

.caisseClientInputTel{
	width:100px;
	text-align:center;
}

.caisseClientInfo2{
	display:flex;
	width:calc(100%);
	background-color:var(--charteBlueSky);

}

.caisseClientInfo2 div:nth-child(1){
	
	width:calc(100% - 200px);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size:1.2em;
	font-weight:bold;
	/* border:1px solid red; */
}
.caisseClientInfo3,.caisseClientInfo4{
	width:calc(100%);
	/* border:1px solid black; */
	
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
		background-color:var(--charteBlueSky);

}

.caisseClientInfo5{
width:calc(100%);	
	background-color:var(--charteBlueSky);
	border-bottom:1px solid var(--charteSilverDark);

}
.caisseClientInfo5>button{
	width:calc(20% - 2px);
	height:40px;
	margin:1px;
	background-color:var(--charteSilverLight);
	border-radius:4px;
	border:1px solid var(--charteSilverDark);
	text-align:center;
	vertical-align:top;
}

.caisseClientInfo5>button>i{
	font-size:20px;
	color:var(--charteBlue);
}


/* caisse client --------------------------------------- */

/* titres--------------------------------------- */
.classFacReglement{
width:calc(100%);
}

.inputCentral1{
	display:flex;
	JUSTIFY-CONTENT:center;
width:calc(100% - 10px);
margin:5px;	
}
.inputCentral1 input{
	width:calc(50%);
	height:40px;
	font-size:2em;
	text-align:center;
}

.info1{
	width:calc(100% - 10px);
	margin:5px;
	/* border-bottom:2px solid var(--charteSilverDark); */
	text-align:center;
	font-size:1.5em;
}

.info2{
	width:calc(100% - 10px);
	margin:5px;
	/* border-bottom:2px solid var(--charteSilverDark); */
	text-align:center;
	font-size:1.2em;
}

.titre1{
	position:sticky;
	top:0px;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	width:calc(100%);
	margin:5px;
	border-bottom:2px solid var(--charteSilverDark);
	text-align:center;
	font-size:20px;
	height:40px;
	background-color:white;
	z-index:3;
	padding-left:10px;
	border-radius:5px 5px 0px 0px;
}

.titre1 div:nth-child(1){
	
	font-size:20px;
	
}

.titre1 i{
position:absolute;
right:10px;
font-size:30px;
cursor:pointer;
z-index:3;
}

.titre2,.titre2L{
	width:calc(100% - 10px);
	margin:5px;
	/* border-bottom:2px solid var(--charteSilverDark); */
	font-size:1.5em;
}

.titre2{
text-align:center;

}

.titre2L{
text-align:left;

}

.boxYesNo{
	width:calc(100% - 10px);
	margin:5px;
	padding:20px;
	border:1px solid var(--charteSilverDark);
	border-radius:10px;
	text-align:center;
}
.boxYesNo>button{
	width:calc(50% - 40px);
	margin:10px;
	height:60px;
	border-radius:5px;
	border:1px solid var(--charteSilverDark);
	font-size:1.5em;
}
	
}
/* titres--------------------------------------- */
/* fonction form kd--------------------------------------- */

/* ----------------------------fonction add up ------------------------ */

.RC_block>span:first-child{
	display:block;
	border:0px solid black;
	font-size:20px;
	padding-left:20px;
	padding-right:100px;
	position:absolute;
	top:-25px;
	left:-1px;
	border-top:1px solid silver;
	border-left:1px solid silver;
	border-right:1px solid silver;
	border-radius:10px 10px 0px 0px;
	background-color:#f8f9fa;	
	max-width:calc(100% + 2px);
	overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* color:red; */
	
}

.RC_block{
	position:relative;
	/* display:flex; */
	/* FLEX-WRAP:wrap; */
	/* ALIGN-ITEMS:flex-start; */
	/* ALIGN-CONTENT:flex-start; */
	/* margin-top:100px; */
	padding:10px;
	padding-top:5px;
	border:1px solid silver;
	border-radius:10px 10px 10px 10px;
	position:relative;
	margin-top:30px;	
	margin-bottom:10px;	
	background-color:var(--charteSilverLight);
}

.RC_block>i{
position:absolute;
top:10px;
right:10px;
color:var(--marronCharte);
font-size:30px;
cursor:pointer;
	transition:0.5s;

}

.RC_block span:nth-child(1){
	width:100%;
	text-align:center;
	font-size:20px;
}

.blockYesNo{
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	position:relative;
	justify-content:space-around;
	/* border:1px solid red; */
}

.blockYesNo div:nth-child(1){
width:100%;
font-size:20px;
text-align:center;
margin:10px;

}

.blockYesNo button{ 
width:40%;
height:50px;
font-size:20px;
}

.buttonYes{
	background-color:var(--charteRedLight);
	border:1px solid var(--charteRed);
	border-radius:5px;
}

.buttonNo{
	background-color:white;
	border:1px solid var(--charteSilverDark);
	border-radius:5px;
}


.RC_block>i:hover{
	color:var(--charte-orange);
	transition:0.5s;
}

.popup
{
background-color:white;border-radius:0px 0px 10px 10px;
}

.popup>span:first-child{

background-color:white;		
width:calc(100% + 2px);
text-align:left;
height:60px;
border-bottom:1px solid silver;
line-height:55px;
}

.menuForm{
display:flex;
position:absolute;
top:-20px;
right:10px;
}

.popupMenuForm
{
top:-50px;
}

	
.popupMenuForm>.menuFormButton
{
	border:3px solid white;
}
.popupMenuForm>.menuFormButton:hover{
	border:3px solid var(--marronCharte);
}




.menuFormButton
{
border:1px solid var(--charteSilverDark);
background-color:var(--charteSilverDark);
margin-left:5px;
/* padding:5px; */
border-radius:5px;
width:40px;
height:40px;
display:flex;
ALIGN-ITEMS:Center;
/* ALIGN-content:flex-start; */
JUSTIFY-CONTENT:left;
cursor:pointer;
color:white;
transition:0.5s;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left:5px;
  padding-right:5px;
}


.menuFormButton>span
{
	padding-left:10px;
}


.menuFormButton:hover
{
background-color:white;
color:var(--marronCharte);
transition:0.5s;
width:160px;
}

.menuFormButton:active
{

background-color:green;
color:white;
}

.menuFormButton>i
{
font-size:25px;
}








.RC_formInput{
position:relative;
border:1px solid silver;
border-radius:10px;
background-color:white;
min-height:30px;
margin-top:20px;


}

.RC_formInput input, .RC_formInput select, .RC_formInput textarea{
	border:0px;
	width:calc(100% - 40px);
	margin-left:10px;
	margin-right:10px;
	/* height:calc(100% - 10px); */
	outline: none;
	margin-top:10px;
}

.RC_formInput input:required+span:after,
.RC_formInput textarea:required+span:after,
.RC_formInput select:required+span:after
 {
  content: "\272f";
   position:absolute;
  right:5px;
  top:-2px;
  font-size:20px;
  color:orange;
}

.RC_formInput select{
margin-top:5px;
}

.RC_formInput textarea{
/* resize:none; */
}
.RC_formInput>.divTxt{

padding:6px;
padding-top:7px;
padding-left:20px;
/* border:1px solid red; */
height:100%;
}

.RC_formInput>.divTxt:before{
	content:"• ";
   position:absolute;
	left:5px;
	top:-7px;
  font-size:30px;
  color:var(--marronCharte);
}

.RC_formName{
display:block;
position:absolute;
background-color:var(--charteSilverDark);
border-radius:10px;
border:1px solid var(--charteSilverDark);
padding-left:10px;
padding-right:10px;
font-size:10px;
top:-10px;
left:10px;
/* color:var(--marronCharte); */
color:White;
font-weight:bold;
min-width:100px;
text-align:center;

}
.RC_formInput>input:focus ~ .RC_formName{
color:red;
}


.RC_blockDcfOff{
	border:1px solid silver;
	margin-left:5px; 
	margin-top:-10px; 
	width:calc(100% - 10px);
	height:0px;
	overflow:hidden;
	transition:0.3s;
}

.RC_blockDcfOn{
	border:1px solid silver;
	margin-left:5px; 
	margin-top:-10px; 
	width:calc(100% - 10px);
	height:200px;
	overflow:hidden;
	transition:0.3s;
}

.RC_tableList {
width:100%;
table-layout: fixed;
}



.champObligatoire{
	border:1px solid orange !important;
	/* background:orange !important; */
	/* color:white!important; */
}

.textChampObligatoireOff{
	/* display:none; */
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
	color:red;
	font-size:8px;
	width:0px;
	height:0px;
	transition:1s;
}

.textChampObligatoireOn{
	/* display:block; */
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
	color:red;
	font-size:8px;
	width:200px;
	padding-left:20px;
	transition:1s;
}
/* fonction form kd--------------------------------------- */
/* Historique--------------------------------------- */
.historiqueGlobal{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :flex-start;
	
	width:100%;
	/* height:100px; */
	/* border:1px solid red; */
}

.historiqueGlobalL{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :flex-start;
	/* border:1px solid blue; */
	width:calc(100% - 60px);
}

.historiqueGlobalR{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	/* border:1px solid grey; */
	width:calc(60px);
	padding:2px;
}

.historique1{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :space-between;
	
	width:calc(100%);
	border:1px solid var(--charteSilverDark);
	border-radius:10px 10px 0px 0px;
	text-align:left;
	font-size:1.3em;
	font-weight:bold;
	background-color:var(--charteSilverLight);
	padding:3px;
	padding-left:10px;
	padding-right:10px;
}

.historique1>button{
	/* border:1px solid red; */
	border:1px solid var(--charteSilverDark);
	background-color:var(--charteSilverLight);
	border-radius:4px;
	height:40px;
	width:60px;
}

.historique1>button>i{
	color:var(--charteBlue);
	font-size:20px;
}

.historique2{
	width:calc(100%);
	/* margin-left:5px; */
	/* margin-right:5px; */

	
	border-left:1px solid var(--charteSilverDark);
	border-right:1px solid var(--charteSilverDark);
}

.historique3{
	width:calc(100%);
	/* margin-left:5px; */
	/* margin-right:5px; */
	/* padding-left:10px; */

	
	border-left:1px solid var(--charteSilverDark);
	border-right:1px solid var(--charteSilverDark);
	font-weight:bold;
	font-style:italic;
	color:var(--charteRed);
}



.historiqueClose{
	width:calc(100% - 10px);
	margin-left:5px;
	margin-right:5px;
	
	border-left:1px solid var(--charteSilverDark);
	border-right:1px solid var(--charteSilverDark);
	border-bottom:1px solid var(--charteSilverDark);
}

/* Historique---------------------------------------

/* paveNumericMain--------------------------------------- */
.paveNumericMain{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
	width:calc(100% - 10px);
	margin-left:5px;
	margin-right:5px;
	
	/* border:1px solid red; */
}

.divPaveNumeric{
	border:1px solid red;
	width:300px;
}

.touchePaveNumerique1,.touchePaveNumeriquec,.touchePaveNumeriqueV{
		height:80px;
		font-size:2em;
		margin:1px;
		
		border:1px solid var(-charteSilverDark);
	}
	
.touchePaveNumerique1{width:calc(33.33% - 2px);}

.touchePaveNumeriqueC{width:calc(66.66% - 2px);}

.touchePaveNumeriqueV{width:calc(100% - 2px);}
/* paveNumericMain--------------------------------------- */
/* Ingrediants--------------------------------------- */
.titreCateIngrediants{
	width:100%;
	text-align:center;
	background-color:var(--charteSilverDark);
	color:white;
	font-size:1.2em;
	margin-top:10px;
	margin-bottom:2px;
	border-radius:10px 10px 0px 0px;
	
}

.buttonIngrediantMoins{
width:40px;
height:40px;
display:block;
border:1px solid var(--charteSilverDark);
border-right:0px solid var(--charteSilverDark);

border-radius:3px 0px 0px 3px;

text-overflow: ellipsis;
	overflow: hidden;
	margin-top:1px;
	background-color:var(--charteGreenLight);
}

.buttonIngrediantMoins i{
	font-size:20px;
	color:black;
}

.buttonIngrediantAdd{
	position:relative;
	display:block;
	/* white-space: nowrap; */
	text-overflow: ellipsis;
	overflow: hidden;
	height:40px;
	width:calc(25% - 2px - 40px);
	/* background-color:var(--charteGreenLight); */
	border:1px solid var(--charteSilverDark);
	border-left:0px solid var(--charteSilverDark);
	border-radius:0px 3px 3px 0px;
	margin:1px 1px 1px 0px;
}

.buttonIngrediantDel{
	position:relative;
	display:block;
	/* white-space: nowrap; */
	text-overflow: ellipsis;
	overflow: hidden;
	height:40px;
	width:calc(25% - 2px);
	/* background-color:var(--charteGreenLight); */
	border:1px solid var(--charteSilverDark);
	border-left:0px solid var(--charteSilverDark);
	border-radius:3px 3px;
	margin:1px;
}

.buttonIngrediantAdd{
	background-color:var(--charteGreenLight);
}

.buttonIngrediantAdd>span{
	position:absolute;
	right:2px;
	top:2px;
}

.buttonIngrediantDel>span{
	position:absolute;
	right:2px;
	top:2px;
}

.buttonIngrediantDel{
	background-color:var(--charteRedLight);
	}
/* Ingrediants--------------------------------------- */
/* encaissement--------------------------------------- */
.gratuiteeLigneCaisse{
	color:var(--charteRed);
	font-size:10px;
}

.gratuiteeRemise{
	color:Green;
	font-size:14px;
	font-weight:bold;
}
.validerEncaissement{
	width:100%;
	height:50px;
	
	border:1px solid var(--charteSilverDark);
	border-radius:5px 5px 5px 5px;
	color:var(--charteSilverDark);
	background-color:var(--charteGreenLight);
	font-size:2em;
	margin-top:30px;
}


.buttonListRegRealise1,.buttonListRegRealise2,.buttonListRegRealise3,.buttonListRegRealise4{
	height:50px;
	font-size:1.5em;
	margin-bottom:2px;
	border:1px solid var(--charteSilverDark);
}
.buttonListRegRealise1{
	width:calc(60% - 50px);
	text-align:left;
	border-right:0px;
	border-radius:5px 0px 0px 5px;
	
}

.buttonListRegRealise2{
	width:20%;
	text-align:right;
	border-left:0px;
}

.buttonListRegRealise3{
	width:20%;
	/* text-align:right; */
	border-radius:0px 5px 5px 0px;
	color:var(--charteSilverDark);
	background-color:var(--charteRedLight);
	
}

.buttonListRegRealise4{
	width:50px;
	text-align:right;
	border-left:0px;
	text-align:center;
	font-size:30px;
}

.listeEncaissementRealises{
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;

	width:100%;
	max-height:40%;
	/* border:1px solid red; */
	overflow:auto;
	
}

.encaissement{
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;

	width:100%;
	/* calcul avec hauter .caisseTtc */
	height:calc(100% - 28px);
	padding:5px;
	
}

.encaissement button
{
	margin:1px;
	border:1px solid var(--charteSilverDark);
	border-radius:5px;
	width:calc(50% - 2px);
	height:calc(33.33% - 2px);
}

.blockListTypeReg{
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	width:calc(100% - 10px);
	height:40%;
	/* border:1px solid var(--charteSilverDark); */
	margin-left:10px;
	margin-right:10px;
}
.typeReg{
	width:calc(100% - 10px);
	height:50px;
	margin:5px;
	font-size:2em;
	
}
/* encaissement--------------------------------------- */
 .tableCarre {
	 display: flex;
	 justify-content: center;
	 flex-direction: column;
	 align-content: center;
	 align-items: center;
	 position: relative;
	 margin: 20px;
	 width: 100px;
	 height: 100px;
	 border-radius: 50%;
	 background-color: white;
 }
 .table {
	 display: flex;
	 position: relative;
	 justify-content: center;
	 align-content: center;
	 align-items: center;
	 width: 50px;
	 height: 60px;
	 z-index: 1;
	 font-size: 16px;
	 font-weight: bold;
	 background-color: white;
	 border-radius: 10px;
	 border: 1px solid black;
 }
 .point {
	 display: flex;
	 justify-content: center;
	 align-content: center;
	 align-items: center;
	 color: white;
	 font-size: 18px;
	 position: absolute;
	 top: -10px;
	 right: -10px;
	 border-radius: 50%;
	 width: 25px;
	 height: 25px;
	 background: orangered;
 }
 
 .pointResa {
	 display: flex;
	 justify-content: center;
	 align-content: center;
	 align-items: center;
	 color: white;
	 font-size: 18px;
	 position: absolute;
	 top: -10px;
	 right: -10px;
	 border-radius: 50%;
	 width: 25px;
	 height: 25px;
	 background: blue;
 }
 
 
 .chaise-haut {
	 width: 25px;
	 height: 20px;
	 border: 1px solid black;
	 border-radius: 100px 100px 0 0; /* Les deux premières valeurs définissent les rayons horizontaux, les deux dernières valeurs définissent les rayons verticaux */
	 overflow: hidden; /* Masque tout contenu dépassant de la zone du demi-cercle */
	 margin-bottom: -10px;
 }

 .chaise-bas {
	 width: 25px;
	 height: 20px;
	 border: 1px solid black;
	 border-radius: 0 0 100px 100px ; /* Les deux premières valeurs définissent les rayons horizontaux, les deux dernières valeurs définissent les rayons verticaux */
	 overflow: hidden; /* Masque tout contenu dépassant de la zone du demi-cercle */
	 margin-top: -10px;
 }
 
/* caisse client */
.caisseContente{
		display:flex;
	/* FLEX-WRAP:wrap; */
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	width:100%;
	height:100%;
	
	/* border:1px solid red; */
}

.caisseContenteL{
		display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	width:100%;
	height:100%;
	
	/* border:1px solid red; */
}

.caisseContenteL img:nth-child(1){
	border-radius:50px;
}

.caisseContenteR{
		display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	width:100%;
	height:100%;
	
	/* border:1px solid blue; */
}

.caisseTdNom,.caisseTdPrix{
	font-size:20px;
	border-bottom:1px solid grey;
}

.caisseTdPrix{
	
}

.caisseTdPrix{

}

.caisseTotal{
	background-color:grey;
	width:100%;
	text-align:center;
	
	font-size:20px;
}

.caisseDivImg{
	width:100%;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	padding-top:10px;
}
/* caisse client */
/* commande Client client */
.cmdTitre1{
	width:100%;
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
}

.cmdTitre1 img:nth-child(1){
	width:20%;
	border-radius:10px;
}

.cmdTitre1 div:nth-child(2){
	width:80%;
	/* border:1px solid red; */
	text-align:center;
	font-size:20px;
}

.cmdTitre1 div:nth-child(3){
	width:100%;
	border-bottom:2px solid Green;
	text-align:center;
	font-size:20px;
}

.cmdListCate{
	display:flex;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	width: 100%; /* par exemple, 300px */
    white-space: nowrap; /* empêche le contenu de passer à la ligne */
    overflow-x: auto; 
	padding-bottom:8px;
	position: sticky;
	top:0px;
	z-index:2;
	background-color: var(--charteSilverLight);
}

.cmdButtonCate{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	/* min-width:120px; */
	width:auto;
	border-bottom:2px solid grey;
	height:60px;
	margin-top:5px;
	/* border-radius:5px; */
	padding-left:20px;
	padding-right:20px;
	
	font-size:15px;
	margin-right:5px;
}

.cmdButtonCateSelect{
	border-bottom:2px solid black;
}

.cmdButtonProduit{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	width:70%;
	border-bottom:1px solid grey;
	height:100px;
	margin-top:5px;
	/* border-radius:20px; */
	padding-left:20px;
	padding-right:20px;
	
}


.cmdButtonImg{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	width:30%;
	border-bottom:1px solid grey;
	height:100px;
	margin-top:5px;
	
}

.cmdButtonImg div:nth-child(1){
	/* border:1px solid red; */
	margin:5px;
	width:calc(100% - 10px);
	height:calc(100% - 10px);
	border-radius:10px;
	background-color:white;
	
		display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
}

.cmdButtonImg div:nth-child(1) i{font-size:50px; color:var(--charteBlue);}

.cmdTitre2{
width:100%;
display:flex;
ALIGN-ITEMS:center;
ALIGN-CONTENT:center;
justify-content :center;

	/* border-bottom:2px solid Green; */
	font-size:20px;	

}

.cmdProduitPrix{
	/* border:1px solid red; */
	width:100%;
	text-align:left;
	font-size:12px;
	height:20px;
	margin-top:5px;
}

.cmdProduitDetail{
	/* border:1px solid red; */
	width:100%;
	text-align:left;
	font-size:12px;
	height:20px;
}
.cmdProduitNom{
	/* border:1px solid red; */
	width:100%;
	height:auto;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	text-align:left;
}

.cmdGlobal{
		display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	width:100%;
}
/* commande Client client */
.TitreCate{
	width:100%;
	border-bottom:2px solid black;
	font-size:20px;
	text-align:center;
}

/* plan de salle --------------------------------------- */
/* L'overlay est en position:fixed pour occuper tout l'ecran, alors que .popup5
   ne couvre que les 60% gauche de la caisse. Il reste enfant de #popup5 : les
   closePopup(5) existants continuent donc de le masquer. */
.planTableFull{
	position:fixed;
	top:0px; left:0px; right:0px; bottom:0px;
	z-index:9000;
	background:var(--charteSilverLight);
	display:flex;
	flex-direction:column;
	overflow:hidden;
}

.planTableBarre{
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px 10px;
	background:white;
	border-bottom:2px solid var(--charteSilver);
	flex-shrink:0;
}
.planTableTitre{
	font-size:20px;
	font-weight:bold;
	color:var(--charteBlue);
	white-space:nowrap;
}
.planTableZones{
	display:flex;
	gap:6px;
	flex:1;
	overflow-x:auto;
	padding:2px;
}
.planTableZone{
	border:2px solid var(--charteSilver);
	background:white;
	border-radius:8px;
	padding:8px 16px;
	font-size:16px;
	font-weight:bold;
	color:var(--charteSilverDark);
	cursor:pointer;
	white-space:nowrap;
	flex-shrink:0;
}
.planTableZoneActive{
	border-color:var(--charteBlue);
	background:var(--charteBlueSky);
	color:var(--charteBlue);
}
.planTableZonePlus{
	width:46px;
	padding:8px 0px;
	font-size:22px;
	line-height:1;
}
.planTableActions{
	display:flex;
	gap:6px;
	flex-shrink:0;
}
.planTableBtn{
	border:2px solid var(--charteSilver);
	background:white;
	border-radius:8px;
	padding:10px 14px;
	font-size:16px;
	font-weight:bold;
	cursor:pointer;
	white-space:nowrap;
}
.planTableBtnVert{
	border-color:var(--charteGreenDark);
	background:var(--charteGreenLight);
	color:var(--charteGreenDark);
}
.planTableBtnRouge{
	border-color:var(--charteRed);
	background:var(--charteRedLight);
	color:white;
}
.planTableBtnZone{ border-color:var(--charteBlue); color:var(--charteBlue); }
.planTableBtnFermer{ font-size:22px; padding:8px 14px; }

.planTableScene{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	padding:8px;
	min-height:0;
}
.planTableGrille{
	position:relative;
	background:white;
	border:1px solid var(--charteSilver);
	border-radius:6px;
}
/* la trame n'apparait qu'en edition : en service elle parasiterait la lecture */
.planTableGrilleEdition{
	background-image:
		linear-gradient(to right, #E8EAED 1px, transparent 1px),
		linear-gradient(to bottom, #E8EAED 1px, transparent 1px);
}

/* empreinte : conteneur transparent qui reserve aussi la place des chaises */
.planTableItem{
	position:absolute;
	cursor:pointer;
	user-select:none;
	touch-action:none;          /* indispensable : sinon le tactile scrolle au lieu de deplacer */
	box-sizing:border-box;
}
/* plateau : la table elle-meme, en retrait de la marge des chaises */
.planTableCorps{
	position:absolute;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border:2px solid var(--charteSilverDark);
	background:white;
	font-weight:bold;
	color:black;
	box-sizing:border-box;
	overflow:hidden;
}
.planTableChaise{
	position:absolute;
	border:1px solid var(--charteSilverDark);
	background:var(--charteSilverLight);
	border-radius:3px;
	box-sizing:border-box;
}
.planTableRonde{ border-radius:50%; }
.planTableRect{ border-radius:8px; }
.planTableNum{ line-height:1.1; }
.planTableCouverts{ color:var(--charteSilverDark); font-weight:normal; line-height:1.1; }

.planTableOccupee{
	background:var(--charteGreenLight);
	border-color:var(--charteGreenDark);
}
.planTableActive{
	background:var(--charteRed);
	border-color:var(--charteRed);
	color:white;
}
.planTableActive .planTableCouverts{ color:white; }
.planTableDrag{
	opacity:0.85;
	box-shadow:0 6px 18px rgba(0,0,0,0.35);
	z-index:50;
}
.planTablePoint{
	position:absolute;
	top:-2px; right:-2px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:24px; height:24px;
	border-radius:50%;
	background:orangered;
	color:white;
	font-size:14px;
}

.planTableAide{
	flex-shrink:0;
	padding:4px 10px;
	font-size:14px;
	color:var(--charteSilverDark);
	text-align:center;
	min-height:20px;
}

/* fiche d'edition d'une table */
.planTableFiche{
	display:none;
	position:absolute;
	top:0px; left:0px; right:0px; bottom:0px;
	background:rgba(0,0,0,0.5);
	z-index:9100;
	align-items:center;
	justify-content:center;
}
.planTableFicheBoite{
	background:white;
	border-radius:12px;
	padding:18px;
	width:min(460px, 92vw);
	max-height:92vh;
	overflow:auto;
	box-shadow:0 12px 40px rgba(0,0,0,0.35);
}
.planTableFicheTitre{
	font-size:20px;
	font-weight:bold;
	color:var(--charteBlue);
	margin-bottom:12px;
}
.planTableChamp{
	display:block;
	margin-bottom:12px;
	font-size:15px;
	font-weight:bold;
	color:var(--charteSilverDark);
}
.planTableChamp input,
.planTableChamp select{
	display:block;
	width:100%;
	margin-top:4px;
	padding:12px;
	font-size:18px;
	border:2px solid var(--charteSilver);
	border-radius:8px;
	box-sizing:border-box;
}
.planTableFormes{ display:flex; gap:8px; margin-top:4px; }
.planTableForme{
	flex:1;
	border:2px solid var(--charteSilver);
	background:white;
	border-radius:8px;
	padding:12px;
	font-size:16px;
	font-weight:bold;
	cursor:pointer;
}
.planTableFormeActive{
	border-color:var(--charteBlue);
	background:var(--charteBlueSky);
	color:var(--charteBlue);
}
.planTableFicheBoutons{
	display:flex;
	gap:8px;
	justify-content:space-between;
	margin-top:16px;
}
/* plan de salle --------------------------------------- */

/* Choix du caissier (screen2) : titre + boutons 3 par ligne, sans deborder du panneau */
.choixCaissierBlock{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	flex:1;
	min-height:0;
	overflow-y:auto;
	overflow-x:hidden;
}
.choixCaissierBlock .titre1{
	width:calc(100% - 10px);
}

/* =================================================================
   Encaissement modernise (prefixe .enc) - popup5 (saisie) + popup2 (recap)
   ================================================================= */
.popup5:has(> .encWrap),.popup2:has(> .encWrap){padding:0; border:0; background:transparent;}
.encWrap{
	--encBlue:#005c9f; --encGreen:#0a7d24; --encRed:#C12B44; --encOrange:#d97706;
	--encInk:#1f2937; --encMuted:#6b7280; --encLine:#e5e7eb; --encBg:#f4f5f7;
	display:flex; flex-direction:column; gap:12px;
	width:100%; height:100%; padding:14px;
	background:var(--encBg); border:1px solid #d6dae0; border-radius:12px;
	color:var(--encInk); font-size:16px;
}
/* neutralise les regles globales de la caisse (* : 12px, overflow:auto, flex-wrap...) */
.encWrap,.encWrap *{box-sizing:border-box; flex-wrap:nowrap; align-items:stretch; align-content:normal; overflow:visible; font-size:inherit;}
.encWrap{overflow:hidden;}
.encWrap *:not(i){font-family:'Poppins',sans-serif;}
.encWrap button{cursor:pointer; margin:0;}
.encWrap button:disabled{cursor:default;}

.encHead{display:flex; align-items:center; justify-content:space-between; width:100%; flex:none;}
.encHead h2{margin:0; font-size:22px; font-weight:600;}
.encHead small{display:block; font-size:13px; font-weight:300; color:var(--encMuted);}
.encClose{width:44px; height:44px; border-radius:50%; border:0; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); font-size:22px; color:var(--encMuted);}

.encBody{display:flex; gap:14px; flex:1; min-height:0; width:100%;}
.encCol{display:flex; flex-direction:column; gap:12px; min-height:0; min-width:0;}
.encColPave{flex:1.15;}
.encColModes{flex:1;}
.encCard{background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:14px; width:100%; flex:none;}
.encLabel{font-size:13px; color:var(--encMuted); font-weight:300; margin-bottom:4px;}

.encMontant{display:flex; align-items:center; gap:6px; border:2px solid var(--encBlue); border-radius:12px; padding:6px 8px 6px 16px; background:#f8fbff;}
.encMontant input{flex:1; min-width:0; width:100%; height:56px; border:0; background:transparent; font-size:40px; font-weight:600; letter-spacing:-.5px; color:var(--encBlue); padding:0; text-align:right;}
.encMontant span{font-size:40px; font-weight:600; color:var(--encBlue);}
.encMontant button{width:44px; height:44px; flex:none; border:0; border-radius:10px; background:#e8eef5; color:var(--encBlue); font-size:20px;}

.encChips{display:flex; gap:8px; margin-top:10px;}
.encChip{flex:1; min-width:0; height:46px; border-radius:10px; border:1px solid var(--encLine); background:#fff; font-size:14px; font-weight:600; color:var(--encInk);}
.encChip em{font-style:normal; font-weight:300; color:var(--encMuted); margin-left:4px;}
.encChip:active{border-color:var(--encBlue); background:#eaf2fa; color:var(--encBlue);}
.encChip:disabled{opacity:.45;}

.encPave{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:8px; flex:1; min-height:0;}
.encPave button{border:0; border-radius:12px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.10); font-size:28px; font-weight:600; color:var(--encInk); min-height:44px;}
.encPave button:active{background:#e8eef5;}
.encPave .encKeySoft{background:#eef0f3; color:var(--encMuted); font-size:24px;}

.encModes{display:grid; grid-template-columns:1fr; grid-auto-rows:minmax(44px,60px); align-content:start; gap:8px; flex:none; min-height:0;}
.encMode{display:flex; align-items:center; gap:12px; border:0; border-radius:12px; color:#fff; font-size:16px; font-weight:600; padding:0 16px; min-height:44px; text-align:left; box-shadow:0 2px 4px rgba(0,0,0,.12);}
.encMode:active{filter:brightness(.9);}
.encMode i{width:24px; text-align:center; font-size:19px; align-self:center;}
.encMode small{margin-left:auto; font-size:12px; font-weight:300; opacity:.9; align-self:center;}
.encHint{font-size:12px; color:var(--encMuted); font-weight:300; text-align:center; flex:none;}

.encTotaux{display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:none;}
.encTot{background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.08);}
.encTot b{display:block; font-size:20px; font-weight:600;}
.encReste{border-radius:14px; padding:14px 16px; color:#fff; background:var(--encOrange); flex:none;}
.encReste .encLabel{color:rgba(255,255,255,.9);}
.encReste b{display:block; font-size:38px; font-weight:600; line-height:1.1;}
.encReste.ok{background:var(--encGreen);}
.encTrop{font-size:13px; font-weight:300; margin-top:4px;}
.encBar{height:8px; border-radius:4px; background:rgba(255,255,255,.35); margin-top:10px; overflow:hidden;}
.encBar div{height:100%; background:#fff; border-radius:4px;}

.encListe{display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; overflow-y:auto;}
.encListe h3{margin:4px 0 0; font-size:14px; font-weight:600; color:var(--encMuted);}
.encReg{display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px; padding:8px 8px 8px 10px; box-shadow:0 1px 3px rgba(0,0,0,.08); flex:none;}
.encBadge{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; flex:none;}
.encReg .nom{flex:1; min-width:0; font-size:16px; font-weight:600;}
.encReg .mt{font-size:18px; font-weight:600; margin-right:4px;}
.encBtnIco{width:46px; height:46px; border-radius:10px; border:1px solid var(--encLine); background:#fff; font-size:18px; color:var(--encInk); flex:none;}
.encBtnIco.dup{font-size:22px; font-weight:600; color:var(--encBlue); border-color:#c9dcef; background:#f3f8fd;}
.encBtnIco.del{color:var(--encRed); border-color:#f3c3cc; background:#fff5f7;}
.encVide{font-size:14px; color:var(--encMuted); font-weight:300; text-align:center; padding:20px;}

.encValider{width:100%; height:68px; flex:none; border:0; border-radius:14px; font-size:22px; font-weight:600; color:#fff; background:var(--encGreen); box-shadow:0 3px 6px rgba(10,125,36,.3);}
.encValider:disabled{background:#d1d5db; color:#6b7280; box-shadow:none;}

/* ecrans plus etroits (tablette, 1024px) */
@media (max-width:1200px){
	.encWrap{padding:10px; gap:10px;}
	.encBody{gap:10px;}
	.encMontant input,.encMontant span{font-size:30px;}
	.encMode{font-size:14px; padding:0 12px; gap:10px;}
	.encMode i{font-size:17px; width:22px;}
	.encMode small{display:none;}
	.encPave button{font-size:24px;}
	.encReste b{font-size:30px;}
	.encTot b{font-size:17px;}
	.encValider{font-size:18px; height:60px;}
	.encChip{font-size:12px;}
}
/* ecrans peu hauts */
@media (max-height:700px){
	.encHead small{display:none;}
	.encCard{padding:10px;}
	.encMontant input{height:44px;}
	.encChip{height:38px;}
	.encValider{height:52px;}
}

/* =================================================================
   Compatibilite tablette - caisse uniquement (index.php : <html class="caisseApp">)
   ================================================================= */
/* La caisse est un ecran d'application : la page elle-meme ne defile jamais.
   100vw / 100vh comptent la barre de defilement et la barre d'adresse des tablettes :
   1 pixel de trop faisait apparaitre deux barres en cascade. Les popups et listes gardent leur defilement. */
html.caisseApp, html.caisseApp body{width:100%; height:100%; overflow:hidden; overscroll-behavior:none;}
html.caisseApp .main{width:100%; height:100%;}
/* toucher : pas de flash gris, pas de zoom au double appui, pas de selection de texte au doigt */
html.caisseApp body{-webkit-tap-highlight-color:transparent;}
html.caisseApp button{touch-action:manipulation; -webkit-user-select:none; user-select:none;}
/* ecrans tactiles : on fait defiler au doigt, les barres de defilement sont masquees */
@media (pointer:coarse){
	html.caisseApp *{scrollbar-width:none;}
	html.caisseApp *::-webkit-scrollbar{display:none;}
}

/* =================================================================
   Programmation de la commande (prefixe .prg) - popup2, bouton Timer
   ================================================================= */
.popup2:has(> .prgWrap){padding:0; border:0; background:transparent;}
.prgWrap{
	--prgBlue:#005c9f; --prgGreen:#0a7d24; --prgRed:#C12B44;
	--prgInk:#1f2937; --prgMuted:#6b7280; --prgLine:#e5e7eb; --prgBg:#f4f5f7;
	display:flex; flex-direction:column; gap:12px;
	width:100%; height:100%; padding:14px;
	background:var(--prgBg); border:1px solid #d6dae0; border-radius:12px;
	color:var(--prgInk); font-size:16px;
}
/* neutralise les regles globales de la caisse (* : 12px, overflow:auto, flex-wrap...) */
.prgWrap,.prgWrap *{box-sizing:border-box; flex-wrap:nowrap; align-items:stretch; align-content:normal; overflow:visible; font-size:inherit;}
.prgWrap{overflow:hidden;}
.prgWrap *:not(i){font-family:'Poppins',sans-serif;}
.prgWrap button{cursor:pointer; margin:0;}

.prgHead{display:flex; align-items:center; justify-content:space-between; flex:none;}
.prgHead h2{margin:0; font-size:21px; font-weight:600;}
.prgHead small{display:block; font-size:13px; font-weight:300; color:var(--prgMuted);}
.prgClose{width:44px; height:44px; flex:none; border-radius:50%; border:0; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); font-size:22px; color:var(--prgMuted);}

.prgResume{flex:none; border-radius:14px; padding:12px 16px; color:#fff; background:var(--prgBlue);}
.prgResume .prgLabel{font-size:13px; font-weight:300; opacity:.9;}
.prgResume b{display:block; font-size:28px; font-weight:600; line-height:1.15;}
.prgResume small{display:block; font-size:14px; font-weight:300; opacity:.95;}
.prgResume.alerte{background:var(--prgRed);}

.prgCorps{display:flex; flex-direction:column; gap:14px; flex:1; min-height:0; overflow-y:auto; padding-right:2px;}
.prgSection{display:flex; flex-direction:column; gap:8px; flex:none;}
.prgTitre{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; font-weight:600; color:var(--prgMuted);}
.prgTitre input[type=date]{height:36px; border:1px solid var(--prgLine); border-radius:8px; background:#fff; padding:0 8px; font-size:14px; color:var(--prgInk);}

.prgJours{display:grid; grid-template-columns:repeat(5,1fr); gap:6px;}
.prgJours button{height:52px; border:1px solid var(--prgLine); border-radius:10px; background:#fff; font-size:13px; font-weight:600; color:var(--prgInk); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; padding:0 2px;}
.prgJours button em{font-style:normal; font-weight:300; font-size:12px; color:var(--prgMuted);}
.prgJours button.on{background:var(--prgBlue); border-color:var(--prgBlue); color:#fff;}
.prgJours button.on em{color:rgba(255,255,255,.85);}

.prgHeure{display:flex; align-items:center; gap:6px;}
.prgHeure button{width:58px; height:56px; flex:none; border:0; border-radius:12px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.10); font-size:18px; font-weight:600; color:var(--prgBlue);}
.prgHeure button:active{background:#e8eef5;}
.prgHeure input{flex:1; min-width:0; height:56px; border:2px solid var(--prgBlue); border-radius:12px; background:#f8fbff; text-align:center; font-size:30px; font-weight:600; color:var(--prgBlue); padding:0 4px;}

.prgDelais{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.prgDelais button{height:52px; border:1px solid var(--prgLine); border-radius:10px; background:#fff; font-size:13px; font-weight:600; color:var(--prgInk); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; padding:0 2px;}
.prgDelais button em{font-style:normal; font-weight:300; font-size:12px; color:var(--prgMuted);}
.prgDelais button.on{background:var(--prgBlue); border-color:var(--prgBlue); color:#fff;}
.prgDelais button.on em{color:rgba(255,255,255,.85);}

.prgSwitch{display:flex; align-items:center; gap:12px; flex:none; background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.08); cursor:pointer;}
.prgSwitch input{position:absolute; opacity:0; width:0; height:0;}
.prgSlider{position:relative; width:50px; height:28px; flex:none; border-radius:14px; background:#d1d5db; transition:background .15s; align-self:center;}
.prgSlider::after{content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s;}
.prgSwitch input:checked + .prgSlider{background:var(--prgRed);}
.prgSwitch input:checked + .prgSlider::after{left:25px;}
.prgSwitchTxt{font-size:15px; font-weight:600; display:flex; flex-direction:column;}
.prgSwitchTxt small{font-size:12px; font-weight:300; color:var(--prgMuted);}

.prgPied{display:flex; gap:10px; flex:none;}
.prgDefaut{flex:1; height:60px; border:1px solid var(--prgLine); border-radius:14px; background:#fff; font-size:16px; font-weight:600; color:var(--prgMuted);}
.prgValider{flex:2; height:60px; border:0; border-radius:14px; background:var(--prgGreen); color:#fff; font-size:20px; font-weight:600; box-shadow:0 3px 6px rgba(10,125,36,.3);}

@media (max-width:1200px){
	.prgWrap{padding:10px; gap:10px;}
	.prgResume b{font-size:23px;}
	.prgJours button,.prgDelais button{font-size:12px; height:48px;}
	.prgHeure button{width:48px;}
	.prgHeure input{font-size:24px;}
	.prgValider{font-size:18px;}
	.prgDefaut{font-size:14px;}
}

/* =================================================================
   Textes adaptatifs (caisse) : la taille des textes suit la zone qui contient
   les boutons (unites cqw / cqh), bornee par clamp(min, ..., max).
   Calibre pour donner les tailles d'origine en 1366x768. Un navigateur trop ancien
   ignore ces valeurs et garde les tailles fixes declarees plus haut.
   ================================================================= */
html.caisseApp .screen1,
html.caisseApp .screen3,
html.caisseApp .screen3Left,
html.caisseApp .screen3Right{container-type:size;}

/* grille produits : une tuile = 20% x 20% de .screen1 */
html.caisseApp .buttonProduit{font-size:14.4px; font-size:clamp(9px, min(3.75cqh, 1.76cqw), 22px); line-height:1.15; overflow-wrap:break-word; padding:0 2px;}
/* tuiles basses (tablette 8", telephone) : la TVA laisse la place au nom et au prix */
@container (max-height:320px){
	html.caisseApp .buttonProduitTva{display:none;}
}
/* ligne tailles / pages / recherche (20% de la hauteur de .screen1) */
html.caisseApp .contentPagination .buttonNextPage{font-size:clamp(9px, min(3.13cqh, 1.47cqw), 18px); line-height:1.1;}
html.caisseApp .contentPagination .buttonNextPage i{font-size:clamp(14px, min(7.8cqh, 3.66cqw), 30px) !important;}

/* bloc du bas : barre de recherche client, categories, menu */
html.caisseApp .screen3{--s3Top:clamp(26px, 10.42cqh, 40px); --s3Btn:clamp(110px, 30cqw, 200px);}
html.caisseApp .screen3Top{height:var(--s3Top);}
html.caisseApp .screen3Left,
html.caisseApp .screen3Right{height:calc(100% - var(--s3Top));}
html.caisseApp .popup3{top:var(--s3Top);}
html.caisseApp .screen3Top>input{width:calc(100% - var(--s3Btn) - 2px); font-size:clamp(12px, 4.69cqh, 18px);}
html.caisseApp .newClientButton{width:var(--s3Btn); font-size:clamp(11px, 4.17cqh, 16px);}

/* categories : 1/3 x 20% de .screen3Left */
html.caisseApp .buttonCate{font-size:clamp(9px, min(4.19cqh, 3.19cqw), 20px); line-height:1.15; overflow-wrap:break-word; padding:0 2px;}
html.caisseApp .buttonCate.catePagination{font-size:clamp(14px, min(8.4cqh, 6.4cqw), 32px);}
/* menu : 1/3 x 20% de .screen3Right */
html.caisseApp .buttonAdmin{font-size:clamp(8px, min(3.49cqh, 3.25cqw), 17px); line-height:1.15; overflow-wrap:break-word; padding:0 2px;}

/* --- Panneau ticket (screen2) : unite --u = 12px en 1366x768, reduite avec le panneau (8px mini) --- */
html.caisseApp .screen2{container-type:size;}
html.caisseApp .screen2 *{--u:clamp(8px, min(2.2cqw, 1.57cqh), 16px);}
/* base de tous les textes du panneau (remplace le * {12px} global ; les tailles en em suivent) */
:where(html.caisseApp .screen2) *{font-size:var(--u);}
/* tailles fixes en px converties en multiples de --u */
html.caisseApp .screen2 .titre1{font-size:calc(var(--u)*1.67); height:calc(var(--u)*3.33);}
html.caisseApp .screen2 .boutonChoixCaissier{font-size:calc(var(--u)*1.5); height:calc(var(--u)*8.33);}
html.caisseApp .screen2 .caisseClientInfo4 > span:first-child{font-size:calc(var(--u)*1.17) !important;}
html.caisseApp .screen2 .caisseClientInfo4 > span:first-child span{font-size:1em;}
html.caisseApp .screen2 .caisseClientInfo5>button{height:calc(var(--u)*3.33);}
html.caisseApp .screen2 .caisseClientInfo5>button>i{font-size:calc(var(--u)*1.67);}
html.caisseApp .screen2 .caisseClientBlock{min-height:calc(var(--u)*10.5);}
html.caisseApp .screen2 .ligneCaisse{min-height:calc(var(--u)*2.92);}
html.caisseApp .screen2 .ligneCaisseNom{width:calc(100% - var(--u)*15);}
html.caisseApp .screen2 .ligneCaissePrix{width:calc(var(--u)*4.17);}
html.caisseApp .screen2 .ligneCaisseButton{width:calc(var(--u)*3.33); height:calc(var(--u)*2.92);}
html.caisseApp .screen2 .ligneCaisseButton i{font-size:calc(var(--u)*1.25);}
html.caisseApp .screen2 .caisseTtc{height:calc(var(--u)*2.33); align-items:center;}
html.caisseApp .screen2 .caisseTtc div{line-height:1.1;}
html.caisseApp .screen2 .blockButtonEncaissement{height:calc(var(--u)*10.25);}
html.caisseApp .screen2 .blockButtonEncaissement>button{line-height:1.15;}
html.caisseApp .screen2 .kdFont10{font-size:calc(var(--u)*0.83) !important;}
html.caisseApp .screen2 .kdFont14{font-size:calc(var(--u)*1.17) !important;}
html.caisseApp .screen2 .kdFont16{font-size:calc(var(--u)*1.33) !important;}
html.caisseApp .screen2 .kdFont30{font-size:calc(var(--u)*2.5) !important;}
html.caisseApp .screen2 .h40{height:calc(var(--u)*3.33);}
html.caisseApp .screen2 .h25{height:calc(var(--u)*2.08);}

/* --- Barre recherche client : textes proportionnels a sa hauteur --- */
html.caisseApp .screen3Top>input{font-size:clamp(10px, calc(var(--s3Top)*0.45), 18px);}
html.caisseApp .newClientButton{font-size:clamp(9px, calc(var(--s3Top)*0.4), 16px);}
/* la liste des articles prend toute la hauteur restante : Total + reglements restent en bas,
   quelle que soit la taille de l'en-tete (avant : height calc(100% - 119px - 158px) en px fixes) */
html.caisseApp .screen2 > *{flex-shrink:0;}
html.caisseApp .screen2 > .caisseArticles{flex:1 1 auto; height:auto; min-height:0;}

/* =================================================================
   Encaissement : partage de la note par article (mode « Par article »)
   ================================================================= */
.encSeg{display:flex; gap:4px; padding:4px; border-radius:12px; background:#e5e7eb; flex:none;}
.encSeg button{flex:1; height:40px; border:0; border-radius:9px; background:transparent; font-size:14px; font-weight:600; color:var(--encMuted);}
.encSeg button.on{background:#fff; color:var(--encBlue); box-shadow:0 1px 3px rgba(0,0,0,.12);}
.encColArticles{flex:1.6;}
.encArts{display:flex; flex-direction:column; gap:6px; flex:1; min-height:0; overflow-y:auto;}
.encArt{display:flex; align-items:center; gap:10px; flex:none; background:#fff; border:2px solid transparent; border-radius:12px; padding:6px 8px; box-shadow:0 1px 3px rgba(0,0,0,.08);}
.encArt .info{flex:1; min-width:0;}
.encArt .info b{display:block; font-size:15px; font-weight:600;}
.encArt .info small{display:block; font-size:12px; font-weight:300; color:var(--encMuted);}
.encArt .info small.reste{color:var(--encOrange); font-weight:600;}
.encArt .info small.paye{color:var(--encGreen); font-weight:600;}
.encArt.sel{border-color:var(--encBlue); background:#f3f8fd;}
.encArt.done{opacity:.55;}
.encParts{display:flex; gap:4px; flex:none;}
.encParts button{min-width:42px; height:40px; padding:0 6px; border:1px solid var(--encLine); border-radius:9px; background:#fff; font-size:14px; font-weight:600; color:var(--encInk);}
.encParts button.on{background:var(--encBlue); border-color:var(--encBlue); color:#fff;}
.encParts button:disabled{opacity:.3;}
.encArt .px{width:72px; flex:none; text-align:right; font-size:15px; font-weight:600;}
.encArtRemise{flex:none; font-size:13px; font-weight:300; color:var(--encMuted); padding:4px 10px;}
.encSelTot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex:none; border-radius:12px; padding:10px 14px; background:var(--encBlue); color:#fff;}
.encSelTot span{font-size:13px; font-weight:300; min-width:0;}
.encSelTot b{font-size:26px; font-weight:600; white-space:nowrap;}
.encRegDet{display:block; font-size:11px; font-weight:300; color:var(--encMuted);}
.encBtnIco.vide{border:0; background:transparent;}
@media (max-width:1200px){
	.encArt{gap:6px; padding:6px 8px;}
	.encArt .info b{font-size:13px;}
	.encParts button{min-width:34px; height:36px; font-size:12px; padding:0 4px;}
	.encArt .px{width:60px; font-size:13px;}
	.encSelTot b{font-size:20px;}
}
/* ticket (panneau de droite) : part deja reglee de l'article */
.badgePartReglee{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px; background:#d97706; color:#fff; font-size:0.75em; font-weight:600; vertical-align:middle;}
.badgePartReglee.ok{background:#0a7d24;}

/* partage par article : montant touchable pour saisie libre */
.encArt .px.saisie{cursor:pointer; border-bottom:1px dashed #9ca3af; padding:4px 2px;}
.encArt.sel .px.saisie{border-bottom-color:var(--encBlue); color:var(--encBlue);}
.encPxInput{width:100%; height:34px; border:2px solid var(--encBlue); border-radius:8px; background:#fff; text-align:right; font-size:15px; font-weight:600; color:var(--encBlue); padding:0 6px;}

/* =================================================================
   Fiche client (prefixe .cli) - popup2, newClient() / upClient()
   ================================================================= */
.popup2:has(> .cliWrap){padding:0; border:0; background:transparent;}
.cliWrap{
	--cliBlue:#005c9f; --cliGreen:#0a7d24; --cliRed:#C12B44; --cliInk:#1f2937; --cliMuted:#6b7280; --cliLine:#e5e7eb; --cliBg:#f4f5f7;
	display:flex; flex-direction:column; gap:12px; width:100%; height:100%; padding:14px;
	background:var(--cliBg); border:1px solid #d6dae0; border-radius:12px; color:var(--cliInk); font-size:15px;
}
.cliWrap,.cliWrap *{box-sizing:border-box; flex-wrap:nowrap; align-items:stretch; align-content:normal; overflow:visible; font-size:inherit;}
.cliWrap{overflow:hidden;}
.cliWrap *:not(i){font-family:'Poppins',sans-serif;}
.cliWrap button{cursor:pointer; margin:0;}
.cliHead{display:flex; align-items:center; justify-content:space-between; flex:none;}
.cliHead h2{margin:0; font-size:21px; font-weight:600;}
.cliHead small{display:block; font-size:12px; font-weight:300; color:var(--cliMuted);}
.cliClose{width:44px; height:44px; flex:none; border-radius:50%; border:0; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); font-size:22px; color:var(--cliMuted);}
.cliCorps{display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; overflow-y:auto; padding:2px;}
.cliCarte{display:flex; flex-direction:column; gap:8px; flex:none; background:#fff; border-radius:14px; padding:12px; box-shadow:0 1px 3px rgba(0,0,0,.08);}
.cliTitre{font-size:13px; font-weight:600; color:var(--cliMuted); display:flex; align-items:center; gap:8px;}
.cliTitre i{color:var(--cliBlue); width:16px; text-align:center;}
.cliLigne{display:flex; gap:8px;}
.cliLigne > .cliChamp{flex:1; min-width:0;}
.cliLigne > .cliCp{flex:0 0 35%;}
.cliChamp{display:flex; flex-direction:column; gap:3px;}
.cliChamp span{font-size:12px; font-weight:600; color:var(--cliMuted);}
.cliChamp span em{font-style:normal; font-weight:300;}
.cliChamp input,.cliChamp textarea{width:100%; height:44px; border:1px solid #d1d5db; border-radius:10px; background:#fff; padding:0 12px; font-size:16px; color:var(--cliInk); outline:none;}
.cliChamp textarea{height:auto; min-height:58px; padding:8px 12px; resize:vertical;}
.cliChamp input:focus,.cliChamp textarea:focus{border-color:var(--cliBlue); box-shadow:0 0 0 3px rgba(0,92,159,.15);}
.cliChamp.erreur input,.cliChamp.erreur textarea{border-color:var(--cliRed); box-shadow:0 0 0 3px rgba(193,43,68,.15);}
.cliChamp.erreur span{color:var(--cliRed);}
.cliDoublon{display:none; flex:none; border-radius:12px; padding:10px 12px; background:#fff8e1; border:1px solid #f0c36d;}
.cliDoublon.on{display:flex; flex-direction:column; gap:8px;}
.cliDoublonTitre{font-size:13px; font-weight:600; color:#a16207;}
.cliDoublonClient{display:flex; align-items:center; gap:10px;}
.cliDoublonClient > div{flex:1; min-width:0;}
.cliDoublonClient b{display:block; font-size:14px; font-weight:600;}
.cliDoublonClient small{display:block; font-size:12px; font-weight:300; color:var(--cliMuted);}
.cliDoublonClient button{flex:none; height:38px; padding:0 12px; border:0; border-radius:9px; background:var(--cliBlue); color:#fff; font-size:13px; font-weight:600;}
.cliSupprimer{flex:none; align-self:center; height:40px; padding:0 16px; border:1px solid #f3c3cc; border-radius:10px; background:#fff5f7; color:var(--cliRed); font-size:13px; font-weight:600;}
.cliPied{display:flex; gap:10px; flex:none;}
.cliAnnuler{flex:1; height:58px; border:1px solid var(--cliLine); border-radius:14px; background:#fff; font-size:16px; font-weight:600; color:var(--cliMuted);}
.cliEnregistrer{flex:2; height:58px; border:0; border-radius:14px; background:var(--cliGreen); color:#fff; font-size:19px; font-weight:600; box-shadow:0 3px 6px rgba(10,125,36,.3);}
/* bloc client professionnel (facture B2B) : ferme tant que la case n'est pas cochee */
.cliProBascule{display:flex; align-items:center; gap:10px; min-height:32px; cursor:pointer;}
.cliProBascule input{width:24px; height:24px; flex:none; margin:0; accent-color:var(--cliBlue); cursor:pointer;}
.cliProBascule .cliTitre em{font-style:normal; font-weight:300;}
.cliPro .cliProCorps{display:none; flex-direction:column; gap:8px;}
.cliPro.on .cliProCorps{display:flex;}
.cliProRecherche{align-items:flex-end;}
.cliProChercher{flex:none; height:44px; padding:0 14px; border:0; border-radius:10px; background:var(--cliBlue); color:#fff; font-size:14px; font-weight:600;}
.cliProChercher:disabled{opacity:.45; cursor:default;}
.cliProInfo small{font-size:12px; opacity:.85;}
.cliProRouge{color:#b91c1c; font-weight:600;}
.cliProInfo{display:none; border-radius:9px; padding:7px 10px; background:#ecfdf3; color:#166534; font-size:13px;}
.cliProInfo.on{display:block;}
.cliProInfo.erreur{background:#fff8e1; color:#a16207;}
.cliSousTitre{margin-top:4px; font-size:12px; font-weight:600; color:var(--cliMuted);}
.cliSousTitre em{font-style:normal; font-weight:300;}
.cliBadgePro{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:6px; background:#005c9f; color:#fff; font-size:11px; font-weight:700; letter-spacing:.5px; vertical-align:middle; cursor:default;}
@media (max-width:1200px){
	.cliWrap{padding:10px; gap:10px;}
	.cliCarte{padding:10px;}
	.cliChamp input{height:40px; font-size:15px;}
	.cliEnregistrer{font-size:17px;}
}