@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
*{
    box-sizing: border-box; 
    font-family: 'Poppins', sans-serif;
    /* font-weight:bold; */
    margin: 0;
    padding: 0;
}
body{

}
:root {
	--kdBlueL :#C0DDFF;
	--kdBlue :#3E97FF;
	--kdBlueD :#002652;
	
	--kdBlue2L :#a6d0e0;
	--kdBlue2 :#4275b3;
	
	--kdGreenL :#AEFEA1;
	--kdGreen :#52b36c;
	--kdGreenD :#0B5200;
	
	--kdGreyL :#EDEDED;
	--kdGreyLL :#f8f9fa;
	--kdGrey :#BEBEBE;
	--kdGreyy :#e1e4e8;
	--kdGreyD :#2e2e2e;
	
	--kdRedL :#FFBBBB;
	--kdRed :#FF0000;
	--kdRedD :#580000;
	
	--kdOrangeL :#FFC0B2;
	--kdOrange :#FF5733;
	--kdOrangeD :#9A1C00;

	--kdBlack :#000000;
	--kdWhite :#FFFFFF;
	--kdBeige :#F5F5DC;

	--kdYellow :#fabb05;
	--kdYellowL :#fef3d3;
	--kdYellowD :#999900;

	--dsBlue : #07b1b1;
	--dsBlack : #2F2F35;
	--dsGrey : #C2C7CF;
	--dsGreyL : #05C168;
	--dsRed : #FF5A65;

	--rhBlue : #004080;
	--rhBlueL : #007BFF;
	--rhGreyL : #F5F5F5;
	--rhGreyD : #333333;
	--rhGreen : #28a745;
	--rhRed : #dc3545;

	--kdViolet : #4338ca;
	--kdVioletL : #6366f1;
	--kdVioletLL : #f1f5f9;
	--kdVioletD : #240265;


	
	
	/* tailles utiles */
	--kdDivForm: 30px;
	--kdFontSizeForm: 14px;

}


.transparent{
	background-color:transparent;
}
input:focus {
  outline: none;
  box-shadow: none;
}

input,textarea {
  border: none;
  outline: none;
  box-shadow: none;
}

.loader {
  width: 20px;
  height: 20px;
  border: 4px solid #ccc;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
  background-color: white;
  padding:2px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

iframe body>img {
	width: 100%; /* L'image prendra toute la largeur disponible */
	height: auto; /* La hauteur sera ajustée pour maintenir les proportions */
	display: block; /* Évite les marges indésirables autour de l'image */
  }

h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}
.arial{font-family:Arial, sans-serif !important;}

table{
	    border-collapse: collapse;

}

div{box-sizing: border-box; }

input[type!="checkbox"],textarea{
    border: none; /* Supprime les bordures */
    outline: none; /* Supprime l'outline qui apparaît lors de la sélection */
    box-shadow: none; /* Supprime les ombres internes */
    -webkit-appearance: none; /* Spécifique à Chrome et Safari pour supprimer certaines stylisations par défaut */
    -moz-appearance: none; /* Spécifique à Firefox */
    appearance: none; /* Standard pour supprimer des styles par défaut appliqués par le navigateur */
}


