body, html{
	margin:0;
	padding:0;
	background: #FFFFFF;

	font-family: arial, sans-serif;
	font-size: 20px;

/*	font-family: bio-sans, sans-serif;*/
	font-family: "roboto", sans-serif;


	--activeColor: #0A5DCE;
	--accentColor: #0A5DCE;
	--maxWidth: 1600px;
}

	body>header{
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		height: 100px;
		bottom: 0;

		background: #252525;
		color: #eaeaec;

		display: flex;
		flex-direction: column;

		position: fixed;
		top: 0;
		left: 0;

		z-index: 100;
	}

		body>header>h1{
			position: absolute;
			top: 0;
			left: 20px;
			line-height: 100px;
			margin: 0;
			padding: 0;

			background: url(medias/logo2x.png);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: 0 50%;
			text-indent: -1000px;
			margin: 10px 0;
			height: 80px;
			width: 100px;
		}

			body>header>h1>a{
				display: block;
				width: 100%;
				height: 100%;
				border:0;
				text-decoration: none;
			}

				body>header>h1>a>span{
					position: absolute;
					bottom: 0;
					left: 50px;
					font-size: 12px;
					color: #D9DADC;
					text-transform: uppercase;
					font-weight: bold;
					text-indent: 0;
					line-height: 1em;
				}

		body>header>nav{
			position: absolute;
			top: 0;
			right: 0;
			flex: auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			font-size: 15px;
/*			align-items: center;*/
/*			justify-content: center;*/
		}

			body>header>nav>ul{
				display: flex;
				list-style: none;
				margin: 0;
				padding: 0 10px;
				line-height: 50px;
				
				border-bottom-left-radius: 20px;
			}

			body>header>nav>ul:first-child{
				background: #444444;
				color: #FFF;
			}

				body>header>nav>ul>li{
					display: block;
					margin: 0 10px;
				}

					body>header>nav>ul>li>a{
						color: inherit;
						text-decoration: none;
					}
					body>header>nav>ul>li>a:hover{
						color: #FFFFFF;
						text-decoration: underline;
					}
					
				body>header>nav>ul>li.active{
					
				}

					body>header>nav>ul>li.active>a{
/*						color: var(--activeColor);*/
						color: #FFFFFF;
						font-weight: bold;
					}

a{
	text-decoration: none;
	color: inherit;
}
a:hover,
.js .click:hover a:not(.ajax):not(.sub){
	text-decoration: underline;
	color: var(--accentColor);
}

