/* =================================== C */
/* graph thomas C */

.link {
	stroke: #999;
	stroke-width: 2px;
	marker-end: url(#arrow);
}

.pie-label {
	font-size: 8px;
	fill: #333;
	text-anchor: middle;
}

/* =================================== C */
/*
 * {

    outline: 1px dashed red;
} 
*/
/* =================================== C */
/* light: c ; dark: c +80 (50% opacity) */
:root {

	/* TOOLBOX  80 : 0.50 */
	--C1: #8E6E5380;
	--C2: #96A58280;
	--C3: #71889C80;
	--C4: #C8925380;
	--C5: #6C5A7A80;
	/* TOOLBOXBF : 0.75 */
	--C1: #8E6E53BF;
	--C2: #96A582BF;
	--C3: #71889CBF;
	--C4: #C89253BF;
	--C5: #6C5A7ABF;

	/* controle */
	--cCtrlF: #336699;
	--cCtrlB: #cccccc00;
	/*  opacité 0% */
	/* controle Hi */
	--cCtrlFhi: #336699;
	--cCtrlBhi: #FAFAD2;
	/* global */
	--bGlobal: #00000000;
	/*  background */
	--fGlobal: #336699;
	/*  foreground */
	/* special */
	--fLogo: #EEE;
	/*  logo evolaps */
	--CG: #FFFFFFBF;
	/* fieldset et details utilisent un gradient CG est la couleur premiere*/
	--CG2: #FAFAD2BF;
	/* makeitmove5 (la fenetre info) utilise un gradient CG2 est la couleur seconde*/

/*
	--image-play: url('../i/play.png');
	--image-pause: url('../i/pause.png');
	--image-stop: url('../i/stop.png');
	--image-rose: url('../i/rosevent.png');
	--image-copyright: url('../i/copyright.png');

	--image-l1: url('../i/1.png');
	--image-l2: url('../i/2.png');
	--image-l3: url('../i/3.png');
	--image-l4: url('../i/4.png');
	--image-l5: url('../i/5.png');
*/
	--image-tab1: url('../i/data.png');
	--image-tab2: url('../i/path.png');
	--image-tab3: url('../i/tree.png');
	--image-tab4: url('../i/metadata.png');
	--image-tab5: url('../i/library.png');
	--image-tab6: url('../i/analysis.png');
	--image-tab7: url('../i/manual.png');
}



@font-face {
	font-family: 'evolapsfont2';
	src: url('font/SFProDisplay-Thin.woff2') format('woff2'),
		url('font/SFProDisplay-Thin.woff') format('woff');
	font-weight: lighter;
	font-style: lighter;
}

@font-face {
	font-family: 'evolapsfont';
	src: url('font/SFProDisplay-Regular.woff2') format('woff2'),
		url('font/SFProDisplay-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}



@font-face {
	font-family: 'evolapsfontbold';
	src: url('font/SFProDisplay-Semibold.woff2') format('woff2'),
		url('font/SFProDisplay-Semibold.woff') format('woff');
}

@font-face {
	font-family: 'evolapsfont';
	src: local('-apple-system'),
		local('BlinkMacSystemFont'),
		local('Segoe UI'),
		local('Roboto'),
		local('Helvetica Neue'),
		local('Arial');
	font-weight: 400;
	font-style: normal;
}

.blinking-link {
	animation: blink 1s infinite;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}

a.documentation:link {
	text-decoration: none;
	color: #336699;
}

a.documentation:visited {
	text-decoration: none;
	color: #336699;
}

a.documentation:hover {
	text-decoration: none;
	color: #f5087b;
	font-weight: 800;
}

a.documentation:active {
	text-decoration: none;
	color: #f5087b;
}

a.documentation.clicked {
	color: #f5087b;
	font-weight: bold;
}

ul {
	padding-left: 20px;
	margin-left: 0;
}

.number-circle {
	display: inline-block;
	width: 15px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	border-radius: 50%;
	background-color: #33669980;
	color: white;
	font-size: 10px;
	font-family: evolapsfont;
}

html {
	background: var(--bGlobal);
	font: 10px evolapsfont;
	border: 0px solid grey;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
}

body {
	background: var(--bGlobal);
	font: 12px evolapsfont;
	margin: 0 auto;
	border: 0px solid grey;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
	width: 99%;
}
#rightpanel {
	background: linear-gradient(145deg, var(--CG), var(--CG2));

	background: transparent;	

	font-family: evolapsfont;
	font-size: 16px ;
	margin: 0 auto;
	border: 0px solid grey;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
	width: 99%;
	font-weight: lighter;
	
}
.evolapslabel {
	font: 12px evolapsfont;
	font-weight: lighter;

}
.bandeau {
	text-align: left;
	vertical-align: bottom;
	font: 14px evolapsfont;
	background: #EEE;
	width: 250px;
}

article {
	clear: both;
	border-top: 0px solid #998;
	border-bottom: 1px solid #998;
	font-weight: normal;
	letter-spacing: 0px;
	margin: 0 5px;
	padding: 5px 0;
	text-align: left;
}

p {
	width: 100%;
	/*font: 10px evolapsfont;*/
	font-style: normal;
	color: #29627e;
	font-weight: lighter;
}

.controlpanel {
	opacity: 1;
	border-width: 0px;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	width: 266px;
}

.headertab {
	clear: both;
	background-color: var(--bGlobal);
	color: var(--fGlobal);
	border-top: 0px dashed #998;
	border-bottom: Opx dashed #998;
	font-weight: bold;
	font: 14px evolapsfont;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 0px 0px;
	text-align: left;
	height: 20px;
	z-index: -10;
	width: 260px;
	background-color: transparent;

}

.headercontainer {
	width: 260px;
	position: relative;
	text-align: center;
	color: white;
	z-index: 1;
	font-weight: bold;
	font: 14px evolapsfont;
	background-color: transparent;
}

.headercentered {
	font: 12px evolapsfont;
	font-style: italic;
	color: var(--fGlobal);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -20%);
	z-index: 1;
	width: 260px;
	vertical-align: middle;
	background-color: transparent;
}

/* Styles pour le bouton */
.dropdown-btn {
	background-color: inherit;
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	padding: 5px 5px;
	transition: 0.3s;
	vertical-align: middle;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
}

/* Styles pour le menu déroulant (masqué par défaut) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

/* Styles pour les éléments du menu déroulant */
.dropdown-content-a {
	padding: 5px 5px;
	display: block;
	color: #336699;
	text-decoration: none;
	text-align: left;
}

/* Changement de couleur au survol */
.dropdown-content-a:hover {
	background-color: #ddd;
}

.tablinksmain {
	align-items: center;
	justify-content: center;
}

.overlay {
	position: absolute;
	top: 12px;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	/* Fond semi-transparent pour l'overlay */
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	/* Initialement invisible */
	transition: opacity 0.3s ease;
	/* Ajoute une transition fluide */
}

.containerf:hover .overlay {
	opacity: 1;
	/* Rend visible au survol */
}

.textbutton {
	font-family: evolapsfont;
	font-size: 10px;
	opacity: 1;
	color: #336699;
}

.containerf {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: transparent;
}

input[type="radio"] {
	vertical-align: middle;
}

.headeright {
	position: absolute;
	top: 8px;
	right: 16px;
}

.icontab {
	width: 30px;
	height: 30px;
	opacity: 0.9;
}

.icontabsmall1 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab1);
}