.kdTitreBlue{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	border:1px solid var(--kdBlue);
	background-color:var(--kdBlueL);
	color:var(--kdBlueD);
	font-size:14px;
	font-weight:bold;
	padding: 2px 10px 2px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.kdTitreRed{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	border:1px solid var(--kdRed);
	background-color:var(--kdRedL);
	color:var(--kdRedD);
	font-size:14px;
	font-weight:bold;
	padding: 2px 10px 2px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.kdTitreGreen{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	border:1px solid var(--kdGreen);
	background-color:var(--kdGreenL);
	color:var(--kdGreenD);
	font-size:14px;
	font-weight:bold;
	padding: 2px 10px 2px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.kdTitreOrange{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	border:1px solid var(--kdOrange);
	background-color:var(--kdOrangeL);
	color:var(--kdOrangeD);
	font-size:14px;
	font-weight:bold;
	padding: 2px 10px 2px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.kdTitreGrey{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	border:1px solid var(--kdGrey);
	background-color:var(--kdGreyL);
	color:var(--kdGreyD);
	font-size:14px;
	font-weight:bold;
	padding: 2px 10px 2px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.kdTitreBlack{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	border:1px solid var(--kdBlack);
	background-color:var(--kdBlack);
	color:white;
	font-size:14px;
	font-weight:bold;
	padding: 2px 10px 2px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.kdTitreWhite{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	border:1px solid var(--kdWhite);
	background-color:var(--kdWhite);
	color:var(--kdGreyD);
	font-size:14px;
	font-weight:bold;
	padding: 2px 10px 2px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.kdTitreBeige{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	border:1px solid var(--kdBeige);
	background-color:var(--kdBeige);
	color:var(--kdGreyD);
	font-size:14px;
	font-weight:bold;
	padding: 2px 10px 2px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.kdTitreYellow{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	border:1px solid var(--kdYellow);
	background-color:var(--kdYellowL);
	color:var(--kdYellowD);
	font-size:14px;
	font-weight:bold;
	padding: 2px 10px 2px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}




.kdinputListSelect{
	/* border:1px solid red; */
	max-height:200px;
	overflow:auto;
	margin:0px 0px 0px 00px;
	width:100%;
	background-color:var(--kdGreyL);
	/* padding:2px; */
	
	position:absolute; top:35px; left:0px;
	z-index:6;
}

.afficheDataMain{
/* border:1px solid var(--kdGrey); */
width:100%;	
border-radius:0px 5px 5px 5px;
margin:5px;
}

.afficheDataMain div:nth-child(1){
	border:1px solid var(--kdGrey);
	background-color:var(--kdGreyL);
	/* width:100%; */
	font-size:12px;
	border-radius:0px 5px 0px 0px;
	padding:0px 5px 0px 5px;
	border-bottom:0;
}

.afficheDataMain div:nth-child(2){
	border:1px solid var(--kdGrey);
	width:100%;
	padding:0px 5px 0px 5px;
	border-radius:0px 3px 3px 3px;
	font-size:12px;
}

.inputV3{
	position:relative;
	
	display:flex;

	ALIGN-ITEMS:flex-end;
	ALIGN-CONTENT:flex-start;
	
	justify-content :center;
	/* border:1px solid var(--kdGrey); */
	width:calc(100% - 10px);
	height:35px;
	margin:20px 10px 0px 10px;
	
}



.inputV3 input,.inputV3 select{
	position:absolute;
	bottom:2px;
	left:0px;
	border:1px solid var(--kdGrey);
	background-color:var(--kdGreyL);
	border-radius:3px;
	width:100%;
	height:35px;
	padding:0px 2px 0px 5px;
	padding-bottom:2px;
}

/* 30-05-2024 */

.inputDataList{
border:1px solid var(--kdGreyL);
z-index: 5;
position: absolute;
top:35px;
left:0px;
width:100%;
max-height:200px;
overflow:auto;
background-color: var(--kdWhite);
/* shadow grey */
box-shadow: 2px 4px 4px 1px var(--kdGrey);
padding: 3px;
}

.inputDataListContent{
	width:100%;
	border-bottom: 1px solid var(--kdGrey);
	z-index: 6;
	cursor: pointer;
	background-color: var(--kdWhite);
}

.inputDataListContent:hover{
	background-color: var(--kdGreyL);
}

.inputV3 textarea{

	width:100%;
	margin-bottom:4px;
	border:1px solid var(--kdGrey);
	background-color:var(--kdGreyL);
	border-radius:3px;
	height:100%;
	padding:0px 2px 0px 5px;
	
}



.inputV3Line1
{
	height:2px;
	background-color:var(--kdGreyD);
	width:calc(100% - 4px);
	position:absolute;
	bottom:3px;
	left:2px;
	border-radius:3px;
	
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	z-index:3;
}

.inputV3Line2{
	width:0%;
	height:100%;
	background-color:var(--kdBlue);
	transition: all 0.3s ease;
}

.inputV3Line2On{
	width:100%;
	transition:0.3s;
}

.inputLabelV3{
	
	position:absolute;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	top:0px;
	left:2px;
	/* border:1px solid green; */
	width:auto;
	padding:2px;
	font-size:16px;
	transition:0.3s;
	color:var(--kdGreyD);
}

.labelFocus {
  top:-22px;
  transition:0.3s;
  color:var(--kdBlue);
  font-size:14px;
  padding:0px 5px 0px 0px;
  
}



[data-title] {
    position: relative;
}

[data-titleL] {
    position: relative;
}

/* Styles pour le tooltip */
.tooltipKd {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.tooltipKd i.fa-circle-info {
    margin-right: 8px;
}

.tooltipKd::after {
    content: '';
    position: absolute;
    bottom: -10px; /* Position de la flèche */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
}



.kdHoverRed{background-color:var(--kdRedL); color:var(--kdRed); border:1px solid var(--kdRed); transition:0.3s; border-radius:5px; padding:2px 5px 2px 5px; cursor:pointer;}
.kdHoverRed:hover{background-color:var(--kdRed); color:white; transition:0.3s;}

.ellipsis{text-overflow: ellipsis;    overflow: hidden;    white-space: nowrap;}

.shadow{box-shadow: 2px 4px 4px 1px var(--kdGrey);}
.dsShadow{    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.08);}

.shadow2{box-shadow: 2px 4px 4px 1px var(--kdGreyD);}
.shadow3{box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}

.shadowR{
	box-shadow: 5px 0px 5px -2px var(--kdGrey);;
-webkit-box-shadow: 5px 0px 5px -2px var(--kdGrey);
-moz-box-shadow: 5px 0px 5px -2px var(--kdGrey);
}

.shadowL{
	box-shadow: -5px 0px 5px -2px var(--kdGrey);
-webkit-box-shadow: -5px 0px 5px -2px var(--kdGrey);
-moz-box-shadow: -5px 0px 5px -2px var(--kdGrey);
}

.shadowT{
	box-shadow: 0px -5px 5px -2px var(--kdGrey);
-webkit-box-shadow: 0px -5px 5px -2px var(--kdGrey);
-moz-box-shadow: 0px -5px 5px -2px var(--kdGrey);
}

.shadowB{
	box-shadow: 0px 5px 5px -2px var(--kdGrey);
-webkit-box-shadow: 0px 5px 5px -2px var(--kdGrey);
-moz-box-shadow: 0px 5px 5px -2px var(--kdGrey);
}


.bold{font-weight:bold;}
.italic{font-style:italic;}
.hand{cursor:pointer;}
.handStop{cursor: not-allowed;}

.kdFont6{font-size:6px !important;}
.kdFont8{font-size:8px !important;}
.kdFont10{font-size:10px !important;}
.kdFont12{font-size:12px !important;}
.kdFont14{font-size:14px !important;}
.kdFont16{font-size:16px !important;}
.kdFont18{font-size:18px !important;}
.kdFont20{font-size:20px !important;}
.kdFont22{font-size:22px !important;}
.kdFont24{font-size:24px !important;}
.kdFont26{font-size:26px !important;}
.kdFont28{font-size:28px !important;}
.kdFont30{font-size:30px !important;}
.height{height:100%;}

.iconRed{color:var(--kdRed); cursor: pointer; transition: 0.3s;} .iconRed:hover,.iconRedSelected{color:var(--kdRedD); transition: 0.3s;}
.iconBlue{color:var(--kdBlue); cursor: pointer; transition: 0.3s;} .iconBlue:hover,.iconBlueSelected{color:var(--kdBlueD); transition: 0.3s;}
.iconGreen{color:var(--kdGreen); cursor: pointer; transition: 0.3s;} .iconGreen:hover,.iconGreenSelected{color:var(--kdGreenD); transition: 0.3s;}
.iconOrange{color:var(--kdOrange); cursor: pointer; transition: 0.3s;} .iconOrange:hover,.iconOrangeSelected{color:var(--kdOrangeD); transition: 0.3s;}
.iconGrey{color:var(--kdGrey); cursor: pointer; transition: 0.3s;} .iconGrey:hover,.iconGreySelected{color:var(--kdGreyD); transition: 0.3s;}
.iconGreyStop{color:var(--kdGrey); cursor: not-allowed; transition: 0.3s;} .iconGreyStop:hover,.iconGreySelected{color:var(--kdGrey); transition: 0.3s;}
.iconBlack{color:var(--kdBlack); cursor: pointer; transition: 0.3s;} .iconBlack:hover,.iconBlackSelected{color:var(--kdGreyD); transition: 0.3s;}
.iconWhite{color:var(--kdWhite); cursor: pointer; transition: 0.3s;} .iconWhite:hover,.iconWhiteSelected{color:var(--kdGreyD); transition: 0.3s;}
.iconBeige{color:var(--kdBeige); cursor: pointer; transition: 0.3s;} .iconBeige:hover,.iconBeigeSelected{color:var(--kdGreyD); transition: 0.3s;}

.kdBlueL{color:var(--kdBlueL) !important;}
.kdBlue{color:var(--kdBlue) !important;}
.kdBlue2{color:var(--kdBlue2) !important;}
.kdBlueD{color:var(--kdBlueD) !important;}
.kdRedL{color:var(--kdRedL) !important;}
.kdRed{color:var(--kdRed) !important;}
.kdRedD{color:var(--kdRedD) !important;}
.kdGreenL{color:var(--kdGreenL) !important;}
.kdGreen{color:var(--kdGreen) !important;}
.kdGreenD{color:var(--kdGreenD) !important;}
.kdGreyL{color:var(--kdGreyL) !important;}
.kdGrey{color:var(--kdGrey) !important;}
.kdGreyD{color:var(--kdGreyD) !important;}
.kdOrangeL{color:var(--kdOrangeL) !important;}
.kdOrange{color:var(--kdOrange) !important;}
.kdOrangeD{color:var(--kdOrangeD) !important;}
.kdBlack{color:var(--kdBlack) !important;}
.kdWhite{color:var(--kdWhite) !important;}
.kdBeige{color:var(--kdBeige) !important;}
.kdYellow{color:var(--kdYellow) !important;}
.rhBlue{color:var(--rhBlue) !important;}
.rhBlueL{color:var(--rhBlueL) !important;}
.rhGreyL{color:var(--rhGreyL) !important;}
.rhGreyD{color:var(--rhGreyD) !important;}
.rhGreen{color:var(--rhGreen) !important;}
.rhRed{color:var(--rhRed) !important;}
.kdViolet{color:var(--kdViolet) !important;}
.kdVioletL{color:var(--kdVioletL) !important;}
.kdVioletLL{color:var(--kdVioletLL) !important;}
.kdVioletD{color:var(--kdVioletD) !important;}




.kdBgBlueL{background-color:var(--kdBlueL);}
.kdBgBlue{background-color:var(--kdBlue);}
.kdBgBlue2{background-color:var(--kdBlue2);}
.kdBgBlueD{background-color:var(--kdBlueD);}
.kdBgRedL{background-color:var(--kdRedL);}
.kdBgRed{background-color:var(--kdRed);}
.kdBgRedD{background-color:var(--kdRedD);}
.kdBgGreenL{background-color:var(--kdGreenL);}
.kdBgGreen{background-color:var(--kdGreen);}
.kdBgGreenD{background-color:var(--kdGreenD);}
.kdBgGreyL{background-color:var(--kdGreyL);}
.kdBgGreyLL{background-color:var(--kdGreyLL);}
.kdBgGrey{background-color:var(--kdGrey);}
.kdBgGreyD{background-color:var(--kdGreyD);}
.kdBgOrangeL{background-color:var(--kdOrangeL);}
.kdBgOrange{background-color:var(--kdOrange);}
.kdBgOrangeD{background-color:var(--kdOrangeD);}
.kdBgBlack{background-color:var(--kdBlack);}
.kdBgWhite{background-color:var(--kdWhite);}
.kdBgBeige{background-color:var(--kdBeige);}
.kdBgYellow{background-color:var(--kdYellow);}
.kdBgYellowL{background-color:var(--kdYellowL);}
.kdBgViolet{background-color:var(--kdViolet);}
.kdBgVioletL{background-color:var(--kdVioletL);}
.kdBgVioletLL{background-color:var(--kdVioletLL);}
.kdBgVioletD{background-color:var(--kdVioletD);}

.dsBgBlue{background-color:var(--dsBlue);}
.dsBgBlack{background-color:var(--dsBlack);}
.dsBgGrey{background-color:var(--dsGrey);}
.dsBgGreyL{background-color:var(--dsGreyL);}
.dsBgRed{background-color:var(--dsRed);}
.dsBgGreen{background-color:var(--dsGreen);}


.dsBlue{color:var(--dsBlue);}
.dsBlack{color:var(--dsBlack);}
.dsGrey{color:var(--dsGrey);}
.dsGreyL{color:var(--dsGreyL);}
.dsRed{color:var(--dsRed);}






.padding5{padding:5px;}
.padding5L{padding-left:5px;}
.padding5R{padding-right:5px;}
.padding5T{padding-top:5px;}
.padding5B{padding-bottom:5px;}

.padding10{padding:10px;}
.padding10L{padding-left:10px;}
.padding10R{padding-right:10px;}
.padding10T{padding-top:10px;}
.padding10B{padding-bottom:10px;}
.padding20{padding:20px;}
.padding20L{padding-left:20px;}
.padding20R{padding-right:20px;}
.padding20T{padding-top:20px;}
.padding20B{padding-bottom:20px;}

.margin5{margin:5px;}
.margin5L{margin-left:5px;}
.margin5R{margin-right:5px;}
.margin5T{margin-top:5px;}
.margin5B{margin-bottom:5px;}

.margin10{margin:10px;}
.margin10L{margin-left:10px;}
.margin10R{margin-right:10px;}
.margin10T{margin-top:10px;}
.margin10B{margin-bottom:10px;}

.margin20{margin:20px;}
.margin20L{margin-left:20px;}
.margin20R{margin-right:20px;}
.margin20T{margin-top:20px;}
.margin20B{margin-bottom:20px;}


.flex1{flex:1;}
.flex2{flex:2;}
.flex3{flex:3;}







.h100p{height:100%;}
.h95p{height:95%;}
.h90p{height:90%;}
.h85p{height:85%;}
.h80p{height:80%;}
.h75p{height:75%;}
.h70p{height:70%;}
.h65p{height:65%;}
.h60p{height:60%;}
.h55p{height:55%;}
.h50p{height:50%;}
.h45p{height:45%;}
.h40p{height:40%;}
.h35p{height:35%;}
.h30p{height:30%;}
.h25p{height:25%;}
.h20p{height:20%;}
.h15p{height:15%;}
.h10p{height:10%;}

.h100s{height:100svh;}
.h95s{height:95svh;}
.h90s{height:90svh;}
.h85s{height:85svh;}
.h80s{height:80svh;}
.h75s{height:75svh;}
.h70s{height:70svh;}
.h65s{height:65svh;}
.h60s{height:60svh;}
.h55s{height:55svh;}
.h50s{height:50svh;}
.h45s{height:45svh;}
.h40s{height:40svh;}
.h35s{height:35svh;}
.h30s{height:30svh;}
.h25s{height:25svh;}
.h20s{height:20svh;}
.h15s{height:15svh;}
.h10s{height:10svh;}







.titreHeader{
    flex:1; 
    padding-left:20px; 
    font-size:20px;
    /* border: 1px solid red; */
    height:40px;
}


/* infos bulles */

/* infos bulles */


#progressBar{

display:none;	

position:absolute;
bottom:5px;
left:5px;
border:1px solid var(--kdBlue);
}


.boxTitreIcone{

/* border:1px solid black; */
display:flex;
ALIGN-ITEMS:center;
ALIGN-CONTENT:center;
justify-content:center;
/* padding-left:5px; */

width:45px;
height:40px;

}

.boxTitreIconeClose
{
	/* border:1px solid black; */

	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-content:center;
	justify-content:center;
	
	background-color:var(--kdBlueD);
	width:40px;
	height:34px;
	border-radius:5px 5px 5px 5px;
	cursor:pointer;
	margin-right:2px;
	
}

.boxTitreIconeClose>i{
	/* border:1px solid red; */
	font-size:25px;
	color:white;
}



.boxTitreIcone>i{
	font-size:25px;
	color:var(--kdBlue);
}


.boxTitreText{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content:left;

	/* border:1px solid black; */
	height:40px;
	margin-left:15px;
	font-size:20px;
	flex:1;

}



.boxTitre{
    position:relative;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	border-bottom:1px solid var(--kdBlueD);
	background-color:var(--kdBlueL);
	flex:1;
	border-radius:5px 5px 0px 0px;
}



.boxContenu{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
	

	width:100%;
	/* height:calc(100% - 40px); */
	
	padding:5px;
	/* border:1px solid green; */
	overflow:auto;
	max-height:calc(100vh - 80px);
}


.boxGlobal{
	display:flex;
	flex-wrap:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	min-height:150px;
	margin:5px;
	/* margin-top:-20px; */
	/* margin-right:20px; */
	
	
	border-radius:10px;
	background-color:white;
	border:1px solid var(--kdGrey);
	box-shadow: 2px 2px 4px 1px var(--kdGreyD);
	
	max-height:calc(100% - 10px);
	
}




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

.hover2:hover{
	font-weight:bold;
}


.delScreenOff{
	display:flex;
		
	position:absolute;
	top:0px;
	left:0px;
	/* z-index:0; */
	
	background-color:#00000099;
	
	width:1px;
	height:1px;
	
	/* transition:0w².3s; */
}

.delScreenOn{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
	
	position:absolute;
	top:0px;
	left:0px;
	z-index:300;
	
	background-color: rgba(131, 131, 131, .7);

	
	width:100svw;
	height:100svh;
	
	padding:10px;
	
	transition:0.3s;
}


a { 
text-decoration:none !important; 
color: inherit;
}

a:hover { 
text-decoration:none !important; 
color: inherit !important;
}

.kdDivButton{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	background-color:var(--kdGrey);
	
	border-radius:5px;
	font-size:14px;
	min-width:80px;
	
	font-weight:bold;
	
padding:5px 10px 5px 10px;

cursor:pointer;
}

/* ----------------------------------------buttons---------------------------------------- */
.kdDivButtonSite{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;

	background-color:var(--kdBlue);
	border:1px solid var(--kdBlue);
	color:white;

	border-radius:5px;
	font-size:14px;
	min-width:80px;

	font-weight:bold;

	padding:5px 10px 5px 10px;

	cursor:pointer;	
	transition:0.3s;
}

.kdDivButtonSiteSelected{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;

	border:1px solid var(--kdBlue);
	background-color:white;
	color:var(--kdBlue);

	border-radius:5px;
	font-size:14px;
	min-width:80px;

	font-weight:bold;

	padding:5px 10px 5px 10px;

	cursor:pointer;	
	transition:0.3s;
}

.kdDivButtonSite:hover{
	
background-color:white;
color:var(--kdBlue);
transition:0.3s;
}

/* button type 1  09-01-2024*/

.kdButton
{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	border:1px solid var(--kdBlue);
	border-radius:5px 5px 5px 5px;
	
	background-color:var(--kdBlue);
	height:40px;
	
	margin-bottom:5px;
	padding:0px 5px 0px 5px;
	
	cursor:pointer;
	transition:0.3s;
	min-width:100px;
	font-weight:bold;
	
	color:white;
}

.kdButton:hover
{
	background-color:var(--kdBlueL);
	color:var(--kdBlue);
	transition:0.3s;
}

.kdButtonSelected
{
color:var(--kdBlueD);
background-color:var(--kdBlueL);		
border:1px solid var(--kdBlueD);
/* font-weight:bold; */
}

/* ----------------------------------------------------- */


.kdButton2,.kdButton2Red
{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	border:1px solid var(--kdBlue);
	border-radius:5px;
	
	background-color:var(--kdBlue);
	color:white;
	
	/* font-weight:bold; */
	
	height:30px;
	
	margin:2px;
	padding:5px;
	
	cursor:pointer;
	transition:0.3s;
}

.kdButton2 i:nth-child(1),.kdButton2Red i:nth-child(1){
	margin-right:5px;
	font-size: 20px;

}

.kdButton2Red{
border:1px solid var(--kdRed);
background-color:var(--kdRed);	
}

.kdButton2:hover
{
	background-color:white;
	color:var(--kdBlue);
	transition:0.3s;
}
.kdButton2Red:hover
{
	background-color:white;
	color:var(--kdRed);
	transition:0.3s;
}

.kdButton2Selected
{
color:white;
background-color:var(--kdBlue);		
border:1px solid var(--kdBlueD);
/* font-weight:bold; */
}

/* ----------------------------------------buttons---------------------------------------- */


.kdFlexBetween{
	display:flex;
	ALIGN-CONTENT:center;
	justify-content : space-between;
}

.kdFlexTopLeft{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	

}

.kdFlexTopLeft>input{
	height:100%;
	border:0px;
	font-size:var(--kdFontSizeForm);
	padding:0px 5px 0px 5px;
	border-radius:0px 5px 5px 0px;
	height:calc(var(--kdDivForm) - 2px);
}

.kdFlexTopRight{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :right;
	
}

.kdFlexBottomCenter{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-end;
	ALIGN-CONTENT:flex-end;
	justify-content :center;
	
}

.kdFlexTopCenter{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
	
	
}

.kdFlexMiddleCenter{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	
}

.kdFlexMiddleLeft{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	

}

.kdFlexMiddleRight{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:center;
	justify-content :flex-end; 
	text-align: right;
	
	
}


.kdFlex{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	
}

.kdTitre{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:flex-start;
	justify-content :left;	
	height:30px;
	
	padding:0px 10px 0px 10px;
	font-size:20px;
	
}

.kdTitre2{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:flex-start;
	justify-content :left;	
	height:auto;
	
	padding:0px 10px 0px 10px;
	font-size:20px;
	
}

.kdTitreSub{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:flex-start;
	justify-content :left;	
	/* height:12px; */
	
	padding:0px 10px 0px 30px;
	font-size:12px;
	
}

.kdTitreCenter{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	height:30px;	
	
	padding:0px 10px 0px 10px;
	font-size:20px;
}

/* forumlaire avac tableau */
.kdForm{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	width:100%;
}
.kdTable{width:100%;}
.kdTr{background-color:white;}
.kdTr:hover a,.kdTr:hover td {background-color: var(--kdGreyL);}
.kdTr:hover{background-color:var(--kdGreyL);}

.kdBoxMsg{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	width:100%;
	padding:10px;
	margin:20px;
	border-radius:5px;
	border:1px solid var(--kdGrey);
}

.kdAlertWhite{
	border:1px solid var(--kdGreyD);
	background-color:white;
	color:black;
	font-weight:900;
	
	transition:1s;
}
.kdAlertYellow{
	border:1px solid var(--kdYellow);
	background-color:var(--kdYellowL);
	color:var(--kdYellowD);
	font-weight:900;
	
	transition:1s;
}	

.kdAlertRed{
	background-color:#ffefec;
	color:black;
	font-weight:900;
	
	transition:1s;
}

.kdAlertRedMax{
	border:1px solid var(--kdRed);
	background-color:var(--kdRed);
	color:white;
	font-weight:900;
	
	transition:1s;
}

.kdAlertGreen{
	border:1px solid var(--kdGreen);
	background-color:var(--kdGreenL);
	color:var(--kdGreenD);
	font-weight:900;
	
	transition:1s;
}

.kdAlertBlue{
	border:1px solid var(--kdBlue);
	background-color:var(--kdBlueL);
	color:var(--kdBlueD);
	font-weight:900;
	
	transition:1s;
}

.kdAlertOrange{
	border:1px solid var(--kdOrange);
	background-color:var(--kdOrangeL);
	color:black;
	font-weight:900;
	
	transition:1s;
}

.kdTr a{
	display:flex;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	width:100%;
	height:100%;
	line-height:normal !important;
	
	
	/* border:1px solid red; */
	
	text-decoration:none;
	color: inherit; /* Utilise la couleur du texte du parent */
	
	padding:0px 3px 0px 3px;
}



.kdTdFormText{
	background-color:white;	
	width:auto;
	text-align:right;
	padding-right:5px;
	height:30px;
	vertical-align:middle;
	padding-bottom:5px;
}

.kdTdFormInputkdTdFormInput{
	background-color:white;	
	width:auto;
	padding-bottom:5px;
}

.kdTdFormInput>input{
	width:100%;
	height:30px;

	border:1px solid var(--kdGrey);
	border-radius:5px;
	padding:3px;
}

.kdTdFormInput>textarea{
	width:100%;
	min-height:150px;

	border:1px solid var(--kdGrey);
	border-radius:5px;

	padding:3px;
}

.kdSubmit{
	padding:5px;
	min-width:100px;
	width:50%;
	
	height:50px;
	
	border:1px solid var(--kdBlueD)!important;
	
	font-size:20px;
	font-weight:bold;
	color:var(--kdBlueD)!important;
	
	background-color:var(--kdBlueL)!important;
	border-radius:5px;
	
	
	margin:10px 0px 10px 0px;
	
	cursor:pointer;
}


/* forumlaire avec tableau */
/* forumlaire avec Div */

.kdDivForm{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	/* border:1px solid red; */
	width:100%;
	margin-bottom:5px;
}

.kdDivFormText{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :right;
	
	border:1px solid var(--kdGrey);
	border-radius:5px 0px 0px 5px;
	min-height:var(--kdDivForm);
	
	padding:2px 10px 2px 10px;
	background-color:var(--kdGreyL);
	
	font-size:var(--kdFontSizeForm);


	
	
}

.kdDivFormInput{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :right;
	
	border:1px solid var(--kdGrey);
	min-height:var(--kdDivForm);
	flex:1;
	border-left:0;
	border-radius:0px 5px 5px 0px;
}

.kdDivFormInput input[type="text"],.kdDivFormInput input[type="number"],.kdDivFormInput input[type="date"],.kdDivFormInput input[type="email"]{
	border:0px;
	font-size:var(--kdFontSizeForm);
	padding:0px 5px 0px 5px;
	border-radius:0px 5px 5px 0px;
	height:calc(var(--kdDivForm) - 2px);
	width:100%; /*modif le 01-12-2023*/
}

.kdDivFormInput select{
	height:100%;
	border:0px;
	font-size:var(--kdFontSizeForm);
	padding:0px 5px 0px 5px;
	width:100%;
	margin-right:10px;
	height:calc(var(--kdDivForm) - 2px);
}

.kdDivFormInput textarea{
	height:100px;
	border:0px;
	font-size:var(--kdFontSizeForm);
	padding:0px 5px 0px 5px;
	width:100%;
	border-radius:5px;

}

.kdDivFormInput input[type="checkbox"]{
	border:1px solid var(--kdGrey);
	width:50px;
	height:20px;
	appearance: auto;
}



/* forumlaire avec Div */


/* screen base block d'affichage */


.kdScreenBase{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	border:1px solid var(--kdGrey);
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.64);
	border-radius:5px 5px 0px 0px;

	
	width:calc(100%);
	min-height:40px;
	
	/* margin:10px 2px 10px 2px; */
	padding-bottom:10px;
	background-color:white;
}

.kdScreenBaseEntete{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	border-bottom:1px solid var(--kdGrey);
	/* border:1px solid red; */
	border-radius:5px 5px 0px 0px;
	
	background-color:var(--kdGreyL);
	
	width:100%;
	height:40px;
}

.kdScreenBaseEnteteIcone{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	/* border:1px solid red; */
	width:50px;
	height:100%;
}

.kdScreenBaseEnteteIcone i{
	color:var(--kdBlue);
	font-size:30px;
}

.kdScreenBaseEnteteText{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	flex:1;
	height:100%;
	
	/* border:1px solid red; */
	
	font-size:16px;
	font-weight:bold;
	
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.kdScreenBaseEnteteMenu{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :right;
	
	width:auto;
	height:100%;
	
	padding-right:10px;
}

.kdScreenBaseEnteteMenu i{
	color:var(--kdBlueL);
	font-size:30px;
	margin:0px 2px 0px 2px;

}

.kdScreenBaseEnteteMenu div{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	color:white;
	font-size:14px;
	font-weight:bold;
	
	border:1px solid var(--kdBlue);
	background-color:var(--kdBlue);
	border-radius:5px;
		
	min-width:70px;
	height:calc(100% - 6px);
	
	padding:0px 5px 0px 5px;
	margin:0px 2px 0px 2px;
	
	transition:0.3s;
	cursor:pointer;
	

}

.kdScreenBaseEnteteMenu div:hover{
	background-color:white;
	color:var(--kdBlue);
	transition:0.3s;
}




.kdScreenBaseContent{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	/* border:1px solid var(--kdGrey); */
	border-top:0;
	border-radius:0px 0px 5px 5px;
	
	background-color:white;
	
	padding:5px;
	
	width:100%;
	min-height:20px;
	
}



/* screen base block d'affichage */


.blockYesNo{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:centert;
	justify-content :center;
	
	position:relative;
	/* border:1px solid red; */
	width:100%;
}

.blockYesNo div:nth-child(1){
width:100%;
font-size:20px;
text-align:center;
margin:10px;

}

.blockYesNo button{ 
width:40%;
height:50px;
margin:20px;
font-size:20px;


border-radius:5px;
border:1px solid grey;
cursor:pointer;
}

.buttonYes:hover, .buttonNo:hover{ 
/* color:white; */
background-color:var(--kdGrey);
}


.kdMsgHidden{
opacity: 0;	
transition:1s;
}

.kdMsgHiddenOff{
opacity: 1;	
transition:1s;
}

.kdMsgEphemereOff{
	
	opacity: 0;
	
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	flex:1;
	height:100%;
	
	margin:10px;
	
	border:1px solid var(--charteVertDark);
	border-radius:10px;
	background-color:var(--charteVert);
	
	color:var(--charteVertDark);
	font-weight:bold;
	
	transition:1s;
}

.kdMsgEphemereOn{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	flex:1;
	height:100%;
	
	margin:10px;
	
	border:1px solid var(--charteVertDark);
	border-radius:10px;
	background-color:var(--charteVert);
	
	color:var(--charteVertDark);
	font-weight:bold;
	
	transition:1s;
}

/* onglets */

.contentV2{
	display:flex;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	flex-direction: column;
	
	/* border:1px solid red; */
	width:100%;
	min-height:500px;
	
	margin:10px;
}

.ongletsBlock{
	display:flex;
	/* FLEX-WRAP:wrap; */
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	width:calc(100% - 10px);

	/* overflow: auto; */
	
	height:60px;
	/* border:1px solid black; */
}







.ongletPostIt{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	height:100%;
	min-width:120px;
	
	border:1px solid var(--kdGrey);
	border-right:0;
	background-color:var(--kdGreyL);
	
	padding:5px;
	
	box-shadow: 2px 2px 4px 1px var(--kdGrey);
	
	cursor:pointer;
	
	transition:0.3s;
}

.ongletPostIt:hover{
background-color:white;
transition:0.3s;	
}

.ongletsBlock .ongletPostIt:first-child {
	border-radius:4px 0px 0px 0px;
	box-shadow: 2px 0px 4px 1px var(--kdGrey);
}

.ongletPostItLast {
	border-radius:0px 4px 0px 0px;
}

.ongletLast {
	border:1px solid var(--kdGrey);
	border-radius:0px 4px 0px 0px;
}

.ongletPostItEnd{
	flex:1;
	height:100%;
	border-bottom:1px solid var(--kdGrey);

}



.ongletPostItSelect{
	background-color:white;
	border-bottom:0;
	z-index:2;
}

.onglePostItContent{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	width:100%;
	height:calc(100% - 60px);
	overflow: auto;
	/* flex-grow: 1; */
	
	border:1px solid var(--kdGrey);
	border-top:0;
	box-shadow: 2px 4px 4px 1px var(--kdGrey);

	
	border-radius:0px 10px 10px 10px;
	background-color:white;
	
	padding:10px;
	
	z-index:3;
	

}

.ongletPostItText{
	text-align:center;
}

.ongletPostItSelect .ongletPostItText{
	font-weight:bold;
}
/* onglets */



.dragOver{
	background-color:var(--kdBlueL) !important;
	border:2px dashed var(--kdBlue) !important;
	transition:0.3s;
}

/* //reclassement */
.kdUlReclassement{
		display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	width:100%;
	
	border:1px solid var(--kdGrey);
	border-radius:20px;
	margin:20px;
	padding:20px;
	background-color:white;
}

.kdLiReclassement{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	width:100%;
	
	border:1px solid var(--kdGrey);
	border-radius:5px;
	padding:5px;
	margin:2px;
	
	cursor:grab;
	background-color:var(--kdGreyL);
	border:1px solid var(--kdGrey);
	
	min-height:30px;
}

.no-scroll {
    overflow: hidden; /* empêche le défilement */
    height: 100%; /* maintient la hauteur de la page */
}

/* //reclassement */

.aBlock{
	display:block;
	height:100%;
	width:100M%;
}


.inputBorder1{
	border:1px solid var(--kdGrey) !important;
	width:100%;
	height:100%;
	border-radius:5px !important;
	margin-right:2px;
}

/* kdWait */

.chargement{
	position:relative;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-content:center;
	justify-content:center;
	
	width:400px;
	height:200px;
	
	background-color:white;
	border-radius:20px;
}

.chargement>div:nth-child(1),.chargement>div:nth-child(2){
	position:absolute;
	top:50px;
	border:2px solid transparent;
	border-top:2px solid #038901;
	width:100px;
	height:100px;
	
	
	border-radius:50%;
	animation: charement 4s linear infinite;
}
.chargement>div:nth-child(1)::before,.chargement>div:nth-child(2)::before{
	content:"";
	position:absolute;
	top:10px;
	right:6px;
	
	border-radius:50%;
	
	width:10px;
	height:10px;
	background-color:#038901;
	box-shadow:0 0 0 2px #03890133,0 0 0 4px #03890122;
		
}


.chargement>div:nth-child(2){
animation: charement2 4s linear infinite;

}


@keyframes charement{
	0%
	{
		transform: rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
	}
}

@keyframes charement2{
	0%
	{
		transform: rotate(180deg);
	}
	25%
	{
		transform: rotate(270deg);
	}
	50%
	{
	transform: rotate(360deg);

	}
	75%
	{
	transform: rotate(450deg);
	}
	
	100%
	{
	transform: rotate(540deg);
	}
}

.chargement>div:nth-child(3)
{
	position:absolute;
}
/* kdWait */

.kdBoutonAGrey{
border:1px solid var(--kdGreyD);
border-radius:5px;
padding:5px;
margin:5px;
background-color:var(--kdGreyL);
}

.kdBoutonAGrey:hover{
background-color:var(--kdGreyD);
color:white;
}

.accordButton{
	
	border:1px solid var(--kdGrey);
	background-color:white; 
	border-radius:5px; 
	width:calc(100% - 20px);  
	height:50px; 
	margin:20px 10px 10px 10px;
}

.accordButton div:nth-child(1){
	width:100px; 
	height:100%;
	
}

.accordButton div:nth-child(2){
	position:relative;
	border-radius:5px; 
	border-left:1px solid var(--kdGrey); 
	background-color:var(--kdGreyL); 
	flex:1;  
	height:100%;
	cursor:pointer;
}



.accordButton div:nth-child(2)>span{
	position:absolute;
	left:0px;
	bottom:0px;
	color:var(--kdRed);
	/* border:1px solid var(--kdRedD); */
	width:100%;
	font-size:10px;
	
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	
	margin:0;
	padding-left:10px;
	
	transition:0.3s;
}

.del_screen
{
	display: hidden;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	
	align-items: center;
	/* border: 1px solid black; */
	height:0px;
	overflow: hidden;
	background: #ffffff;
	/* padding-left:5px; */
	/* padding-right:5px; */
	transition: 0.1s;
}

.del_screen_on
{
	display:flex;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :Center;
	
	position:absolute;
	overflow: auto;
	/* max-height:70vh; */
	transition: 0.5s;
	z-index:300;
	background-color: rgba(131, 131, 131, .7);

}

.hoverWhite{
	background-color:white;
	border-radius:3px;
}

.hoverWhite{
	background-color:white;
	border-radius:3px;
}

.hoverWhite:hover{
	background-color:var(--kdGreyL);
	border-radius:3px;
}

.hover:hover{
	background-color:var(--charte_gris);
	border-radius:3px;
}

.loginLang{
	position:absolute;
	top:10px;
	left:10px;
	/* border:1px solid red; */
}

.loginLang img{
	width:40px;
	margin:5px;
}

/* 13/01/2024 nounelle liste de v3---------------------------------- */


.inputFind{
	border:0;
	width:100%;
	height:90%;
	outline: none; 
	padding: 0px 2px 0px 2px;
	
}

.inputFind::placeholder {
    color: var(--kdGreyD); /* Couleur du texte */
    font-style: italic; /* Style de police */
    font-weight: bold; /* Poids de la police */
    /* Autres styles tels que font-size, line-height, etc. */
	font-size:12px;
	padding: 0px 3px 0px 3px;
}

.inputFind::before  {
 content:"--";
}

.KdEnteteListV3{
	position: sticky;
	top: -10px;
	background-color:white;
	margin-bottom:5px;
	
}

.KdEnteteListV3>div{
border:0;
/* border-left:1px solid var(--kdGreyD);	 */

}
.KdEnteteListV3>div:first-child{
	border-left:0;
}

.RC_tirePage
{
display:flex;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;
justify-content :left;

/* border:1px solid black; */

height:45px;
font-size:25px;	
padding-left:20px;
margin-left:20px;
color:var(--kdGreyD);
border-bottom: 2px solid var(--kdGreyD);
}

.RC_menuContent
{
display:flex;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;
justify-content :left;
flex:1;

/* border:1px solid black; */

height:45px;
font-size:25px;	
color:var(--kdGreyD);
border-bottom: 2px solid var(--kdGreyD);
}

/* kd css liste----------17-01-2023--------------- */
.kdListeTitre{
display:flex;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;
justify-content :left;	
}
.kdListeContainer{
display:flex;
FLEX-WRAP:wrap;
ALIGN-ITEMS:flex-start;
ALIGN-CONTENT:flex-start;
justify-content :left;

border:1px solid var(--kdGrey); 
min-height:10px;

width:100%;
height:calc(100%);
overflow:auto; 
padding:10px; 
background-color:white; 
border-radius:10px;	
}

.kdFindBox{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	padding:0px 2px 0px 2px;
	height:100%;
	font-size:12px;
	text-overflow: ellipsis;    overflow: hidden;    white-space: nowrap;
	border:1px solid var(--kdGrey);
}

.kdLigneList{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	width:100%; 
	height:20px; 
	overflow:auto;
	
}

.kdLigneList:hover{
	background-color:var(--kdGreyL);
}



.kdColumnList{
display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	padding:0px 2px 0px 2px;
	/* font-size:12px; */
	text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
	border-bottom:1px solid var(--kdGrey);
	height:100%;
	padding-left:10px;
}

.kdColumnList input{
width:100% !important;
height:100%;
border:0;
}

.kdColumnList a{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	width:100%;
	height:100%;
}

.kdColumnListUpDel{
	justify-content :center;
	font-size:16px;
	cursor:pointer;	

	color:white;
	transition:0.3s;
	
	width:30px;
}

.kdLigneList:hover .kdColumnListUpDel{
	color:var(--kdBlue);
	transition:0.3s;
}

.kdColumnListUpDel i:hover{
	color:var(--kdBlue);
	transition:0.3s;
}




/* kd css liste----------17-01-2023--------------- */


.wigetButton{
	display:flex;
	flex:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	text-align:center;
	width:calc(25% - 10px);
	height:100px;
	
	border:1px solid var(--kdBlue);
	border-radius:10px;
	background-color:white;
	color:var(--kdBlue);
	font-weight:bold;
	
	margin:5px;
	padding:5px;
	
	cursor:pointer;
	
	transition:0.3s;
}

.wigetButton:hover{
	background-color:var(--kdBlueL);
	color:var(--kdBlueD);
}

.hoverRh{
	border-left:2px solid white;
}

.hoverRh:hover{
	border-left:2px solid var(--kdBlueD);
	background-color:var(--kdBlueL);
	border-radius:0px 3px 3px 0px;
}

.navRight{
	width:30px; 
	height:100%; 
	border:1px solid var(--kdBlue); 
	color:var(--kdBlue); 
	border-radius:0px 5px 5px 0px;
	transition:0.3s;
	cursor:pointer;
}

.navLeft{
	width:30px; 
	height:100%; 
	border:1px solid var(--kdBlue); 
	color:var(--kdBlue); 
	border-radius:5px 0px 0px 05px;
	cursor:pointer;
	transition:0.3s;
}

.navLeft:hover,.navRight:hover{
	background-color:var(--kdBlueL);
	transition:0.3s;
}

.dataInputSaveOff{
	
	background-color:var(--rhBlue);
	color:white;
	font-weight:bold;
	width:0px !important;
	height:25px;
	cursor:pointer;
	margin:0;
	padding:0;
	
	border-radius:5px;
	
	transition:0.3s;
	background-color:var(--kdBlue);
	margin-right:10px;
}

.dataInputSaveOn{
border:1px solid var(--rhBlue);
	width:150px !important;
	transition:0.3s;

}

.dataInputSaveOn:hover{
	color:var(--rhBlue);
	background-color:white;
}

.MdpLost{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	width:100%;
	/* border:1px solid red; */
}

.MdpLost a{
	text-decoration: none;
	color:black;
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	width:100%;
	height:100%;
	
	transition:0.3s;
}

.MdpLost a:hover{
	transition:0.3s;
	background-color:var(--kdBlue);
	border-radius:5px;
	font-weight:bold;
	color:white;
}

.w50pResponsive{
	width:calc(50% - 20px) !important;
	margin:10px;
}

/* ------------------------------------------------------------------------------------------ */
@media only screen and (min-width: 600px) and (max-width: 1200px) {
    .kdLigneList {
        height:40px;
    }
	
	.kdColumnListUpDel i {
        font-size:30px;
    }
	
	.kdColumnListUpDel{
		width:60px;
	}

	
}

/* // plus petit que 1000px */
@media only screen and (max-width: 1400px) {
	
	.w50pResponsive{
		width:100% !important;
	}
}



/* ------------------------------------------------------------------------------------------ */

/* wywywig trix */
.trix-button-group--block-tools,.trix-button-group--file-tools ,.trix-button--icon-link{
	display:none !important;
  }

trix-editor{
background-color: var(--kdGreyL);
width:100% !important;
 height:100% !important;
overflow: auto;
 
} 
trix-toolbar{
	/* border:1px solid red !important; */
	margin-bottom: -8px;
	padding: 0;
	
}
/* wywywig trix */

.parametrages{
	/* border:1px solid var(--kdGrey); */
	padding: 0px 10px 0px 10px;
	margin: 0px 10px 0px 10px;
	height: 40px;
	border-radius: 5px;
	cursor: pointer;
	width: 200px;
	transition: 0.3s;
	color: var(--kdBlue);

}


.parametrages:hover{
	background-color: var(--kdBlue);
	color: var(--kdBlueD);
	transition: 0.3s;
}

.parametrages i{
	font-size: 20px;
	color: var(--kdBlueD);

}

.parametrages div{
	height: 100%;
}

.parametrages div:nth-child(2){
	padding-left: 10px;

}


/* icones */

.buttonIconYellow{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdYellow);
	border-radius:5px;
	background-color:var(--kdYellowL);

	color:var(--kdYellowD);
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconYellow:hover,.buttonIconYellowSelected{
	background-color:var(--kdYellow);
	color:white;
	transition:0.3s;
}
.buttonIconWhite{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdBlack);
	border-radius:5px;
	background-color:var(--kdWhite);

	color:var(--kdBlack);
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconWhite:hover,.buttonIconWhiteSelected{
	background-color:var(--kdBlack);
	color:white;
	transition:0.3s;
}


.buttonIconBlack{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdBlack);
	border-radius:5px;
	background-color:var(--kdWhite);

	color:var(--kdBlack);
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}
.buttonIconBlue, .buttonIconBlueSelected{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdBlue);
	border-radius:5px;
	background-color:var(--kdBlueL);

	color:var(--kdBlueD);
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconBlue:hover,.buttonIconBlueSelected{
	background-color:var(--kdBlue);
	color:white;
	transition:0.3s;
}



.buttonIconBlueD{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdBlueD);
	border-radius:5px;
	background-color:var(--kdBlueD);

	color:white;
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconBlueD:hover{
	background-color:var(--kdBlueL);
	color:var(--kdBlueD);
	transition:0.3s;
}

.buttonIconBlue i, .buttonIconRed i, .buttonIconGreen i, .buttonIconOrange i, .buttonIconGrey i, .buttonIconBlack i, .buttonIconWhite i, .buttonIconYellow i,
.buttonIconBlueSelected i, .buttonIconRedSelected i, .buttonIconGreenSelected i, .buttonIconOrangeSelected i, .buttonIconGreySelected i, .buttonIconBlackSelected i, .buttonIconWhiteSelected i, .buttonIconYellowSelected i{
	font-size:18px;
	margin-right:5px;
	margin-left:5px;
}

.buttonIconBlueWhite{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;

	
	font-size: 16px;

	border:1px solid var(--kdBlue);
	border-radius:5px;
	background-color:var(--kdWhite);

	color:var(--kdBlueD);
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconBlueWhite i{
	font-size:18px;
	margin-right:5px;
	margin-left:5px;
}

.buttonIconBlueWhite:hover{
	background-color:var(--kdBlueL);
	/* color:white; */
	transition:0.3s;
}




.buttonIconRed{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdRed);
	border-radius:5px;
	background-color:var(--kdRedL);

	color:var(--kdRedD);
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconRed:hover{
	background-color:var(--kdRed);
	color:white;
	transition:0.3s;
}

.buttonIconGreen{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdGreen);
	border-radius:5px;
	background-color:var(--kdGreenL);

	color:var(--kdGreenD);
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconGreen:hover{
	background-color:var(--kdGreen);
	color:white;
	transition:0.3s;
}

.buttonIconOrange{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdOrange);
	border-radius:5px;
	background-color:var(--kdOrangeL);

	color:var(--kdOrangeD);
	
	/* padding: 0px 5px 0px 5px; */

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconOrange:hover{
	background-color:var(--kdOrange);
	color:white;
	transition:0.3s;
}

.buttonIconGrey{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdGrey);
	border-radius:5px;
	background-color:var(--kdGreyL);

	color:var(--kdGreyD);
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconGrey:hover{
	background-color:var(--kdGrey);
	color:white;
	transition:0.3s;
}

.buttonIconBlack{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	min-width:50px;
	min-height:30px;

	font-size: 14px;
	
	border:1px solid var(--kdBlack);
	border-radius:5px;
	background-color:var(--kdBlack);

	color:var(--kdWhite);
	
	padding: 0px 5px 0px 5px;

	cursor:pointer;
	
	transition:0.3s;
}

.buttonIconBlack:hover{
	background-color:var(--kdWhite);
	color:var(--kdBlack);
	transition:0.3s;
}

.paveNumerique{
	display: grid;
	grid-template-columns: repeat(3, 70px);
    grid-template-rows: repeat(4, 70px);
	gap: 2px;
	padding: 3px;
	

}

.paveNumeriqueTouche{
	width: 100%;
	height: 100%;
	border: 1px solid var(--kdGrey);
	border-radius: 3px;
	background-color: var(--kdGreyL);
}



/* icones */

/* kd calandar */

.boxCalandar{
    display: grid;
    grid-template-columns: repeat(7, 80px);
    grid-template-rows: 30px repeat(6, 80px);
    /* height:calc(100% - 60px); */
    width:600px;
	height:520px;
    gap: 5px;

    user-select: none;
}

.boxCalandar2{
    display: grid;
    grid-template-columns: repeat(7, 40px);
    grid-template-rows: 30px repeat(6, 40px);
    /* height:calc(100% - 60px); */
    width:300px;
	height:260px;
    gap: 5px;

    user-select: none;
}


.calandarJour1{
    background-color: var(--kdGrey);
    border-radius: 10px;
    
}

.calandarJour2{
    background-color: var(--kdGreyL);
    border-radius: 50%;
}

.calandarJourClosed{
    background-color: var(--kdBlack);
    color:var(--kdWhite);
  
}

.calandarJourToday{
    border:2px solid var(--kdBlack);
}
/* kd calandar */


.bl{border-left:1px solid var(--kdGrey);}
.br{border-right:1px solid var(--kdGrey);}
.bt{border-top:1px solid var(--kdGrey);}
.bb{border-bottom:1px solid var(--kdGrey);}
.center{justify-content:center !important; text-align:center;}
.center>a{justify-content:center !important;}
.left{text-align:left !important;; justify-content:left !important; justify-content: left !important; text-align:left !important;}
.left>a{justify-content:left !important; justify-content: left !important; text-align:left !important;}
.right{justify-content:right !important; justify-content: right !important; text-align:right !important;}
.right a{justify-content:right !important; justify-content: right !important; text-align:right !important;}
.top{ align-items: flex-start !important; ALIGN-CONTENT:flex-start !important; }

.borderBottom,.borderBottom1{border-bottom:1px solid var(--kdGrey);}
.border1{border:1px solid var(--kdGrey); min-height:10px; }

.radius5{border-radius:5px;}
.radius10{border-radius:10px;}
.radius15{border-radius:15px;}
.radius20{border-radius:20px;}

.marginLR5{margin:0px 5px 0px 5px;}
.marginLR3{margin:0px 3px 0px 3px;}
.marginL5{margin-left:5px;}
.marginR5{margin-right:5px;}

.w100p{width:100%;}
.w95p{width:95%;}
.w90p{width:90%;}
.w85p{width:85%;}
.w80p{width:80%;}
.w75p{width:75%;}
.w70p{width:70%;}
.w65p{width:65%;}
.w60p{width:60%;}
.w55p{width:55%;}
.w50p{width:50%;}
.w45p{width:45%;}
.w40p{width:40%;}
.w35p{width:35%;}
.w30p{width:30%;}
.w25p{width:25%;}
.w20p{width:20%;}
.w15p{width:15%;}
.w10p{width:10%;}

.w100s{width:100svw;}
.w95s{width:95svw;}
.w90s{width:90svw;}
.w85s{width:85svw;}
.w80s{width:80svw;}
.w75s{width:75svw;}
.w70s{width:70svw;}
.w65s{width:65svw;}
.w60s{width:60svw;}
.w55s{width:55svw;}
.w50s{width:50svw;}
.w45s{width:45svw;}
.w40s{width:40svw;}
.w35s{width:35svw;}
.w30s{width:30svw;}
.w25s{width:25svw;}
.w20s{width:20svw;}
.w15s{width:15svw;}
.w10s{width:10svw;}



.h10{height:10px;}
.h15{height:15px;}
.h20{height:20px;}
.h25{height:25px;}
.h30{height:30px;}
.h35{height:35px;}
.h40{height:40px;}
.h45{height:45px;}
.h50{height:50px;}
.h55{height:55px;}
.h60{height:60px;}
.h65{height:65px;}
.h70{height:70px;}
.h75{height:75px;}
.h80{height:80px;}
.h85{height:85px;}
.h90{height:90px;}
.h95{height:95px;}
.h100{height:100px;}
.h110{height:110px;}
.h120{height:120px;}
.h130{height:130px;}
.h140{height:140px;}
.h150{height:150px;}
.h160{height:160px;}
.h170{height:170px;}
.h180{height:180px;}
.h190{height:190px;}
.h200{height:200px;}
.h210{height:210px;}
.h220{height:220px;}
.h230{height:230px;}
.h240{height:240px;}
.h250{height:250px;}
.h260{height:260px;}
.h270{height:270px;}
.h280{height:280px;}
.h290{height:290px;}
.h300{height:300px;}
.h310{height:310px;}
.h320{height:320px;}
.h330{height:330px;}
.h340{height:340px;}
.h350{height:350px;}
.h360{height:360px;}
.h370{height:370px;}
.h380{height:380px;}
.h390{height:390px;}
.h400{height:400px;}
.h410{height:410px;}
.h420{height:420px;}
.h430{height:430px;}
.h440{height:440px;}
.h450{height:450px;}
.h460{height:460px;}
.h470{height:470px;}
.h480{height:480px;}
.h490{height:490px;}
.h500{height:500px;}
.h510{height:510px;}
.h520{height:520px;}
.h530{height:530px;}
.h540{height:540px;}
.h550{height:550px;}
.h560{height:560px;}
.h570{height:570px;}
.h580{height:580px;}
.h590{height:590px;}
.h600{height:600px;}
.h610{height:610px;}
.h620{height:620px;}
.h630{height:630px;}
.h640{height:640px;}
.h650{height:650px;}
.h660{height:660px;}
.h670{height:670px;}
.h680{height:680px;}
.h690{height:690px;}
.h700{height:700px;}
.h710{height:710px;}
.h720{height:720px;}
.h730{height:730px;}
.h740{height:740px;}
.h750{height:750px;}
.h760{height:760px;}
.h770{height:770px;}
.h780{height:780px;}
.h790{height:790px;}
.h800{height:800px;}
.h810{height:810px;}
.h820{height:820px;}
.h830{height:830px;}
.h840{height:840px;}
.h850{height:850px;}
.h860{height:860px;}
.h870{height:870px;}
.h880{height:880px;}
.h890{height:890px;}
.h900{height:900px;}
.h910{height:910px;}
.h920{height:920px;}
.h930{height:930px;}
.h940{height:940px;}
.h950{height:950px;}
.h960{height:960px;}
.h970{height:970px;}
.h980{height:980px;}
.h990{height:990px;}
.h1000{height:1000px;}

.w10{width:10px;}
.w15{width:15px;}
.w20{width:20px;}
.w25{width:25px;}
.w30{width:30px;}
.w35{width:35px;}
.w40{width:40px;}
.w45{width:45px;}
.w50{width:50px;}
.w55{width:55px;}
.w60{width:60px;}
.w65{width:65px;}
.w70{width:70px;}
.w75{width:75px;}
.w80{width:80px;}
.w85{width:85px;}
.w90{width:90px;}
.w95{width:95px;}
.w100{width:100px;}
.w110{width:110px;}
.w120{width:120px;}
.w130{width:130px;}
.w140{width:140px;}
.w150{width:150px;}
.w160{width:160px;}
.w170{width:170px;}
.w180{width:180px;}
.w190{width:190px;}
.w200{width:200px;}
.w210{width:210px;}
.w220{width:220px;}
.w230{width:230px;}
.w240{width:240px;}
.w250{width:250px;}
.w260{width:260px;}
.w270{width:270px;}
.w280{width:280px;}
.w290{width:290px;}
.w300{width:300px;}
.w310{width:325px;}
.w320{width:320px;}
.w330{width:330px;}
.w340{width:340px;}
.w350{width:350px;}
.w360{width:360px;}
.w370{width:370px;}
.w380{width:380px;}
.w390{width:390px;}
.w400{width:400px;}
.w410{width:410px;}
.w420{width:420px;}
.w430{width:430px;}
.w440{width:440px;}
.w450{width:450px;}
.w460{width:460px;}
.w470{width:470px;}
.w480{width:480px;}
.w490{width:490px;}
.w500{width:500px;}
.w510{width:510px;}
.w520{width:520px;}
.w530{width:530px;}
.w540{width:540px;}
.w550{width:550px;}
.w560{width:560px;}
.w570{width:570px;}
.w580{width:580px;}
.w590{width:590px;}
.w600{width:600px;}
.w610{width:610px;}
.w620{width:620px;}
.w630{width:630px;}
.w640{width:640px;}
.w650{width:650px;}
.w660{width:660px;}
.w670{width:670px;}
.w680{width:680px;}
.w690{width:690px;}
.w700{width:700px;}
.w710{width:710px;}
.w720{width:720px;}
.w730{width:730px;}
.w740{width:740px;}
.w750{width:750px;}
.w760{width:760px;}
.w770{width:770px;}
.w780{width:780px;}
.w790{width:790px;}
.w800{width:800px;}
.w810{width:810px;}
.w820{width:820px;}
.w830{width:830px;}
.w840{width:840px;}
.w850{width:850px;}
.w860{width:860px;}
.w870{width:870px;}
.w880{width:880px;}
.w890{width:890px;}
.w900{width:900px;}
.w910{width:910px;}
.w920{width:920px;}
.w930{width:930px;}
.w940{width:940px;}
.w950{width:950px;}
.w960{width:960px;}
.w970{width:970px;}
.w980{width:980px;}
.w990{width:990px;}
.w1000{width:1000px;}
.w1050{width:1050px;}
.w1100{width:1100px;}
.w1150{width:1150px;}
.w1200{width:1200px;}

.justify{
	text-align: justify;
}

.pageBreak {page-break-before: always;}
.noBreak{page-break-inside: avoid;}


.kdBorderBlueL{border:1px solid var(--kdBlueL);}
.kdBorderBlue{border:1px solid var(--kdBlue);}
.kdBorderBlueD{border:1px solid var(--kdBlueD);}
.kdBorderRedL{border:1px solid var(--kdRedL);}
.kdBorderRed{border:1px solid var(--kdRed);}
.kdBorderRedD{border:1px solid var(--kdRedD);}
.kdBorderGreenL{border:1px solid var(--kdGreenL);}
.kdBorderGreen{border:1px solid var(--kdGreen);}
.kdBorderGreenD{border:1px solid var(--kdGreenD);}
.kdBorderGreyL{border:1px solid var(--kdGreyL);}
.kdBorderGrey{border:1px solid var(--kdGrey);}
.kdBorderGreyy{border:1px solid var(--kdGreyy);}
.kdBorderGreyD{border:1px solid var(--kdGreyD);}
.kdBorderOrangeL{border:1px solid var(--kdOrangeL);}
.kdBorderOrange{border:1px solid var(--kdOrange);}
.kdBorderOrangeD{border:1px solid var(--kdOrangeD);}
.kdBorderBlack{border:1px solid var(--kdBlack);}
.kdBorderWhite{border:1px solid var(--kdWhite);}
.kdBorderBeige{border:1px solid var(--kdBeige);}
.kdBorderYellow{border:1px solid var(--kdYellow);}

.kdBorderBBlueL{border-bottom:1px solid var(--kdBlueL);}
.kdBorderBBlue{border-bottom:1px solid var(--kdBlue);}
.kdBorderBBlueD{border-bottom:1px solid var(--kdBlueD);}
.kdBorderBRedL{border-bottom:1px solid var(--kdRedL);}
.kdBorderBRed{border-bottom:1px solid var(--kdRed);}
.kdBorderBRedD{border-bottom:1px solid var(--kdRedD);}
.kdBorderBGreenL{border-bottom:1px solid var(--kdGreenL);}
.kdBorderBGreen{border-bottom:1px solid var(--kdGreen);}
.kdBorderBGreenD{border-bottom:1px solid var(--kdGreenD);}
.kdBorderBGreyL{border-bottom:1px solid var(--kdGreyL);}
.kdBorderBGrey{border-bottom:1px solid var(--kdGrey);}
.kdBorderBGreyD{border-bottom:1px solid var(--kdGreyD);}
.kdBorderBOrangeL{border-bottom:1px solid var(--kdOrangeL);}
.kdBorderBOrange{border-bottom:1px solid var(--kdOrange);}
.kdBorderBOrangeD{border-bottom:1px solid var(--kdOrangeD);}
.kdBorderBBlack{border-bottom:1px solid var(--kdBlack);}
.kdBorderBWhite{border-bottom:1px solid var(--kdWhite);}
.kdBorderBBeige{border-bottom:1px solid var(--kdBeige);}
.kdBorderBYellow{border-bottom:1px solid var(--kdYellow);}

.kdBorderBBlueL2{border-bottom:2px solid var(--kdBlueL);}
.kdBorderBBlue2{border-bottom:2px solid var(--kdBlue);}
.kdBorderBBlueD2{border-bottom:2px solid var(--kdBlueD);}
.kdBorderBRedL2{border-bottom:2px solid var(--kdRedL);}
.kdBorderBRed2{border-bottom:2px solid var(--kdRed);}
.kdBorderBRedD2{border-bottom:2px solid var(--kdRedD);}
.kdBorderBGreenL2{border-bottom:2px solid var(--kdGreenL);}
.kdBorderBGreen2{border-bottom:2px solid var(--kdGreen);}
.kdBorderBGreenD2{border-bottom:2px solid var(--kdGreenD);}
.kdBorderBGreyL2{border-bottom:2px solid var(--kdGreyL);}
.kdBorderBGrey2{border-bottom:2px solid var(--kdGrey);}
.kdBorderBGreyD2{border-bottom:2px solid var(--kdGreyD);}
.kdBorderBOrangeL2{border-bottom:2px solid var(--kdOrangeL);}
.kdBorderBOrange2{border-bottom:2px solid var(--kdOrange);}
.kdBorderBOrangeD2{border-bottom:2px solid var(--kdOrangeD);}
.kdBorderBBlack2{border-bottom:2px solid var(--kdBlack);}
.kdBorderBWhite2{border-bottom:2px solid var(--kdWhite);}
.kdBorderBBeige2{border-bottom:2px solid var(--kdBeige);}
.kdBorderBYellow2{border-bottom:2px solid var(--kdYellow);}

/* blue */
.kdBorderTBlueL{border-top:1px solid var(--kdBlueL);}
.kdBorderTBlue{border-top:1px solid var(--kdBlue);}
.kdBorderTBlueD{border-top:1px solid var(--kdBlueD);}
.kdBorderBBleuL{border-bottom:1px solid var(--kdBlueL);}
.kdBorderBBleu{border-bottom:1px solid var(--kdBlue);}
.kdBorderBBleuD{border-bottom:1px solid var(--kdBlueD);}
.kdBorderLBlueL{border-left:1px solid var(--kdBlueL);}
.kdBorderLBlue{border-left:1px solid var(--kdBlue);}
.kdBorderLBlueD{border-left:1px solid var(--kdBlueD);}
.kdBorderRBlueL{border-right:1px solid var(--kdBlueL);}
.kdBorderRBlue{border-right:1px solid var(--kdBlue);}
.kdBorderRBlueD{border-right:1px solid var(--kdBlueD);}
/* red */
.kdBorderTRedL{border-top:1px solid var(--kdRedL);}
.kdBorderTRed{border-top:1px solid var(--kdRed);}
.kdBorderTRedD{border-top:1px solid var(--kdRedD);}
.kdBorderBRedL{border-bottom:1px solid var(--kdRedL);}
.kdBorderBRed{border-bottom:1px solid var(--kdRed);}
.kdBorderBRedD{border-bottom:1px solid var(--kdRedD);}
.kdBorderLRedL{border-left:1px solid var(--kdRedL);}
.kdBorderLRed{border-left:1px solid var(--kdRed);}
.kdBorderLRedD{border-left:1px solid var(--kdRedD);}
.kdBorderRRedL{border-right:1px solid var(--kdRedL);}
.kdBorderRRed{border-right:1px solid var(--kdRed);}
.kdBorderRRedD{border-right:1px solid var(--kdRedD);}
/* Green */
.kdBorderTGreenL{border-top:1px solid var(--kdGreenL);}
.kdBorderTGreen{border-top:1px solid var(--kdGreen);}
.kdBorderTGreenD{border-top:1px solid var(--kdGreenD);}
.kdBorderBGreenL{border-bottom:1px solid var(--kdGreenL);}
.kdBorderBGreen{border-bottom:1px solid var(--kdGreen);}
.kdBorderBGreenD{border-bottom:1px solid var(--kdGreenD);}
.kdBorderLGreenL{border-left:1px solid var(--kdGreenL);}
.kdBorderLGreen{border-left:1px solid var(--kdGreen);}
.kdBorderLGreenD{border-left:1px solid var(--kdGreenD);}
.kdBorderRGreenL{border-right:1px solid var(--kdGreenL);}
.kdBorderRGreen{border-right:1px solid var(--kdGreen);}
.kdBorderRGreenD{border-right:1px solid var(--kdGreenD);}
/* Grey */
.kdBorderTGreyL{border-top:1px solid var(--kdGreyL);}
.kdBorderTGrey{border-top:1px solid var(--kdGrey);}
.kdBorderTGreyD{border-top:1px solid var(--kdGreyD);}
.kdBorderBGreyL{border-bottom:1px solid var(--kdGreyL);}
.kdBorderBGrey{border-bottom:1px solid var(--kdGrey);}
.kdBorderBGreyD{border-bottom:1px solid var(--kdGreyD);}
.kdBorderLGreyL{border-left:1px solid var(--kdGreyL);}
.kdBorderLGrey{border-left:1px solid var(--kdGrey);}
.kdBorderLGreyD{border-left:1px solid var(--kdGreyD);}
.kdBorderRGreyL{border-right:1px solid var(--kdGreyL);}
.kdBorderRGrey{border-right:1px solid var(--kdGrey);}
.kdBorderRGreyD{border-right:1px solid var(--kdGreyD);}
/* Orange */
.kdBorderTOrangeL{border-top:1px solid var(--kdOrangeL);}
.kdBorderTOrange{border-top:1px solid var(--kdOrange);}
.kdBorderTOrangeD{border-top:1px solid var(--kdOrangeD);}
.kdBorderBOrangeL{border-bottom:1px solid var(--kdOrangeL);}
.kdBorderBOrange{border-bottom:1px solid var(--kdOrange);}
.kdBorderBOrangeD{border-bottom:1px solid var(--kdOrangeD);}
.kdBorderLOrangeL{border-left:1px solid var(--kdOrangeL);}
.kdBorderLOrange{border-left:1px solid var(--kdOrange);}
.kdBorderLOrangeD{border-left:1px solid var(--kdOrangeD);}
.kdBorderROrangeL{border-right:1px solid var(--kdOrangeL);}
.kdBorderROrange{border-right:1px solid var(--kdOrange);}
.kdBorderROrangeD{border-right:1px solid var(--kdOrangeD);}
/* Black */
.kdBorderTBlackL{border-top:1px solid var(--kdBlackL);}
.kdBorderTBlack{border-top:1px solid var(--kdBlack);}
.kdBorderTBlackD{border-top:1px solid var(--kdBlackD);}
.kdBorderBBlackL{border-bottom:1px solid var(--kdBlackL);}
.kdBorderBBlack{border-bottom:1px solid var(--kdBlack);}
.kdBorderBBlackD{border-bottom:1px solid var(--kdBlackD);}
.kdBorderLBlackL{border-left:1px solid var(--kdBlackL);}
.kdBorderLBlack{border-left:1px solid var(--kdBlack)}
.kdBorderLBlackD{border-left:1px solid var(--kdBlackD)}
.kdBorderRBlackL{border-right:1px solid var(--kdBlackL);}
.kdBorderRBlack{border-right:1px solid var(--kdBlack);}
.kdBorderRBlackD{border-right:1px solid var(--kdBlackD);}
/*yellow*/
.kdBorderTYellowL{border-top:1px solid var(--kdYellowL);}
.kdBorderTYellow{border-top:1px solid var(--kdYellow);}
.kdBorderTYellowD{border-top:1px solid var(--kdYellowD);}
.kdBorderBYellowL{border-bottom:1px solid var(--kdYellowL);}
.kdBorderBYellow{border-bottom:1px solid var(--kdYellow);}
.kdBorderBYellowD{border-bottom:1px solid var(--kdYellowD);}
.kdBorderLYellowL{border-left:1px solid var(--kdYellowL);}
.kdBorderLYellow{border-left:1px solid var(--kdYellow);}
.kdBorderLYellowD{border-left:1px solid var(--kdYellowD);}
.kdBorderRYellowL{border-right:1px solid var(--kdYellowL);}
.kdBorderRYellow{border-right:1px solid var(--kdYellow);}
.kdBorderRYellowD{border-right:1px solid var(--kdYellowD);}

.kdBorderBlueLLeft{border-left:1px solid var(--kdBlueL);}
.kdBorderBlueLeft{border-left:1px solid var(--kdBlue);}
.kdBorderBlueDLeft{border-left:1px solid var(--kdBlueD);}
.kdBorderRedLLeft{border-left:1px solid var(--kdRedL);}
.kdBorderRedLeft{border-left:1px solid var(--kdRed);}
.kdBorderRedDLeft{border-left:1px solid var(--kdRedD);}
.kdBorderGreenLLeft{border-left:1px solid var(--kdGreenL);}
.kdBorderGreenLeft{border-left:1px solid var(--kdGreen);}
.kdBorderGreenDLeft{border-left:1px solid var(--kdGreenD);}
.kdBorderGreyLLeft{border-left:1px solid var(--kdGreyL);}
.kdBorderGreyLeft{border-left:1px solid var(--kdGrey);}
.kdBorderGreyDLeft{border-left:1px solid var(--kdGreyD);}
.kdBorderOrangeLLeft{border-left:1px solid var(--kdOrangeL);}
.kdBorderOrangeLeft{border-left:1px solid var(--kdOrange);}
.kdBorderOrangeDLeft{border-left:1px solid var(--kdOrangeD);}
.kdBorderBlackLeft{border-left:1px solid var(--kdBlack);}
.kdBorderWhiteLeft{border-left:1px solid var(--kdWhite);}
.kdBorderBeigeLeft{border-left:1px solid var(--kdBeige);}
.kdBorderYellowLeft{border-left:1px solid var(--kdYellow);}	

.kdBorderBlueLRight{border-right:1px solid var(--kdBlueL);}
.kdBorderBlueRight{border-right:1px solid var(--kdBlue);}
.kdBorderBlueDRight{border-right:1px solid var(--kdBlueD);}
.kdBorderRedLRight{border-right:1px solid var(--kdRedL);}
.kdBorderRedRight{border-right:1px solid var(--kdRed);}
.kdBorderRedDRight{border-right:1px solid var(--kdRedD);}
.kdBorderGreenLRight{border-right:1px solid var(--kdGreenL);}
.kdBorderGreenRight{border-right:1px solid var(--kdGreen);}
.kdBorderGreenDRight{border-right:1px solid var(--kdGreenD);}
.kdBorderGreyLRight{border-right:1px solid var(--kdGreyL);}
.kdBorderGreyRight{border-right:1px solid var(--kdGrey);}	
.kdBorderGreyDRight{border-right:1px solid var(--kdGreyD);}
.kdBorderOrangeLRight{border-right:1px solid var(--kdOrangeL);}
.kdBorderOrangeRight{border-right:1px solid var(--kdOrange);}
.kdBorderOrangeDRight{border-right:1px solid var(--kdOrangeD);}
.kdBorderBlackRight{border-right:1px solid var(--kdBlack);}
.kdBorderWhiteRight{border-right:1px solid var(--kdWhite);}
.kdBorderBeigeRight{border-right:1px solid var(--kdBeige);}
.kdBorderYellowRight{border-right:1px solid var(--kdYellow);}


/* white */
.kdBorderTWhite{border-top:1px solid var(--kdWhite);}
.kdBorderBWhite{border-bottom:1px solid var(--kdWhite);}
.kdBorderLWhite{border-left:1px solid var(--kdWhite);}
.kdBorderRWhite{border-right:1px solid var(--kdWhite);}

.dsBorderBlue{border:1px solid var(--dsBlue);}
.dsBorderRed{border:1px solid var(--dsRed);}
.dsBorderGreen{border:1px solid var(--dsGreen);}
.dsBorderGrey{border:1px solid var(--dsGrey);}
.dsBorderGreyL{border:1px solid var(--dsGreyL);}

.border0 {
  border: 0 !important; /* bien forcer la suppression de bordure */
  border-radius: 0 !important;
  outline: none !important; /* retirer le contour focus par défaut */
  

  
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  
  background: transparent !important; /* parfois le background a un style natif */
  
 
  
  font: inherit; /* pour récupérer la police parente */
  
  /* transition c’est bien, mais optionnel */
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


.stickyTop{
	position: sticky;
	top: 0;
}

.kdHoverBlue{background-color:var(--kdWhite); color:var(--kdBlueD); border:1px solid var(--kdBlue); transition: 0.3s;}
/* .kdHoverBlue>i {color: var(--kdBlueD); } */
.kdHoverBlue:hover{	background-color:var(--kdBlue); color:var(--kdBlueL); border:1px solid var(--kdBlueL); transition: 0.3s;}
.kdHoverBlueSelected{background-color:var(--kdBlue); color:var(--kdWhite); border:1px solid var(--kdBlueL); transition: 0.3s;}
.kdHoverRed{background-color:var(--kdWhite);}
.kdHoverRed:hover{	background-color:var(--kdRedL);}
.kdHoverRedSelected{background-color:var(--kdRed); color:var(--kdWhite); border:1px solid var(--kdRedL); transition: 0.3s;}
.kdHoverGreen{background-color:var(--kdWhite); border:1px solid var(--kdGreen); transition: 0.3s;}
.kdHoverGreen:hover{	background-color:var(--kdGreenL);}
.kdHoverGreenSelected{background-color:var(--kdGreen); color:var(--kdWhite); border:1px solid var(--kdGreenL); transition: 0.3s;}

.kdHoverGrey{background-color:var(--kdWhite);}
.kdHoverGrey:hover{	background-color:var(--kdGreyL);}
.kdHoverGreySelected{background-color:var(--kdGrey); color:var(--kdWhite); border:1px solid var(--kdGreyL); transition: 0.3s;}
.kdHoverOrange{background-color:var(--kdWhite);}
.kdHoverOrange:hover{	background-color:var(--kdOrangeL);}
.kdHoverOrangeSelected{background-color:var(--kdOrange); color:var(--kdWhite); border:1px solid var(--kdOrangeL); transition: 0.3s;}
.kdHoverBlack{background-color:var(--kdBlack); color:var(--kdWhite); border:1px solid var(--kdBlack); transition: 0.3s;}
.kdHoverBlack:hover{	background-color:var(--kdWhite); color:var(--kdBlack); transition: 0.3s;}
.kdHoverBlackSelected{background-color:var(--kdBlack); color:var(--kdWhite); border:1px solid var(--kdBlackL); transition: 0.3s;}
.kdHoverWhite{background-color:var(--kdWhite);}
.kdHoverWhite:hover{	background-color:var(--kdWhiteL);}
.kdHoverWhiteSelected{background-color:var(--kdWhite); color:var(--kdBlack); border:1px solid var(--kdBlackL); transition: 0.3s;}
.kdHoverYellow{background-color:var(--kdWhite);}
.kdHoverYellow:hover{	background-color:var(--kdYellow);}
.kdHoverYellowSelected{background-color:var(--kdYellow); color:var(--kdBlack); border:1px solid var(--kdYellowL); transition: 0.3s;}
.kdHoverBeige{background-color:var(--kdWhite);}
.kdHoverBeige:hover{	background-color:var(--kdBeige);}
.kdHoverBeigeSelected{background-color:var(--kdBeige); color:var(--kdBlack); border:1px solid var(--kdBeigeL); transition: 0.3s;}
.kdHoverBlueD{background-color:var(--kdWhite);}
.kdHoverBlueD:hover{	background-color:var(--kdBlueD);}
.kdHoverBlueDSelected{background-color:var(--kdBlueD); color:var(--kdWhite); border:1px solid var(--kdBlueL); transition: 0.3s;}
.kdHoverRedD{background-color:var(--kdWhite);}
.kdHoverRedD:hover{	background-color:var(--kdRedD);}
.kdHoverRedDSelected{background-color:var(--kdRedD); color:var(--kdWhite); border:1px solid var(--kdRedL); transition: 0.3s;}
.kdHoverGreenD{background-color:var(--kdWhite);}
.kdHoverGreenD:hover{	background-color:var(--kdGreenD);}
.kdHoverGreenDSelected{background-color:var(--kdGreenD); color:var(--kdWhite); border:1px solid var(--kdGreenL); transition: 0.3s;}
.kdHoverGreyD{background-color:var(--kdWhite);}
.kdHoverGreyD:hover{	background-color:var(--kdGreyD);}
.kdHoverGreyDSelected{background-color:var(--kdGreyD); color:var(--kdWhite); border:1px solid var(--kdGreyL); transition: 0.3s;}
.kdHoverOrangeD{background-color:var(--kdWhite);}
.kdHoverOrangeD:hover{	background-color:var(--kdOrangeD);}
.kdHoverOrangeDSelected{background-color:var(--kdOrangeD); color:var(--kdWhite); border:1px solid var(--kdOrangeL); transition: 0.3s;}
.kdHoverBlackD{background-color:var(--kdWhite);}
.kdHoverBlackD:hover{	background-color:var(--kdBlackD);}
.kdHoverBlackDSelected{background-color:var(--kdBlackD); color:var(--kdWhite); border:1px solid var(--kdBlackL); transition: 0.3s;}
.kdHoverWhiteD{background-color:var(--kdWhite);}
.kdHoverWhiteD:hover{	background-color:var(--kdWhiteD);}
.kdHoverWhiteDSelected{background-color:var(--kdWhiteD); color:var(--kdBlack); border:1px solid var(--kdBlackL); transition: 0.3s;}
.kdHoverYellowD{background-color:var(--kdWhite);}
.kdHoverYellowD:hover{	background-color:var(--kdYellowD);}
.kdHoverYellowDSelected{background-color:var(--kdYellowD); color:var(--kdBlack); border:1px solid var(--kdYellowL); transition: 0.3s;}
.kdHoverBeigeD{background-color:var(--kdWhite);}
.kdHoverBeigeD:hover{	background-color:var(--kdBeigeD);}
.kdHoverBeigeDSelected{background-color:var(--kdBeigeD); color:var(--kdBlack); border:1px solid var(--kdBeigeL); transition: 0.3s;}
.kdHoverBlueL{background-color:var(--kdWhite);}
.kdHoverBlueL:hover{	background-color:var(--kdBlueL);}
.kdHoverBlueLSelected{background-color:var(--kdBlueL); color:var(--kdWhite); border:1px solid var(--kdBlueL); transition: 0.3s;}
.kdHoverRedL{background-color:var(--kdWhite);}
.kdHoverRedL:hover{	background-color:var(--kdRedL);}
.kdHoverRedLSelected{background-color:var(--kdRedL); color:var(--kdWhite); border:1px solid var(--kdRedL); transition: 0.3s;}
.kdHoverGreenL{background-color:var(--kdWhite);}
.kdHoverGreenL:hover{	background-color:var(--kdGreenL);}
.kdHoverGreenLSelected{background-color:var(--kdGreenL); color:var(--kdWhite); border:1px solid var(--kdGreenL); transition: 0.3s;}
.kdHoverGreyL{background-color:var(--kdWhite);}
.kdHoverGreyL:hover{	background-color:var(--kdGreyL);}
.kdHoverGreyLSelected{background-color:var(--kdGreyL); color:var(--kdWhite); border:1px solid var(--kdGreyL); transition: 0.3s;}
.kdHoverOrangeL{background-color:var(--kdWhite);}
.kdHoverOrangeL:hover{	background-color:var(--kdOrangeL);}
.kdHoverOrangeLSelected{background-color:var(--kdOrangeL); color:var(--kdWhite); border:1px solid var(--kdOrangeL); transition: 0.3s;}
.kdHoverBlackL{background-color:var(--kdWhite);}
.kdHoverBlackL:hover{	background-color:var(--kdBlackL);}
.kdHoverBlackLSelected{background-color:var(--kdBlackL); color:var(--kdWhite); border:1px solid var(--kdBlackL); transition: 0.3s;}
.kdHoverWhiteL{background-color:var(--kdWhite);}
.kdHoverWhiteL:hover{	background-color:var(--kdWhiteL);}
.kdHoverWhiteLSelected{background-color:var(--kdWhiteL); color:var(--kdBlack); border:1px solid var(--kdBlackL); transition: 0.3s;}
.kdHoverYellowL{background-color:var(--kdWhite);}
.kdHoverYellowL:hover{	background-color:var(--kdYellowL);}
.kdHoverYellowLSelected{background-color:var(--kdYellowL); color:var(--kdBlack); border:1px solid var(--kdYellowL); transition: 0.3s;}
.kdHoverBeigeL{background-color:var(--kdWhite);}
.kdHoverBeigeL:hover{	background-color:var(--kdBeigeL);}
.kdHoverBeigeLSelected{background-color:var(--kdBeigeL); color:var(--kdBlack); border:1px solid var(--kdBeigeL); transition: 0.3s;}
.overflow{overflow: auto;}

.kdHoverLineBlue:hover{background-color:var(--kdBlueL); color:var(--kdBlueD); transition: 0.3s;}
.kdHoverLineRed:hover{background-color:var(--kdRedL); color:var(--kdRedD); transition: 0.3s;}
.kdHoverLineGreen:hover{background-color:var(--kdGreenL); color:var(--kdGreenD); transition: 0.3s;}
.kdHoverLineGrey:hover{background-color:var(--kdGreyL); color:var(--kdGreyD); transition: 0.3s;}
.kdHoverLineOrange:hover{background-color:var(--kdOrangeL); color:var(--kdOrangeD); transition: 0.3s;}
.kdHoverLineBlack:hover{background-color:var(--kdBlack); color:var(--kdWhite); transition: 0.3s;}
.kdHoverLineWhite:hover{background-color:var(--kdWhite); color:var(--kdBlack); transition: 0.3s;}
.kdHoverLineYellow:hover{background-color:var(--kdYellow); color:var(--kdBlack); transition: 0.3s;}
.kdHoverLineBeige:hover{background-color:var(--kdBeige); color:var(--kdBlack); transition: 0.3s;}

color-red{
	color:#ff0000;
}

/* pour weasyprint saut de page */
.page-break {
    page-break-before: always; /* ou page-break-after: always selon le besoin */
}

/* //widget by enzo */
.kdBgYellowD {
	background-color: #d7a619 !important;
	color: var(--kdWhite) !important;
}

/* Button Styles Blue */
.kdWidgetBlue {
	background: var(--kdBlueL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdWhite);
		background: var(--kdBlue);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdBlue);
		outline-offset: 2px;
	}
}

/* Button Styles Red */
.kdWidgetRed {
	background: var(--kdRedL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdWhite);
		background: var(--kdRed);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdRed);
		outline-offset: 2px;
	}
}

/* Button Styles Green */
.kdWidgetGreen {
	background: var(--kdGreenL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdWhite);
		background: var(--kdGreen);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdGreen);
		outline-offset: 2px;
	}
}

/* Button Styles Orange */
.kdWidgetOrange {
	background: var(--kdOrangeL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdWhite);
		background: var(--kdOrange);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdOrange);
		outline-offset: 2px;
	}
}