.js .click:hover:has(a.ajax:hover) a:not(.ajax),
.js .click:hover:has(a.sub:hover) a:not(.sub){
	text-decoration: none;
	color:inherit;
}



	body>main{
		margin-top: 100px;
/*		position: absolute;
		top: 100px;
		left: 0;
		bottom: 0;
		right: 0;*/

		background: #FFFFFF;
	}
	body>main:first-child{
		left: 0;
	}

		body>main>header{
			position: relative;
			background: #D9DADC;
			padding: 0 20px;
			margin: 0px;
		}

			body>main>header>div{
				margin: 0 auto;
				max-width: var(--maxWidth);
				padding: 20px;
	
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

				body>main>header>div>div{

				}

					body>main>header>div>div>h2,
					body>main>header>div>div>h3{
						margin: 0;
						padding: 0;
					}

					body>main>header>div>div>a{
						font-size: 12px;
						font-weight: bold;
						text-transform: uppercase;
						color: inherit;
						line-height: 1em;
					}

		body>main>div{
			margin: 0 auto;
			max-width: var(--maxWidth);
			padding: 20px;
			min-height: calc(100vh - 100px - 106px - 74px - 40px);
		}


		body>main>footer{
			position: relative;
			background: #D9DADC;
			background: rgba(204, 204, 204, 0.8);
			padding: 0 20px;
			margin: 0px;

			-webkit-backdrop-filter: saturate(180%) blur(10px);
			backdrop-filter: saturate(180%) blur(10px);

			position: sticky;
			bottom: 0;
		}

			body>main>footer>div{
				margin: 0 auto;
				max-width: var(--maxWidth);
				padding: 20px;
	
				display: flex;
				justify-content: end;
				align-items: center;
			}

				body>main>footer>div>div{

				}

					body>main>footer>div>div>h2,
					body>main>footer>div>div>h3{
						margin: 0;
						padding: 0;
					}

					body>main>footer>div>div>a{
						font-size: 12px;
						font-weight: bold;
						text-transform: uppercase;
						color: inherit;
						line-height: 1em;
					}


.js .click{
	cursor: pointer;
}
.js .click:hover{
	background:#D9DADC;
}

.js [data-orderby]{
	cursor: pointer;
}


form{

}
body form.autosubmit button{
	display: none;
}

	div.halfs{
		display: flex;
		align-items: start;
		flex-wrap: wrap;
		margin: 0 -10px;
	}

		div.halfs>*{
			flex: 1 1 calc(50% - 20px);
			width: 50%;
			box-sizing: border-box;
			margin-left: 10px;
			margin-right: 10px;
		}

		div.halfs>*.smaller{
			flex: 1 1 calc(30% - 20px);
			width: 30%;
		}

		div.halfs>*.smallest{
			flex: 0 1 calc(20% - 20px);
			width: 20%;
			min-width: 250px;
		}



		form div.halfs>label:first-child,
		form div.halfs>.label:first-child{
			margin-top: 10px;
		}

	div.thirds{
		display: flex;
		align-items: start;
		flex-wrap: wrap;
		margin: 0 -10px;
	}

		div.thirds>*{
			flex: 1 1 calc(33% - 20px);
			width: 30%;
			box-sizing: border-box;
			margin-left: 10px;
			margin-right: 10px;
		}
		div.thirds>*.double{
			flex: 1 1 calc(66% - 15px);
			width: 60%;
			box-sizing: border-box;
		}


		form div.thirds>label:first-child,
		form div.thirds>.label:first-child{
			margin-top: 10px;
		}


/*	form .half{
		margin-top:10px;
		display: flex;
		justify-content: stretch;
		flex-gap:20px;
		gap:20px;
	}
	form .half:first-child{
		margin-top: 0;
	}

		form .half>*{
			flex: auto;
		}
*/
	form label,
	.label{
		display: block;
		position: relative;
		padding-top: 20px;
		margin-top: 10px;
	}
	form label:first-child,
	.label:first-child{
		margin-top: 0;
	}

	form label>.deleteEmail{
		position: absolute;
		top: 0;
		right: 0;
		font-size: 12px;
		text-transform: uppercase;
		opacity: .5;
		color: #cf3b0a;
		text-decoration: underline;
		cursor: pointer;
		font-weight: bold;
	}
	form label>.deleteEmail:hover{
		opacity: 1;
	}

/*		form label>.label,*/
		form label>input[type=text],
		form label>input[type=email],
		form label>input[type=tel],
		form label>input[type=password],
		form label>input[type=date],
		form label>textarea,
		form label>.fake,
/*		.label>.label,*/
		.label>input[type=text],
		.label>input[type=email],
		.label>input[type=tel],
		.label>input[type=password],
		.label>input[type=date],
		.label>textarea,
		.label>.fake{
			width: 100%;
			box-sizing: border-box;
			height: 27px;

			border:1px solid #000000;
			padding: 5px 10px;
		}

		form label>.fake,
		.label>.fake{
			height: auto;
		}

		form label>.fake:empty::before,
		.label>.fake:empty::before{
			content: " ";
			display: inline-block;
		}

		form label>.fake.textarea,
		.label>.fake.textarea{
			height: auto;
			min-height: 100px;
		}


			form label>.fake a,
			.label>.fake a{
/*				text-decoration: underline;*/
				color: var(--accentColor);
				pointer-events: auto;
				position: relative;
				z-index: 3;
			}

		.noclick{
			pointer-events: none;
			position: relative;

			-webkit-user-select: none;  
			-moz-user-select: none;    
			-ms-user-select: none;      
			user-select: none;
		}

			.noclick::before{
				content: "";
				display: block;
				background: rgba(255,255,255,0.05);
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
			}

		form label>textarea,
		.label>textarea{
			height: 84px;
			display: block;
		}

		form label>textarea[name=note2],
		.label>textarea[name=note2]{
			height: 141px;
		}

		form label>span,
		.label>span{
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			font-size: 12px;
/*			line-height: 1em;*/
			font-weight: bold;
			text-transform: uppercase;
		}

		form.search label>span{
			white-space: nowrap;
			overflow: hidden;
			width: 100%;
			text-overflow: ellipsis;
		}

		form>button{
			margin-top: 30px;
/*			width: 100%;*/
		}
		form>button:hover{
			background:#FFFFFF;
		}

	form .select{
		position: relative;
		display: block;
		border:1px solid black;
		line-height: 25px;
		height: 25px;
	}

		form .select>select{
			display: block;
			width: 100%;
			height: 100%;
			border:none;
			border-radius: 0;
			height: 25px;
			background: transparent;
			-webkit-appearance:none;
			padding: 0 10px;
			padding-right: 35px;
		}

		form .select::before{
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			display: block;
			width: 25px;
			height: 25px;
			background: #000;
			color: #FFF;
			width: 25px;
			font-size: 12px;
			line-height: 25px;
			text-align: center;
/*			transform: rotate(90deg);*/
			pointer-events: none;
			background-image: url(medias/triangle.svg);
			background-size: 10px auto;
			background-position: 50% 50%;
			background-repeat: no-repeat;
		}

	form ul.list{
		list-style: none;
		margin: 0;
		padding: 0;
		display: inline-block;
	}

		form ul.list{
			display: inline-block;
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}

			form ul.list>li{
				display: inline-block;
				border:1px solid black;
				border-radius: 3px;
			}

				form ul.list>li>label{
					margin: 0;
					padding: 0;
				}

					form ul.list input{
						display: none;
					}

					form ul.list div{
						font-size: 0;
						padding: 5px;
					}
						form ul.list div::before{
							text-indent: 0;
							display: block;
							font-size: 32px;
						}

					form ul.list li:hover div{
/*						background: #D9DADC;*/
						box-shadow: inset 0 0 0 3px #000;
						cursor: pointer;
					}

					form ul.list input:checked+div{
						background: var(--activeColor);
						color:#FFFFFF;
					}


form.search{
	display: flex;
/*	align-items: flex-end;*/
	margin: 0 -10px;
	border:2px solid #D9DADC;
	padding: 10px;
	border-radius: 10px;
/*	justify-content: stretch;*/
/*	align-items: stretch;*/
	align-items: flex-end;

	margin-bottom: 20px;
}

	form.search>*{
		margin: 0 10px;
		flex: auto;
	}

		form.search input[type=text]{
			display: block;
		}

div.table{
	margin-top: -15px;
}
	div.table::before{
		content: "";
		display: block;
		width: 100%;
		height: 15px;
		background: #FFFFFF;
		position: sticky;
		top: 100px;
		z-index: 2;
	}

table{
	width: 100%;
	border-collapse: collapse;
}

	table thead{
		
	}
	div.table table thead{
		position: sticky;
		top: 145px;
		z-index: 3;
	}
	div.table table thead:first-child{
		top: 105px;
	}

		table thead tr{
		}

			table thead tr th,
			table thead tr td{
				text-align: left;
				padding: 5px 10px;

				line-height: 30px;
				font-size: 12px;
				font-weight: bold;
				text-transform: uppercase;
			}
			table thead tr th{
				background:#DDDDDD;
				white-space: nowrap;
			}

			table thead tr th[data-orderby]>div{
				background-image: url(medias/orderby.svg);
				background-repeat: no-repeat;
				background-position: 100% 50%;
				background-size: 10px auto;
				padding-right: 15px;
			}

			table thead tr th>div.ASC/*,
			table thead tr th[data-orderby]>div:hover*/{
				background-image: url(medias/orderbyasc.svg);
			}

			table thead tr th>div.DESC/*,
			table thead tr th>div.ASC:hover*/{
				background-image: url(medias/orderbydesc.svg);
			}

			table thead tr th>div.ASC/*,
			table thead tr th>div.DESC:hover*/{
				background-image: url(medias/orderbyasc.svg);
			}


			table thead:first-child tr:first-child th{
				background:#444444;
				color: #FFFFFF;
			}
			table thead:first-child tr:first-child th:first-child{
				border-top-left-radius: 10px;
			}
			table thead:first-child tr:first-child th:last-child{
				border-top-right-radius: 10px;
			}
			table thead tr td{

			}

			table th.selectall:hover{
				text-decoration: underline;
/*				color: var(--accentColor);*/
				cursor: pointer;
			}

			table th.selectall:hover:empty::after{
				content: "Tous";
			}

	table tbody{

	}

		table tbody tr{

		}
		table tbody tr.active{
			background: rgba(10, 93, 207, 0.2);
		}
		.js table tbody tr.active.click:hover{
			background: rgba(10, 93, 207, 0.3);	
		}
		table tbody tr.state_archived{
			opacity: .5;
			background: #D9DADC;
		}
		table tbody tr.state_archived td,
		table tbody tr.state_archived th{
			border-left-color: #FFFFFF;
		}

			table tbody tr th,
			table tbody tr td{
				border-top: 2px solid #888888;
				padding: 10px;
				position: relative;
				border-left:2px solid #EEEEEE;
			}
			table tbody tr th:first-child,
			table tbody tr td:first-child{
				border-left: 0;
			}

			table tbody tr th{
				text-align: left;
				font-weight: normal;
				line-height: 1em;
			}
			table tbody tr td{
				line-height: 1em;
			}
			table tbody tr td.nowrap{
				white-space: nowrap;
			}
			table thead tr th.center,
			table tbody tr th.center,
			table tbody tr td.center{
				text-align: center;
			}


				table tbody tr th span,
				table tbody tr td span{
					line-height: 15px;
					font-size: 12px;
					text-transform: uppercase;
					line-height: 1em;
					display: block;
				}

				table tbody tr th span:first-child,
				table tbody tr td span:first-child{
					margin-bottom: 5px;
				}
				table tbody tr th span:last-child,
				table tbody tr td span:last-child{
					margin-top: 5px;
				}

				table tbody tr th a,
				table tbody tr td a{
					display: block;
				}
				table tbody tr th a+br,
				table tbody tr td a+br,
				table tbody tr th span+br,
				table tbody tr td span+br{
					display: none;
				}

					div.nb{
						float:right;
						background: #BBBBBB;
						font-size: 12px;
						font-weight: bold;
						text-transform: uppercase;
						line-height: 22px;
						width: 22px;
						text-align: center;
						border-radius: 20px;
					}

					th div.nb,
					td div.nb{
						float: none;
						position: absolute;
						top: 50%;
						right: 10px;
						transform: translateY(-50%);
					}

	.pager{
		position: sticky;
		bottom: 0;
		width: 100%;
		text-align: center;
		padding: 5px;
		background: rgba(255,255,255,.9);
		font-size: 12px;
/*		text-transform: uppercase;*/
/*		pointer-events: none;*/

		margin-top: 30px;

		-webkit-backdrop-filter: saturate(180%) blur(10px);
		backdrop-filter: saturate(180%) blur(10px);

		display: flex;
		justify-content: space-between;
	}

		.pager .disabled{
			opacity: .2;
		}
		.pager .pagerbutton{
			cursor: pointer;
		}

	div.presHeader{
		display: flex;
		position: relative;
	}

		div.presHeader>.name{
			flex: 1 1 auto;
		}

		div.presHeader span.nb{
			display: block;
			float: right;
			font-size: 10px;
			font-weight: bold;
			background: #000000;
			border-radius: 100%;
			color: #FFFFFF;
			width: 16px;
			height: 16px;
			text-align: center;
			line-height: 16px;
		}

		div.presHeader a.selectall{
			display: none;
			opacity: .5;
			font-size: 12px;
			font-weight: bold;
			text-transform: uppercase;
/*			margin-left: 10px;*/
		}

		div.presHeader a.selectall:hover{
			text-decoration: underline;
		}


		tr:hover div.presHeader a.selectall{
			display: block;
			cursor: pointer;
			position: absolute;
/*			top: 50%;*/
/*			transform: translateY(-50%);*/
/*			right: 0;*/
/*			background: rgba(255,255,255,.9);*/
			opacity: .3;
/*			padding: 5px 0;*/

			bottom: -15px;
			left: 0;
/*			right: 0;*/
/*			transform: translateX(100%);*/
			white-space: nowrap;
		}
		tr:hover div.presHeader a.selectall:hover{
			opacity: 1;
		}

button,
a.button{
	--color:#000000;

	display: inline-block;
	border:2px solid var(--color);
	border-radius:5px;
	line-height: 20px;
	padding: 5px 10px;
	color: #FFF;
	background: var(--color);
	text-decoration: none;
	font-weight: bold;
	font-size: 13px;
}
button.danger,
a.button.danger{
	--color:#cf3b0a;
}

button:hover,
a.button:hover{
	cursor: pointer;
	background: transparent;
	color: var(--color);
}

div.withInfo{
	display: flex;
	justify-content: space-between;
	margin: -20px;
	width: auto;
	height: 100%;
	height: calc(100% - 20px);
}

	div.withInfo>*{
		padding: 20px;
		box-sizing: border-box;
		overflow: auto;
	}

	div.withInfo>form{
		width:100%;
	}

	div.withInfo>aside{
		flex: 300px 0 0;
		background: #D9DADC;
	}

		div.withInfo>aside ul.logs{
			margin:0;
			padding: 0;
			display: block;
			list-style: none;

			margin-top: 20px;
		}

			div.withInfo>aside ul.logs>li{
				display: block;
				border-top:2px solid #FFF;
				padding: 10px 0;
			}

				div.withInfo>aside ul.logs>li>span{
					font-size: 12px;
					display: block;
					font-weight: normal;
					padding-bottom: 3px;
				}


table.stats{
	margin: 0 auto;
}

	table.stats tr{
		
	}

		table.stats tr td,
		table.stats tr th{
			padding: 5px;
		}

		table.stats tr td:first-child,
		table.stats tr th:first-child{
			border-radius: 5px 0 0 5px;
		}

		table.stats tr td:last-child,
		table.stats tr th:last-child{
			border-radius: 0 5px 5px 0;
		}

		table.stats tr th{
			text-align: left;
		}

	table.stats thead{
		
	}

		table.stats thead tr{
			
		}

			table.stats thead tr td,
			table.stats thead tr th{
				text-align: center;
			}

	table.stats tbody tr:nth-child(even){
		background: #D9DADC;
	}

		table.stats tbody tr td:nth-child(even),
		table.stats tbody tr th:nth-child(even){
			background: #D9DADC;
		}

		table.stats tbody tr:nth-child(even) td{
			
		}

		table.stats tbody tr:nth-child(even) td:nth-child(even),
		table.stats tbody tr:nth-child(even) th:nth-child(even){
			background: #DDD;
		}

		table.stats tbody tr:nth-child(odd):first-child td:nth-child(even),
		table.stats tbody tr:nth-child(odd):first-child th:nth-child(even){
			border-radius: 5px 5px 0 0;
		}

		table.stats tbody tr:nth-child(odd):last-child td:nth-child(even),
		table.stats tbody tr:nth-child(odd):last-child th:nth-child(even){
			border-radius: 0 0 5px 5px;
		}


table.grid{
	
}

	table.grid tbody th,
	table.grid tbody td{
		padding-top: 15px;
		padding-bottom: 20px;
	}



div#login{
	background: #D9DADC;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	max-width: none;
	height: 100vh;
	margin-top: -100px;
	padding: 0;
}

	div#login>form{
		padding: 20px;
		box-sizing: border-box;
		width: 80%;
		max-width: 320px;
		background: #FFFFFF;
		border-radius: 10px;
	}

		div#login>form::before{
			margin: -20px -20px 20px -20px;
			width: auto;
			height: 150px;
			background: #252525;
			content: "";
			display: block;
			background-image: url(medias/logo2x.png);
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: 100px auto;
			border-radius: 10px 10px 0 0;
		}



