@font-face {
	font-family: 'evolapsfont';
	src: url('font/SFProDisplay-Thin.woff2') format('woff2'),
		 url('font/SFProDisplay-Thin.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');
}
/* light: c ; dark: c +80 (50% opacity) */
.blinking-link {
	color:  #D2691E;
	animation: blink 5s infinite;
 }
@keyframes blink {
	50% {
		opacity: 0;
	}
}
ul {
    padding-left: 20px; 
    margin-left: 0; 
}
ol {
    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;

  }
  .number-circle2 {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #ffa8d2;
    color: black;
    font-size: 10px;
    font-family: evolapsfontbold;
	font-weight: bold;
}
a.documentation:link {
    text-decoration: none;
    color: #f5087b;
}
a.documentation:visited {
    text-decoration: none;
    color: #f5087b;
}
a.documentation:hover {
    text-decoration: none;
    color: #f5087b;
    font-weight: 400;
}
a.documentation:active {
    text-decoration: none;
    color: #f5087b;
}
:root {
	--cGlobal: #EEE;
	--fGlobal: #000; 
}
html {
	background: var(--cGlobal);
	/*background: transparent;	*/
	color: var(--fGlobal);
	color: #000;
	font: 14px evolapsfont;
	border: 0px solid grey;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
}
body {
	background: var(--cGlobal);
	/*background: transparent;	*/
	color: #000;
	font: 13px evolapsfont;
	margin: 0 auto;
	border: 0px solid grey;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
	width: 99%;
	font-weight: lighter;
	font-weight:200;
}

.tutorial {
	width: 100%;
	font: 12px evolapsfont;
	font-style: normal;
	color: #142d39;
	font-weight: lighter;
	text-align:left;
}
.tutorialblock {
	width: 98%;
	
	border: 0px solid #33669980;

	background: linear-gradient(to bottom right, #96a7aca8, #eee); 
	background: linear-gradient(to bottom right, #cec9c090, #eeeeee00); 
	
	
	border-radius: 5px;
	/*padding-left: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 10px;*/
}
#logotitre {
	font-size: 40px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: #336699;
	display: inline;
	vertical-align: top;
	text-align: left;
	opacity: 0.9;
}
#titrelogo {
	font-size: 40px;
	font-weight: lighter;
	font-family: evolapsfont;
	color: #336699;
	display: inline;
	vertical-align: top;
	text-align: left;
	opacity: 0.9;
	font-style: italic;
}
#logotitre2 {
	font-size: 20px;
	font-weight: 400;
	font-family: evolapsfont;
	color:  #82a984;
	letter-spacing: 2px;
	display: inline;
	vertical-align: top;
	text-align: left;
	opacity: 0.9;
}
.summary {
	font-size:100%;
	color: #000000;
	margin:20px 0px 20px 0px;
	border-left: 5px solid #33669980;
	padding-left: 10px;
}
.summary:before {
	content: "Summary: ";
	font-weight: bold;
}
.tdfig {
	text-align:left;
	vertical-align: center;
	width:250px;
	color: #000000;

	background-color : #ddf7ffa8;
	background-color : #cddae780;
	background-color : transparent;

	opacity : 1;
	/*font-weight: 400;*/
	font-family: evolapsfont;
}
.docimage100 {
	width:100px;

} 

.docimage130 {
	width:130px;
}    
.docimage200 {
	width:200px;
	padding:0.5em;
}
.docimage300 {
	width:300px;
	background-color : transparent;
   /*	 box-shadow: 5px 5px 15px rgb(255, 255, 255); */

}
.docimage400 {
	width:400px;
}
.docimage500 {
	width:500px;
}
.docimage600 {
	width:600px;
}
.docimage700 {
	width:700px;
}
.docimage800 {
	width:800px;
}
.diaplaybloc {
	padding-top: 20px;
	padding-bottom: 20px;
	color: #000000;
}
.title-main {
	font-size:140%;
	color: #000000;
	margin:00px 0px 20px 0px;
	border-left: 0px solid #ED1951;
	padding-left: 0px;
}
.maintext {
	font-size:110%;
	color: #000;
	margin:20px 0px 20px 0px;
	border-left: 5px solid #D2691E;
	padding-left: 10px;
}
.textmain {
	font-size:120%;
	color: #000;
	margin:0px 0px 20px 0px;
	border-left: 0px solid #556B2F;
	padding-left: 10px;
}
.textfig {
	font-size:100%;
	color: #000;
	margin:0px 0px 20px 0px;
	border-left: 0px solid #556B2F;
	padding-left: 10px;
}
.textfig2 {
	font-size:100%;
	color: #000;
	margin:20px 0px 20px 0px;
	border-left: 5px solid #CCC;
	padding-left: 10px;
}
div#toc ul li {
	margin: 8px 0px 8px 22px;
	font-size: 100%;
	list-style: square;
}
div#toc ul {
	background-color: #BBB;
	opacity: 1;
	padding: 5px;
	border-radius: 5px;
	max-width: 100%;
	color: black;
}
div#toc a:link {
	text-decoration: none;
	color: #336699;
}
div#toc a:visited {
	text-decoration: none;
	color: #336699;
}
div#toc a:hover {
	text-decoration: none;
	color: #336699;
	font-weight: 400;
}
div#toc a:active {
	text-decoration: none;
	color: #336699;
}
div#toc ul li ul {
	padding-left:8px;
}
div#toc ul li ul li::before {
	content: "–  ";
}
div#toc >ul::before {
	content: "Table of Contents";
	font-weight: 500;
	color: #555;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	width:70px;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:10px;
}
div#toc ul li ul li {
	list-style-type: none;
	margin: 5px 0px 0px 0px;
}
.videodiv {
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	text-align: center;
	vertical-align: middle;
/*
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); 
    background-color: #33669900; 
*/

}
.imgdiv {
	border-top: 0px solid #998;
	border-bottom: 0px solid #998;
	border-left: 0px solid #998;
	border-right: 0px solid #998;
	text-align: center;
	vertical-align: middle;
}
video {
    border: 0px solid #336699; /* Bordure colorée */
    border-radius: 5px; /* Coins arrondis */
	
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); 
    background-color: #33669980; 
	
}
.spanhi {
	color: #f5087b;

}
.custom-video {
    border: 2px solid blue;
    border-radius: 15px;
    box-shadow: 3px 3px 10px gray;
}

