a[target="_blank"]:not(.icon-link)::after {
	font-family: bootstrap-icons !important;
	content: "\F836";
	padding-left: 5px;
	vertical-align: -10%;
}

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

.float-right {
	float: right;
	margin-left: 10px;
}
.float-left {
	float: left;
	margin-right: 10px;
}


.lightbox {
	border: 0;
	max-width: 95%;
	max-height: 95%;
	overflow-y: scroll !important;
}

.fancybox-container {
	z-index: 1997 !important;
}

.popover { /* over fancybox */
	z-index: 2000;
}


/************************/
/*** COLUMNS          ***/
/************************/

.columns, .columns-4 {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	text-align: initial !important;
}
.columns-3 {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	text-align: initial !important;
}
.columns-2 {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	text-align: initial !important;
}
.columns-1 {
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	text-align: initial !important;
}

@media (max-width: 1200px) { /* Large devices (large desktops, 1200px and up) */
	.columns, .columns-4 {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}
@media (max-width: 992px) { /* Medium devices (desktops, 992px and up) */
	.columns, .columns-3, .columns-4 {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}
@media (max-width: 768px) { /* Small devices (tablets, 768px and up) */
	.columns, .columns-2, .columns-3, .columns-4 {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
}


.columns-all {
	column-span: all;
	-webkit-column-span: all;
}

.columns > li, .columns-1 > li, .columns-2 > li, .columns-3 > li, .columns-4 > li {
  break-inside: avoid-column;
  padding-left: 0;
  margin-left: 10px;
}

UL.columns {
  list-style-type: none; /* Remove bullets */
  padding: 0;
}

/************************/
/*** TABLES           ***/
/************************/

.table {
	width: 100%;
	margin-bottom: 10px;
}
.table TR TH {
	text-align: left;
}
.table THEAD TR TH {
	text-align: center;
}

div.responsive {
	overflow-x: auto;
	width: 100%;
}

/* Use thead & data-label on TD */
.tbl-responsive {
  width: 100%;
  border-collapse: collapse;
}
.tbl-responsive:not(.profil) :not(thead) tr:hover {

}
.tbl-responsive tr:not(:last-child) {
	border-bottom: 1px solid #BB9E73;
}


.tbl-responsive th {
	color: #BB9E73;
	text-align: center;
}
.tbl-responsive td, .tbl-responsive th {
  padding: 4px;
}

.tbl-responsive.profil td {
	text-align:center;
}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	.tbl-responsive, .tbl-responsive thead, .tbl-responsive tbody, .tbl-responsive th, .tbl-responsive td, .tbl-responsive tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.tbl-responsive thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.tbl-responsive.table>tbody>tr>td {
		border: 0px;
	}

/* Zebra striping
.tbl-responsive tr:nth-of-type(even) {
  background-image:url('../img/layout/paper5.jpg');
} */

	.tbl-responsive td {
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 30% !important; /* = largeur du before */
	  text-align: left !important;
	}

	.tbl-responsive td:before {
		content: attr(data-label);
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 2px;
		left: 6px;
		width: 35%; /* = padding du TD */
/*		padding-right: 10px; */
		white-space: nowrap;
	}

	.tbl-responsive.profil td {
		text-align:left;
	}

}

/*****************************/
/*** IMAGES                 **/
/*****************************/

.flip {
	-moz-transform: scale(-1, -1);
	-o-transform: scale(-1, -1);
	-webkit-transform: scale(-1, -1);
	transform: scale(-1, -1);
}

.flip-h {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
.flip-v {
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}


.fancybox-stage {
	background: var(--color-primary);
	padding: 0px;
}
.fancybox-thumbs {
	background: var(--color-primary);
}
.fancybox-thumbs__list a:before {
	border: 6px solid var(--color-link-hover);
}
.fancybox-caption-custom {
	color: #fff;
}
.fancybox-infobar {
	color: ivory;
}
.fancybox-progress { /* barre de progression diaporama */
	background: var(--color-secondary);
}



/************************/
/*** ALERTS & TOASTS  ***/
/************************/

#toast-container > div {
	opacity: .9 !important;
}
.toast {
	margin: 10px auto !important;
}

@media screen and (min-width:768px) {
	#toast-container {
		min-width: 35%;
	}
	#toast-container > div {
		width: 95% !important;
	}
}

.alert div {
	font-weight: bold;
}

/************************/
/*** TABS & PILLS     ***/
/************************/

#nav-pills-menu.nav {
	border-bottom: 1px solid var(--color-primary-hover);
}
.nav-pills .nav-item {
  min-width: 20%;
  text-align: center;
}
/*
.nav-pills .nav-item a {
	font-size: .8em;
}
*/
.nav-pills .nav-link.active {
  background-color: var(--color-primary-hover);
  color: #fff;
}

.nav-pills .nav-link:hover {
  background-color: var(--color-primary);
  color: #fff;
}



.btn-flat {
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
/*	margin: 10px 0; */
	outline: 0 !important;
}

.btn-flat:hover {
}