fieldset{
	border-radius:10px;
	border:2px solid #D9DADC;
	padding: 20px;
	margin: 0;
	margin-bottom: 20px;
}

	fieldset legend{
		font-size: 12px;
		text-transform: uppercase;
		font-weight: bold;
	}


fieldset#people{
	display: flex;	
}

	fieldset#people>aside{
		flex: 0 0 25%;
		margin: -20px 20px -20px -20px;
		margin-top:-26px;

		border-right: 2px solid #D9DADC;
		padding: 26px 0 20px 10px;
	}

		fieldset#people>aside>ul{
			list-style: none;
			margin: 0 0 20px 0;
			padding: 0;
			display: block;
		}

			fieldset#people>aside>ul>li{
				display: block;
				padding: 10px 0 10px 10px;
				border-radius: 10px 0 0 10px;
				position: relative;
				cursor: pointer;
				margin-top: 5px;
			}

			fieldset#people>aside>ul>li:first-child{
				margin-top: 0;
			}

				fieldset#people>aside>ul>li>span{
					font-size: 12px;
					font-weight: bold;
					display: block;
				}
				fieldset#people>aside>ul>li>span:empty{
					display:none;
				}

				fieldset#people>aside>ul>li>span.title{
					text-transform: uppercase;
				}

				fieldset#people>aside>ul>li>span.name{
					font-size: 20px;
					font-weight: normal;
				}

				fieldset#people>aside>ul>li>span.name:empty{
					display:block;
				}
					fieldset#people>aside>ul>li>span.name:empty::after{
						content:"Personne sans nom";
						font-style: italic;
						display: block;
						opacity: .8;
					}

				fieldset#people>aside>ul>li>span.phone{

				}

					fieldset#people>aside>ul>li>span.phone>span.phone2{
						display: inline-block;
					}

						fieldset#people>aside>ul>li>span.phone>span.phone2::before{
							content:"POSTE";
							font-size: .7em;
							margin-top: -1em;
							padding-right: .5em;
						}

					fieldset#people>aside>ul>li>span.phone>span.cell{
						display: inline-block;
					}
					fieldset#people>aside>ul>li>span.phone>span.phone2+span.cell{
						margin-left: 1em;
					}

						fieldset#people>aside>ul>li>span.phone>span.cell::before{
							content:"CELL";
							font-size: .7em;
							margin-top: -1em;
							padding-right: .5em;
						}

			fieldset#people>aside>ul>li:hover::after{
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border: 2px solid #D9DADC;
				border-radius: 10px 0 0 10px;
				border-right:0;
			}

			fieldset#people>aside>ul>li.active{
				background: #D9DADC;
			}

			fieldset#people>aside>ul>li.favorite{

			}

				fieldset#people>aside>ul>li.favorite::before{
					content: "★";
					display: block;
					position: absolute;
					top: 5px;
					right: 10px;
				}

		fieldset#people>aside>ul:empty{