.icontabsmall2 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab2);
}

.icontabsmall3 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab3);
}

.icontabsmall4 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab4);
}

.icontabsmall5 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab5);
}

.icontabsmall6 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab6);
}

.icontabsmall7 {
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-tab7);
}

.info {
	width: 10px;
	height: 10px;
	opacity: 0.6;
	vertical-align: middle;
	z-index: 1;
}

a.tooltip {
	position: relative;
	z-index: 1;
}

.tooltip {
	z-index: 1;
}

.contolsecond {
	display: none;
}

a.tooltip::before {
	content: attr(data-tip);
	font-family: evolapsfont;
	font-size: 10px;
	font-weight: lighter;
	position: absolute;
	z-index: 1;
	/*white-space:nowrap;*/
	top: 9999px;
	left: 5px;
	background: #606d7a;
	color: white;
	padding: 3px 3px;
	/*line-height: 24px;*/
	/*height: 48px;*/
	width: 80px;
	opacity: 0;
	border-radius: 3px;
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-o-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
}

a.tooltip:hover::before {
	opacity: 0.9;
	top: +15px;
	z-index: 1;
	transform: translateX(-20%);
}

.uilogo {
	width: 40px;
	padding: 2px 2px 2px 2px;
	opacity: 0.9;
	border: 0;
	text-align: center;
	border-radius: 3px;
	background: rgb(205, 218, 231);
}

nav {
	width: 100%;
	padding-left: .5rem;
	margin-left: .5rem;
	float: left;
	color: #29627e;
}

.multiselect-container>li>a>label {
	padding: 4px 20px 3px 20px;
}

input {
	font: 12px evolapsfont;
	font-weight: lighter;
}

legend {
	color: #336699;
	font: 12px evolapsfont;
	font-weight: lighter;
}

label {
	font: 10px evolapsfont;
	color: #000;
	font-weight: normal;
	letter-spacing: 0px;
	text-align: left;
	vertical-align: middle;
}

#AAoutput {
	overflow: auto;
	overflow-y: auto;
	/* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	background: #00000000;
	color: var(--fGlobal);
	color: #000;
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin-left: 15px;
	margin-top: 15px;
	padding: 0px 0;
	text-align: left;
	width: 220px;
	height: 40px;
	font: 10px evolapsfont;
	outline: none;
}

#infodiv {
	width: calc(100% - 10px);
	color: var(--cCtrlF);
	background: transparent;
	white-space: pre-line;
	/* Permet le retour à la ligne */
	font: 11px evolapsfont;
	text-align: left;
	pointer-events: none;
	/* Permet de cliquer à travers */
	padding: 5px;
}

#makeitmove5 {
	position: absolute;
	resize: both;
	background: linear-gradient(145deg, var(--CG), var(--CG2));
	/* 
		background: #FAFAD280;
	*/
	overflow: hidden;
	text-align: left;
	width: 254px;
	height: 200px;
	border: 0px;
	border-radius: 10px;
	margin: 5px;
	padding: 5px;
	z-index: 9999999;
	overflow: auto;
	overflow-y: auto;
	/* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);


}

#handle5 {
	background: linear-gradient(45deg, #cfd8dc 20%, #eee 50%);
	opacity: 1;
	height: 7px;
	cursor: move;
	text-align: left;
	text-align: left;
	font-size: 6px;
	background: transparent;
	z-index: 9999999;
}



#ClusterSetList {
	overflow: auto;
	scrollbar-width: thin;
	background: var(--c3light);
	color: var(--fGlobal);
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 200px;
	height: 40px;
	font: 10px evolapsfont;
	outline: none;
}

#selectvariablestoleaves {
	overflow: auto;
	overflow-y: auto;
	/* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	/*background: var(--c3light); */
	color: var(--fGlobal);
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 200px;
	height: 40px;
	font: 10px evolapsfont;
	outline: none;
}
#searchpatternlist {
	overflow: auto;
	overflow-y: auto;
	overflow-x: auto;

	/* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	/*background: var(--c3light); */
	color: var(--fGlobal);
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 200px;
	height: 80px;
	font: 10px evolapsfont;
	outline: none;
}
#scenariolist {
	overflow: auto;
	overflow-y: auto;
	overflow-x: auto;
	/* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	color: var(--fGlobal);
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	/*
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	*/
	padding: 10px;
	text-align: left;
	width: 220px;
	height: 60px;
	font: 10px evolapsfont;
	outline: none;
}

#layerlist {
	overflow: auto;
	overflow-y: auto;
	/* Activez la barre de défilement verticale si nécessaire */
	overflow-x: auto;
	/* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	/*background: var(--c1light); */
	color: #336699;
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 220px;
	height: 80px;
	font: 10px evolapsfont;
	outline: none;
}

#cameraviewlist {
	overflow: auto;
	overflow-y: auto;
	/* Activez la barre de défilement verticale si nécessaire */
	overflow-x: auto;
	/* Activez la barre de défilement verticale si nécessaire */
	scrollbar-width: thin;
	/*background: var(--c1light); */
	color: var(--fGlobal);
	clear: both;
	border: 0;
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	scroll-behavior: smooth;
	letter-spacing: 0px;
	margin: 0 0px;
	padding: 0px 0;
	text-align: left;
	width: 220px;
	height: 80px;
	font: 10px evolapsfont;
	outline: none;
}

