/*----------------------------------------------------------------*/
/*	LIGHT MODE	*/
/*----------------------------------------------------------------*/

.light{
	--kc-color-0: hsl(0,0%,100%)!important;
  --kc-color-12: hsl(0,0%,96%)!important;
  --kc-color-16: hsl(0,0%,92%)!important;
  --kc-color-20: hsl(0,0%,88%)!important;
  --kc-color-50: hsl(0,0%,50%)!important;
  --kc-color-80: hsl(0,0%,20%)!important;
  --kc-color-100: hsl(0,0%,0%)!important;
  --kc-color-projetcontainer: hsl(0,0%,92%)!important;
  --kc-color-projet-back: hsl(0,0%,0%)!important;
  --kc-color-projet-texte: hsl(0,0%,100%)!important;
  --kc-color-headerbackground: rgba(255,255,255,1)!important;
}

/*----------------------------------------------------------------*/
/*	DEFAULT MODE	*/
/*----------------------------------------------------------------*/

:root{
  --kc-color-0: hsl(0,0%,0%);
  --kc-color-12: hsl(0,0%,12%);
  --kc-color-16: hsl(0,0%,16%);
  --kc-color-20: hsl(0,0%,20%);
  --kc-color-24: hsl(0,0%,24%);
  --kc-color-28: hsl(0,0%,28%);
  --kc-color-32: hsl(0,0%,32%);
  --kc-color-50: hsl(0,0%,50%);
  --kc-color-68: hsl(0,0%,68%);
  --kc-color-80: hsl(0,0%,80%);
  --kc-color-100: hsl(0,0%,100%);
  --kc-color-projetcontainer: hsl(0,0%,16%);
  --kc-color-projet-back: hsl(0,0%,0%);
  --kc-color-projet-texte: hsl(0,0%,100%);
  --kc-color-headerbackground: rgba(0,0,0,0.7);
  --kc-color-brightborder-12: rgba(255,255,255,0.12);
  --kc-color-brightborder-24: rgba(255,255,255,0.24);
  --kc-color-brightborder-50: rgba(255,255,255,0.50);
  --kc-color-brightborder-80: rgba(255,255,255,0.80);
  --kc-color-halfopacity: rgba(255,255,255,0.5);
}

/*----------------------------------------------------------------*/
/*	GENERAL	*/
/*----------------------------------------------------------------*/

@font-face {
  font-family: 'Satoshi';
  src: url('./Satoshi-Variable.woff2') format('truetype');
       font-weight: 350;   
       font-display: swap;
       font-style: normal;
       font-feature-settings: "ss02" 1;
}

html{
	font-size: 16px;
	font-family: 'Satoshi', sans;
  background-color: var(--kc-color-0);
	color: var(--kc-color-100);
}

body{
	margin: 0;
}

h1, h2, h3, h4, p{
	font-weight: normal;
	margin: 0;
}

a{
	text-decoration: none;
	outline: none;
	color: unset;
}

i{
	font-style: italic;
}

*:focus {
	outline: none;
}

.locked-scroll{
    overflow:hidden!important;
}

.fullwidth{
	width: 100vw;
}

.fullwidth-padding{
	padding-left: 3rem;
	padding-right: 3rem;
}

.center{
	max-width: 640px;
	margin: auto;
}

.center-cols{
	display: flex;
	flex-direction: row;
	gap: 0;
}

.center-col{
	width: 50%;
}

/*----------------------------------------------------------------*/
/*	HEADER	*/
/*----------------------------------------------------------------*/

header{
	position: fixed;
	top: 0;
	z-index: 9;
	width: 100vw;
	border-bottom: 1px solid var(--kc-color-brightborder-12);
	background-color: var(--kc-color-headerbackground);
	backdrop-filter: blur(8rem);
	-webkit-backdrop-filter: blur(8rem);
}

nav{
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
	-webkit-user-select: none; /* Chrome/Safari */ 
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	-o-user-select: none;
}