/*			background: red;*/
		}

			fieldset#people>aside>ul:empty::after{
				content: "Rien à afficher";
				font-size: 12px;
				line-height: 15px;
				text-transform: uppercase;
				font-weight: bold;
/*				text-align: center;*/
				margin-right: 20px;
				margin-left: 10px;
				display: block;
				color: #BBB;
			}

		fieldset#people>aside>button{
			width: calc(100% - 30px);
			margin-left: 10px;

			position: sticky;
			bottom: 94px;

			box-shadow: 0 0 15px 5px #FFFFFF;
		}
		fieldset#people>aside>button:hover{
			background:#FFFFFF;
		}

	fieldset#people>textarea{
		display: none;
	}

	fieldset#people>div{
		flex: 1 1 auto;
		width: 100%;
	}

		fieldset#people>div>div{
			display: none;
		}

			fieldset#people>div>div>button{
				margin: 20px 0 0 auto;
				display: block;
			}

		fieldset#people>div>div.active{
			display: block;

			position: sticky;
			top: 120px;
		}

	fieldset#people>div:empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

		fieldset#people>div:empty::before,
		fieldset#people>div:empty::after{
				content: "Aucune personne liéée à l'entreprise.";
				font-size: 12px;
				line-height: 15px;
				text-transform: uppercase;
				font-weight: bold;
				text-align: center;
				display: block;
				color: #BBB;
		}
		fieldset#people>div:empty::after{
			content:"Appuyez sur « Ajouter une personne » à gauche pour ajouter une personne";
		}













