button {
  display: flex;
	position: relative;
  font-family: var(--font-family);
  cursor: pointer;
/*   text-overflow: ellipsis; */
  overflow: hidden;
  white-space: nowrap;  
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-rounded);
  border-width: 1px;
  border-style: solid;
  /* on force les couleurs car par defaut, les navigateurs affichent les boutons en gris */
  border-color: transparent;
  background-color: transparent;
  color: black;
}
button:hover {
  border-color: transparent;
  background-color: transparent;
  color: black;
}
button:active {
  border-color: transparent;
  background-color: transparent;
  color: black;
}
button:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--light-gray-button-border-color-hover);
  outline-offset: 1px;
}

button span {
  flex: 1;
  min-width: 0; /* obligatoire en flexbox */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button i {
  width: 20px;
}



button .badge {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  border-radius: var(--radius-rounded);
  border-width: 1px;
  border-style: solid;
  aspect-ratio: 1 / 1;
  height: 80%;
  border-color: var(--light-gray-button-color-hover);
  background-color: var(--light-gray-button-color);
  color:var(--light-gray-button-background);
}
button:hover .badge {
  border-color: var(--light-gray-button-color-hover);
  background-color: var(--light-gray-button-color-hover);
  color: var(--light-gray-button-background-hover);
}
button:active .badge {
  border-color: var(--light-gray-button-background);
  background-color: var(--light-gray-button-background);
  color: var(--light-gray-button-border-color-hover);
}


/***********************************************************/
/* BOUTONS ICON SEUL
/***********************************************************/
button.btn-just-icon {
  aspect-ratio:1/1;
  padding:0;
}


/***********************************************************/
/* BOUTONS LARGES
/***********************************************************/
button.btn-large {
  gap: var(--spacing-xs);
	font-size: var(--size-lg);
  height: var(--comp-height-lg);
  padding: 0 var(--spacing-xl);
  margin: var(--spacing-xs);
}
button.btn-large i {font-size: var(--icon-lg);}
/*button.btn-large i.left{margin-right: var(--spacing-xs);}*/
/*button.btn-large i.right {margin-left: var(--spacing-xs);}*/
/***********************************************************/

/***********************************************************/
/* BOUTONS MEDIUM (BOUTON PAR DEFAUT)
/***********************************************************/
button,
button.btn-medium {
  gap: var(--spacing-xs);
  font-size: var(--size-base);
  height: var(--comp-height-md);
  padding: 0 var(--spacing-xs);
  margin: var(--spacing-xs);
}
button i,
button.btn-medium i {font-size: var(--icon-md);}
/*button i.left,*/
/*button.btn-medium i.left{margin-right: var(--spacing-2xs);}*/
/*button i.right, */
/*button.btn-medium i.right {margin-left: var(--spacing-2xs);}*/
/***********************************************************/

/***********************************************************/
/* BOUTONS SMALL
/***********************************************************/
button.btn-small {
  gap: var(--spacing-3xs);
	font-size: var(--size-sm);
  height: var(--comp-height-sm);
  padding: 0 var(--spacing-2xs);
  margin: var(--spacing-3xs);
}
button.btn-small i {font-size: var(--icon-xs);}
/*button.btn-small i.left{margin-right: var(--spacing-3xs);}*/
/*button.btn-small i.right {margin-left: var(--spacing-3xs);}*/
/***********************************************************/

/***********************************************************/
/* BOUTONS XSMALL
/***********************************************************/
button.btn-xsmall {
  gap: var(--spacing-4xs);
  font-size: var(--size-xs);
  height: var(--comp-height-xs);
  padding: 0 var(--spacing-4xs);
  margin: var(--spacing-4xs);
}
button.btn-xsmall i {font-size: var(--icon-2xs);}
/*button.btn-xsmall i.left{margin-right: var(--spacing-4xs);}*/
/*button.btn-xsmall i.right {margin-left: var(--spacing-4xs);}*/
/***********************************************************/





/***********************************************************/
/* BOUTONS DOUBLES ACTIONS
/***********************************************************/
.btn-double {
  display:flex;
}

.btn-double button:first-of-type{
  margin-right: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-width: 0;
}
.btn-double button:first-of-type,
.btn-double button.btn-medium:first-of-type{
  padding-right: calc(var(--spacing-xs) / 2 );
}
.btn-double button.btn-large:first-of-type{
  padding-right: calc(var(--spacing-xl) / 2 );
}
.btn-double button.btn-small:first-of-type{
  padding-right: calc(var(--spacing-2xs) / 2 );
}
.btn-double button.btn-xsmall:first-of-type{
  padding-right: calc(var(--spacing-4xs) / 2 );
}

.btn-double button:last-of-type{
  margin-left: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-right-width: 0;
}
.btn-double button:last-of-type,
.btn-double button.btn-medium:last-of-type{
  padding-left: calc(var(--spacing-xs) / 2 );
}
.btn-double button.btn-large:last-of-type{
  padding-right: calc(var(--spacing-xl) / 2 );
}
.btn-double button.btn-small:last-of-type{
  padding-right: calc(var(--spacing-2xs) / 2 );
}
.btn-double button.btn-xsmall:last-of-type{
  padding-right: calc(var(--spacing-4xs) / 2 );
}


/****************************************************/
/* Bouton Simple par défaut
/****************************************************/
button.elButton {
  border-color: var(--light-gray-button-border-color);
  background-color: var(--light-gray-button-background);
  color: var(--light-gray-button-color);
}
button.elButton:hover {
  border-color: var(--light-gray-button-border-color-hover);
  background-color: var(--light-gray-button-background-hover);
  color: var(--light-gray-button-color-hover);
}
button.elButton:active {
  border-color: var(--light-gray-button-border-color-hover);
  background-color: var(--light-gray-button-border-color-hover);
  color: var(--light-gray-button-background);
}
button.elButton:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--light-gray-button-border-color-hover);
  outline-offset: 1px;
}
button.elButton:hover .badge {
  border-color: var(--light-gray-button-color-hover);
  background-color: var(--light-gray-button-color-hover);
  color: var(--light-gray-button-background-hover);
}
button.elButton:active .badge {
  border-color: var(--light-gray-button-background);
  background-color: var(--light-gray-button-background);
  color: var(--light-gray-button-border-color-hover);
}