/* Button Styles Yellow */
.kdWidgetYellow {
	background: var(--kdYellowL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdBlack);
		background: var(--kdYellow);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdYellow);
		outline-offset: 2px;
	}
}

/* Button Styles Dark */
.kdBgYellowD {
	background-color: #d7a619 !important;
	color: var(--kdWhite) !important;
}

/* Button Styles Blue */
.kdWidgetBlue {
	background: var(--kdBlueL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdWhite);
		background: var(--kdBlue);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdBlue);
		outline-offset: 2px;
	}
}

/* Button Styles Red */
.kdWidgetRed {
	background: var(--kdRedL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdWhite);
		background: var(--kdRed);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdRed);
		outline-offset: 2px;
	}
}

/* Button Styles Green */
.kdWidgetGreen {
	background: var(--kdGreenL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdWhite);
		background: var(--kdGreen);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdGreen);
		outline-offset: 2px;
	}
}

/* Button Styles Orange */
.kdWidgetOrange {
	background: var(--kdOrangeL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdWhite);
		background: var(--kdOrange);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdOrange);
		outline-offset: 2px;
	}
}

/* Button Styles Yellow */
.kdWidgetYellow {
	background: var(--kdYellowL);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdBlack);
		background: var(--kdYellow);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdYellow);
		outline-offset: 2px;
	}
}