fieldset#infos{
/*	display: flex;*/
/*	flex-direction: column;*/
}

	fieldset#infos>button{
/*		width: calc(100% - 30px);*/
		margin: 10px 0 0 auto;

		position: sticky;
		bottom: 94px;

		box-shadow: 0 0 15px 5px #FFFFFF;
	}
	fieldset#infos>button:hover{
		background:#FFFFFF;
	}

	fieldset#infos>textarea{
		display: none;
	}

	fieldset#infos>div{
		flex: 1 1 auto;
		width: 100%;
	}

		fieldset#infos>div>div{
			position: relative;
			display: flex;
			width: 100%;
/*			display: none;*/
		}

			fieldset#infos>div>div>label.label{
				flex: 1 1 40%;
				margin-right: 10px;
			}

			fieldset#infos>div>div>label.value{
				flex: 1 1 60%;
				margin-left: 10px;
			}


			fieldset#infos>div>div>.delete{
				display: none;
				position: absolute;
				top: 10px;
				right: 0;
/*				margin: 20px 0 0 auto;*/
/*				display: block;*/

				opacity: .5;
				color: #cf3b0a;

				font-size: 12px;
				text-transform: uppercase;
				font-weight: bold;
				text-decoration: underline;

				cursor: pointer;
			}

			fieldset#infos>div>div:hover>.delete{
				display: block;
			}

			fieldset#infos>div>div:hover>.delete:hover{
				opacity: 1;
			}