/****************************************************/
/* Bouton Toolbar par défaut
/****************************************************/
button.elBtnTool {
/*   border-color: transparent; */
/*   background-color: transparent; */
/*   color: black; */
}
button.elBtnTool:hover {
/*   border-color: transparent; */
/*   background-color: transparent; */
/*   color: black; */
}
button.elBtnTool:active {
/*   border-color: var(--light-gray-button-border-color-hover); */
/*   background-color: var(--light-gray-button-border-color-hover); */
/*   color: var(--light-gray-button-background); */
}
button.elBtnTool:focus-visible {
/*   outline-width: 2px; */
/*   outline-style: solid; */
/*   outline-color: var(--light-gray-button-border-color-hover); */
/*   outline-offset: 1px; */
}
button.elBtnTool:hover .badge {
/*   border-color: var(--light-gray-button-color-hover); */
/*   background-color: var(--light-gray-button-color-hover); */
/*   color: var(--light-gray-button-background-hover); */
}
button.elBtnTool:active .badge {
/*   border-color: var(--light-gray-button-background); */
/*   background-color: var(--light-gray-button-background); */
/*   color: var(--light-gray-button-border-color-hover); */
}

/****************************************************/
/* Bouton Action par défaut
/****************************************************/
button.elBtnAction {
/*  border-color: transparent;*/
/*  background-color: transparent;*/
/*   color: black; */
}
button.elBtnAction:hover {
/*  border-color: var(--light-gray-button-border-color-hover);*/
/*  background-color: var(--light-gray-button-background-hover);*/
/*   color: var(--light-gray-button-color-hover); */
}
button.elBtnAction:active {
/*   border-color: var(--light-gray-button-border-color-hover); */
/*   background-color: var(--light-gray-button-border-color-hover); */
/*   color: var(--light-gray-button-background); */
}
button.elBtnAction:focus-visible {
/*   outline-width: 2px; */
/*   outline-style: solid; */
/*   outline-color: var(--light-gray-button-border-color-hover); */
/*   outline-offset: 1px; */
}
button.elBtnAction:hover .badge {
/*   border-color: var(--light-gray-button-color-hover); */
/*   background-color: var(--light-gray-button-color-hover); */
/*   color: var(--light-gray-button-background-hover); */
}
button.elBtnAction:active .badge {
/*   border-color: var(--light-gray-button-background); */
/*   background-color: var(--light-gray-button-background); */
/*   color: var(--light-gray-button-border-color-hover); */
}