/* Button Styles Dark */
.kdWidgetDark {
	background: var(--kdBlack);
	color: var(--kdWhite);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdBlack);
		background: var(--kdBlackD);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdBlackD);
		outline-offset: 2px;
	}
}

/* Button Styles Light */
.kdWidgetLight {
	background: var(--kdWhite);
	color: var(--kdBlack);
	cursor: pointer;
	border-radius: 8px;
	/*padding: 0.6em 1.2em;*/
	font-weight: 600;
	/*  */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

	

	* {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	transition: all 0.3s ease;

	&:hover {
		color: var(--kdBlack);
		background: var(--kdWhiteL);
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	&:focus {
		outline: 3px solid var(--kdWhiteL);
		outline-offset: 2px;
	}
}

.kdScaleUp:hover {
	transition: transform 0.2s ease;
	transform: scale(1.01);
}

input[data-link] {
    position: relative;
}

/* css menuV2 */
#menu {
	overflow-x: hidden;
}

.menuBtnV2 {
	position: relative;

	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;

	gap: 5px;

	height: 40px;

	margin: 2px;

	border-radius: 8px;

	cursor: pointer;
	transition-duration: 250ms;

	color: #6B7280;

	font-size: 14px;

	/* text overflow, ellipsis, nowrap */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#menu .menuSep {
	display: flex;
	align-items: center;
	justify-content: left;
	margin-top: 16px;
	font-size: 12px;
	color: #777c81;

	cursor: pointer;
}

#menu .menuSep span {
	height: 1px;
	background-color: #cbd5e1;
	margin: 0 5px;
	flex-grow: 1;

	&:first-child {
		width: 10px;
		flex-grow: 0;
	}
}