.datepicker {
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	border-top: 1px solid #336699;
	border-bottom: 1px solid #336699;
	border-left: 1px solid #336699;
	border-right: 1px solid #336699;
	border-radius: 3px;
	font: 12px evolapsfont;
}

.datepicker:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);

}

.legend1 {
	color: #336699;
}

.fieldset {
	padding-top: 10px;
	/* descend le texte */
	/* ou */
	/* padding-bottom: 4px;   remonte le texte */
}

/* =================================== C1 */
.detailsC1-L1 {
	background: linear-gradient(145deg, var(--CG), var(--C1));
	color: var(--cCtrlF);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 12px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 252px;
	font-weight: bold;
	text-align: left;
}

.detailsC1-L1 summary {
	text-align: left;
	font: 12px evolapsfontbold;
	color: var(--cCtrlF);
}

.detailsC1-L2 {
	background: linear-gradient(145deg, var(--CG), var(--C1));
	color: var(--cCtrlF);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 11px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 240px;
	font-weight: bold;
	text-align: left;
}

.detailsC1-L2 summary {
	text-align: left;
	font: 11px evolapsfontbold;
	color: var(--cCtrlF);
}

.detailsC1-L3 {
	background: linear-gradient(145deg, var(--CG), var(--C1));
	color: var(--cCtrlF);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	border-left: 0px solid #eee;
	border-right: 0px solid #eee;
	opacity: 1;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	margin: 3px;
	border-radius: 5px;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 228px;
	font: 10px evolapsfont;
}

.detailsC1-L3>summary {
	text-align: left;
	list-style-type: none;
	cursor: pointer;
	font: 10px evolapsfont;
	color: var(--cCtrlF);

}

.fieldsetC1-L2 {
	background: linear-gradient(145deg, var(--CG), var(--C1));
	color: var(--cCtrlF);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;
	font: 11px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 240px;

}

.fieldsetC1-L2 legend {
	color: var(--cCtrlF);
	font: 11px evolapsfontbold;
	padding: 3px 3px;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
	/* padding-bottom: 12px; remonte le texte */
	padding-top: 14px;
	/* descend le texte */
}

.fieldsetC1-L3 {
	color: var(--cCtrlF);
	background: linear-gradient(145deg, var(--CG), var(--C1));
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	color: var(--fGlobal);
	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	border-left: 0px solid #eee;
	border-right: 0px solid #eee;
	border-radius: 5px;
	font: 10px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 228px;
}

.fieldsetC1-L3 legend {
	color: var(--cCtrlF);

	font: 10px evolapsfont;
	padding: 3px 3px;
	font-weight: light;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
	/* padding-bottom: 12px; remonte le texte */
	padding-top: 14px;
	/* descend le texte */
}

/* ===================================*/

/* =================================== C2 */
.detailsC2-L1 {

	background: linear-gradient(145deg, var(--CG), var(--C2));
	color: var(--cCtrlF);


	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 12px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 252px;
	font-weight: bold;
	text-align: left;
}

.detailsC2-L1 summary {
	text-align: left;
	font: 12px evolapsfontbold;
	color: var(--cCtrlF);

}

.detailsC2-L2 {

	background: linear-gradient(145deg, var(--CG), var(--C2));
	color: var(--cCtrlF);

	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 11px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 240px;
	font-weight: bold;
	text-align: left;
}

.detailsC2-L2 summary {
	text-align: left;
	font: 11px evolapsfontbold;
	color: var(--cCtrlF);

}

.detailsC2-L3 {
	background: linear-gradient(145deg, var(--CG), var(--C2));
	color: var(--cCtrlF);

	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	border-left: 0px solid #eee;
	border-right: 0px solid #eee;
	opacity: 1;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	margin: 3px;
	border-radius: 5px;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 228px;
	font: 10px evolapsfont;
}

.detailsC2-L3>summary {
	text-align: left;
	list-style-type: none;
	cursor: pointer;
	font: 10px evolapsfont;
	color: var(--cCtrlF);

}

.fieldsetC2-L2 {

	background: linear-gradient(145deg, var(--CG), var(--C2));
	color: var(--cCtrlF);

	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;
	font: 11px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 240px;
}

.fieldsetC2-L2 legend {
	color: var(--cCtrlF);

	font: 11px evolapsfontbold;
	padding: 3px 3px;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
	/* padding-bottom: 12px; remonte le texte */
	padding-top: 14px;
	/* descend le texte */
}

.fieldsetC2-L3 {

	background: linear-gradient(145deg, var(--CG), var(--C2));
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	color: var(--cCtrlF);

	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	border-left: 0px solid #eee;
	border-right: 0px solid #eee;
	border-radius: 5px;
	font: 10px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 228px;

}

.fieldsetC2-L3 legend {
	color: var(--cCtrlF);

	font: 10px evolapsfont;
	padding: 3px 3px;
	font-weight: light;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
	/* padding-bottom: 12px; remonte le texte */
	padding-top: 14px;
	/* descend le texte */
}

/* =================================== */

/* =================================== C3 */
.detailsC3-L1 {

	background: linear-gradient(145deg, var(--CG), var(--C3));
	color: var(--cCtrlF);

	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 12px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 252px;
	font-weight: bold;
	text-align: left;
}

.detailsC3-L1 summary {
	text-align: left;
	font: 12px evolapsfontbold;
	color: var(--cCtrlF);

}

.detailsC3-L2 {

	background: linear-gradient(145deg, var(--CG), var(--C3));
	color: var(--cCtrlF);

	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 11px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 240px;
	font-weight: bold;
	text-align: left;
}

.detailsC3-L2 summary {
	text-align: left;
	font: 11px evolapsfontbold;
	color: var(--cCtrlF);

}

.detailsC3-L3 {
	background: linear-gradient(145deg, var(--CG), var(--C3));
	color: var(--cCtrlF);

	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	border-left: 0px solid #eee;
	border-right: 0px solid #eee;
	opacity: 1;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	margin: 3px;
	border-radius: 5px;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 228px;
	font: 10px evolapsfont;
}

.detailsC3-L3>summary {
	text-align: left;
	list-style-type: none;
	cursor: pointer;
	font: 10px evolapsfont;
	color: var(--cCtrlF);

}

.fieldsetC3-L3 {

	background: linear-gradient(145deg, var(--CG), var(--C3));
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	color: var(--cCtrlF);

	border-top: 0px solid #eee;
	border-bottom: 0px solid #eee;
	border-left: 0px solid #eee;
	border-right: 0px solid #eee;
	border-radius: 5px;
	font: 10px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 228px;
}