/****************************************************/
/* Bouton TQ par défaut
/****************************************************/
button.elList {
/*   border-color: red; */
/*   background-color: red; */
/*   color: white; */
}
button.elList:hover {
/*   border-color: var(--light-gray-button-border-color-hover); */
/*   background-color: var(--light-gray-button-background-hover); */
/*   color: var(--light-gray-button-color-hover); */
}
button.elList:active {
/*   border-color: var(--light-gray-button-border-color-hover); */
/*   background-color: var(--light-gray-button-border-color-hover); */
/*   color: var(--light-gray-button-background); */
}
button.elList:focus-visible {
/*   outline-width: 2px; */
/*   outline-style: solid; */
/*   outline-color: var(--light-gray-button-border-color-hover); */
/*   outline-offset: 1px; */
}
button.elList:hover .badge {
/*   border-color: var(--light-gray-button-color-hover); */
/*   background-color: var(--light-gray-button-color-hover); */
/*   color: var(--light-gray-button-background-hover); */
}
button.elList:active .badge {
/*   border-color: var(--light-gray-button-background); */
/*   background-color: var(--light-gray-button-background); */
/*   color: var(--light-gray-button-border-color-hover); */
}


/****************************************************/
/* Bouton elBtnListAction
/****************************************************/
button.elBtnListAction {
  border-color: var(--light-gray-button-border-color);
  background-color: var(--light-gray-button-background);
  color: var(--light-gray-button-color);
}
button.elBtnListAction:hover {
  border-color: var(--light-gray-button-border-color-hover);
  background-color: var(--light-gray-button-background-hover);
  color: var(--light-gray-button-color-hover);
}
button.elBtnListAction:active {
  border-color: var(--light-gray-button-border-color-hover);
  background-color: var(--light-gray-button-border-color-hover);
  color: var(--light-gray-button-background);
}
button.elBtnListAction:focus-visible {
/*   outline-width: 2px; */
/*   outline-style: solid; */
/*   outline-color: var(--light-gray-button-border-color-hover); */
/*   outline-offset: 1px; */
}
button.elBtnListAction:hover .badge {
/*   border-color: var(--light-gray-button-color-hover); */
/*   background-color: var(--light-gray-button-color-hover); */
/*   color: var(--light-gray-button-background-hover); */
}
button.elBtnListAction:active .badge {
/*   border-color: var(--light-gray-button-background); */
/*   background-color: var(--light-gray-button-background); */
/*   color: var(--light-gray-button-border-color-hover); */
}


/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/


/****************************************************/
/* Bouton btn-light-gray
/****************************************************/
button.btn-light-gray {
  border-color: var(--light-gray-button-border-color);
  background-color: var(--light-gray-button-background);
  color: var(--light-gray-button-color);
}
button.btn-light-gray:hover {
  border-color: var(--light-gray-button-border-color-hover);
  background-color: var(--light-gray-button-background-hover);
  color: var(--light-gray-button-color-hover);
}
button.btn-light-gray:active {
  border-color: var(--light-gray-button-border-color-hover);
  background-color: var(--light-gray-button-border-color-hover);
  color: var(--light-gray-button-background);
}
button.btn-light-gray:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--light-gray-button-border-color-hover);
  outline-offset: 1px;
}
button.btn-light-gray:hover .badge {
  border-color: var(--light-gray-button-color-hover);
  background-color: var(--light-gray-button-color-hover);
  color: var(--light-gray-button-background-hover);
}
button.btn-light-gray:active .badge {
  border-color: var(--light-gray-button-background);
  background-color: var(--light-gray-button-background);
  color: var(--light-gray-button-border-color-hover);
}