#menu .menuSep div {
	/* text overflow, ellipsis, nowrap */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	max-width: 50%;

	/* remove selection from text */
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* Tout les separateur du menu sauf le dernier */
#menu.active .menuSep:not(:last-child) {
	div {
		display: none;
	}
	span {
		&:first-child {
			flex-grow: 1;
			display: none;
		}
	}
}

.menuBtnV2 i {
	font-size: 16px;
}

.menuBtnV2 > div.icon {
	background-color: #e0e7ff77;
	border-radius: 6px;
	width: 30px;
	height: 30px;
	margin-left: 5px;
}

.menuBtnV2.active > div.icon {
	background-color: #3E97FF22;
}

.menuBtnV2.active {
	background: #E8F2FF;
	color: #3E97FF;
}

.menuBtnV2:hover {
	background: #E8F2FF;
	color: #3E97FF;
}

.menuBtnV2:hover > div.icon {
	background-color: #3E97FF22;
}

/* mettre une transition a tous les enfant et lui meme a #menu*/
#menu, #menu .menuBtnV2, #menu .menuBtnV2 nav, #menu .menuBtnV2 div.icon {
	transition-duration: 250ms;
}

#menu.active {
	width: 45px;

	.menuBtnV2 {
		justify-content: center;
		width: fit-content;
	}

	.menuBtnV2 nav {
		display: none;
	}

	.menuBtnV2 div.icon {
		margin-left: auto;
		margin-right: auto;

		width: 40px;
		height: 40px;
	}

	#menuSettings nav {
		display: none;
	}
}

