/*
Auteur : Loïc Guistel
Date : Mars 2025
*/










/*============================================================================*/
/*=====  SETUP ===============================================================*/
/*============================================================================*/



/*-----------------------------------------------*/
/*----- VARIABLES -------------------------------*/
/*-----------------------------------------------*/
:root{
	/* Couleurs de fonds */
	--color-background:#FBFAF8;
	--color-panel:#FFFFFF;
	--color-dark:#443135;
	--color-light:#FBFAF8;

	/* Couleurs */
	--color-action:#EDAA00;
	--color-headline:#85BBC5;
	--color-border:#CCCCCC;

	/* Dimensions */
	--navbar-height:30px;			/* Barre de navigation pour l'administration du site */
	--fixedbar-height:60px;		/* Menu du site */
	--phonebar-height:50px;		/* Menu du site pour téléphone */
	--field-height:40px;
	--border-radius:6px;
}


/*-----------------------------------------------*/
/*----- FONTS -----------------------------------*/
/*-----------------------------------------------*/
@font-face {
	font-family: "DK Lemon Yellow Sun";
	src:url("/App/Picolab/Assets/Fonts/DK Lemon Yellow Sun.otf");
}
@font-face {
	font-family: "Nunito";
	src:url("/App/Picolab/Assets/Fonts/Nunito-Regular.ttf");
}
@font-face {
	font-family: "Nunito";
	src:url("/App/Picolab/Assets/Fonts/Nunito-Bold.ttf");
	font-weight: bold;
}
@font-face {
	font-family: "Nunito";
	src:url("/App/Picolab/Assets/Fonts/Nunito-Italic.ttf");
	font-style: italic;
}







/*============================================================================*/
/*=====  TEXTS ===============================================================*/
/*============================================================================*/





/*============================================================================*/
/*=====  LAYOUTS =============================================================*/
/*============================================================================*/






































/*============================================================================*/
/*=====  HTML ELEMENTS =======================================================*/
/*============================================================================*/
html{
	font-size:18px;
	font-family: "Nunito";
}

/*-----------------------------------------------*/
/*----- TITRES ----------------------------------*/
/*-----------------------------------------------*/
h1{font-size: 2.6em;text-transform: uppercase;line-height: 1.1em;}
h2{font-size: 1.4em;text-transform: uppercase;}
h3{font-size: 1.2em;text-transform: uppercase;}
h4{font-size: 1.0em;text-transform: uppercase;}


/*-----------------------------------------------*/
/*----- LIENS -----------------------------------*/
/*-----------------------------------------------*/
a{text-decoration:underline;color:inherit;}
a:hover{color:var(--color-action);}

/*-----------------------------------------------*/
/*----- TEXTES ----------------------------------*/
/*-----------------------------------------------*/
q{font-style:italic;font-weight:lighter;}
b{font-weight: bold;}
em{font-style:italic;}
strong{}
small{font-size: 0.9em;}
big{font-size: 1.1em;}
code{}

/*-----------------------------------------------*/
/*----- CUSTOMS ---------------------------------*/
/*-----------------------------------------------*/
.error{
	font-size: 1.0em;
	font-style: italic;
	color:red;
}

/*-----------------------------------------------*/
/*----- LISTS -----------------------------------*/
/*-----------------------------------------------*/
ul{list-style-position:inside;}




































/*============================================================================*/
/*=====  SITE ================================================================*/
/*============================================================================*/
#site{
  display:flex;
  flex-direction:column;
  align-items: stretch;

	min-height:100vh;

	background-color: var(--color-background);
	color:var(--color-dark);
}



/*-----------------------------------------------*/
/*----- SITE-SECTION ----------------------------*/
/*-----------------------------------------------*/
.site-section{
	position:relative;
	z-index:10;

	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap:40px;
	flex:1;

	padding:60px 0;
	/*border:1px solid red;*/
}




/*-----------------------------------------------*/
/*----- PAGE-CONTAINER --------------------------*/
/*-----------------------------------------------*/
.site-container,
.page-container{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap:40px;

	width:100%;
}
.page-container{
	max-width:1200px;
	padding:0 20px;
}


/*-----------------------------------------------*/
/*----- SITE-HEADER -----------------------------*/
/*-----------------------------------------------*/
.site-header h1{
	font-family:"DK Lemon Yellow Sun";
	margin-bottom: 10px;
}
.site-header .subtitle{
	font-size:1.0em;
	color:var(--color-action);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
}


.site-header,
.site-footer,
.site-content{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;

	/*border:1px solid red;*/
}

.site-content{
	gap:20px;
}




/*-----------------------------------------------*/
/*----- HERO ------------------------------------*/
/*-----------------------------------------------*/
#hero{
	justify-content: center;
	min-height:calc(100vh - 90px);
}

#hero .logo{
	max-width:550px;
	width:100%;
	margin: 10px;
}

@media screen and (max-width: 800px) {
	#hero {min-height:calc(100vh - var(--phonebar-height));}
}

