:root{
  --dark-100: #233546;
 
  --primary-100: #FF9187;
  --primary-000: #FFB9AC;

  --secondary-100: #FFF3EB;
  --secondary-200: #FFEADC;
  --secondary-300: #FFD7C1;
  --secondary-400: #FFB9AC;

  --medium-100: #536779;
  --medium-200: #C6CED5;

  --bluegrey-100: #E5E7F4;

  --light-100: #F4F4F4;
  --white: #FFFFFF;
  --black: #000;

  --dav-1: #893833;
  --dav-2: #BB374B;
  --dav-3: #D24749;
  --dav-4: #EA5759;
  --dav-5: #F47A6F;
  --dav-6: #FF9187;
  --dav-7: #FFB9AC;
  --dav-8: #FFD7C1;
  --dav-9: #FFEADC;
  --dav-10: #FFF3EB;

  --des-1: #075B46;
  --des-2: #08806C;
  --des-3: #00AB8B;
  --des-4: #29B796;
  --des-5: #50C1A0;
  --des-6: #79CEAC;
  --des-7: #A0D8B6;
  --des-8: #BCEDCA;
  --des-9: #D3F5DD;
  --des-10: #EAFDF0;

  --dex-1: #535E79;
  --dex-2: #6D708A;
  --dex-3: #80879E;
  --dex-4: #969BB1;
  --dex-5: #ADADC4;
  --dex-6: #BBBBD0;
  --dex-7: #C9C9DC;
  --dex-8: #D7D8E8;
  --dex-9: #E5E7F4;
  --dex-10: #F3F3FA;

  --gen-1: #0a4e75;
  --gen-2: #106089;
  --gen-3: #1776a6;
  --gen-4: #2993c9;
  --gen-5: #4ba8d8;
  --gen-6: #61b7e3;
  --gen-7: #81c6ea;
  --gen-8: #a0d5f1;
  --gen-9: #c0e4f7;
  --gen-10: #dff3fe;
  
  --mco-1: #9B4D31;
  --mco-2: #BD542B;
  --mco-3: #D66C3D;
  --mco-4: #EB804B;
  --mco-5: #F09457;
  --mco-6: #F4B462;
  --mco-7: #F9C56A;
  --mco-8: #FED871;
  --mco-9: #FFE694;
  --mco-10: #FFF0B3;
 
  --had-1: #500F31;
  --had-2: #711544;
  --had-3: #911754;
  --had-4: #AE265A;
  --had-5: #C1346A;
  --had-6: #DB3C71;
  --had-7: #EE6593;
  --had-8: #F08EB5;
  --had-9: #FAACCA;
  --had-10: #FFCEE3;
 
  --psy-1: #27285A;
  --psy-2: #31306F;
  --psy-3: #434191;
  --psy-4: #5551A8;
  --psy-5: #6966C0;
  --psy-6: #887ACF;
  --psy-7: #9C8FDE;
  --psy-8: #ADA1E9;
  --psy-9: #C8BCF2;
  --psy-10: #E0D8FA;  
  
  --smr-1: #06412B;
  --smr-2: #0E5335;
  --smr-3: #1C6845;
  --smr-4: #198157;
  --smr-5: #41A86D;
  --smr-6: #5DBB78;
  --smr-7: #88C87F;
  --smr-8: #9DDB95;
  --smr-9: #BEEFA8;
  --smr-10: #DDFFC0;  
  
  --esms-1: #421233;
  --esms-2: #5E1548;
  --esms-3: #7B2667;
  --esms-4: #973784;
  --esms-5: #B351A1;
  --esms-6: #CD69BA;
  --esms-7: #DF80CB;
  --esms-8: #F296D7;
  --esms-9: #F7BDED;
  --esms-10: #FBE1F6;
}