.mainMenu.active {
	width: fit-content;
}

.mainMenu.editmode {
	border: 2px dashed red;
}

/* menuV2 */


/* ============================================
   BOUTONS PARAMÈTRES MODERNES - CLASSES CSS
   ============================================ */

/* ==========================================
   STYLE 1: GLASSMORPHISM (Recommandé)
   =========================================== */
.kdButton1 {
  padding: 12px 28px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #1e293b;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(31, 41, 55, 0.1);
}

.kdButton1:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(31, 41, 55, 0.15);
}

/* ==========================================
   STYLE 2: SOLID GRADIENT
   =========================================== */
.kdButton2 {
  padding: 12px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
}

.kdButton2:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);
}

.kdButton2:active {
  transform: translateY(-1px);
}

/* ==========================================
   STYLE 3: MINIMAL BORDER (Épuré)
   =========================================== */
.kdButton3 {
  padding: 12px 28px;
  border-radius: 10px;
  background: transparent;
  border: 2px solid #3b82f6;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #3b82f6;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kdButton3:hover {
  background: #3b82f6;
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* ==========================================
   STYLE 4: BRUTALIST
   =========================================== */
.kdButton4 {
  padding: 12px 28px;
  border-radius: 2px;
  background: #1e293b;
  border: 2px solid #0f172a;
  cursor: pointer;
  transition: all 0.2s linear;
  color: #f1f5f9;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 3px 3px 0px #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kdButton4:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px #0f172a;
}

.kdButton4:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px 0px #0f172a;
}