#header-button, #header-button-close{
	height: 1.25rem;
  width: 1.25rem;
  background-color: var(--kc-color-100);
  border-radius: 2rem;
  display: block;
  transition: transform 0.125s;
  cursor: pointer;
}

#header-button:hover, #header-button-close:hover{
	transform: scale(1.125);
  transition: transform 0.125s;
}

#header-menu{
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--kc-color-0);
	/*backdrop-filter: blur(8rem);
	-webkit-backdrop-filter: blur(8rem);*/
	height: 100vh;
	display: none;
}

.header-on{
	display: unset!important;
}

#header-menu-header{
	position: absolute;
	top: 0;
	border-bottom: 1px solid var(--kc-color-16);
}

#header-menu-header-container{
	height: 4rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;	
}

#header-menu-links{
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-top: 7rem;
}

.header-menu-link{
	font-size: 3rem;
	line-height: 4.5rem;
	padding: 0 0 0 0;
	transition: all 200ms ease-in-out;
}

.header-menu-link:hover{
	padding: 0 0 0 0.5rem;
}

#display-mode{
	position: absolute;
	padding: 1.5rem 2rem;
	top: unset;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 0;
  border-top: 1px solid var(--kc-color-brightborder-12);
	cursor: pointer;
}

/*----------------------------------------------------------------*/
/*	HOMEPAGE	*/
/*----------------------------------------------------------------*/

#introduction-container{
	padding-top: 10rem;
	padding-bottom: 6rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

#introduction h1{
	font-size: 1rem;
	line-height: 1rem;
}

#introduction h2{
	font-size: 4rem;
	line-height: 4.5rem
}

/*button*/
.button-group{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	height: 6rem;
	width: calc(100vw - 6rem);
	padding: 0 3rem;
	/*border-top: 1px solid var(--kc-color-brightborder-12);*/
	border-bottom: 1px solid var(--kc-color-brightborder-12);
	overflow: scroll;
	scrollbar-width: none;
	-webkit-scrollbar-width: none;
	/*position: sticky;
  top: 4rem;*/
  background-color: var(--kc-color-headerbackground);
  backdrop-filter: blur(8rem);
  -webkit-backdrop-filter: blur(8rem);
  z-index: 2;
}

.button-group::-webkit-scrollbar{
  display: none;
}

.button {
	font-family: 'Satoshi', sans-serif;
  display: block;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1rem;
  background-color: unset;
  color: var(--kc-color-brightborder-50);
  border: unset;
  padding: 0;
  flex-shrink: 0;
  transition: all 50ms ease-in-out;
  background-color: var(--kc-color-12);
  padding: 0.75rem;
  border-radius: 0.75rem;
}

.button:hover{
	color: var(--kc-color-brightborder-80);
	background-color: var(--kc-color-16);
	transition: all 50ms ease-in-out;
}

.button.is-checked {
  color: var(--kc-color-100);
  background-color: var(--kc-color-20);
}

.button:active {}

/*button-group*/

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

/*isotope*/	
.grid {
	position: initial !important;
  height: initial !important;
}

/*clear fix*/
.grid:after {
  content: '';
  display: block;
  clear: both;
  display: none;
}

#projets-container{
	display: flex;
  gap: 1px;
  flex-wrap: wrap;
  background-color: var(--kc-color-brightborder-12);
  padding-bottom: 1px;
}

.projets-item{
	position: unset!important;
}

.projet-item-link{
	position: relative;
  aspect-ratio: 3/2;
  width: calc(50vw - 0.5px);
  background-color: var(--kc-color-projet-back);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.projet-item-img{
	width: 100%;
  height: auto;
  display: block;
}

.projet-item-icon-video{
	position: absolute;
  width: 4rem !important;
}

.projets-item span{
	font-size: 0.875rem;
  line-height: 1rem;
  margin: 1.5rem 3rem;
  color: var(--kc-color-projet-texte);
}

.projet-item-nom{
	position: absolute;
  bottom: 0;
  left: 0;
}

.projet-item-type{
	position: absolute;
  bottom: 0;
  right: 0;
}

#callout{
	padding: 6rem 0;
	margin-bottom: 4rem;
}

