@charset "UTF-8";

@font-face {
    font-family: 'sangbleu_versaillesregular';
    src: url("fonts/sangbleuversailles-regular-webfont.woff2") format('woff2'),
         url('fonts/sangbleuversailles-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sangbleu_versaillesRgIt';
    src: url('fonts/sangbleuversailles-regularitalic-webfont.woff2') format('woff2'),
         url('fonts/sangbleuversailles-regularitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SuisseIntlMono-Regular';
    src: url("fonts/SuisseIntlMono-Regular.woff") format('woff2'),
         url("fonts/SuisseIntlMono-Regular.woff2") format('woff');
    font-weight: normal;
    font-style: normal;
}



/*GENERAL -----------------------------------------------------------------------------------------------------------------------------------------------------------*/
body {margin:0px; padding:0px; font-size: 14px;font-family: 'SuisseIntlMono-Regular'; color: black;overflow:hidden; }
p {padding: 0px; margin: 0px; font-size: 14px; font-family:'SuisseIntlMono-Regular'; }
h1 {font-size: 60px; font-weight: normal;}

footer {position: absolute; bottom :0px; left: 0px;	width: 92vw; }
header {position: absolute; top:0px; left: 0px;	width: 92vw;}

.thought {font-family:'sangbleu_versaillesRgIt';font-size: 22px; font-weight: normal;}

/*infos-container*/
.infos-container {position: relative; top:8vh; z-index: -200; overflow: hidden; height:15vh; 	width: 92vw; }
.infos-container .fact-space {display: flex !important;flex-direction: column;flex-wrap: wrap;height: 100%;}
.infos-container .fact-space .gallery-item {width: 100%;box-sizing: border-box;}

/*ONBOARDING----------------------------------------------------------------------------------------------------------------------------------------------------*/
.onBoarding {height: 100vh;}


/*FILTRES -----------------------------------------------------------------------------------------------------------------------------------------------------------*/
.filter-container {position: absolute; right: 0px;top: 0px;padding-right: 3em;padding-left: 3em; width: 15vw;max-height: 100vh; overflow-y: auto; display:none;}

/*categories*/
.filter-group {margin-bottom: 10px;padding: 0px;}
.btn {background-color: white; color: black; border: 1px black solid; border-radius: 0px; display: flex; justify-content: space-between;	width: 100%; padding: 0px 5px; margin-bottom: 10px;}
.btn:hover {background-color: black; color: white;  }

/*sous-categories*/
.filter-options {display: none;}
.filter-btn {border: none;margin-bottom: 5px ;padding: 0px; padding-right: 15px; list-style-type: none; text-align: end; }
.filter-btn:hover {border: none; margin-bottom: 5px ;padding: 0px; padding-right: 15px;background-color: black; color:white; list-style-type: none;text-align: end;}
.selected-filter {background-color: black !important;color: white !important;}

/* menu burger */
.burger-icon {display: block;position:fixed;top:6vh; right: 1em; font-size: 3em;z-index: 1001;cursor: pointer;}

.mobile-filter-overlay {display: none;position: fixed;top: 0;right: 0;width: 100vw;height: 100vh;background: rgba(255, 255, 255, 0.75); z-index: 1000;overflow-y: auto;padding: 2em;}


.close-overlay {position: absolute;top: 5vh;right: 1em;font-size: 3em;cursor: pointer;}
.first-filter-burger {margin-top: 11vh;}

.toggle-btn {
  position: relative;
  
  padding-right: 1.5em;
}


.toggle-btn.has-active-filter::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.5em;             
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  background-color: #000;
  border-radius: 50%;
}




/*GALLERY -----------------------------------------------------------------------------------------------------------------------------------------------------------*/
.gallery {position: relative; overflow: hidden;height: 70vh;width: 100vw;top:10vh;}
.random-position {position: absolute;}
.gallery-item img {opacity: 0.9;}



/*EFFETS -----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*temporary img*/
.temporary-img {opacity: 0;}
.temporary-img-fade-in {animation: temporaryImgFadeIn 2s forwards;}
.temporary-img-fade-out {animation: temporaryImgFadeOut 2s forwards;}

@keyframes temporaryImgFadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes temporaryImgFadeOut {
	from {opacity: 1;}
	to {opacity: 0;}
}

/*blurry text animation*/
.blurry-text-anim {opacity: 0;}
.blurry-text-fade-in { animation: blurryTextFadeIn 2s forwards;}
.blurry-text-fade-out {animation: blurryTextFadeOut 2s forwards;}

@keyframes blurryTextFadeIn  {
	from {opacity: 0;text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1);filter: blur(15px);}
	to {opacity: 1;text-shadow: 0 0 0px rgba(0, 0, 0, 0.2), 0 0 0px rgba(0, 0, 0, 0.2);filter: blur(0);}
}

@keyframes blurryTextFadeOut {
	from {opacity: 1; text-shadow: 0 0 0px rgba(0, 0, 0, 0.2), 0 0 0px rgba(0, 0, 0, 0.2); filter: blur(0);}
	to {opacity: 0; text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1);filter: blur(15px);}
}

/*collage*/

.collage {position: absolute;overflow: hidden;}
.piece {position: absolute;opacity: 0.9;background-repeat: no-repeat;background-size: 100% 100%;transition: all 0.8s ease;pointer-events: auto;}

/*pixel*/
.pixel {display: block;max-width: 100%;height: auto;}
canvas {opacity: 0.9;}







/*scramble texte*/
.scramble p {opacity: 0;transition: opacity 0.3s ease-in;}
.scramble p.visible {opacity: 1;}

/*blurry images*/
.blurry-image  {filter: blur(5px);}






/*	MEDIA QUERIES -----------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Small sm */
@media (min-width: 576px) {
	footer {width: 94vw;}
	header {width: 94vw;}
	.infos-container {width: 94vw;}
}

/*Medium md */
@media (min-width: 768px) {
	.thought {font-size: 25px;}
}

/* Large  lg */
@media (min-width: 992px) {
	.thought {font-size: 28px;}
	
	.filter-container {width: 22vw;}
	.gallery {width: 78vw;}
	.infos-container {width: 78vw;}
	.infos-container .fact-space .gallery-item {width: calc(50% - 0.5rem);   }
	footer {width: 73vw;}
	header {width: 73vw;}
	
	.burger-icon {display: none;}
	.mobile-filter-overlay {display: none;}
	.filter-container {display: block; }
}

/*  X-Large xl */
@media (min-width: 1200px) { 
	.thought {font-size: 30px;}
	
	.filter-container {width: 18vw;}
	.gallery {width: 82vw;}
	.infos-container {width:82vw;}
	footer {width: 77vw;}
	header {width: 77vw;}
}
	

/* XX-Large xxl */
@media (min-width: 1400px) {
	.thought {font-size: 35px;}
	
	.filter-container {width: 15vw;}
	.gallery {width: 85vw;}
	.infos-container {width: 85vw;}
	footer {width: 80vw;}
	header {width: 80vw;}
	
}



 /* --- MASQUAGE SANS display:none (pour préserver les dimensions / fragments) --- */
.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* --- Overlay de départ --- */
.start-overlay {
	position: absolute;
	inset: 0;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: none; /* ne bloque pas l'ouverture des filtres */
	margin-bottom:150px; 
}