/****************************************************/
/* Bouton accent (Rose)
/****************************************************/
button.btn-accent {
  border-color: var(--bg-accent-base);
  background-color: var(--bg-accent-base);
  color: var(--font-accent-base);
}
button.btn-accent:hover {
  border-color: var(--bg-accent-hover);
  background-color: var(--bg-accent-hover);
  color: var(--font-accent-base);
}
button.btn-accent:hover:active {
  border-color: var(--bg-accent-pressed);
  background-color: var(--bg-accent-pressed);
  color: var(--font-accent-pressed);
}
button.btn-accent:focus,
button.btn-accent:focus-visible {
  outline-color: var(--stroke-focus);
}
button.btn-accent:hover .badge {
}
button.btn-accent:active .badge {
}


/****************************************************/
/* Bouton primary (vert foncé)
/****************************************************/
button.primary,
button.btn-primary {
  border-color: var(--bg-primary-base);
  background-color: var(--bg-primary-base);
  color: var(--font-neutral-white);
}
button.primary:hover,
button.btn-primary:hover {
  border-color: var(--bg-primary-hovered);
  background-color: var(--bg-primary-hovered);
  color: var(--font-neutral-white);
}
button.primary:hover:active,
button.btn-primary:hover:active {
  border-color: var(--bg-primary-pressed);
  background-color: var(--bg-primary-pressed);
  color: var(--font-neutral-black);
}
button.primary:focus-visible,
button.btn-primary:focus-visible {
  outline-color: var(--stroke-focus);
}
button.primary:hover .badge,
button.btn-primary:hover .badge {
}
button.primary:active .badge,
button.btn-primary:active .badge {
}
	
/****************************************************/
/* Bouton danger (rouge)
/****************************************************/
button.btn-danger {
  border-color: var(--danger-button-border-color);
  background: var(--danger-button-background);
  color: var(--danger-button-color);
}
button.btn-danger:hover {
  border-color: var(--danger-button-border-color-hover);
  background: var(--danger-button-background-hover);
  color: var(--danger-button-color-hover);
}
button.btn-danger:hover:active {}
button.btn-danger:focus-visible {}
button.btn-danger:hover .badge {}
button.btn-danger:active .badge {}


/****************************************************/
/* Bouton succès (vert)
/****************************************************/
/* btn-success */
button.btn-success {
  border-color: var(--success-button-border-color);
  background: var(--success-button-background);
  color: var(--success-button-color);
}
button.btn-success:hover {
  border-color: var(--success-button-border-color-hover);
  background: var(--success-button-background-hover);
  color: var(--success-button-color-hover);
}
button.btn-success:hover:active {}
button.btn-success:focus-visible {}
button.btn-success:hover .badge {}
button.btn-success:active .badge {}

/****************************************************/
/* Bouton alerte (orange)
/****************************************************/
button.btn-warning {
  border-color: var(--warning-button-border-color);
  background: var(--warning-button-background);
  color: var(--warning-button-color);
}
button.btn-warning:hover {
  border-color: #ffb600;
  background: #ffb600;
  color: #FFFFFF;
}
button.btn-warning:hover:active {}
button.btn-warning:focus-visible {}
button.btn-warning:hover .badge {}
button.btn-warning:active .badge {}





/****************************************************/
/* Bouton Simple (bordure uniquement)
/****************************************************/
button.btn-simple {
  color: var(--simple-button-color);
  border-color: var(--simple-button-border-color);
  background: transparent;
}
button.btn-simple:hover {
  color: var(--simple-button-color-hover);
  border-color: var(--simple-button-border-color-hover);
  background: transparent;
}

button.btn-simple.primary,
button.btn-simple.btn-primary {
  color: var(--bg-primary-base);
  border-color: var(--simple-button-border-color);
  background: transparent;
}
button.btn-simple.primary:hover,
button.btn-simple.btn-primary:hover {
  color: var(--bg-primary-hovered);
  border-color: var(--bg-primary-hovered);
  background: transparent;
}










/*
Spécificité navbar
*/
.navbar button {color: #ffffff;}
.navbar button:hover {color: #ffffff;}