/****************** RESET **************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126'"
   License: none (public domain)
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,
video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}ol,ul{list-style:none}blockquote,
q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}*{padding:0;margin:0;box-sizing:border-box}


html {
    scroll-behavior: smooth;
}



@import url('https://fonts.googleapis.com/css2?family=Zen+Loop:ital@0;1&display=swap');



@font-face {
  font-family: 'Roboto Condensed';
  src: url('../css/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* plage variable font */
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../css/Roboto-VariableFont_wdth\,wght.ttf') format('truetype');
  font-weight: 100 900; /* plage variable font */
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../css/RobotoCondensed-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

div {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

div::-webkit-scrollbar {
  display: none;
}

body, h1, h2, h3, h4, h5, h6, p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




body{
    font-family: 'Roboto Condensed', sans-serif;
    font-style: normal;
    display: flex;
    letter-spacing: 0.3px;
    flex-direction: row;
    justify-content: space-between;
    gap:4vh;
    height: 98vh;
    scroll-padding-top: calc(var(--header-height));
    width: 100%;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
  
}



/********** GENERAL ******/

a{
  text-decoration: none;
  color: inherit;
}

/********** MAIN STRUCTURE ******/

#left-panel{
  display: flex;
  flex-direction: column;
  flex-basis: 40%;
  min-width: 24%;
  padding: 3vh 0vh 0vh 3vh;
  height: 98vh;
}

.left-panel-projet{
  display: flex;
  flex-direction: column;
  flex-basis: 40%;
  min-width: 30%;
  padding: 3vh 0vh 0vh 3vh;
  height: 98vh;
  justify-content: space-between;

}

#site-title{
  font-size: 7vh;
  font-weight: 100;
  opacity: 0.8;
  font-family: "Zen Loop", cursive;
  font-weight: 400;
  font-style: normal;
  line-height: 0.8em;
}

#socials{

  display: flex;
  flex-direction: row;
  font-family: "Zen Loop", cursive;
  font-weight: 400;
  font-style: normal;
  line-height: 0.8em;
  gap:2.5vh;
  margin-bottom: 4vh;
  font-size: 0.2em ;
/*  margin-top: auto;*/

}

#socials a{
  font-size: 1.5em;
  opacity: 0.8;
}

#socials a:hover{
  opacity: 1;
}




h2{
  font-size: 0.65em;
}

#projects-menu{
  display: flex;
  flex-direction: column;
  gap:4vh;
  font-size: 2vh;
  overflow: scroll;
  max-height: 100%;
  
 
}

.theme{
  display: flex;
  flex-direction: column;
  gap:2vh
}

#projects-menu ul{
  line-height: 1.5em;
}

h3{
  font-size: 1.5em;
  font-weight: 700;
   font-family: "Zen Loop", cursive;

}

h4{
  font-weight: 300;
  font-size: 0.75em;
  padding-left: 1em;
  transition: padding-left 0.3s ease;
  opacity: 0.8;
  
}
#projects-menu li {
  margin-top: 0;
  transition: margin-top 0.4s ease;
}

#projects-menu.centered li {
  margin-top: 40vh; /* ou 30%, selon ton rendu */
}


h4.focused {
  font-weight: 600;
    font-size: 0.8em;
  opacity: 1;
  padding-left: 0;
  margin-bottom: 2vh;
  transition: all 0.3s ease;
}

.project-text{
display: flex;
  flex-direction: column;
  gap: 2vh;
  font-size: 0.8em;
}


.project-text p{
  line-height: 1.5em;
  font-weight: 100;
}

h4.active {
  padding-left: 3vh;
  opacity: 1;
}

h4:hover{
  opacity: 1;
  cursor: pointer;
}

.hidden-project {
  display: flex;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}



.hidden-project.visible {
  display: flex;
  pointer-events: auto;
  transform: translateY(0);
}

#projects-menu.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;

}

#back-button {
  background: none;
  border: none;
  font-size: 1em;
  cursor: pointer;
  opacity: 0.6;
  margin-bottom: 2vh;
  transition: opacity 0.3s ease;
  align-self: flex-start;
    font-family: "Zen Loop", cursive;
  font-weight: 400;
}

#back-button:hover {
  opacity: 1;
}

.hidden {
  display: none;
}









.client{
  font-style: italic;
  font-weight: 50;
}