/* ==========================================
   STYLE 5: SOFT NEUMORPHIC
   =========================================== */
.kdButton5 {
  padding: 12px 28px;
  border-radius: 14px;
  background: #f1f5f9;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #475569;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), -2px -2px 6px rgba(255, 255, 255, 0.8);
}

.kdButton5:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), -2px -2px 8px rgba(255, 255, 255, 0.9);
}

.kdButton5:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* ==========================================
   STYLE 6: MODERN ACCENT (Design linéaire)
   =========================================== */
.kdButton6 {
  padding: 12px 28px;
  border-radius: 8px;
  background: white;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #1e293b;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.kdButton6::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #1e40af);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.kdButton6:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.kdButton6:hover::before {
  transform: scaleX(1);
}

/* nouveau design 04/02/2026 */
	.success-overlay {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
	background-color: #ffffff;
	margin-top: 20px;
	min-height: 500px;
}

.modal-header {
	width: 100%;
	height: 70px;
	background-color: #f2f2f2;
	border-radius: 20px 20px 0 0;
	padding: 10px;
	background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
	color: white;
	margin-bottom: 15px;
}

.header-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .15);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
	margin: 10px;
}

.header-icon i {
	font-size: 16px;
	color: white;

}

.success-overlay::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 100px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, .05);
    border-radius: 50%;
}