.dark-100 {     color: var(--dark-100)      !important;} .bg-dark-100 {     background-color: var(--dark-100)       !important;}
.primary-100 {  color: var(--primary-100)   !important;} .bg-primary-100 {  background-color: var(--primary-100)    !important;}
.primary-000 {  color: var(--primary-000)   !important;} .bg-primary-000 {  background-color: var(--primary-000)    !important;}
.secondary-100 {color: var(--secondary-100) !important;} .bg-secondary-100 {background-color: var(--secondary-100)  !important;}
.secondary-200 {color: var(--secondary-200) !important;} .bg-secondary-200 {background-color: var(--secondary-200)  !important;}
.secondary-300 {color: var(--secondary-300) !important;} .bg-secondary-300 {background-color: var(--secondary-300)  !important;}
.secondary-400 {color: var(--secondary-400) !important;} .bg-secondary-400 {background-color: var(--secondary-400)  !important;}
.medium-100 {   color: var(--medium-100)    !important;} .bg-medium-100 {   background-color: var(--medium-100)     !important;}
.medium-200 {   color: var(--medium-200)    !important;} .bg-medium-200 {   background-color: var(--medium-200)     !important;}
.bluegrey-100 { color: var(--bluegrey-100)  !important;} .bg-bluegrey-100 { background-color: var(--bluegrey-100)   !important;}
.light-100 {    color: var(--light-100)     !important;} .bg-light-100 {    background-color: var(--light-100)      !important;}
.white {        color: var(--white)         !important;} .bg-white {        background-color: var(--white)          !important;}
.black {        color: var(--black)         !important;} .bg-black {        background-color: var(--black)          !important;}

.gen-2 {  		color: var(--gen-2)   		!important;} .bg-gen-2 {  		background-color: var(--gen-2)    		!important;}
.gen-4 {  		color: var(--gen-4)   		!important;} .bg-gen-4 {  		background-color: var(--gen-4)    		!important;}
.gen-6 {  		color: var(--gen-6)   		!important;} .bg-gen-6 {  		background-color: var(--gen-6)    		!important;}
.gen-10 {  		color: var(--gen-10)   		!important;} .bg-gen-10 {  		background-color: var(--gen-10)    		!important;}

.mco-2 {      	color: var(--mco-2)       	!important;} .bg-mco-2 {      	background-color: var(--mco-2)			!important;}
.mco-4 {		color: var(--mco-4) 		!important;} .bg-mco-4 {		background-color: var(--mco-4) 			!important;}
.mco-6 {		color: var(--mco-6) 		!important;} .bg-mco-6 {		background-color: var(--mco-6) 			!important;}
.mco-10 {		color: var(--mco-10) 		!important;} .bg-mco-10 {		background-color: var(--mco-10) 		!important;}

.had-2 {		color: var(--had-2) 		!important;} .bg-had-2 {		background-color: var(--had-2) 			!important;}
.had-4 {		color: var(--had-4) 		!important;} .bg-had-4 {		background-color: var(--had-4) 			!important;}
.had-6 {		color: var(--had-6) 		!important;} .bg-had-6 {		background-color: var(--had-6) 			!important;}
.had-10 {		color: var(--had-10) 		!important;} .bg-had-10 {		background-color: var(--had-10) 		!important;}

.psy-2 {		color: var(--psy-2) 		!important;} .bg-psy-2 {		background-color: var(--psy-2) 			!important;}
.psy-4 {		color: var(--psy-4) 		!important;} .bg-psy-4 {		background-color: var(--psy-4) 			!important;}
.psy-6 {		color: var(--psy-6) 		!important;} .bg-psy-6 {		background-color: var(--psy-6) 			!important;}
.psy-10 {		color: var(--psy-10) 		!important;} .bg-psy-10 {		background-color: var(--psy-10) 		!important;}

.smr-2 {		color: var(--smr-2) 		!important;} .bg-smr-2 {		background-color: var(--smr-2) 			!important;}
.smr-4 {		color: var(--smr-4) 		!important;} .bg-smr-4 {		background-color: var(--smr-4) 			!important;}
.smr-6 {		color: var(--smr-6) 		!important;} .bg-smr-6 {		background-color: var(--smr-6) 			!important;}
.smr-10 {		color: var(--smr-10) 		!important;} .bg-smr-10 {		background-color: var(--smr-10) 		!important;}

.esms-2 {		color: var(--esms-2) 		!important;} .bg-esms-2 {		background-color: var(--esms-2) 		!important;}
.esms-4 {		color: var(--esms-4) 		!important;} .bg-esms-4 {		background-color: var(--esms-4) 		!important;}
.esms-6 {		color: var(--esms-6) 		!important;} .bg-esms-6 {		background-color: var(--esms-6) 		!important;}
.esms-10 {		color: var(--esms-10) 		!important;} .bg-esms-10 {		background-color: var(--esms-10) 		!important;}

.dex-2 {		color: var(--dex-2) 		!important;} .bg-dex-2 {		background-color: var(--dex-2) 			!important;}
.dex-4 {		color: var(--dex-4) 		!important;} .bg-dex-4 {		background-color: var(--dex-4) 			!important;}