.fieldsetC3-L3 legend {
	color: var(--cCtrlF);

	font: 10px evolapsfont;
	padding: 3px 3px;
	font-weight: light;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
	/* padding-bottom: 12px; remonte le texte */
	padding-top: 14px;
	/* descend le texte */
}

/* =================================== */

/* =================================== C4*/
.detailsC4-L1 {

	background: linear-gradient(145deg, var(--CG), var(--C4));
	color: var(--cCtrlF);


	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 12px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 252px;
	font-weight: bold;
	text-align: left;
}

.detailsC4-L1 summary {
	text-align: left;
	font: 12px evolapsfontbold;
	color: var(--cCtrlF);

}

.detailsC4-L2 {

	background: linear-gradient(145deg, var(--CG), var(--C4));
	color: var(--cCtrlF);

	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 11px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 240px;
	font-weight: bold;
	text-align: left;
}

.detailsC4-L2 summary {
	text-align: left;
	font: 11px evolapsfontbold;
	color: var(--cCtrlF);

}


.fieldsetC4-L2 {

	background: linear-gradient(145deg, var(--CG), var(--C4));
	color: var(--cCtrlF);

	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;
	font: 11px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 240px;
}

.fieldsetC4-L2 legend {
	color: var(--cCtrlF);

	font: 11px evolapsfontbold;
	padding: 3px 3px;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
	/* padding-bottom: 12px; remonte le texte */
	padding-top: 14px;
	/* descend le texte */
}

/* =================================== */

/* =================================== C5 */
.detailsC5-L1 {

	background: linear-gradient(145deg, var(--CG), var(--C5));
	color: var(--cCtrlF);


	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	border-top: 0px solid var(--c0dark);
	border-bottom: 0px solid var(--c0dark);
	border-left: 0px solid var(--c0dark);
	border-right: 0px solid var(--c0dark);
	border-radius: 5px;
	font: 12px evolapsfont;
	padding: 3px 3px;
	margin: 3px 3px;
	width: 252px;
	font-weight: bold;
	text-align: left;
}

.detailsC5-L1 summary {
	text-align: left;
	font: 12px evolapsfontbold;
	color: var(--cCtrlF);

}

/* =================================== */











details>summary {
	text-align: center;
	list-style-type: none;
	cursor: pointer;
	font: 12px evolapsfont;
}

.mainframe {
	border: 1px solid rgb(22, 79, 134, 0.3);
	border-radius: 1px;
}

header {
	clear: both;
	background: linear-gradient(#aaa, #eee);
	color: #336699;
	border-top: 0px dashed #998;
	border-bottom: Opx dashed #998;
	font-weight: bold;
	font: 10px evolapsfont;
	letter-spacing: 0px;
	margin: 0px 0px;
	padding: 2px 2px;
	text-align: left;
	height: 40px;
}

#phy {
	font: 30px evolapsfont;
	color: #336699;
	font-weight: normal;
	letter-spacing: 0px;
	display: inline;
	text-align: left;
	vertical-align: top;
}

#transview {
	font: 30px evolapsfont;
	color: #333;
	font-weight: normal;
	display: inline;
	letter-spacing: 0px;
	opacity: 0.7;
	vertical-align: middle;
}

#sequentialcolorscale {
	border-radius: 5px;
}



.buttonplay2 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	margin: 0px 0px;
	padding: 0px 0px;
	opacity: 1;
}

.infoplay {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 1;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-play);
}

.infopause {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 1;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-pause);
}

.infopausescenario {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 1;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-pause);
}

.infoplayscenario {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 1;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-play);
}

.infostop {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 1;
	padding: 0px 0px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-stop);
}

.infoplay4 {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 1;
	padding: 3px 3px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-rose);
}

.mapboxcopyright {
	width: 20px;
	height: 20px;
	border: none;
	margin: 0px 0px;
	background-color: transparent;
	opacity: 0.8;
	padding: 3px 3px;
	cursor: pointer;
	vertical-align: middle;
	content: var(--image-copyright);
}

.buttonplaynew {
	padding: 0px;
	margin: 0px;
	border: 0px;
	box-shadow: 0px;
	border-radius: 0px;
	background-size: contain;
	background-color: transparent;
	cursor: pointer;
}

.icon-btn {
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	color: var(--cCtrlF);
	/* couleur du symbole + bord du cercle */
	scale: 0.8;
	margin: 0px;
	margin-top: 5px;
}

.icon-btn:hover,
.icon-btn:focus-visible {
	color: var(--cCtrlBhi);
}

.icon-btn:active {
	transform: scale(0.92);
}

.icon2-btn {
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	color: var(--cCtrlF);
	/* couleur du symbole + bord du cercle */
	scale: 0.8;
	margin: 0px;
	margin-top: 5px;
}

.icon2-btn:hover,
.icon2-btn:focus-visible {
	color: var(--cCtrlF);
}

.icon2-btn:active {
	transform: scale(0.92);
}


.buttonpause {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	margin: 0px 0px;
	padding: 3px 3px;
	opacity: 1;
	font-weight: 400;
	font-family: evolapsfont;
}

.buttonstop {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	margin: 0px 0px;
	padding: 3px 3px;
	opacity: 1;
}

.buttonplayl1 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-l1);
}

.buttonplayl2 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	opacity: 1;
	content: var(--image-l2);
}

.buttonplayl3 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	opacity: 0.8;
	content: var(--image-l3);
}

.buttonplayl4 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	opacity: 0.8;
	content: var(--image-l4);
}

.buttonplayl5 {
	border: none;
	background-color: transparent;
	cursor: pointer;
	width: 20px;
	height: 20px;
	opacity: 0.8;
	content: var(--image-l5);
}

.infoplay2 {
	width: 12px;
	height: 12px;
	opacity: 0.8;
	vertical-align: middle;
}

.infoplay3 {
	width: 12px;
	height: 12px;
	opacity: 0.8;
	vertical-align: middle;
}

.tutorial {
	width: 100%;
	font: 16px evolapsfont;
	font-style: normal;
	color: #142d39;
	font-weight: lighter;
	text-align: left;
}
#version {
	font: 12px evolapsfont;
	color: #D2691E;
	font-weight: normal;
	letter-spacing: 0px;
	display: inline;
	vertical-align: baseline;
	text-align: left;
}

