:root {
    --bg-light: #9ED1AE;
    --bg-dark:  #006838;
}


body {
	margin:0px;
	font-family:Tahoma;
	font-size:13px;
	-webkit-user-select: none;       
	-moz-user-select: none; 
	-ms-user-select: none;
	user-select: none;
	background-color: #FFF;
	background-image: url('../images/background.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height:100%;
	overflow:hidden;
}

a:link, a:visited, a:hover, a:active {
	outline:none;
	text-decoration: none;
	color: var(--bg-dark);
} 

table {
	border: none;
	font-family: Tahoma;
	font-size: 13px;
}

#blur {
	display:none;
	position: absolute;
	top: 0px;
	left:0px;
	bottom:0px;
	right:0px;
	backdrop-filter: blur(5px) contrast(60%);
	z-index:100;
	-webkit-animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

#toast-container {
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 9999;
}
.toast {
    background-color: #EEEEEE;
    color: #FFFFFF;
    padding: 14px 18px;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.3s ease;
    min-width: 200px;
}
.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.button {
	display:table-cell;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:20px;
	padding-right:20px;
	border-radius:10px;
	border:1px solid #779D83;
	background-color:#FFFFFFCC;
	font-size:16px;
	color:var(--bg-dark);
	font-weight:bold;
	text-align:center;
	width:200px;	
	vertical-align:middle;
	cursor: pointer;
	transition: all 0.3s ease;
}
.button:hover {	
	background-color: var(--bg-light);
}

