/* --------------------------------------------------------------------------------------------------------------- GENERAL */
.projet a {
	margin-bottom: 0;}

.projet a span {
	font-family: 'Apercu';}

h3 {
	margin: var(--padding) 0;}

p {
	display: block;
	margin: 0;}

.menuBtn:nth-of-type(3) a {
	font-family: 'Apercu-bold';
	border-bottom: solid var(--colorBG) 2px;}


/* --------------------------------------------------------------------------------------------------------------- FILTRES */
.filterBl {
    z-index: 98;
    position: sticky;
    top: var(--menuHeight);
    display: flex;
    height: var(--menuHeight);
    align-items: center;
	margin: calc(2 * var(--marginBold)) calc(var(--marginBold) + var(--marginSide));}

.filter1 {
	height: var(--menuHeight);
    width: calc((var(--columnWidth) * 6) + (6 * var(--marginBold)));
	margin-left: auto;}

.filterTtl:hover .arrow1 {
	transform: rotate(90deg);}

.filterTtl {
	cursor: s-resize;
	position: relative;
	display: flex;
	height: var(--menuHeight);
	align-items: center;
	box-sizing: border-box;
	padding: var(--padding) var(--marginBold);
	background-color: var(--colorR);}

.filterTtl p:first-of-type {
	margin-right: var(--padding);}

.filterNumber {
	text-align: center;
	opacity: .8;
	margin-left: auto;}

.removeAllFilter {
	cursor: pointer;
	position: relative;
	display: none;
	height: calc(2 * var(--padding));
	width: calc(2 * var(--padding));
	margin-right: var(--marginLight);}

.removeAllFilter::before, .removeAllFilter::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - var(--padding));
    height: 2px; 
    background-color: var(--colorBG);
    transform: translate(-50%, -50%) rotate(45deg);}

.removeAllFilter::after {
    transform: translate(-50%, -50%) rotate(-45deg);}

.removeAllFilterActive {
	display: block;
	padding-left: var(--marginLight);
	margin-right: calc(var(--logotypeWidth) + 1.5 * var(--marginBold));}

.filterName {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--padding);
	height: 0;
	max-height: calc(100vh - 3 * var(--menuHeight));
	box-sizing: border-box;
	padding: 0 var(--marginBold);
	overflow: hidden;
	overflow-y: auto;
	background-color: var(--colorR);}

.filterCategories, .filterYear {
	display: flex;
	flex-direction: column;
	padding: var(--marginBold) 0;}

.filterCategories[data-name="types de projets"] {
    display: none;}

.filterTtl .filterCategories {
	flex-wrap: nowrap;
	padding: 0;}

.filterTtl .subcategoryBl {
	display: flex;
	align-items: center;
	border-left: none;}

.filterTtl .subcategory {
	padding: 0;
	padding-right: var(--padding);
	border-left: none;}

.subcategory, .year {
	cursor: pointer;
	display: flex;
	align-items: center;
	align-self: flex-start;
	border-left: solid var(--colorBG) 2px;
	padding: var(--marginLight);}

.subcategory p, .year p {
	transform: translateX(calc(-2 * var(--padding) - var(--marginLight)));}

.yearLines {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: row;}

.remove {
	position: relative;
	opacity: 0;
	height: calc(2 * var(--padding));
	width: calc(2 * var(--padding));
	margin-right: var(--marginLight);}

.remove::before, .remove::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - var(--padding));
    height: 2px; 
    background-color: var(--colorBG);
    transform: translate(-50%, -50%) rotate(45deg);}

.remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);}

.filterActive p, .filterActive .remove {
	opacity: 1;
	transform: translateX(0px) !important;}

.filterInactive p {
	cursor: default !important;
	opacity: .5;}


/* --------------------------------------------------------------------------------------------------------------- CONTENT */
.content {
	margin: calc(2 * var(--marginExtra)) 0;}

.galleryBl {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--marginBold);
	width: 100%;
	min-height: calc(100vh - 4 * var(--menuHeight));
	padding: 0 var(--marginBold);
	box-sizing: border-box;}

[class^="projet"] {
	display: block;
	position: relative;
	grid-column: span 3;
	width: auto;
	height: auto;}

.projetSeparation {
	border-top: solid var(--colorTxt) 2px;
    grid-column: span 12;}

.imProjet {
	background-color: var(--colorR);
	aspect-ratio: 16 / 10;
	width: 100%;}

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;}

.txtProjet {
	position: relative;
	padding: var(--padding) 0;
	padding-bottom: 0;}

.ttlProjet {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: calc(var(--marginLight) / 2);}

.ttlProjet a {
	padding: calc(var(--marginLight) / 2) 0;}