#callout-left p{
	font-size: 	1.5rem;
	line-height: 2rem;
	padding-right: 3rem;
}

#callout-right{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.callout-button{
	font-size: 1rem;
	line-height: 1rem;
	padding: 1.5rem;
	background-color: var(--kc-color-12);
	border-radius: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.callout-button:hover{
	background-color: var(--kc-color-16);
}

.callout-button span{
	transition: all 100ms ease-in-out;
}

.callout-button:hover span:last-of-type{
	transform: translateX(4px);
	transition: all 100ms ease-in-out;
}

/*----------------------------------------------------------------*/
/*	FOOTER	*/
/*----------------------------------------------------------------*/

footer{
	position: fixed;
  bottom: 0;
  background: var(--kc-color-headerbackground);
  backdrop-filter: blur(8rem);
  -webkit-backdrop-filter: blur(8rem);
}

#footer-container{
	height: 4rem;
	border-top: 1px solid var(--kc-color-brightborder-12);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	overflow: scroll;
	scrollbar-width: none;
	-webkit-scrollbar-width: none;
	flex-wrap: nowrap;
	gap: 1.5rem;
}

#footer-container::-webkit-scrollbar{
  display: none;
}

#footer-left, #footer-right{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.5rem;
	flex-shrink: 0;
}

#footer-left > *, #footer-right > *{
	flex-shrink: 0;
}

.footer-link{
	font-size: 0.875rem;
	line-height: 1rem;
	color: var(--kc-color-halfopacity);
	transition: all 50ms ease-in-out;
}

footer a:hover{
	color: var(--kc-color-100);
	transition: all 50ms ease-in-out;
}

#footer-message{
	background-color: var(--kc-color-brightborder-12);
	color: var(--kc-color-100);
	font-size: 0.875rem;
	line-height: 2rem;
	padding: 0.25rem 1rem 0.25rem  0.5rem;
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	border-radius: 1rem;
	align-items: center;
	transition: all 100ms ease-in-out;
}

#footer-message:hover{
	gap: 0.75rem;
	background-color: var(--kc-color-brightborder-24);
	transition: all 100ms ease-in-out;
}

#footer-message-image{
	height: 1.75rem;
	width: 1.75rem;
	background-color: var(--kc-color-50);
	border-radius: 2rem;
	border: 1px solid var(--kc-color-20);
}

#footer-message-image img{
	height: 1.75rem;
	width: 1.75rem;
}

/*----------------------------------------------------------------*/
/*	INSTIT	*/
/*----------------------------------------------------------------*/

.instit-page section:last-of-type{
	margin-bottom: 7rem;
}

.instit-intro{
	padding-top: 8rem;
	padding-bottom: 4rem;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.instit-intro h1{
	font-size: 3rem;
	line-height: 3rem;
}

.instit-intro p{
	font-size: 2rem;
	line-height: 2.5rem;
}

#apropos-arts{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 4rem;
}

.apropos-arts-item{
	width: 25vw;
  aspect-ratio: 1/1;
  background-color: var(--kc-color-12);
  position: relative;
}

#item-1{background: var(--kc-color-12);}
#item-2{background: var(--kc-color-16);}
#item-3{background: var(--kc-color-20);}
#item-4{background: var(--kc-color-24);}

.apropos-arts-item h2{
	padding: 3rem 3rem 0 3rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	font-size: 2rem;
	line-height: 2rem;
}