#hero .background{
	position:absolute;
	z-index:0;
	background-repeat: no-repeat;
	background-size:contain;
	top:0;
	max-width:50%;
	width:600px;
	height:100%;
}

#hero .background-left {
  background-image: url('/../App/Picolab/Assets/background-pencils.jpg');
	background-position: top left;
  left:0px;
}
#hero .background-right {
  background-image: url('/../App/Picolab/Assets/background-cisors.jpg');
	background-position: top right;
  right:0px;
}

/*-----------------------------------------------*/
/*----- CONTACT ---------------------------------*/
/*-----------------------------------------------*/
#contact .icon{font-size:50px; width:50px;}

/*-----------------------------------------------*/
/*----- SITE-FOOTER -----------------------------*/
/*-----------------------------------------------*/
#site-footer{
	background-color: black;
	color:var(--color-light);
	font-size: 0.8em;
	padding:5px 20px;

	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}




























/*============================================================================*/
/*=====  FILTRES =============================================================*/
/*============================================================================*/
.filtres{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: row;
	gap:10px;
}
.filtre{
	position: relative;
	top:0;
	padding:5px 10px;
	font-size: 0.9em;
	border-radius: var(--border-radius);
	border:1px solid var(--color-dark);
	transition: color 0.1s, border 0.1s, top 0.1s;
}
.filtre:not(.all.active):hover{
	cursor:pointer;
	top:-2px;
	border:1px solid var(--color-action);
	color:var(--color-action);
}
.filtre.active{
	border:1px solid var(--color-action);
	color:var(--color-action);
}
















/*============================================================================*/
/*=====  GALERIE =============================================================*/
/*============================================================================*/
.gallery{
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
	grid-auto-flow:dense;
	width:100%;
	padding:0 20px;
}
@media screen and (max-width: 800px) {.gallery{grid-template-columns: auto;}}

.gallery .size-1x1{grid-row: span 1;grid-column: span 1;}
.gallery .size-1x2{grid-row: span 1;grid-column: span 2;}
.gallery .size-1x3{grid-row: span 1;grid-column: span 3;}

.gallery .size-2x1{grid-row: span 2;grid-column: span 1;}
.gallery .size-2x2{grid-row: span 2;grid-column: span 2;}
.gallery .size-2x3{grid-row: span 2;grid-column: span 3;}

.gallery .size-3x1{grid-row: span 3;grid-column: span 1;}
.gallery .size-3x2{grid-row: span 3;grid-column: span 2;}
.gallery .size-3x3{grid-row: span 3;grid-column: span 3;}
















/*============================================================================*/
/*=====  CAROUSSEL ===========================================================*/
/*============================================================================*/

/* CSS du carrousel */
.slider {
    position: relative;
    width: 100%;
    margin: auto;
		overflow: hidden;
}

.slider-wrapper{
  position: relative;
  z-index: 1;
	width: 100%;
}

.slides{
	position:relative;
	top:0;
	left:0px;
	width:100%;

  display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;

	cursor:grab;
  touch-action: pan-y;
}

.slides.shifting {transition: left 0.2s ease-out;}
.slides.dragging {cursor: grabbing;}


/*-----------------------------------------------*/
/*----- SLIDE -----------------------------------*/
/*-----------------------------------------------*/

.slide-container{
	padding:20px 10px;
	width:100vw;
	max-width:500px;
}


/*-----------------------------------------------*/
/*----- CONTROLS --------------------------------*/
/*-----------------------------------------------*/
.slider .control{
	width:45px;
	height:45px;

	position: absolute;
  top: 50%;
	color:var(--color-dark);
  background: var(--color-light);
  border-radius: 50px;
  margin-top: -20px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.7);
  z-index: 2;
	transition: scale 0.2s;
}
.control:hover{
	scale: 1.1;
}
.slider-prev {left: 20px;}
.slider-next {right: 20px;}




.slider-dots {
  display:flex;
	flex-direction: row;
	justify-content: center;
	gap:5px;
	margin:0 10px;
}
.slider-dots span {
  width: 16px;
  height: 16px;
  border-radius: 10px;
  background-color: var(--color-action);
  cursor: pointer;
  opacity: 0.25;
	transition: opacity 0.2s;
}

.slider-dots span.active {
  opacity: .75;
}










/*============================================================================*/
/*=====  CARD PROJECT ========================================================*/
/*============================================================================*/
.card-project{
	position: relative;
	overflow: hidden;
	aspect-ratio:1/1;

	border-radius: 10px;
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
	width:100%;
	padding:20px;
}

.card-project .content{
	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content:space-between;

	width:100%;
	height:100%;
}


/*---- IMAGE ---------------------------------------*/
.card-project .image{
	position: absolute;
	top:0;left:0;
	width:100%;
	height:100%;
	z-index:-1;
}

/*---- CONTENT -------------------------------------*/
.card-project .button-link{
	user-select: none;
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
	max-width:100%;
}