/*		fieldset#infos>div>div.active{
			display: block;

			position: sticky;
			top: 120px;
		}*/

	fieldset#infos>div:empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

		fieldset#infos>div:empty::before,
		fieldset#infos>div:empty::after{
				content: "Aucune information disponible";
				font-size: 12px;
				line-height: 15px;
				text-transform: uppercase;
				font-weight: bold;
				text-align: center;
				display: block;
				color: #BBB;
		}
		fieldset#infos>div:empty::after{
			content:"Appuyez sur « Ajouter un champ » pour ajouter une information";
		}





#clients{

}

	#clients>ul{
		display: block;
		margin: 0;
		padding: 0;
	}

		#clients>ul>li{
			display: flex;
			margin-top: 10px;
		}
		#clients>ul>li:first-child{
			margin-top: 0;
		}

		#clients>ul>li>*{
			flex: 1 1 20%;
			align-items: start;
			margin-left: 20px;
		}
		#clients>ul>li>*:first-child{
			margin-left: 0;
		}

		#clients>ul>li>div.name{
			flex: 0 0 30%;
			align-self: center;
		}

			#clients>ul>li>div.name label{
				margin: 0;
				display: flex;
				align-items: center;
			}

				#clients>ul>li>div.name input{
					margin-right: 10px;
					flex: 0 0 auto;
				}

				#clients>ul>li>div.name a.print{
					padding-left: .5em;
					text-decoration: none;
					opacity: .5;
					display: none;
				}	
				#clients>ul>li>div.name a.print:hover{
					opacity: 1;
				}
				#clients>ul>li>div.name input:checked+a.print{
					display: block;
				}

		#clients>ul>li>input{
			flex:0 0 auto;
			align-self: center;
		}

		#clients>ul>li>h2{