.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);
}
h0 {
	background: linear-gradient(45deg, #ddf7ffa8 20%, #eee 50%);
	color: #336699;
	padding:0.5em;
    text-align:left;
    vertical-align: middle;
	font-size: 18px;
    font-family: evolapsfontbold;
	border-radius: 5px;
}

h1 {
	background: linear-gradient(45deg, #cddae780 20%, #eee 50%);
	background: linear-gradient(45deg, #ddf7ffa8 20%, #eee 50%);
	background: linear-gradient(45deg, #cec9c090 20%, #eee 50%);
	
	border: 0px solid #33669980;
	color: #f5087b;
	padding:0.5em;
    text-align:left;
    vertical-align: middle;
	font-size: 14px;
    font-family: evolapsfontbold;
	border-radius: 5px;
}
h1b {
	color: #000;
	padding:0.5em;
    text-align:left;
    vertical-align: middle;
	font-size: 14px;
    font-family: evolapsfontbold;
}
p {
	padding:0.5em;
}
h2 {
	background: linear-gradient(45deg, #ddf7ffa8 20%, #eee 50%);
	color: #f5087b;
	font-size:100%; 
	padding:0.2em;
    text-align:left;
    vertical-align: middle;
	font-size: 12px;
    font-family: evolapsfontbold;
    font-family: evolapsfont;
}
h3 {
	/*background: linear-gradient(45deg, #cddae780 20%, #eee 50%);*/
	color: #f5087b6b;
	font-size:100%; 
	/*padding:0.5em;*/
    text-align:left;
    vertical-align: middle;
	font-size: 10px;
    font-family: evolapsfontbold;
}
h4 {color: #666; font-weight:400; font-size:100%; font-style:italic;}

b, strong {
    font-family: evolapsfontbold;
    font-weight: bold; 
	

    color: #2a2a2a;     /* facultatif : changer la couleur */
}

.nav, .nav ul, .nav li  {
	list-style: none;
	font-family: evolapsfont;
	font-weight: 200;
	width: 250px;
}
.nav ul {
	padding: 0;
	margin: 0 0 0 0px;
}
.nav {
	padding: 4px;
	margin: 0px;
}
.nav > li {
	margin: 4px 0;
}
.nav > li li {
	margin: 2px 0;
}
.nav a {
	color: #333;
	display: block;
	outline: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-decoration: none;
}
.nav li > a > span {
	float: right;
	font-size: 19px;
	font-weight: bolder;
}
.nav li > a:hover > span {
	color:  #5D5D5D;
}
.nav li > a > span:after {
	content: '\25be';
}
.nav li.open > a > span:after {
	content: '\25b4';
}
.nav a:hover, .nav li.active > a {
	background-color: #5D5D5D;
	color: #f5f5f5;
}
.nav > li.active > a  {
	background-color: #29627e;
}
.nav li a {
	font-size: 12px;
	line-height: 18px;
	padding: 2px 2px;
}
.nav > li > a {
	font-size: 14px;
	line-height: 20px;
	padding: 2px 2px;
}
.nav li a:focus {
	background-color: #5D5D5D;
	color: #f5f5f5;
}

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

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

a:hover {
    text-decoration: none;
    color: #336699;
    font-weight: 800;
}

a:active {
    text-decoration: none;
    color: #336699;
}

  .ctrl1 {
	display: flex; 
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	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);
	text-decoration: none; /* retire le soulignement du lien */
  }
 
  
  .ctrl1 img {
	width: 10px !important;      /* Force la largeur affichée */
	height: 10px !important;     /* Force la hauteur affichée */
	display: block !important;   /* Supprime l'espace sous l'image */
	object-fit: contain !important; /* Ajuste l'image proprement sans la déformer */
  }

  .ctrl1 {
	display: flex; 
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	overflow: hidden; /* <-- très important pour éviter que l'image déborde */
	font-weight: 400;
	font-family: evolapsfont;
	opacity: 0.9;
	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);
	text-decoration: none;
}

.ctrl1 img {
	width: 10px !important;
	height: 10px !important;
	
	display: block;
	object-fit: contain;
}

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