.ttlProjet a::after {
	z-index: -1;
    content: '';
    position: absolute;
	right: 0px;
	top: 0px;
    height: 100%;
	width: 0%;
    background-color: var(--colorJ);}

.projet:hover .ttlProjet a::after {
	left: 0px;
	width: 100%;}

.projet a span {
	border-left: solid var(--colorTxt) 2px;
	padding-left: var(--marginLight);}

.btnMoreInfo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-right: var(--marginBold);
	padding: calc(var(--marginLight) / 2) var(--marginLight);
	margin-top: calc(1.5 * var(--padding));
	background-color: var(--colorJ);}

.btnMoreInfo.externLink {
    background-color: var(--colorR);}

.btnMoreInfo.downloadLink {
	color: var(--colorBG);
    background-color: var(--colorB);}

.txtArticle.highlight .btnMoreInfo {
	background-color: transparent;
    border: solid var(--colorTxt) 2px;}

.downloadLink .arrow1 {
    border-left: 8px solid var(--colorBG);}

.btnMoreInfo:hover .arrow1 {
	transform: rotate(-90deg);}


/* --------------------------------------------------------------------------------------------------------------- REPONSIVE */
@media screen and (min-width: 1921px) {
	.galleryBl {
		grid-template-columns: repeat(20, 1fr);}
	[class^="projet"]:not(.projetSeparation) {
		grid-column: span 4;}
	.projetSeparation {
		grid-column: span 20;}
}

@media screen and (max-width: 1500px) {
	.removeAllFilterActive {
		display: none;}
}

@media screen and (max-width: 1400px) {
	.filter1 {
		width: calc((var(--columnWidth) * 10) + (10 * var(--marginBold)));}
	[class^="projet"] {
		grid-column: span 4;}
	.projetSeparation {
		grid-column: span 12;}
	.removeAllFilterActive {
		display: block;}
}

@media screen and (max-width: 1200px) {
	.filter1 {
		width: calc((var(--columnWidth) * 12) + (12 * var(--marginBold)));}
	.filterName {
		grid-template-columns: auto auto auto;}
}

@media screen and (max-width: 1030px) {
	.removeAllFilterActive {
		display: none;}
}

@media screen and (min-width: 951px) and (hover: hover) {
	.filterTtl:hover + .filterName, .filterName:hover {
		height: var(--filterHeight);}
}

@media screen and (max-width: 950px) {
	.filter1 {
		width: 100%;}
	.filterTtl {
		cursor: pointer;}
	.filterTtl .filterCategories {
		display: none;}
	.filter1 .filterTtl p:first-of-type::before {
		content: 'filtres';
		display: inline-block;}
	.filterCategories[data-name="types de projets"] {
		display: block;}
	.filterName {
		grid-template-columns: auto auto auto auto;}
	.galleryBl {
		grid-template-columns: repeat(2, 1fr);}
	[class^="projet"] {
		grid-column: span 1;}
	.projetSeparation {
		grid-column: span 2;}
	.removeAllFilterActive {
		display: block;}
}

@media screen and (max-width: 750px) {
	.content {
		margin: calc(1.5 * var(--menuHeight)) 0;}
	.menuBtn:nth-of-type(3) a {
		border-bottom: solid var(--colorTxt) 0px;}
	.menuBtn:nth-of-type(3) .arrow2::after {
  		transform: translateY(-50%) scaleX(1);}
	
	.filter1 .filterName {
		max-height: calc(100vh - 1 * var(--menuHeight));}
	[class^="projet"] {
		grid-column: span 2;}
	.projetSeparation {
		margin-top: var(--marginBold);
		padding-top: var(--marginBold);}
}

@media screen and (max-width: 700px) {
	.filterName {
		display: flex;}
	.filterLeft, .filterRight {
		padding-top: var(--marginBold);}
	.filterLeft {
		width: 50%;}
	.filterRight {
		width: calc(50% - var(--padding));}
	.filterCategories, .filterYear {
		padding-top: 0;}
	.subcategory * {
		hyphens: auto;
		word-break: break-word; 
		overflow-wrap: break-word;}
	.subcategory {
		max-width: 100%;
		min-width: 100%;}
}

@media screen and (max-width: 340px) {
	.removeAllFilterActive {
		display: none;}
}

@media screen and (max-width: 300px) {
	.filter1 .filterTtl p:first-of-type::before {
		content: 'fil...';}
}


/* --------------------------------------------------------------------------------------------------------------- REPONSIVE MOBILE */
@media (hover: none) {
	.hiddenTtl {
		color: red !important;}
	
	.filterTtl:hover .arrow1 {
		transform: rotate(0deg);}
	
	.ttlProjet a::after {
		background-color: transparent;}
}