:root {
	--color-appli: rgb(252, 251, 248);
	--color1: #f6f2e9;
	--color2: #ede9e1;
	--color3: #a49982;
	--color-green: #59b25f;
	--color-blue: #6494ce;
	--color-red: #e94b4c;	
	--color-dark: #393e46;
	--color-orange: #f2b80e;
}

table{
	background-color: white !important;
}


@media screen and (max-width: 75em) {
  .web_txt {
    display: none !important;
  }
}



@media screen and (min-width: 75em) {
  .web_txt {
    display: inline-block !important;
  }
}


.border-r12{
  border-radius: 12px;
}

/* FONT */

.ff-title-700{
	font-family: Open Sans;
	font-weight: 700 !important;
	
}

.ff-title{
	font-family: Open Sans;
	font-weight: 600 !important;
	
}

.ff-label{
	font-family: Open Sans;
	font-weight: 600 !important;
}


.ff-text{
	font-family: Open Sans;
}


/* CONTENT */ 

.appli-background {
    background-color: var(--color-appli); 
    height: calc(100% - 76px);
    width: 100%; 		
	min-width: 25em !important; 
    padding:0;
    margin:0;
    overflow-y: auto;
    padding: 1em;
    margin:0 auto;    
}

.appli-background-100 {
    background-color: var(--color-appli);   
    height: calc(100% - 76px);
    width: 100%; 		
	min-width: 25em !important; 
    padding:0;
    margin:0;
    overflow-y: auto;
    padding: 1em;
    margin:0 auto;    
}

@media screen and (min-width: 70em) {
	.appli-background {
		max-width: 70em !important; 		
		min-width: 35em !important; 
	}
	
	.appli-background-100 {
		min-width: 35em !important; 
	}
}



@media screen and (min-width: 70em) {
	
}

@media screen and (max-width: 35em) {
	
	.appli-background {
		width: 100% !important;;     
	}
}


/* list */ 

.fiche{
	border-top-left-radius: 30px;
    border-top-right-radius: 0%;
    border-bottom-right-radius: 0%;
    border-bottom-left-radius: 30px;
	height: 60px;
	margin : 0 !important;
	margin-bottom: .25rem !important;
	padding: 0  !important;
	cursor: pointer;
}

.noclick {
	cursor: default !important;
}



.list{
	border-top-left-radius: 30px;
    border-top-right-radius: 0%;
    border-bottom-right-radius: 0%;
    border-bottom-left-radius: 30px;
	min-height: 60px;
	margin : 0 !important;
	margin-top: .25rem !important;
	padding: 0 !important;
	cursor: pointer;
	background-color: #f8f9fa !important;
}

.list-detail{
	margin : 0 !important;
	margin-left: 30px !important;
	margin-bottom: .25rem !important;
	padding: 0.5rem !important;
	background-color: #f8f9fa !important;
	display:none;
}

.list-detail-popup{
	margin : 0 !important;
	margin-left: 30px !important;
	margin-bottom: .25rem !important;
	padding: 0.5rem !important;
	background-color: #f8f9fa !important;
	display:block;
}


.fiche-cicle, .liste-circle {
	position:relative
}


.fiche-circle-img, .list-circle-img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: white;
}


.urgent {
 border: 3px var(--color-red) solid !important;
  	
}

.fiche-circle-profil, .list-circle-profil {
  position: absolute;
  top:35px;
  left:35px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  z-index: 2;
  font-size: 60% !important;
  color:white;  
}

.list-circle40-img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: white;
}


.list-circle40-profil {
  position: absolute;
  top:20px;
  left:20px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  z-index: 2;
  font-size: 50% !important;
  color:white;  
}


.list:hover {
	background-color: var(--color1) !important;
}



/* BACKGROUND */


.bg-circle {
  position: relative;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  background: white;
}






.bg-circle-profil {
  position: absolute;
  left:50px;
  top:40px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  z-index: 2;
  font-size: 50% !important;
  color:white;  
}

.bg-photo-120 {
  position: relative;
  height: 90px;
  width: 120px;
  border-radius: 0%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  background: var(--gray);
  color:white;
}

@media screen and (max-width: 30em) {
	.bg-photo-120 {
	   height: 80px;
	   width: 100px;
	  
	}
}


.bg-circle-120 {
  position: relative;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  background: white;
  border: 3px solid var(--color1);
}


.bg-circle-120-profil {
  position: absolute;
  left:110px;
  top:80px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  z-index: 2;
  font-size: 75% !important;
  color:white;
}

.bg-circle-120-profil-oblig {
  position: absolute;
  right:10px;
  top:0px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  z-index: 3;
  font-size: 100% !important;
  color:white;
}