.dav-3 {		color: var(--dav-3) 		!important;} .bg-dav-3 {		background-color: var(--dav-3) 			!important;}
.dex-6 {		color: var(--dav-6) 		!important;} .bg-dav-6 {		background-color: var(--dav-6) 			!important;}
.dex-10 {		color: var(--dav-10) 		!important;} .bg-dav-10 {		background-color: var(--dav-10) 			!important;}

body{
	padding: 0; margin: 0;
	font-family: "DMSans";
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--medium-100);
}

/* width */
::-webkit-scrollbar {
	width: 10px;
  }

/* Track */
::-webkit-scrollbar-track {
	background: var(--white); 
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #DDD; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #CCC; 
}


.d-none{
	display: none !important;
}
.float-r{
	float:right;
}
.float-l{
	float:left;
}
.flex-vertical-center{
	display: flex;
	align-items:center;
	flex-direction:row;
}
.flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
}
.m-auto{
	margin:auto;
}
.mb-10{
	margin-bottom:10px;
}
.ml-10{
	margin-left:10px;
}
.mt-10{
	margin-top:10px;
}
.mr-10{
	margin-right:10px;
}

h0{font-size: 58px; line-height:58px; font-weight: 900; color:var(--dark-100); margin:0;}
h1{font-size: 42px; line-height:42px; font-weight: 900; color:var(--dark-100); margin:0;}
h2{font-size: 32px; line-height:32px; font-weight: 800; color:var(--dark-100); margin:0;}
h3{font-size: 26px; line-height:26px; font-weight: 700; color:var(--dark-100); margin:0;}
h4{font-size: 24px; line-height:32px; font-weight: 700; color:var(--dark-100); margin:0;}
h5{font-size: 22px; line-height:22px; font-weight: 700; color:var(--dark-100); margin:0;}
h6{font-size: 20px; line-height:20px; font-weight: 700; color:var(--dark-100); margin:0;}

p{font-size: 16px; font-weight: 400; color:var(--medium-100);}

.medium {font-weight: 500 !important;}
.bold {font-weight: 700 !important;}
.italic {font-style: italic !important;}

.small-title {font-size:20px;line-height:32px;font-weight:400;color:var(--dark-100);}
.texte-article {font-size: 18px; line-height: 28px; font-weight: 400; color: var(--medium-100);}
.texte-detail {font-size: 14px; line-height: 14px; font-weight: 400; color: var(--medium-100);}
.texte-mention {font-size: 12px; line-height: 20px; font-weight: 400; color: var(--medium-100); opacity: 70%;}

.label-button{font-size: 12px;line-height: 20px;font-weight: 700;color:var(--dav-3);}
.label-button:hover{text-decoration: underline dotted var(--dav-3);text-decoration-thickness: 20%;text-underline-offset: 25%;text-decoration-skip-ink: auto;}

.card-title{font-size: 24px;line-height: 32px;font-weight: 700;color: var(--dark-100);}
.card-title-sm{font-size: 16px;line-height: 24px;font-weight: 700;color: var(--dark-100)}
.label{font-size: 12px;line-height: 18px;font-weight: 600;color:var(--dark-100);letter-spacing: 2px;}
.placeholder{font-size: 16px;line-height: 24px;font-style: italic;color:var(--medium-100);font-weight: 400;opacity:0.7;}
.text-info{font-size: 14px;line-height: 21px;color:var(--secondary-100);font-weight: 700;}

.transform-uppercase{
	text-transform: uppercase;
}


.collapse-title{
	text-decoration:none;
	color:var(--black);
	display:flex;
	align-items:center;
	justify-content:space-between;
	font-weight:700;
	size:16px;
	line-height:24px;
	cursor:pointer;
}

.collapse .collapse-title{
	font-weight:600;
	size:14px;
	line-height:21px;
	text-transform:uppercase;
}
.collapse-title::after{
	font-family: 'feather' !important;
	content:"\e947";
	float:right;
}
.collapse-title.active::after{
	font-family: 'feather' !important;
	content:"\e940";
}

.collapse{
	padding-left:40px;
	transition:0.5s;
	display:flex;
	flex-direction:column;
	margin:10px 0;
}
.collapse.collapsed{
	height:0;
	overflow:hidden;
}


.content-frame{
	padding:60px;
}
.content-frame.frame-left{
	border-radius:0 60px 60px 0;
}
.content-frame.frame-right{
	border-radius:60px 0 0 60px;
}