/*#D2691E;*/
#version2 {
	font: 9px evolapsfont;
	color: #f5087b;
	font-weight: normal;
	letter-spacing: 0px;
	display: inline;
	vertical-align: baseline;
	text-align: left;
}
#logotitre2 {
	font-size: 14px;
	font-weight: lighter;
	font-family: evolapsfont2;
	color: var(--fLogo);
	display: inline;
	vertical-align: middle;
	text-align: center;
	opacity: 1;
	height: 20px;
	transition: font-size 0.5s ease,
}

#logotitre {
	font-size: 35px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: var(--fLogo);
	display: inline;
	vertical-align: middle;
	text-align: center;
	opacity: 0.9;
}



#titrelogo {
	font-size: 30px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: var(--fGlobal);
	display: inline;
	vertical-align: top;
	text-align: left;
	opacity: 0.9;
	font-style: italic;
}

.contoldisplayonoffimage {
	position: absolute;
	top: -20px;
	left: 250px;
	width: 20px;
	height: 20px;
	border: 0px;
	background-color: #e0e0e0;
	border: 0px solid #999;
	z-index: 999;
}

#logoversion {
	border-radius: 5px;
	vertical-align: baseline;
	background: linear-gradient(#eee, #cfd8dc 95% 100%);
}

#logosoustitre {
	font-size: 12px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: var(--fGlobal);
	letter-spacing: 5px;
	display: inline;
	vertical-align: bottom;
	text-align: left;
	opacity: 0.9;
	position: absolute;
	top: 20px;
	left: 198px;
}

#logo {
	font: 9px evolapsfont;
	text-align: right;
	vertical-align: middle;
	opacity: 0.7;
}

#logoimg {
	height: 20px;
	text-align: left;
	vertical-align: top;
}

.mycluster {
	background-color: #336699;
	text-align: center;
	font-size: 12px;
	border-width: 0px;
	padding: 10px 10px 10px 10px;
	vertical-align: middle;
}

footer {
	clear: both;
	color: #443;
	font-weight: normal;
	letter-spacing: 0px;
	margin: 0 5px;
	padding: 5px 0;
	text-align: center;
	font: 10px evolapsfont;
}

H1 {
	clear: both;
	color: #FFF;
	border-top: 0px dashed #998;
	border-bottom: Opx dashed #998;
	font-weight: bold;
	font: 36px evolapsfont;
	letter-spacing: 0px;
	margin: 0 5px;
	padding: 5px 0;
	text-align: left;
	height: 5%;
}

table {
	border-width: 1px;

	border-collapse: collapse;
	width: 100%;
	padding: 2px 0;
	margin: 0px;
	vertical-align: middle;
}

td {
	border-width: 1px;
	/*font: 10px evolapsfont;*/
	background-color: "white";
	vertical-align: middle;
	text-align: left;
	padding: 2px 0;
	margin: 0px
}

.ctrlinfomap {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #f4ebc6;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrlinfomaptime {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #f4ebc6;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrl40c {
	stroke: black;
	text-anchor: middle;
	width: 20px;
	height: 15px;
	font: 10px evolapsfont;
	opacity: 1;
	color: #336699;
	background: #f4ebc6;
	border: none;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#champRecherche {
	stroke: black;
	text-anchor: middle;
	width: 120px;
	height: 18px;
	font: 10px evolapsfont;
	opacity: 0.9;
	color: #336699;
	background: #f4ebc6;
	border: none;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#playslice {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

td2 {
	border-width: 0px;
	font: 12px evolapsfont;
	background-color: "white";
	vertical-align: top;
	text-align: left;
}

th {
	border-width: 0px;
	background-color: #DDD;
	font: 12px evolapsfont;
	background-color: white;
}

nav {
	border-width: 3px;
	background-color: "white";
	font: 12px evolapsfont;
	width: 100px;
}

iframe {
	background-color: white;
	background: white;
	font: 12px evolapsfont;
	border-width: 0px;
}

object {
	background: white;
	font: 8px evolapsfont;
	width: 100%;
	height: 400px;
}

textarea {
	background: #EEE;
	font: 7px evolapsfont;
	color: "black";
}

summary {
	font-weight: 400;
	font: 12px evolapsfont;
}

.ctrlh {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrlh:hover {
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	background: var(--cCtrlBhi);

}




.ctrl {
	stroke: black;
	text-anchor: middle;
	width: 70px;
	height: 16px;
	font-weight: 800;
	font-family: evolapsfont;
	opacity: 1;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrl:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);
}
.ctrl:focus {
    background-color: var(--cCtrlBhi);
    color: var(--cCtrlFhi);
    outline: none;
}

/* quand il y a du texte */
.ctrl:not(:placeholder-shown) {
    background-color: var(--cCtrlB);
    color: var(--cCtrlF);
}

/* autofill Chrome */
.ctrl:-webkit-autofill,
.ctrl:-webkit-autofill:hover,
.ctrl:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cCtrlF);
    -webkit-box-shadow: 0 0 0px 1000px var(--cCtrlB) inset;
    transition: background-color 5000s ease-in-out 0s;
}


.ctrlsquare {
	text-anchor: middle;
	width: 45px;
	height: 45px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 1;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 12px;
	scale: 0.8;
	border: none;
	border-radius: 10px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrlsquare:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);
}

.ctrlcircle {
	text-anchor: middle;
	width: 45px;
	height: 45px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 1;
	scale: 0.7;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 25px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrlcircle:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);
}

.ctrl30 {
	stroke: black;
	text-anchor: middle;
	width: 30px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 1;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 2px;
	font-size: 8px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrl30:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);

}

.ctrlmenu {
	stroke: black;
	text-anchor: middle;
	width: 70px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
}

.ctrlmenu:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);
}

.ctrlmenu3 {
	stroke: black;
	text-anchor: left;
	width: 30px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 1;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-left: 1px solid var(--cCtrlB);
	border-radius: 5px;
	transition-duration: 0.1s;
}

.ctrlmenu3:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);
}

.ctrlmenu4 {
	stroke: black;
	text-anchor: middle;
	width: 60px;
	height: 16px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
}
.ctrlmenu4:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);
}

.ctrlflat {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	height: 15px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: #000000;
	background: #CCC;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 1px;
	transition-duration: 0.4s;
	box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.24), 0 0px 0px 0 rgba(0, 0, 0, 0.19);
}

.ctrlflat2 {
	stroke: black;
	text-anchor: middle;
	width: 30px;
	height: 15px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: var(--fGlobal);
	background: var(--cCtrlF);
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 1px;
	transition-duration: 0.4s;
	box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.24), 0 0px 0px 0 rgba(0, 0, 0, 0.19);
}