/*********** GRILLE **************/
/*********************************/

#main-content{
   overflow: scroll;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 14.5vh;
  gap: 1rem;
  padding: 10px;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}






/* Applique une transition douce à chaque image */
.grid-layout img {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Classe qu’on applique après chargement */
.grid-layout img.fade-in {
  opacity: 1;
  transform: scale(1);
}

#grid-container{
  width: 100%;
  height: 100%;
  background-color: blue;
}





.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-title-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 0.9em;
  padding: 0.5em;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}




.image-wrapper:hover .image-title-hover {
  opacity: 1;
}


.item {
  position: relative;
}

.legend {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3); 
  color: white;
  padding: 8px;
  font-size: 0.7rem;
  line-height: 1em;
width: 100%;
  opacity: 0;
  transform: translateY(100%); 
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Affichage au hover */
.item:hover .legend {
  opacity: 1;
  transform: translateY(0);
}


.jBox-image-label {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.85em !important;
  line-height: 24px;
  transition: opacity .36s;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  font-weight: 300;
}




/**********************************************/
/********************* ABOUT *****************/
/**********************************************/


#about-page{
  gap:0vh
}



.about-panel{
  min-width: 20% !important;
  z-index: 3;

}


.about-section{
  display: flex;
  max-width: 72%;
  align-items: center;
  overflow: visible !important;
}

.portrait{
transform: scale(1.2);
  opacity: 0.5;
}



.portrait img {
object-fit: contain;
  max-height: 100%;
  max-width: 100%;
}

.about-content{
max-width: 60%;
  padding: 6%;
  text-wrap: balance;
  z-index: 5;
  font-weight: 300;
}





/**********************************************/
/********************* MOBILE *****************/
/**********************************************/


@media (max-width: 768px) {

  body {
    flex-direction: column;
    gap:0vh;
    height: 100dvh;
  }



@media (max-width: 768px) {
  #site-title {
    font-size: 4vh;
    line-height: 0.8em;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1dvh;
    transition: opacity 0.2s ease-out;
  }
}

#left-panel{
padding: 2dvh 0dvh 0dvh 2dvh;
flex-basis: 0%;
height: 0px;
z-index: 2;
}



  #projects-menu{
    display: none;
  }

#left-panel {
    padding: 0;
    background-color: rgba(255, 255, 255, 0);
  }



#socials{
  margin-bottom: 0px;
}



.grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 10vh;
  gap: 8px;
  padding: 0vh;
  transform: translateY(-2%);
  height: 110dvh;
  margin: 0;
}

#site-title {
  height: 12dvh;
  font-size: 5vh;
  transition: opacity 0.2s ease-out;
}


.left-panel-projet {
  display: flex;
  flex-direction: row-reverse;
  flex-basis: 10%;
  justify-content: space-between;
  height: fit-content;
  padding: 1dvh;
}




 .left-panel-projet #site-title {
font-size: 4vh;
    transition: opacity 0.2s ease-out;
    align-content: flex-end;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 50%;
    opacity: 0.4;
  }



#socials {
  display: flex;
flex-wrap: wrap;
  flex-direction: row;
  font-family: "Zen Loop", cursive;
  font-weight: 400;
  font-style: normal;
  gap: 1em;
  margin-bottom: 4vh;
  font-size: 0.3em;

}

 .left-panel-projet #socials {

  align-items: flex-end;
  text-align: left;
  justify-content: flex-end;

 }


.legende-projet.visible {
  opacity: 1;
  transform: translateY(0);
  width: 50%;
}

h4.focused {
  font-weight: 600;
  font-size: 0.8em;
  opacity: 1;
  padding-left: 0;
 margin-bottom: 0.3em;
  transition: all 0.3s ease;
  text-wrap: balance;
}


.project-text {
  text-wrap: balance;
  line-height: 1em;
}
.project-text {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  font-size: 0.8em;
}

.return-btn{
  display: none;
}

  .left-panel-projet   li > a[href="/about.html"] {
    display: none;
  }





  .about-section {
  max-width: 100%;
  flex-direction: column;
  overflow: hidden !important;
}


.about-content{
max-width: 86%;
overflow: scroll;
padding: 0%;
 background-color: rgba(255,255,255,0.8);
transform: translateY(-30%);
}

}