.apropos-arts-item-elements{
	padding: 0 3rem 3rem 3rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.apropos-arts-item-element{
	font-size: 0.875rem;
	line-height: 2rem;
	padding: 0 1rem;
	background-color: var(--kc-color-brightborder-12);
	border-radius: 0.5rem;
	color: var(--kc-color-80);
}

.center-col-left-element{
	padding-right: 3rem;
}

.instit-p{
	font-size: 1.5rem;
	line-height: 2rem;
}

.instit-element-sticky{
	position: sticky;
	top: 7rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*----------------------------------------------------------------*/
/*	PHILOSOPHIE — ACCORDION	*/
/*----------------------------------------------------------------*/

#philosophie-accordion{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.philosophie-accordion-item-contenu {
	padding: 0 1.5rem 2rem 1.5em;
	background-color: var(--kc-color-12);
	color: var(--kc-color-68);
	border-radius: 0 0 1rem 1rem;
	display: flex;
  flex-direction: column;
  gap: 1rem;
}

summary::-webkit-details-marker{
	display: none!important;
}

.philosophie-accordion-item-titre::-webkit-.philosophie-accordion-item-marker {
	display: none;
}

.philosophie-accordion-item-titre {
	list-style: none;
	padding: 1.5rem;
	cursor: pointer;
	position: relative;
	border-radius: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  background-color: var(--kc-color-12);
}

.philosophie-accordion-item-titre:before {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1.5rem;
	content: "+";
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	justify-content: flex-end;
	align-items: center;
	flex-shrink: 0;
}

.philosophie-accordion-item[open] .philosophie-accordion-item-titre {
	background-color: var(--kc-color-12);
	border-radius: 1rem 1rem 0 0;
}

.philosophie-accordion-item[open] .philosophie-accordion-item-titre:before {
	content: "-";
}

.philosophie-accordion-item-titre:hover {
	background-color: var(--kc-color-16);
}

.philosophie-accordion-projets-items{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.philosophie-accordion-projets-item{
	font-size: 0.875rem;
	line-height: 2rem;
	padding: 0 1rem;
	background-color: var(--kc-color-16);
	border-radius: 0.5rem;
}

.philosophie-accordion-text{
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--kc-color-68);
}

.contact-image{
	aspect-ratio: 1/1;
	background-color: var(--kc-color-50);
	border-radius: 100%	;
	max-width: 100%;
}

#contact-page .center-cols{
	align-items:center;
}

.instit-encart-container{
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.instit-encart-item{
	padding: 1.5rem;
	background-color: var(--kc-color-12);
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.instit-encart-item h2{
	font-size: 1.25rem;
	line-height: 1.5rem;
}

.instit-encart-item p{
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--kc-color-68);
}


.button-blue{
	background-color: hsl(212,60%,10%);
}

.button-brown{
	background-color: hsl(40,70%,8%);
}

.button-green-01, .button-green-02, .button-green-03{
	background-color: hsl(40,16%,10%);
	color: hsl(40,20%,80%);
}

.button-green-01:hover,.button-green-02:hover,.button-green-03:hover{
	background-color: hsl(40,16%,12%);
}

#instit-links{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

#instit-links p{
	margin-bottom: 0.5rem;
}

/*----------------------------------------------------------------*/
/*	PROJETS	*/
/*----------------------------------------------------------------*/

.projet-page{}