.controlslayoutpath {
	max-height: 100px;
	/* Hauteur maximale avant de défiler */
	overflow-y: auto;
	/* Activer le défilement vertical */
	border: 0px solid #ccc;
	/* Optionnel : ajout d'une bordure pour mieux visualiser la zone de défilement */
	padding: 3px;
	/* Optionnel : ajout d'un padding pour améliorer la lisibilité */
}

.ctrlcolor {
	stroke: black;
	text-anchor: middle;
	width: 60px;
	height: 16px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #CCC;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrlcolor2 {
	stroke: black;
	text-anchor: middle;
	width: 10px;
	height: 16px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #CCC;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}




input {
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
}

.ctrlb {
	stroke: black;
	text-anchor: middle;
	width: 100px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: "black";
	background: #DDD;
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrl1 {


    display: inline-flex;
    justify-content: center;
    align-items: center;

	text-anchor: middle;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	font-weight: 400;
	font-size: 14px;
	font-family: evolapsfont;
	opacity: 1;
	color: var(--cCtrlF);

	/*background: var(--cCtrlB);*/
	background-color: transparent;

	stroke-width: 0;
	cursor: pointer;
	border: none;
	scale: 0.8;
	border-radius: 10px;
	transition-duration: 0.2s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}



.ctrl1:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);
}

.ctrlf {
	stroke: black;
	text-anchor: middle;
	width: 40px;
	height: 16px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	font-size: 10px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrlf:hover {
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);
}

.ctrljscolor {
	text-anchor: middle;
	scale: 0.80;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 1;
	color: var(--cCtrlF);
	background: var(--cCtrlB);
	stroke-width: 0;
	cursor: pointer;
	border: none;
	border-radius: 10px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrljscolor:hover {

	scale: 0.95;

}

.ctrl2 {
	stroke: black;
	text-anchor: middle;
	width: 90px;
	height: 25px;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 0.7;
	color: white;
	background: #336699;
	stroke-width: 0;
	font-size: 11px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

input {
	font-size: 12;
	font-weight: 400;
	font-family: 'evolapsfont';
}

.ctrl2b {
	stroke: black;
	text-anchor: middle;
	width: 50px;
	height: 25px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 1;
	color: white;
	background: #336699;
	stroke-width: 0;
	font: 10px evolapsfont;
	border: none;
	border-radius: 3px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}

.ctrlhrond {
	stroke: black;
	text-anchor: middle;
	width: 50px;
	height: 25px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.7;
	color: white;
	background: #336699;
	stroke-width: 0;
	font: 11px evolapsfont;
	border: none;
	border-radius: 30px;
	transition-duration: 0.4s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);

}

#divcontainer {
	border: 0px solid lightgray;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#makeitmovex {
	position: absolute;
	background: rgba(255, 255, 255, 0);
	resize: both;
	/*overflow: hidden;*/
	text-align: center;
	/*width: 300px;
	height: 100%;
	border: 0px solid grey;
	box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	
	display: none;*/
	z-index: 9999999999;
}

#makeitmove0 {
	position: absolute;
	background: rgba(255, 255, 255, 0);
	resize: both;
	/*overflow: hidden;*/
	text-align: center;
	/*width: 300px;
	height: 100%;
	display: none;*/
	border: 0px solid #EEEEEE80;

	box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;

	z-index: 9999999999;
	top: 10px;
	left: 10px;
	border-radius: 5px;
}

#makeitmove1 {
	position: absolute;
	top: 10px;
	left: 280px;
	background: rgba(255, 255, 255, 0);
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;

	padding: 3px;
	/* ✅ IMPORTANT POUR AVOIR LE RESIZE SOUS SAFARI Espace pour que le canvas ne touche pas les bords 

	/*

	box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;

	 border: 1px solid transparent; 


    background: rgba(255,0,0,0.3) !important;
    z-index: 999999999 !important;
	 	*/


	display: none;

}

#makeitmove2 {
	position: absolute;
	background: rgba(255, 255, 255, 0);
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	display: none;
	/*box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	*/
}

#makeitmove3 {
	position: absolute;
	background: rgba(255, 255, 255, 0);
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	display: none;
	/*box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	*/
}

#makeitmove4 {
	position: absolute;
	background: transparent;
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	/*box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 5px -1px;	*/
	display: none;
	top: 10px;
	left: 280px;
}

#makeitmove6 {
	position: absolute;
	background: white;
	resize: both;
	overflow: hidden;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 0px solid grey;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 2px -1px, rgba(0, 0, 0, 0.3) 0px 1px 2px -1px;
}

#handlex {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 7px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b;
}

#handle0 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b00;

	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

#handle1 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b00;

	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

#handle2 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b00;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;


}

#handle3 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 6px;
	color: #f5087b00;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

#handle4 {
	background: linear-gradient(45deg, #cfd8dc00 20%, #eeeeee00 50%);
	opacity: 1;
	height: 15px;
	/*width : 50px;*/
	cursor: move;
	text-align: left;
	font-size: 12px;
	color: #f5087b00;

	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;

}


.makeitmovedeleteicon {
	height: 7px;
	width: 7px;
	background: #ddd;
	display: inline;
	border: 0px silver solid;
	cursor: pointer;
	color: #336699;
	text-anchor: middle;
	font-size: 6px;
	font-style: normal;
	font-stretch: condensed;
	font-weight: lighter;
	font-family: evolapsfont;
	text-decoration: none;
	vertical-align: middle;
}

.handlestyleleft {
	height: 7px;
	width: 50%;
	background: linear-gradient(45deg, #cfd8dc 50%, #eee);
	border: 0px silver solid;
	cursor: move;
	color: #336699;
	font-size: 6px;
	font-style: normal;
	font-stretch: condensed;
	font-weight: lighter;
	font-family: evolapsfont;
	text-decoration: none;
	vertical-align: middle;
	text-align: left;
	padding: 0%;
}

.handlestyleright {
	height: 7px;
	width: 50%;
	background: #eee;
	border: 0px silver solid;
	cursor: move;
	color: #336699;
	font-size: 6px;
	font-style: normal;
	font-stretch: condensed;
	font-weight: lighter;
	font-family: evolapsfont;
	text-decoration: none;
	vertical-align: top;
	text-align: right;
	padding: 0%;
}

.handlestylebutton {
	height: 7px;
	width: 7px;
	background: #eee;
	display: inline;
	border: 0px silver solid;
	cursor: pointer;
	color: #336699;
	text-anchor: middle;
	font-size: 6px;
	font-style: normal;
	font-stretch: condensed;
	font-weight: lighter;
	font-family: evolapsfont;
	text-decoration: none;
	vertical-align: top;
	padding: 0%;
}

#geographicmap {
	width: 100%;
	/*height: calc(100% - 7px);*/
	height: 100%;
	/*height: 95%;
	background-color:  #EEEEEEFF;
	overflow: auto;
	border : 1px solid transparent;
	/*resize:both;	*/

	overflow: hidden;
	display: flex;
	border: 0px silver solid;


}