.form-container{
	margin-top:20px;
	margin-bottom:20px;
	border-radius:30px 0 30px 0;
	background-color:var(--secondary-100);
	padding: 20px;box-sizing: border-box;
}

.card{
	border-radius:30px 0 30px 0;
	padding: 20px;
	box-sizing: border-box;
}
.card span{
	margin-right:5px;
}

.card img{
	padding-top:30px;
	height:45px;
	width:45px;
}
.card_square {
	border-radius: 8px;
	padding: 40px;
	box-sizing: border-box;
}

/* NAVBAR */
nav.navbar{
	background-color: var(--white);
	display: flex;
	flex-direction: row;
}
.navbar-brand{
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.navbar-brand > *{
	height: 30px;
}
.navbar-list{
	width:100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	font-weight: 600;
	gap: 24px;
	padding: 0 16px;
	max-height: 64px;
}
nav.navbar a{
	text-decoration:none !important;
}
.navbar-item{
	cursor: pointer;
	font-size: 15px;
	line-height: 22.5px;
	margin:0 10px;
	color:var(--dark-100);
	text-decoration:none !important;
}
.navbar-title{
	font-size: 20px;
	line-height: 32px;
	font-weight: 800;
	padding: 16px 24px;
	width: fit-content;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	cursor:default;
}


/* BOUTONS */
.btn{
	display:flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 20px;
	outline: none;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.5s ease-out;
	background-color: transparent;
	border: 2px solid transparent;
	color: var(--dark-100);
	font-size: 14px;
	font-weight: 500;
	text-decoration:none;
	gap: 8px;
	box-sizing: border-box;
	width: fit-content;
	height: fit-content;
}
.btn:focus{
	border: 1px solid var(--white);
	box-shadow: 0px 0px 0px 2px var(--primary-100);
}
.btn a{
	text-decoration:none;
	color:inherit;
}

/* OPTIONS DE BOUTONS (à rajouter avec .btn) */
.btn-sm{
	padding: 2px 10px;
}
.btn-lg {
	border-radius: 70px;
	padding: 20px 24px;
	font-size: 16px;
}
.btn-round{
	width: 45px;
	height: 45px;
	padding: 0;
	text-align: center;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	overflow: hidden;
	font-size: 20px;
}
.btn-round.btn-lg{
	width: 70px;
	height: 70px;
	font-size: 24px;
}
.btn-round.btn-sm{
	width: 45px;
	height: 32px;
	font-size: 16px;
}
.btn.disabled, .btn:disabled, .btn.disabled:hover{
	background-color:var(--light-100);
	color: var(--medium-100);
	border-color: var(--light-100);
	pointer-events: none;
	opacity: 70%;
}
.btn.disabled i {
	background-color: var(--medium-200);
	color: var(--medium-100);
}
.btn.disabled.dark{
	background-color: #3B4E60;
	border-color: #3B4E60;
	color: var(--dex-9);
}
.btn.disabled.dark i {
	background-color: var(--dex-9);
	color: var(--white);
}

/* BOUTONS PARTICULIERS */
.btn-statement{
	border-radius: 32px;
	padding: 16px 24px;
	color: var(--dark-100);
	font-size: 16px;
	font-weight: 500;
	border:none;
}
.btn-statement i {
	border-radius: 16px;
	padding: 16px;
	color: var(--dark-100);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.btn-statement.btn-lg{
	font-size: 24px;
	padding: 16px 24px;
}.btn-statement.btn-lg i{
	font-size: 24px;
	padding: 16px;
}
.btn-statement.btn-sm{
	font-size: 16px;
	padding: 6px 8px;
}.btn-statement.btn-sm i{
	font-size: 16px;
	padding: 8px;
}
.btn-statement{ 			background-color: var(--primary-100);}
.btn-statement:hover{		background-color: var(--primary-000);}
.btn-statement:active{ 		background-color: var(--primary-100);}
.btn-statement:focus{		background-color: var(--primary-000);}
.btn-statement i{ 			background-color: var(--dav-3);}
.btn-statement:hover i{		background-color: var(--primary-100);}
.btn-statement:active i{ 	background-color: var(--dav-3);}
.btn-statement:focus i{		background-color: var(--primary-100);}

.btn-statement.dark{ 			background-color: var(--white);			color: var(--dav-3)}
.btn-statement.dark:hover{		background-color: var(--dav-3);			color: var(--white);}
.btn-statement.dark:active{ 	background-color: var(--primary-100);	color: var(--dark-100)}
.btn-statement.dark:focus{		background-color: var(--dav-3);			color: var(--white)}
.btn-statement.dark i{ 			color: var(--dark-100);}


.barre_action {
	display: flex;
	flex-direction: row;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--secondary-100);
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.barre_action_annuler {
	padding: 12px 24px;
	border-radius: 30px;
	background-color: transparent;
	color: var(--dav-3);
}
.barre_action_valider {
	padding: 0 20px;
	margin: 0;
	border-radius: 20px 0 0 0;
	height: 100%;
	width: fit-content;
	color: var(--dark-100);
	background-color: var(--primary-100);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
}
.barre_action_valider p {
	color: var(--dark-100);
	margin: 0;
}
.barre_action_valider:hover{
	background-color: var(--primary-000);
}

.btn-split {
	border: 2px solid var(--primary-100);
	color: var(--dark-100);
	padding: 5px;
}
.btn-split a{
	padding: 4px 12px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 50px;
	letter-spacing: 1px;
	text-decoration: none;
}
.btn-split a:hover{
	background-color: var(--secondary-300);
}
.btn-split .split {
	height: 20px;
	border-left: 1px solid var(--primary-100);
}

/* BOUTONS COULEURS PRINCIPALES */
.btn-primary{ 				background-color: var(--primary-100);}
.btn-primary:hover{			background-color: var(--primary-000);}
.btn-primary:active{ 		background-color: var(--primary-100);}
.btn-primary:focus{			background-color: var(--primary-000);}
.btn-primary.dark{ 			background-color: var(--white);			color: var(--dav-3);}
.btn-primary.dark:hover{	background-color: var(--dav-3);			color: var(--white);}
.btn-primary.dark:active{	background-color: var(--primary-100); 	color: var(--dark-100);}
.btn-primary.dark:focus{	background-color: var(--dav-3);			color:var(--white);}

.btn-secondary{ 			background-color: var(--secondary-100);}
.btn-secondary:hover{		background-color: var(--secondary-200);}
.btn-secondary:active{		background-color: var(--secondary-400);}
.btn-secondary:focus{		background-color: var(--secondary-200);}
.btn-secondary.dark{		background-color: var(--secondary-400);}
.btn-secondary.dark:hover{	background-color: var(--secondary-200);}
.btn-secondary.dark:active{	background-color: var(--primary-100);}
.btn-secondary.dark:focus{	background-color: var(--secondary-200);}

.btn-tertiary{ 				background-color: transparent;			color: var(--dav-3);}
.btn-tertiary:hover {		background-color: var(--secondary-100); color: var(--dark-100);}
.btn-tertiary:active{		background-color: var(--secondary-200); color: var(--dark-100);}
.btn-tertiary:focus{		background-color: var(--secondary-100); color: var(--dark-100);}
.btn-tertiary.dark{			color: var(--primary-000);}
.btn-tertiary.dark:hover {	background-color: var(--secondary-200); color: var(--dark-100);}
.btn-tertiary.dark:active{	background-color: var(--secondary-400); color: var(--dark-100);}
.btn-tertiary.dark:focus{	background-color: var(--secondary-200); color: var(--dark-100);}

.btn-outline{				background-color: transparent; 			border: 2px solid var(--primary-100);}
.btn-outline:hover {		background-color: var(--primary-000);	border-color: transparent;}
.btn-outline:active{ 		background-color: var(--primary-100);	border-color: transparent;}
.btn-outline:focus{			background-color: var(--primary-000);	border-color: transparent;}
.btn-outline.dark {			background-color: transparent;			color: var(--white); }
.btn-outline.dark:hover {	background-color: var(--primary-100);	color:var(--dark-100); border-color: transparent;}
.btn-outline.dark:active{	background-color: var(--primary-000);	color:var(--dark-100); border-color: transparent;}
.btn-outline.dark:focus{	background-color: var(--primary-100);	color:var(--dark-100); border-color: transparent;}

.btn-error{ 				background-color: var(--had-3);			color: var(--white); }
.btn-error:hover{ 			background-color: var(--had-10); 		color: var(--dark-100);}
.btn-error:active{ 			background-color: var(--had-3);			color: var(--white); }
.btn-error:focus{ 			background-color: var(--had-10); 		color: var(--dark-100);}



/* INPUTS */
input[type="checkbox"]{
	border-radius: 5px;
	accent-color: var(--primary-100);
	border: 1px solid var(--bluegrey-100);
	width: 20px;
	height: 20px;
}
input[type="checkbox"].checkbox-sm{
	width: 16px;
	height: 16px;
}


/* SELECT */
.custom-select select{
	display: none;
}
.custom-select, .custom-form{
	background-color: var(--white);
	border-radius: 10px;
	--width: 400px;
	max-height: 128px;
	padding: 8px 15px;
	border: 1px solid var(--bluegrey-100);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	align-items: center;
}

.custom-select:has(select[disabled]){
	opacity:0.5;
	filter:saturate(0);
	pointer-events:none;
	user-select:none;
}

.custom-select input {
	background-color: var(--white);
	font-size: 16px;
	font-style: italic;
}
.custom-select.open, .custom-form:has(input:focus){
	border: 2px solid var(--primary-100);
}

.custom-form-sm{
	border:2px solid var(--bluegrey-100);
	background-color: var(--white);
	padding:8px;
	border-radius:10px;
	display:flex;
	flex-direction:row;
}

.custom-form-sm input, .custom-form-sm select{
	outline:none;
	border:none;
	width:100%;
}

.custom-form-sm::before, .custom-form-sm::before{
	content: "\e9d8";
	width: 24px;
	height: 24px;
	display: block;
	color: var(--primary-100);
}

.custom-select::before, .custom-form::before{
	content: "\e9d8";
	font-family: 'feather' !important;
	width: 24px;
	height: 24px;
	display: block;
	color: var(--primary-100);
}
.custom-select::after{
	content: "▾";
	display: block;
	width: 24px;
	height: 24px;
	text-align: center;
	 line-height: 24px;
}
.custom-form-sm option{
	display:block;
	padding:30px 8px;
}
.custom-select.open::after{
	content: "▴";
}

.dropdownarea{
	max-height: 400px;
	overflow-x: hidden;
	overflow-y:scroll;
	box-sizing: border-box;
	background-color: var(--white);
	position: absolute;
	padding: 10px;
	left: -2px;
	top: 100%;
	min-width: calc(100% + 2px);
	margin-top: 5px;
	border: 1px solid var(--light-100);
	box-shadow:0 0 5px rgba(0,0,0,0.3);
	z-index: 10;
}
.dropdownarea-bottomup{
	top:unset !important;
	bottom: 100% !important;
	margin-top: unset !important;
	margin-bottom: 5px !important;
}
.dropdownarea svg{
	width: 528px;
	height: 300px;
}

.dropdownarea svg path:not(.notallowed):hover{
	fill: var(--dark-100);
	cursor: pointer;
}

.dropdownarea svg path.notallowed{
	fill: var(--dex-4);
}
.selectedelement{
	width: calc(100% - 90px);
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	flex-direction: row;
	overflow-x:hidden;
	max-height: 128px;
}
.selectedelement div{
	background-color: var(--primary-100);
	color: var(--dark-100);
	padding:0px 4px;
	max-height:22px;
	border-radius: 4px;
	margin-right: 7px;
	margin-bottom:1px;
	display: flex;
	flex-direction: row;
	white-space:nowrap;
	text-overflow:elipsis;
	overflow:hidden;
}
.selectedelement div::after{
	content: "×";
	display: flex;
	align-items: center;
	margin-left: 5px;
	cursor: pointer;
}
.optgroup{
	margin-bottom:12px;
	padding: 8px;
	border-radius: 5px;
	background-color: #DDD;
}
.optgroup > label{
	padding: 5px 15px ;
}

.options{
	padding:0 8px;
	display: flex;
	flex-direction: column;
}
.optgroup .options > label{
	background-color: var(--white);
}

.options > label{
	background-color: #DDD;
	margin: 5px 0;
	box-sizing: border-box;
	padding: 12px 15px;
	border-radius: 5px;
}

.optgroup label{
	width: 100%;
	display: block;
	user-select: none;
}
.custom-select input[type="checkbox"]{
	display: none;
}

.custom-select .options label:has(input[type="checkbox"]:checked){
	background-color: var(--secondary-300);
}

.optgroup:has(> label input[type="checkbox"]:checked){
	background-color: var(--secondary-100);
}

.custom-form:has(input[type="text"]:disabled){
	background-color:var(--bluegrey-100);
}

.custom-select input[type="text"],.custom-form input[type="text"]{
	width: 100%;
	height: 20px;
	padding-left: 20px;
	border: none;
	outline: none;
}

.completion-item{
	font-size:20px;
	font-weight:500;
	padding:5px;
	cursor:pointer;
}

.completion-item:hover{
	background-color: var(--light-100);
}

.inline-select{
	background-color:var(--secondary-300);
	border-radius:100px;
	outline:none;
	border:none;
	display:block;
	padding:6px;
	height:48px;
	overflow:hidden;
}

.inline-select option{
	padding:10px;
	border-radius:100px;
	display:inline-block;
}
.inline-select option:checked{
	color:var(--white);
	background-color:var(--primary-100);
}


/* Contrôle segmenté */
.switchListSelect{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	flex-wrap: nowrap;
	background-color: var(--secondary-100);
	border-radius: 20px;
	padding: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--dark-100);
}
.switchListSelect label{
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 14px;
	padding: 3px 8px;
	background-color: transparent;
	gap: 4px;
}
.switchListSelect.input-sm {
	font-weight: 400;
	font-size: 12px;
	padding: 4px;
}
.switchListSelect.input-sm label{
	padding: 3px 6px;
}
.switchListSelect.disabled {
	background-color: var(--light-100); 
	color: var(--medium-100);
	opacity: 70%;
	cursor: none;
	pointer-events: none;
}
.switchListSelect.dark {
	background-color: transparent;
	border: 1px solid var(--secondary-200);
	color: var(--white);
}
.switchListSelect.dark.disabled {
	background-color: transparent;
	border: 1px solid var(--light-100);
}
.switchListSelect label:hover{							background-color: var(--secondary-400);}
.switchListSelect label:has(input:checked){				background-color: var(--primary-100);}
.switchListSelect.disabled label {						background-color: var(--light-100);}
.switchListSelect.disabled label:has(input:checked){	background-color: var(--medium-100);	color: var(--white);}

.switchListSelect.dark label:hover{						background-color: var(--primary-100);	color: var(--dark-100);}
.switchListSelect.dark label:has(input:checked){		background-color: var(--primary-000);	color: var(--dark-100);}
.switchListSelect.disabled.dark label {					background-color: transparent; 			color: var(--bluegrey-100);}
.switchListSelect.disabled.dark label:has(input:checked) {background-color: #3B4E60;			color: var(--bluegrey-100);}


.smallListSelect label input, .switchListSelect label input{
	display:none;
}

/*RANGE Input*/
.rangeWrapper{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap: 15px
}
.rangeWrapper .borderLabel{
	text-align: center;
}
.rangeContainer {
	position:relative;
	flex: 1;
}
.rangeContainer input[type="range"]{
	position: absolute;
	width: 100%;
	pointer-events: none;
	background: none;
	-webkit-appearance: none;
	z-index:2;
}
.rangeContainer input[type="range"]::-webkit-slider-thumb{
	pointer-events:all;
	width: 16px;
	height:16px;
	border-radius:50%;
	background-color: var(--primary-100);
	cursor: pointer;
	-webkit-appearance: none;
	z-index:3;
}
.sliderTrack {
	position: absolute;
	height:10px;
	width:100%;
	background-color: var(--bluegrey-100);
	border-radius:10px;
	z-index:1;
	margin-top:4px;
}
.rangeContainer .bubble {
	position: absolute;
	bottom: -53px;
	background-color : var(--light-100);
	padding: 3px 8px;
	border-radius: 5px;
	border: 1px solid var(--black);
	pointer-events:none;
	text-align: center;
	width:fit-content;
	white-space:nowrap;
	z-index:4;
}

/* BADGES PILULES */
.badge{
	background-color: var(--white);
	padding: 5px 10px;
	border-radius: 18px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.badge .label{
	font-size:12px;
	letter-spacing:normal;
    text-wrap: nowrap;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.badge label{
	max-width: 90%;
	font-size: 14px;
	font-weight: 500;
	color: var(--medium-100);
}
.badge .close::after{
	content: "×";
	cursor: pointer;
	user-select: none;
	font-size: 25px;
	color: var(--medium-100)
}
.badge .tooltip{
	display: none;
}
.badge:hover .tooltip{
	display: flex;
	position: absolute;	
	background-color: var(--medium-100);
	color: var(--white);
	border-radius: 10px;
	padding: 10px;
	bottom: 44px;
	left: 0px;
}

.badge_pilule, .badge_pilule_sm, .badge_pilule_dark {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	cursor: default;
	border-radius: 20px;
	padding: 0 6px 0 6px;
	gap: 4px;
	background-color: var(--bluegrey-100);
	font-size: 14px;
	font-weight: 400;
	color: var(--medium-100);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.badge_pilule_sm {
	padding: 0 6px 0 5px;
	font-size: 12px;
	line-height: 20px;
}

.badge_pilule_dark {
	background-color: var(--white);
}

/* TOAST */
.toastContainer{
	position:fixed;
	width:100%;
	top:10vh;
	display:flex;
	justify-content:center;
	z-index:1000;
}
.toastList{
	display:flex;
	justify-content:center;
	flex-direction:column;
}
.toast{
	width:100%;
	padding: 16px 24px;
	background-color:var(--secondary-100);
	border-radius:16px;
	margin:10px;
	display:flex;
	flex-direction:column;
	gap: 4px;
	align-items:flex-start;
}
.toast .toast-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}
.toast .close{
	margin-left: auto;
	font-size: 24px;
	cursor: pointer;
}
.toast .titre {
	font-size: 16px;
	font-weight: 700;
	color: var(--dav-3);
}
.toast p {
	padding: 0px;
	margin: 0px;
	color: var(--dark-100);
}
.toast .toast-header:before{
	font-family:'feather';
	content: "\e924";
	margin-right:10px;
	color:var(--dav-3);
}

.toast.toast-info{
	background-color: var(--bluegrey-100);
}
.toast.toast-info .toast-header:before, 
.toast.toast-info .titre{
	color:var(--medium-100);
}

.toast.toast-success{
	background-color: var(--smr-10);
}
.toast.toast-success .toast-header:before{
	content: "\e93e";
	color:var(--smr-3);
}
.toast.toast-success .titre{
	color: var(--smr-3)
}

.toast.toast-error{
	background-color: var(--had-10);
}
.toast.toast-error .toast-header:before{
	content: "\e925";
	color:var(--had-3);
}
.toast.toast-error .titre{
	color: var(--had-3);
}

.toast.toast-warning{
	background-color: var(--mco-10);
}
.toast.toast-warning .toast-header:before{
	content: "\e926";
	color:var(--mco-3);
}
.toast.toast-warning .titre{
	color: var(--mco-3)
}

/* MODAL */
.modal-container:has(.modal.show){
	top:0;
}
.modal-container{
	background-color:rgba(0,0,0,0.5);
	left:0;top:-150%;
	width:100vw;
	height:100vh;
	position:fixed;
	display:flex;
	justify-content:center;
	align-items:center;
	
	transition:0.2s;
	z-index:20;
}
.modal{
	border-radius:40px;
	padding:40px;
	background-color:var(--white);
	overflow:hidden;
}
.modal-header{
	color:var(--primary-100);
	font-size:24px;
	margin-bottom:20px;
}
.modal-footer{
	margin-top:20px;
	width:100%;
}

/**/
progress {
  color: var(--primary-100);
}

progress::-moz-progress-bar {
  background: var(--primary-100);
}

*:has(.dropdown){
	position:relative;
}

.dropdown{
	display:none;
	margin-top:10px;
	background-color:var(--white);
	border: 1px solid var(--light-100);
	box-shadow:0 0 5px rgba(0,0,0,0.3);
	padding:15px;
	width:100%;	
	top:100%;
	position:absolute;
	z-index:1000;
}

.dropdown.show{
	display:flex;
}

.dropdown a{
	color: var(--black);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.shake-animation {
  animation: shake 0.4s ease infinite;
}


/* SELECTION ETABLISSEMENT */

.etabitem{
	margin-bottom:5px;
	background-color:color-mix(in srgb, var(--bluegrey-100) 70%, white 30%);
	font-size:12px;
	font-weight: 400;
	color: var(--dark-100);
	display:flex;
	flex-direction:row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px;
	padding-left: 16px;
	border-radius: 8px;

}
.etabitem > div:nth-child(2){
	width:20%;
}
.etabitem > div:nth-child(3){
	width:15%;
}
.etabitem > div:nth-child(4){
	width:15%;
}
.etabitem > div:nth-child(5){
	width:15%;
}

.etabitem .accent{
	--color:var(--dark-100);
	font-weight:700;
}
.etabitem:has(input:checked){
	background-color: var(--secondary-300);
}

.etabitem.disabled{
	pointer-events: none;
	background-color: var(--light-100);
	opacity: 50%;
}