.projet-container{
	padding-top: 4rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.projet-content{
	padding:3rem 0 0 3rem;
	width: calc(25% - 3rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: calc(100vh - 11rem);
}

.projet-infos{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	position: sticky;
	top: 7rem;
}

.projet-infos h1{
	font-size: 3rem;
	line-height: 3rem;
}

.projet-infos p{
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--kc-color-68);
}

.projet-arts-container{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.projet-arts-container h2{
	font-size: 1.25rem;
	line-height: 1.25rem;
}

.projet-arts-items{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.projet-arts-item{
	font-size: 0.875rem;
  line-height: 2rem;
  padding: 0 1rem;
  background-color: var(--kc-color-brightborder-12);
  border-radius: 0.5rem;
  color: var(--kc-color-80);
}

.projet-images{
	width: 50%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1px;
	align-content: flex-start;
	margin-bottom: 4rem;
}

.projet-images video{
	width: 100%;
  height: auto;
}

.projet-image-big{
	width: 100%;
	height: auto;
}

.projet-image-small{
	width: calc(50% - 0.5px);
	height: auto
}

.projet-button-back{
	position: sticky;
	bottom: 7rem;
	margin-bottom: 7rem;
}

.projet-passepartout-horizontal img{
	width: 50%;
  height: auto;
}

.projet-passepartout-vertical img{
  height: calc(100% - 10rem);
  width: auto;
}

.projet-gris {
  filter: grayscale(1);
}

.projet-gris:hover {
  filter: grayscale(0);
}







/*----------------------------------------------------------------*/
/*	RESPONSIVE : TABLETTE	*/
/*----------------------------------------------------------------*/

@media screen and (min-width: 801px) and (max-width: 1320px){

.header-menu-link:hover{
	padding: 0 0 0 0;
}

.apropos-arts-item{
	width: 50vw;
  aspect-ratio: 3/2;
}

}


/*----------------------------------------------------------------*/
/*	RESPONSIVE : MOBILE	*/
/*----------------------------------------------------------------*/

@media screen and (max-width: 800px){

#display-mode{
	top: unset;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 0;
  background: none;
  border-top: 1px solid var(--kc-color-brightborder-12);
}

.fullwidth-padding{
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.center{
	margin: unset;
}

.header-menu-link:hover{
	padding: 0 0 0 0;
}

#introduction-container{
	text-align: left;
	padding-top: 7rem;
  padding-bottom: 6rem;
}

#introduction h2 {
  font-size: 2rem;
  line-height: 2.5rem;
}

.button:hover{
	background-color: var(--kc-color-12);
	color:var(--kc-color-brightborder-50);
}

.button.is-checked {
  color: var(--kc-color-100)!important;
  background-color: var(--kc-color-20)!important;
}

.button-group{
	justify-content: flex-start;
	padding: 0 1.5rem;
	width: calc(100vw - 3rem);
}

#projets-container{
	flex-direction: column;
}

.projet-item-link{
	width: 100vw;
}

.projets-item span {
  font-size: 0.75rem;
  line-height: 0.75rem;
  margin: 1.5rem;
}

#callout {
  padding: 3rem 0;
  margin-bottom: 4rem;
}

#callout-left p{
	padding-right: 0;
}

.center-cols{
	flex-direction: column;
	gap: 3rem;
}

.center-col{
	padding: 0 1.5rem;
	width: calc(100vw - 3rem);
}

.center-col-left-element{
	padding-right: unset;
}

.instit-page section:last-of-type{
	margin-bottom: 7rem;
}

.instit-intro{
	padding-bottom: 3rem;
	gap: 2rem;
}

.instit-intro h1{
  padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.instit-intro p{
	font-size: 1.5rem;
  line-height: 2rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.instit-p{
	font-size: 1rem;
  line-height: 1.5rem;
  color: var(--kc-color-68);
}

#apropos-arts{
	flex-wrap: nowrap;
	overflow: scroll;
	margin-bottom: 3rem;
}

.apropos-arts-item{
	width: calc(100vw - 3rem);
  aspect-ratio: 1/1;
  flex-shrink: 0;
}

.apropos-arts-item h2{
	padding: 1.5rem 1.5rem 0 1.5rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	font-size: 2rem;
	line-height: 2rem;
}

.apropos-arts-item-elements{
	padding: 0 1.5rem 1.5rem 1.5rem;
}

#contact-page .center-cols{
	align-items: unset;
}

#contact-page .center-col-left-element{
	text-align: center;
}

#contact-page .center-col-left-element img{
	max-width: 75%;
}

.projet-container{
	flex-direction: column;
	gap: 3rem;
}

.projet-content{
	padding:3rem 1.5rem 0 1.5rem;
	width: calc(100% - 3rem);
	min-height: unset;
}

.projet-infos{
	position: unset;
}

.projet-button-back{
	display: none;
}

.projet-images{
	width: 100%;
}

.projet-passepartout-vertical img {
  height: calc(100% - 6rem);
  width: auto;
}

}