#treedisplay {
	width: 100%;
	height: 100%;

	/*resize:both;	background: #eee;*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
}


#manual {
	width: 100%;
	height: calc(100% - 7px);
	/*height: 95%;*/
	/*background: #fffefe80;*/
	background: transparent;
	/*background: rgba(255, 255, 255, 0);*/
	/*resize:both;	*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
	font: 12px evolapsfont;
}

.mapboxgl-ctrl {
	pointer-events: none;
	/* Permet de cliquer à travers */
}

.mapboxgl-ctrl-bottom-right {
	left: 20px;
	/* Décale le cartouche de copyright à 10px de la gauche */
	pointer-events: none;
	/* Permet de cliquer à travers */
}

.mapboxgl-ctrl-attrib a[href*="map-feedback"] {
	display: none;
	pointer-events: none;
	/* Permet de cliquer à travers */

}

.mapboxgl-ctrl-scale {
	background-color: #DDDDDD80;
	color: #33669980;
	font-weight: light;
	border-radius: 0px;
	height: 10px;
	pointer-events: none;
	/* Permet de cliquer à travers */

}

#migration {
	width: 100%;
	height: 100%;
	background: #eee;
	/*resize:both;*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
}

#transitionmap {
	width: 100%;
	height: 100%;
	background: #eee;
	/*resize:both;*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
}

#transitionchart {
	width: 100%;
	height: 100%;
	background: #eee;
	/*resize:both;*/
	overflow: hidden;
	display: flex;
	border: 0px silver solid;
	text-align: center;
}

.boxtreeanddiagram {
	resize: vertical;
	width: 100%;
	height: 500px;
	display: flex;
	overflow: hidden;
	border: 1px solid #CCC;
	border-radius: 1px;
}

.node {
	stroke: #fff;
	stroke-width: 0.5;
}

.link {
	stroke: black;
	stroke-opacity: 0.5;
	stroke-width: 0.5;
}

.nodetxt {
	stroke: black;
	text-anchor: middle;
	font-weight: lighter;
	font-family: evolapsfont;
	opacity: 1;
	stroke-opacity: 0.5;
	stroke-width: 0;
	font-size: 8px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
}

#DATAsession {
	cursor: pointer;
	font: 12px evolapsfont;
	text-align: left;
	height: 70px;
	width: 250px;
	/*background: var(--c0light);*/
	color: #336699;
	border: none;
	border-radius: 5px;
	opacity: 1;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	overflow: hidden;
	padding: 1px 1px;
}

.imagepalette {
	width: 100px;
	border: 0;
}

/* unvisited link */
a:link {
	color: #336699;
	font-weight: normal;
	text-decoration: none;
}

/* visited link */
a:visited {
	color: #336699;
}

/* mouse over link */
a:hover {
	color: #336699;
}

/* selected link */
a:active {
	color: #336699;
}

.deck-tooltip {
	background-color: rgba(0, 0, 0, 0.9);
	color: rgba(255, 255, 255, 1);
	padding: 8px;
	border-radius: 5px;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	font: 9px evolapsfont;
}


input[type=file]::file-selector-button {
	border-radius: 3px;
	height: 20px;
	border: none;
	color: var(--cCtrlF);
	background-color: var(--cCtrlB);
	cursor: pointer;
	font-weight: 400;
	font-size: 10px;
	font-family: evolapsfont;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
	margin: 5px;
}

input[type=file]:hover::file-selector-button {
	color: var(--cCtrlF);
	background-color: var(--cCtrlBhi);

}




.color-box {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 10px;
	margin: 1px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);

}
.color-box.colorbox-hover {
    transform: scale(1.5);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}
#color-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1px;
	justify-content: center;
	padding: 2px;
	text-align: center;
	width: 100%;
	border: 1px solid #33669950;
	border-radius: 10px;
}

.cluster-box {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 10px;
	margin: 1px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);


}
.cluster-box.cluster-hover {
    transform: scale(1.5);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.19);
}
#cluster-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1px;
	justify-content: center;
	padding: 2px;
	text-align: center;
	width: 100%;
	border: 1px solid #33669950;
	border-radius: 10px;
}

#iconifiedcontainer {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: left;
	gap: 5px;
	justify-content: left;
	padding: 2px;
	text-align: center;
	width: 95%;
	height: 20px;
	position: relative;
	border: 1px solid #33669950;
	border-radius: 10px;

}

.iconified {
	width: 20px;
	height: 20px;
	background-color: #33669980;
	border-radius: 50%;
	cursor: pointer;
	position: static;
	/* important pour le flexbox container */
	transition: all 1s ease;
	/* transition fluide sur tous les changements */
}

.checkbox {
	vertical-align: middle;
	color: var(--cCtrlF);
	background: var(--cCtrlB);

}

.checkbox:hover {
	vertical-align: middle;
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);

}

input[type="checkbox"] {
	margin-top: 10px;
}


/* Menu Z-index et Automatic */
.zdropdown-btn {
	/*padding: 10px 20px;*/
	background-color: #007bff;
	color: #fff;
	border: none;
	cursor: pointer;
	font: 11px evolapsfontbold;
}

/* Style du conteneur du menu déroulant */
.zdropdown-menu {
	display: none;
	/* Masqué par défaut */
	position: absolute;
	background-color: #EEE;
	/*min-width: 50px;*/
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 10000;
	padding: 3px;
	border-radius: 4px;
}

/* Style des éléments de menu */
.zdropdown-menu li {
	list-style: none;
	padding: 3px 3px;
	cursor: pointer;
	font: 11px evolapsfont;
	text-align: left;
	color: #336699;

}

/* Style de la checkbox */
.zdropdown-menu li label {
	display: flex;
	align-items: left;
	cursor: pointer;
}