.home_title {
	position:absolute;
	bottom:30%;
	left:0px;
	right:0px;
	background-color:var(--bg-dark);
	color:#fff;	
	padding-left:70px;
	padding-right:70px;
	padding-top:40px;
	padding-bottom:40px;
	font-weight:bold;
	border-top:1px solid #779D83;
	border-bottom:1px solid #779D83;
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.home_buttons {
	position:absolute;
	bottom:0px;
	height:30%;
	left:0px;
	right:0px;
}

.home_logos {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	background-color:#FFFFFFCC;
	height:100px;
	text-align:right;
	padding-right:50px;
}

.home_logos img {
	height:60px;
	width:auto;
	margin-right:40px;	
	margin-top:20px;
}

.home_legal {
	position: absolute;
	bottom:5px;
	left:5px;
	font-size:10px;
	color:var(--bg-light);
	font-style:italic;
}

.button_home {
	position:absolute;
	top:25px;
	right:50px;
	width:130px;
	height:30px;
	background-color:#FFFFFFCC;
	border:1px solid #779D83;
	line-height:30px;
	border-radius:30px;
	color:var(--bg-dark);
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	cursor: pointer;
	transition: all 0.3s ease;
}
.button_home:hover {	
	background-color: var(--bg-light);
}

.lang-home {
    position: absolute;
	right: 20px;
	top: 35px;
    width: 30px;    
	height: 30px;
    z-index: 1000;
}
.lang-home:hover .lang-dropdown {
    display: flex;
}
.lang-home:hover .current-flag {
    opacity: 0;
}

.lang-button {
    position: absolute;
    right: 200px;
    top: 25px;
    width: 30px;
    height: 30px;
    z-index: 1000;
}
.lang-button:hover .lang-dropdown {
    display: flex;
}
.lang-button:hover .current-flag {
    opacity: 0;
}

.lang-component {
    position: absolute;
    right: 60px;
    top: 75px;
    width: 30px;
    height: 30px;
    z-index: 1000;
}
.lang-component:hover .lang-dropdown {
    display: flex;
}
.lang-component:hover .current-flag {
    opacity: 0;
}

.lang-results {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    z-index: 1000;
}
.lang-results:hover .lang-dropdown {
    display: flex;
}
.lang-results:hover .current-flag {
    opacity: 0;
}

.lang-flag {
    display: block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #779D83;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.lang-flag:hover {
    opacity: 1;
    transform: scale(1.05); /* Légère animation au survol */
}
.lang-dropdown {
    display: none;
    position: absolute;
    top: -5px;
    left: -5px;
    flex-direction: column;
    gap: 8px; /* Espace entre les 2 drapeaux */
    background-color: var(--bg-light, #ffffff);
    padding: 4px;
    border-radius: 20px;
    border: 1px solid #779D83;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.lang-dropdown .lang-flag.active {
    border-width: 2px;
    box-shadow: 0 0 5px rgba(119, 157, 131, 0.6);
}

.home_introduction {
	position:absolute;
	top:80px;
	left:50px;
	right:50px;
	padding:20px;
	bottom:50%;
	background-color:#FFFFFFEE;
	font-size:14px;
	line-height:20px;
	overflow:auto;
}

.home_definitions {
	position:absolute;
	top:calc(50% + 40px);
	left:50px;
	right:500px;
	padding:20px;
	bottom:30px;
	background-color:#FFFFFFEE;
	font-size:14px;
	line-height:20px;
	overflow:auto;
}

.home_bottomright {
	position:absolute;
	display:flex;
	flex-direction:column;
	top:calc(50% + 40px);
	right:50px;
	width:450px;
	bottom:30px;
}

.home_about {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;	
}

#home_about_content {
	display: none;
    width: 600px;
	padding: 20px;
	border:1px solid #779D83;
	background-color:#FFFFFFCC;
	border-radius:6px;
	line-height:20px;
	z-index:200;
}

.home_reset {
	position:relative;	
	margin:auto;
	width:330px;
	height:115px;
	padding:15px;	
	background-color:var(--bg-dark);
	border:1px solid var(--bg-dark);
	border-radius:10px;
	font-size:12px;	
	color:#fff;
	text-align:center;
	line-height:16px;
	overflow:auto;
}

.home_introduction2 {
	position:absolute;
	top:80px;
	left:50px;
	width:30%;
	padding:20px;
	bottom:50px;
	background-color:#FFFFFFEE;
	font-size:14px;
	line-height:20px;
	overflow:auto;
}

.home_right2 {
	position:absolute;
	display:flex;
	flex-direction:column;
	top:80px;
	left:calc(30% + 130px);
	right:50px;
	bottom:50px;
}

.home_scheme {
	position:relative;
	width:100%;
	max-width:900px;
	height:80%;	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	margin:auto;
	margin-bottom:30px;
}


h1 {
	font-size:18px;
	color:var(--bg-dark);
	font-weight:bold;
	margin-top: 0px;
}

.table_schemes {
	height: 200px;
}

.scheme_component {
	color:var(--bg-dark);
	font-size:9px;
}

.scheme_component_question {
	background-color:var(--bg-light);
	width:42px;
	height:20px;
	line-height:20px;
	color:#fff;
	cursor:pointer;
	transition: all 0.3s ease;
}
.scheme_component_question:hover {
	background-color:var(--bg-dark);
}
.scheme_component_question_active {
	background-color:var(--bg-dark);
	width:42px;
	height:20px;
	line-height:20px;
	color:#fff;
	cursor:pointer;
}

.question_page {
	position:absolute;
	top:20px;
	left:20px;
	right:20px;
	bottom:20px;
	background-color:#FFFFFFEE;
	display: flex;
	flex-direction: column;
	overflow:hidden;
}

.question_page_top {
}

.question_page_bottom {
	flex: 1;
	min-height:0;
	padding-bottom:20px;
	display:flex;
	align-items: center;
}

.question {
	display:block;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:10px;
	background-color:var(--bg-light);
	padding:20px;
	line-height:20px;
}

.item_score {
	position:relative;
	display:block;
	border:1px solid var(--bg-dark);
	width:100%;
	height:30px;	
	line-height:30px;
	text-align:center;
	cursor:pointer;
}
.item_score:hover {
	background-color:var(--bg-light);
}

.item_score.active {
	background-color:var(--bg-dark);
	color:#fff;
}

.item_text {
	position:relative;
	max-height:150px;
	overflow:auto;
}

.resource {
	display:flex;
	gap:20px;
	max-height:100%;
	width:80%;
	background-color:var(--bg-light);
	border-radius:10px;
	margin:10px;
	box-sizing: border-box;
	padding:20px;
	overflow:auto;
}

.resource .title {
	color:var(--bg-dark);
	font-weight:bold;
}

.arrows {
	width:calc(20% - 60px);
	text-align:center;
}

.arrows img {
	margin:10px;
	cursor:pointer;
}

.results_page {
	position:absolute;
	top:20px;
	left:20px;
	right:340px;
	bottom:20px;
	background-color:#FFFFFFEE;
	overflow:auto;
}

.results_page_chart {
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	min-height:600px;
	min-width:600px;
}

.results_page_left {
	position:absolute;
	top:20px;
	right:20px;
	width:260px;
	bottom:300px;	
	padding:20px;
	background-color:#FFFFFFEE;
	text-align:center;
	font-size:16px;
	line-height:24px;
	display:flex;
	flex-direction:column;
	overflow:auto;
}

.results_page_menu {
	position:absolute;
	right:20px;
	width:260px;
	height:230px;
	bottom:20px;
	padding:20px;	
	display:flex;
	flex-direction:column;
}


.component_page {
	position:absolute;
	top:20px;
	left:20px;
	right:20px;
	bottom:20px;
	background-color:#FFFFFFEE;
}

.component_page_flex {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:50px;
	padding:20px;
	display:flex;
	flex-direction:column;
	font-size:14px;
	line-height:20px;
}

.component_page_title {
	display:block;
	padding:20px;
	background-color: var(--bg-dark);
	font-size:20px;
	color:#fff;
	line-height:30px;
	font-weight:bold;
}

.component_page h1 {
	color:#000;
	font-size:20px;
	font-weight:bold;
}

.component_page_steps {
	flex:1;
	display:flex;
	flex-direction:row;
	gap:20px;
	overflow:hidden;
}

.component_page_step {
	width:50%;
	border:1px solid var(--bg-dark);
	border-radius:3px;
	-webkit-box-shadow: 0px 0px 10px 0px #414141; 
	box-shadow: 0px 0px 10px 0px #414141;
	padding:20px;
	overflow:auto;
}

.component_page_step h1 {
	color:#000;
	font-size:16px;
	font-weight:bold;
	font-style:italic;
}

/* Pour export PDF */

.pdf h1 {
	color: var(--bg-dark);
	font-size:30px;
}

.pdf table {
	font-size: 10px;
	border: 1px solid var(--bg-dark);
    border-collapse: collapse;
}
.pdf table th {
	background-color: var(--bg-dark);
	color:#fff;
}
.pdf table tbody tr:nth-child(odd) td {
    background-color: var(--bg-light);
}



/* ----------------------------------------------
 * Generated by Animista on 2026-6-12 19:23:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}