/*			margin: 0;*/
			padding: 0;
			height: 1em;
			line-height: 1em;
			align-self: center;

			font-size: 20px;
			font-weight: normal;
		}

		#clients>ul>li>div.note{
			flex: 0 0 50%;
		}

		#clients>ul>li>div.note,
		#clients>ul>li>div.more{
			opacity: .5;
		}

		#clients>ul>li:has(input:checked)>div.note,
		#clients>ul>li:has(input:checked)>div.more{
			opacity: 1;
		}



div.check{
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url(medias/check.svg);
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}



div#popup{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	background: #888888;
	background: rgba(237, 237, 237, 0.8);
	z-index: 999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

	div#popup>div{
		border-radius: 10px;
		border: 2px solid #000000;
		background: #FFFFFF;
		width: 75vw;
		max-width: 800px;
		min-width: 500px;
/*		height: 50vh;*/
		max-height: 75vh;
/*		position: relative;*/
		position: sticky;
		top: 0;
	}

		#closePopup{
			display: block;
			position: absolute;
			top: 0;
			right: 25px;
			padding: 0 25px;

			line-height: 75px;
			text-align: center;
/*			background: url(medias/x.svg);*/
/*			background-position: 50% 50%;*/
/*			background-repeat: no-repeat;*/
/*			color: transparent;*/
			cursor: pointer;
			z-index: 5;
		}
		#closePopup:hover{
			color: var(--accentColor);
		}

		div#popup>div>div{
			max-height: 100%;
			overflow: auto;
			padding: 0 45px;
			border-radius: 10px;
			box-sizing: border-box;
		}

			div#popup>div>div>header{
/*				border-bottom: 2px solid #000000;*/
				line-height: 75px;
				margin: 0 -45px;
				padding: 0 45px;
				position: sticky;
				top: 0;
				margin-bottom: 20px;
				z-index: 4;
				background: #D9DADC;
			}

				div#popup>div>div>header h2{
					margin: 0;
					padding: 0;
				}










/* custom dropdown */