.card-project .title{
	white-space: nowrap;
  overflow: hidden;
	text-overflow: ellipsis;
}



/*---- CATEGORIES ----------------------------------*/
.card-project .categories{
	position: relative;
	z-index:2;

	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-self: stretch;
	gap:10px;
}


.card-project .category{
	padding:4px 12px;

	background-color: rgba(0,0,0,0.75);
	border-radius: 6px;
	color:var(--color-light);
	font-size: 0.8em;
}















/*============================================================================*/
/*=====  SERVICES ============================================================*/
/*============================================================================*/
.services{
	display:flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	gap:20px;
}

.service{
	flex:1;
	min-width: 260px;
	max-width: 400px;
	background-color: var(--color-panel);
	box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.2);
	border-radius:20px;
	overflow: hidden;
	position:relative;
	scale:1;
	transition: scale 0.3s;
}
.service:hover{scale:1.02;}

.service .image{
	width:100%;
	aspect-ratio:1/1;
}
.service .content{
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap:20px;
	padding:20px;
	background-color: inherit;
}














































































/*============================================================================*/
/*=====  PROJECT =============================================================*/
/*============================================================================*/
#project .page-container{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: 	"viewer content"
												"gallery content";
	grid-gap:20px;
	align-items: flex-start;
}

@media screen and (max-width: 800px) {
	#project .page-container{
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
		grid-template-areas: "content"
		                     "viewer"
												 "gallery";
	}
}

#project-viewer{grid-area:viewer;}
#project-gallery{grid-area:gallery;}
#project-content{grid-area:content;}

#project .image{
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	border-radius:10px;
	width:100%;
	overflow: hidden;
	aspect-ratio:1/1;
}


/*-----------------------------------------------*/
/*----- GALLERY ---------------------------------*/
/*-----------------------------------------------*/
#project-gallery{

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-gap:10px;
	width:100%;
}
#project-gallery .button{
	position:relative;
	top:0;
	transition:top 0.2s;
}
#project-gallery .button:hover{
	top:-5px;
}

/*-----------------------------------------------*/
/*----- CONTENT ---------------------------------*/
/*-----------------------------------------------*/

#project-content .header{
	padding-bottom:10px;
	border-bottom:1px solid var(--color-dark);
}







































































































































/*============================================================================*/
/*=====  NAVBAR ==============================================================*/
/*============================================================================*/
#navbar{
	position:relative;
	z-index:20;

	height:var(--navbar-height);
	width:100%;

	background-color: #000000;
	color:var(--color-light);
	font-size: 0.7em;

	display:flex;
	flex-direction:row;
	align-items: stretch;
}

#navbar .header{
	padding:0 20px;
	display:flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid var(--color-border);
}
#navbar .content{
	flex:1;
	display:flex;
	align-items: stretch;
	justify-content: flex-start;
}
#navbar .footer{
	display:flex;
	align-items: stretch;
	border-left: 1px solid var(--color-border);
}
#navbar .menu-link{padding:0 10px;}
#navbar .menu-title{}
#navbar .button{
	text-transform: uppercase;
	padding:0 10px;
}
#navbar .logo{height:16px;}

@media screen and (max-width: 800px) {#navbar{display:none}}



/*============================================================================*/
/*=====  FIXEDBAR ============================================================*/
/*============================================================================*/
#fixedbar{
	position:relative;
	z-index:20;

	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;

	width:100%;
  background-color:var(--color-panel);
  color:var(--color-dark);
  height:var(--fixedbar-height);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
	font-size: 1.2em;
}

#fixedbar .menu{
	max-width:1200px;
	width:100%;
	margin:0 auto;
	justify-content: center;
	align-items: stretch;
}
#fixedbar .menu-link{padding:0 10px;}
#fixedbar .menu-title{text-transform: uppercase;}

@media screen and (max-width: 800px) {#fixedbar{display:none}}


/*============================================================================*/
/*=====  PHONEBAR ============================================================*/
/*============================================================================*/
#phonebar{
	position:relative;
	display: none;
	flex-direction: column;
	width:100%;

  background-color:var(--color-panel);
  color:var(--color-dark);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
}
@media screen and (max-width: 800px) {#phonebar{display:flex}}

#phonebar .header{
	position:relative;
	z-index:21;
	height:var(--phonebar-height);
	border-bottom:1px solid var(--color-border);
}
#phonebar .logo{height:20px;}

#phonebar .content{
	position:absolute;
	top:-100vh;
	left:0;
	z-index:20;
	width:100%;
	height:100vh;
	padding-top:var(--phonebar-height);

	display:flex;
	flex-direction: column;
	align-items: stretch;
	background-color: var(--color-background);

	transition:top 0.2s;
}
#phonebar .menu{flex-direction: column;}
#phonebar .menu-item{border-bottom:1px solid var(--color-border);}
#phonebar .menu-link{padding:10px 20px;}
#phonebar .menu-title{text-transform: uppercase;font-size: 1.6em;}
#phonebar.toggled .content{top:0;}