.bg-circle-list {
  position: relative;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  background: white;
}

.bg-circle-list-profil {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  z-index: 2;
  font-size: 50% !important;
  color:white;
}


.bg-circle-list-profil-admin {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  margin: 0;
  font-size: 50% !important;
  color:white;
}



.bg-blue {
	background-color: var(--color-blue) !important;	
}

.bg-red {
	background-color: var(--color-red) !important;	
}

.bg-color1, .bg-nav, .bg-button {
	background-color: var(--color1) !important;
	
}

.bg-color2 {
	background-color: var(--color2) !important;	
}

.bg-color-dark {
	background-color: var(--color-dark) !important;	
}


.bg-color-orange {
	background-color: var(--color-orange) !important;	
}

/* TEXT */
.text-blue {
	color: var(--color-blue) !important;	
}

.text-red {
	color: var(--color-red) !important;	
}

.text-color1, .text-nav, .text-button {
	color: var(--color1) !important;
	
}

.text-color2 {
	color: var(--color2) !important;	
}

.text-color-dark {
	color: var(--color-dark) !important;	
}

.text-color3, .title, .txt_link, .txt_link:hover{
	 color: var(--color3) !important;
}


.text-color-orange {
	color: var(--color-orange) !important;	
}

/* BUTTON */


.bt-rounded {
    border-radius: .75rem !important;
}

.bt-rounded-top {
    border-radius: .75rem .75rem 0 0 !important;
}
.bt-rounded-bottom {
    border-radius: 0 0 .75rem .75rem !important;
}



nav{
	background-color: var(--color1) !important;
}

nav.navbar {
	padding: .5rem !important;
	background-color: var(--color1) !important;
}



/* Conteneur du menu : flex + wrap */
.nav-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

/* Par d�faut, le bloc de droite est sur la m�me ligne et coll� � droite */
.nav-right{
  display:flex;
  align-items:center;
  gap:.5rem;           /* espace entre items (Bootstrap 4 n�a pas gap natif) */
  margin-left:auto;    /* BS4; en BS5 utilisez .ms-auto sur l'�l�ment */
}

/* Tablette & mobile : on bascule le bloc de droite � la ligne suivante */
@media (max-width: 991.98px){ /* < lg */
  .nav-left{ order:1; }
  .nav-right{
    order:2;
    flex-basis:100%;        /* prend toute la largeur => nouvelle ligne */
    margin-left:0;          /* on enl�ve le �pousse-�-droite� */
    justify-content:flex-end; /* aligne le groupe � droite sur la 2e ligne */
  }
}


/*
FORM
*/


div.fiche-label {
	color: var(--dark);
	line-height: 3;
	max-width:140px;
	min-width:140px;
}

div.fiche-label2 {
	color: var(--color-dark);
	line-height: 3;
	width:100%;
	border-bottom: 1px solid transparent;
}

div.fiche-value {
	color: var(--color3);
	line-height: 3;
	width:100%;
	border-bottom: 1px solid light;
}


.err {
	border-color: var(--danger) !important;
}

.txt_err {
	color: var(--danger) !important;
}

input.form-control, select.form-control, input-group-text {
	/*border-radius: 23em !important;*/
	/*height: 3em;*/
	
}

textarea.form-control {
	border-radius: 0em  0em 0em 0em !important;	
	min-height: 96px !important;	
}


.h512 {
	height: 512px !important;	
}




.bt-submit {
	background-color:#f6f2e9 !important;
	border-radius: 0.25em !important;
	height: 3em;
	width:100%;
	text-align:center;
	font-family: Open Sans;
	font-weight: 600 !important;
	font-size:0.8rem !important;
}

.bt-goto {
	background-color:var(--color3) !important;
	border-radius: 0.25em !important;
	padding: 0rem 0.5rem;
	text-align:center;
	color:white;
}

.bt-goto-dark {
	background-color:var(--color-dark) !important;
	border-radius: 0.25em !important;
	padding: 0rem 0.5rem;
	text-align:center;
	color:white;
}

.bt-goto-blue {
	background-color:var(--color-blue) !important;
	border-radius: 0.25em !important;
	padding: 0rem 0.5rem;
	text-align:center;
	color:white;
}


.bt-blue {
	background-color:var(--color-blue) !important;
	border-radius: 0.25em !important;
	height: 3em;
	text-align:center;
	font-family: Open Sans;
	font-weight: 600 !important;
	font-size:0.8rem !important;
	color:white;
}

.bt-red {
	background-color:var(--color-red) !important;
	border-radius: 0.25em !important;
	height: 3em;
	text-align:center;
	font-family: Open Sans;
	font-weight: 600 !important;
	font-size:0.8rem !important;
	color:white;
}