.custom-dropdown {
	display: block;
	width: 100%;
	min-width: 250px;
	height: 100%;
	font-size: 11px;
	position: relative;
	z-index: 5;
}
.custom-dropdown+select{
	display: none !important;
}

	.custom-dropdown .preview {
/*		display: flex;*/
/*		width: 100%;*/
/*		height: 100%;*/
/*		align-items: center;*/
/*		box-sizing: border-box;*/
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 35px 0 10px;
/*		cursor: pointer;*/
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		height: 25px;
	}
	.custom-dropdown .preview.empty {
		opacity: .5;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		top: 100%;
		left: -1px;
		right: -1px;
		border: 1px solid #000000;
		background-color: #fff;
		z-index: 1;
		max-height: 200px;
		overflow-y: auto;
		box-shadow: 0 0 20px rgba(0,0,0,0.1);
	}
	.dropdown-content.visible {
		display: block;
	}

		/* Search input */
		.custom-dropdown .search-input {
			width: 100%;
			padding: 10px;
			border: 1px solid #ccc;
			box-sizing: border-box;

			position: sticky;
			top: 0;
			z-index: 3;
		}

		/* Options list */
		ul.options-list {
			list-style: none;
			padding: 0;
			margin: 0;
		}

			ul.options-list li {
				border-top: 1px solid black;
				margin: 0;
				padding: 0;
				display: flex;
				align-items: center;
			}

				ul.options-list li label {
					display: block;
					margin: 0;
					padding: 0px 10px;
					width: 100%;
					box-sizing: border-box;
				}
				ul.options-list li label:hover {
					background: #699dd0;
				}

					ul.options-list li label input{
						margin-right: 10px;
					}


			ul.options-list li.hidden {
				display: none;
			}

			ul.options-list li.optgroup {
				padding: 0;
				display: block;
			}

				ul.options-list li.optgroup>span{
					display: block;
					padding: 5px;
					background: #DDDDDD;
					font-weight: bold;
					text-transform: uppercase;
					font-size: 12px;
					position: sticky;
					top: 0;
					z-index: 2;
					border-bottom: 1px solid #000;
				}
				.searchable ul.options-list li.optgroup>span{
					top:35px;
				}

				ul.options-list li.optgroup ul{
					background:#FFFFFF;
					margin: 0;
					margin-top: -1px;
					padding: 0;
				}


#printlogo{
	display: none;
}

@media print{
	#printlogo{
		display: block;
		position: absolute;
		top: 5px;
		left: 10px;
		height: 50px;
		width: 46px;
		z-index: 2;
	}

	.noprint{
		display: none !important;
	}

	body, html{
		font-size:12px;
	}

	body>header{
		position: static;
		height: 60px;
		background: #D9DADC;
		border-bottom:2px solid #D9DADC;
	}

		body>header>h1{
			height: 40px;
/*			filter:drop-shadow(0 0 1px #252525) drop-shadow(0 0 2px #252525) drop-shadow(0 0 1px #252525) drop-shadow(0 0 2px #252525);*/
		}

			body>header>h1>a>span{
				left: 30px;
			}

	body>header>nav,
	body>main>header>div>div+div>a{
		display: none !important;
	}

	body>main{
		margin-top: 0;
	}

	body>main>header,
	div#popup>div>div>header{
		position: absolute;
		top: 0;
		left: 50px;
		height: 60px;
		right: 0;
		margin: 0;
		padding-left: 15px;
	}

		body>main>header>div{
			padding: 0;
			height: 60px;
			display: flex;
			align-content: center;
			border-bottom:2px solid #D9DADC;
		}

		body>main>div{
			padding: 10px;
		}

		fieldset{
			padding: 10px;
			margin-bottom: 10px;
		}
		form.search{
			padding: 5px;
/*			margin-bottom: 5px;*/
			margin-left: -5px;
			margin-right: -5px;
		}

		div.halfs{
			margin: 0 -5px;
		}

			div.halfs>*{
				flex: 1 1 calc(50% - 10px);
				margin-left: 5px;
				margin-right: 5px;
			}

		button,
		.pager{
			display: none;
		}

		div.table table thead,
		div.table::before{
			position: static;
		}




		body:has(#popup)>main>div,
		#closePopup{
			display: none !important;
		}

		div#popup,
		div#popup>div{
			position: static;
		}

		div#popup>div{
			position: static;
			width: 100%;
			max-width: none;
			min-width: none;
			border:0;
			border-radius: 0;
		}

		div#popup>div>div{
			padding: 10px;
		}

		div#popup>div>div>header{
			padding: 0 20px;
		}

			div#popup>div>div>header h2{
				height: 60px;
				display: flex;
				align-items: center;
			}
}