.corner-display {
	position: absolute;
	background: transparent;
	/*color: var(--fGlobal);*/
	color: 'black';
	font: 9px evolapsfontbold;
	z-index: 10;
	pointer-events: none;
	/* Permet de cliquer à travers */

}

#nw-corner {
	top: 2px;
	left: 2px;
}

#ne-corner {
	top: 2px;
	right: 2px;
}

#sw-corner {
	bottom: 2px;
	left: 2px;
}

#se-corner {
	bottom: 2px;
	right: 2px;
}

#mapinfobulleid {
	/*bottom: 2px;
	right: 400px;
	position: absolute;
    width: 100px;
    height: 10px;
    /*background-color: rgba(255, 255, 255, 0);*/
	background-color: #99999980;
	color: #99999980;
	border: 0px solid #33669900;
	padding: 10px;
	cursor: move;
	display: none;
	z-index: 10;
	text-align: center;
	vertical-align: middle;
	border-radius: 3px;
	font: evolapsfontbold;
	font-size: 12px;
	/* box-shadow: 2px 2px 10px rgba(0,0,0,0.)"; */
}

.cartoucheinfotree {


	font: evolapsfont;
	font-weight: 400;
	font-size: 10px;
}

.context-menu {
	position: absolute;
	color: var(--cCtrlF);
	background-color: transparent;
	border: 0px solid #ccc;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
	padding: 1px;
	z-index: 1000;
	border-radius: 3px;
	/*min-width: 120px;
		background: var(--cCtrlB);

	background: rgba(255, 255, 255, 0.95); /* Fond blanc semi-transparent
	*/
	backdrop-filter: blur(5px);
	/* Effet de flou pour un look moderne */
}

.context-menu-item {
	padding: 3px 3px;
	cursor: pointer;
	font: evolapsfont;
	font-weight: 400;
	font-size: 10px;
	color: #333;
	transition: background 0.2s;
}

.context-menu-item:hover {
	background: #336699;
	/* Bleu foncé pour l'effet hover */
	color: white;
	border-radius: 4px;
}


/*////////////////////////////// PAGE ACCEUIL	*/
body.image-fullscreen {
    overflow: hidden;
}
.fullpage-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: contain; /* ou cover selon ton besoin */
    background-color: rgba(0,0,0,0.9); /* effet modal */
    z-index: 99999;
    cursor: zoom-out;
}

.video-comment-container {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.videodiv video {
	max-width: 100%;
	height: auto;
	cursor: zoom-in;
}

.comment {
	max-width: 100%;

	text-align: left;
	font-size: 11px;
	font-family: evolapsfont;
	font-style: italic;
	/* Texte en italique */

}

.menu-item {
	width: 50px;
	height: 50px;
	border-radius: 35px;
	margin: 3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	/* Optionnel pour un bel effet */
}

.menu-item2 {
	width: 50px;
	height: 50px;
	border-radius: 0px;
	margin: 3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	/* Optionnel pour un bel effet */
}

.boxsummary {
	width: 50%;
	cursor: zoom-in;
	border-radius: 0px;
	margin: 3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	/* Optionnel pour un bel effet */
}

.homepage {
	width: 100%;
	height: 100%;

	color: var(--fGlobal);
	background-color: transparent;

	padding: 5px;


	font-weight: lighter;
	font-family: evolapsfont;
	font-size: 12px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;

	text-align: left;

	opacity: 1;
	stroke-width: 0;
	border: none;
	border-radius: 5px;

}

.homepagetext {
	width: 100%;
	height: 100%;

	color: var(--fGlobal);
	background-color: transparent;

	padding: 5px;


	font-weight: lighter;
	font-family: evolapsfont;
	font-size: 18px;
	font-style: normal;
	font-stretch: condensed;
	text-decoration: none;
	font-size-adjust: 0.4;
	text-align: left;
	opacity: 1;
	stroke-width: 0;
	border: none;
	border-radius: 5px;
}

.treeleaf-highlight {
    fill: white;                /* texte blanc pour contraste */
    paint-order: stroke;        /* important pour afficher le bg proprement */
    stroke: #FAFAD2;
    stroke-width: 6px;          /* donne un effet "background" autour du texte */
}
.power-icon {
    display: inline-flex;          /* ⬅️ important */
    align-items: center;
    justify-content: center;
    white-space: nowrap;           /* ⬅️ empêche tout retour ligne */
    overflow: hidden;              /* sécurité */
    background-color: #FFFFFF00;
    margin: 0px;
    border-radius: 0px;
    border-radius: 3px;
    cursor: default;   /* ⬅️ curseur normal */
    user-select: none;
}
.power-icon::before {
    content: "\23FB";              /* ⏻ */
	font-weight: lighter;
	font-family: evolapsfont;
	font-size: 15px;
    line-height: 1;                /* ⬅️ empêche saut vertical */
    white-space: nowrap;           /* double sécurité */
}



.treetool-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #00000000;
    border: 0px solid #666;
    border-radius: 3px;
	margin: 2px 2px 2px 5px;
    user-select: none;
    cursor: default;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.6),
        inset 0 -1px 1px rgba(0,0,0,0.2),
        0 1px 2px rgba(0,0,0,0.3);
}

/* état enfoncé */
.treetool-btn.active {
    background-color: var(--cCtrlBhi, #bbb);
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.4);
    transform: translateY(1px);
}

/* icône par défaut */
.treetool-btn::before {
    content: "\23FB"; /* ⏻ par défaut */
	font-weight: lighter;
	font-family: evolapsfont;
	font-size: 15px;
    line-height: 1;
}


.treetool-btn:hover {
	vertical-align: middle;
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);

}

.treetoolreset-btn::before {
    content: "x"; 
	font-weight: lighter;
	font-family: evolapsfont;
	font-size: 15px;
    line-height: 1;
}

.subtree-annotation text {
    user-select: none;
    pointer-events: none;  /* le drag reste sur le <g> */
}

.subtree-annotation {
    cursor: ew-resize;
}


.resetbtn {
    width: 22px;
    height: 22px;

    background-color: var(--cCtrlB, #ddd);
    border: 1px solid #666;
    border-radius: 3px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;

    color: var(--cCtrlF, #000);
    cursor: default;

    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M20 12a8 8 0 1 1-3.2-6.4' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
<path d='M20 4v4h-4' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}

.resetbtn:hover {
	vertical-align: middle;
	color: var(--cCtrlFhi);
	background: var(--cCtrlBhi);

}