.bt-add {
	background-color:var(--color-orange);
	border-radius: 0.25em !important;
	height: 3em;
	text-align:center;
	font-family: Open Sans;
	font-weight: 600 !important;
	font-size:0.8rem !important;
	color:white;	
	
	
}

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

.btn-brown:hover {
	color:white
}

.bt-dark {
	background-color:var(--color-dark);
	border-radius: 0.25em !important;
	height: 3em;
	text-align:center;
	font-family: Open Sans;
	font-weight: 600 !important;
	font-size:0.8rem !important;
	color:white;	
	
	
}

.bt-valid, .bt-success {
	background-color:var(--success) !important;
	border-radius: 0.25em !important;
	height: 3em;
	text-align:center;
	font-family: Open Sans;
	font-weight: 600 !important;
	font-size:0.8rem !important;
	color:white;
}


.bt-valid:hover, 
.bt-dark:hover,  
.bt-goto-blue:hover, 
.bt-red:hover, 
.bt-add:hover , 
.bt-blue:hover, 
.bt-success:hover, 
.bt-submit:hover{
	background:var(--color3) !important;;	
	color:white !important;
}

/*
 Font-size
*/


@media screen and (max-width: 35em) {
	.fs-mobile {
		font-size:0.75rem !important;
	}
	
	.fs-mobile2 {
		font-size:0.6rem !important;
	}
}


/*
SIDEBAR
*/


#sidebar {
	min-width: 280px;
    max-width: 280px;
    background-color: var(--color1);
    color: #fff;
    transition: all 0.3s;
    margin-left: -280px;
    z-index:1000;
    max-height: 100vh;
}

@media screen and (min-width: 75em) {
	#sidebar {
		max-width: 70em; 
		display:block;
		margin-left:0px !important;
	}
	
	#sidebarCollapse {		 
		display:none;
	}
}

#sidebar .sidebar-body {
    padding: 5px 10px;
    min-height: calc(100% - 175px - 150px);
    max-height: calc(100% - 175px - 150px);
    overflow-y: auto;
    overflow-x: none;
    width:100%;
}

#sidebar .sidebar-bottom {
	padding: 0 10px;
    height: 150px;
    overflow-y: none;
    overflow-x: none;
    width:100%;
    background: var(--color2);
}



#sidebar ul li a {
    color: var(--color3);
    font-family: Open Sans;
	font-weight: 600 !important;
}

#sidebar ul li a:hover {
    background: white;
}

#sidebar ul li.active>a, a[aria-expanded="true"] {
    color: var(--dark);
   
}

#sidebar div.sidebar-bottom ul.components {
    padding: 0;
}

#sidebar div.sidebar-bottom ul li a {
    color: var(--dark);
    font-family: Open Sans;
	font-weight: 400 !important;
}


/* TALBEAU */


.td-100 {
	max-width: 100px !important;
	min-width: 100px !important;
}

.td-140 {
	max-width: 140px !important;
	min-width: 140px !important;
}

@media screen and (max-width: 35em) {
	.td-100 {
	max-width: 80px !important;
	min-width: 80px !important;
	}
	
	.td-140 {
	max-width: 110px !important;
	min-width: 110px !important;
	}
}


/* HOVER */

 .hover:hover{
	 background-color: var(--light) !important;
}


/* TABLE */

table.admin  {
	
}

table.admin thead th {
	position: sticky;
    background: white;
    top:1px;
    z-index:10;
}


table.admin tbody td {
	/*
	border-top:0 !important;
    border-bottom: 1px solid #dee2e6;
    */
}

/* TEXT-ALIGN */
table td.tr, table th.tr {text-align:right}
table td.tl, table th.tl {text-align:left}
table td.tc, table th.tc {text-align:center}

/* Display switch Size */ 

@media screen and (max-width: 39.9375em) {
	.tablet { display: none !important; }	
	.web { display: none !important; }	
    .mob { display: block !important; }
    .mNone {display: none !important; } /* Patch old css */ 
}

@media screen and (min-width: 39.9375em) {
	.web { display: none !important; }	
    .mob { display: none !important; }	
	.tablet { display: block !important; }
}

@media screen and (min-width: 75em) {
	.tablet { display: none !important; }
    .web { display: block !important; }	
}


.input-wrapper {
  position: relative;
  width: 250px;
}

.input-wrapper input {
  width: 100%;
  padding-right: 30px; /* espace pour la croix */
  box-sizing: border-box;
  height: 35px;
  font-size: 16px;
}

.input-wrapper .clear-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: red;
  display: none;
}