.header-icon-close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
	margin: 10px;
}

.header-icon-close i {
	font-size: 16px;
	color: white;

}

.pupupTitre2{
	color: rgba(255, 255, 255, .72);
}

.success-overlay::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -10%;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, .07);
    border-radius: 50%;
}

.close-btn:hover {
    background: rgba(255, 255, 255, .25);
    transform: scale(1.08);
}


.badge1 {
display: inline-flex;
align-items: center;
gap: 8px;
background: #eef2ff;
color: #4338ca;
padding: 8px 14px;
border-radius: 8px;
font-size: .82rem;
font-weight: 600;
align-self: flex-start;
border: 1px solid rgba(99, 102, 241, .12);
}

.badge1 i {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.contentInput {
 margin: 10px 0 20px 0;
}
.field-input-wrap {
  position: relative;
 
  
}

.field-input {
  width: 100%;
  padding: 12px 14px 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  color: #0f172a;
  background: #ffffff;
  transition: 200ms cubic-bezier(.4,0,.2,1);
  outline: none;
}

.addIconInput{
   padding: 42px; 
}


.field-input:hover {
  border-color: #cbd5e1;
}

.field-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .15);
}

.field-input::placeholder {
  color: #94a3b8;
}

.field-input:focus ~ i {
  color: #6366f1;
}

/* L'icône est placée en absolu à gauche, centrée verticalement */
.field-input-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px; 
  color: #94a3b8;
  pointer-events: none;       /* les clics traversent l'icône vers l'input */
  
}

.field-label {
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-left: 4px;
    margin-bottom: 4px;
}

.email-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #eef2ff;
  color: #4338ca;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 500;
  border: 1px solid rgba(99, 102, 241, .12);
  animation: tagIn .2s ease;
}

@keyframes tagIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

.email-tag .remove-tag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(67, 56, 202, .12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4338ca;
  transition: 200ms cubic-bezier(.4,0,.2,1);
  padding: 0;
}

.email-tag .remove-tag:hover {
  background: rgba(67, 56, 202, .25);
}

.email-tag .remove-tag svg {
  width: 10px;
  height: 10px;
}

.recipients-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  min-height: 20px;
  align-items: center;
  background: #f8fafc;
  cursor: text;
  transition: 200ms cubic-bezier(.4,0,.2,1);
}

.recipients-display:hover {
  border-color: #cbd5e1;
}

.recipients-display:focus-within {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .15);
  background: #ffffff;
}

.btnV2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  padding: 11px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: 200ms cubic-bezier(.4,0,.2,1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.btnV2 svg {
  width: 18px;
  height: 18px;
}

/* ─── Ghost (Annuler) ─── */
.btn-ghost {
  background: transparent;
  color: #475569;
  border: 1.5px solid #e2e8f0;
}

.btn-ghost:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* ─── Primary (Envoyer) ─── */
.btn-primary {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(67, 56, 202, .3);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(.4,0,.2,1);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(67, 56, 202, .4);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:active {
  transform: translateY(0);
}

.attachment-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1.5px dashed #e2e8f0;
  border-radius: 12px;
  font-size: .84rem;
  color: #475569;
  margin-bottom: 10px;
}

.attachment-bar svg {
  width: 18px;
  height: 18px;
  color: #6366f1;
  flex-shrink: 0;
}

.attachment-name {
  font-weight: 500;
  color: #0f172a;
}

.attachment-size {
  color: #94a3b8;
  font-size: .78rem;
  margin-left: auto;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 200ms cubic-bezier(.4,0,.2,1);
  color: #475569;
  position: relative;
}

.topbar-icon-btn:hover {
  border-color: #818cf8;
  color: #4338ca;
  background: #eef2ff;
}

.topbar-icon-btn i {
  font-size: 20px;
}

.topbar-icon-btn .tooltip {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #fff;
  font-size: .7rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(.4,0,.2,1);
}

.topbar-icon-btn:hover .tooltip {
  opacity: 1;
}

.tooltip{
	z-index: 10;
}

.contacts-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: .84rem;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: 200ms cubic-bezier(.4,0,.2,1);
}

.contacts-badge:hover {
  border-color: #818cf8;
  background: #eef2ff;
  color: #4338ca;
}

.contacts-badge svg {
  width: 18px;
  height: 18px;
}

.contacts-count {
  background: #4338ca;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kdTitleV2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tab-btn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 8px;
  transition: 200ms cubic-bezier(.4,0,.2,1);
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-btn:hover {
  color: #475569;
  background: rgba(0,0,0,.03);
}

.tab-btn.active {
     background: var(--kdViolet);
    color: #fff;
    box-shadow: 0 2px 6px rgba(67, 56, 202, .25);
}

.tab-btn.skip {
  color: #94a3b8;
  font-style: italic;
}

.tab-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1;
}

.tab-badge.count {
  background: #eef2ff;
  color: #4338ca;
}

.tab-badge.warning {
  background: #fffbeb;
  color: #d97706;
}

.tab-badge.success {
  background: #ecfdf5;
  color: #059669;
}

.tabs-nav {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px;
  background: #f8fafc;
  border-bottom: 1.5px solid #e2e8f0;
}

/* nouveau design 04/02/2026 */