@font-face {
  font-family: sk-modernist-bold;
  src: url(fonts/Sk-Modernist-Bold.otf);
}

@font-face {
  font-family: sk-modernist-regular;
  src: url(fonts/Sk-Modernist-Regular.otf);
}

@font-face {
  font-family: Heal The Web A Regular;
  src: url(fonts/HealTheWebA-Regular.otf);
}


.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: url('images/cursor.png') no-repeat center/contain;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 9999;
}

html{
  cursor: none;
}

/*-------------------------------  Body ------------------------------- */
body {
  background-color: #F0EDEE;
  background-image:
    linear-gradient(to right, #0a090c5f 1px, transparent 1px),
    linear-gradient(to bottom, #0a090c5f 1px, transparent 1px);
  background-size: 40px 40px; /* taille de la grille */
  width: 90vw;
  margin: auto;
  margin-top: 25px;
  height: 50vh;
  font-family: sk-modernist-regular;
  font-size: 18px;
  color: #0A090C;
}

h1 {
  font-family: Heal The Web A Regular;
  font-size: 25px;
  color: #F0EDEE;
  font-weight: 100;
}

h2 {
  font-family: sk-modernist-bold;
  font-size: 30px;
  color:#0A090C;
  margin-top: 0px;
  margin-bottom: 0px;
}

h3{
  margin-top: 0px;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

/*-------------------------------  Barre Menu ------------------------------- */
.barre {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px;
}

.barre_gauche {
  background-color: #F0EDEE;
  border: 4px solid #0A090C;
  box-shadow: 5px 5px 0px #0A090C;
  padding: 15px 30px;
  display: flex;
  justify-content: center;

  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 1s;
  transition: all ease 0.5s;
}


.barre_gauche img {
  scale: 1.2;
}

.barre_gauche img:hover {
  transform: scale(1.1);
}

.barre_gauche img:active{
  transform: scale(0.8);
  opacity: 0.8;
}

.barre_droite {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  width: 100%;
  background-color: #F0EDEE;
  border: 4px solid #0A090C;
  box-shadow: 5px 5px 0px #0A090C;
  padding: 15px;
}

.barre img {
  height: 30px;
}

.barre p {
  font-family: sk-modernist-bold;
  color:#0A090C;
  font-size: 28px;
  margin: 0px;
}

/*-------------------------------  Window ------------------------------- */
.window {
  background-color: #F0EDEE;
  border: 4px solid #0A090C;
  box-shadow: 8px 8px 0px #0A090C;
}

.window_contenu {
  padding: 20px;
}

/* Window Barre */
.window_barre_nodragable {
  background-color: #0A090C;
  border-bottom: 4px solid #0A090C;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  height: 23px;
}

.window-buttons {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.circle {
  width: 20px;
  height: 20px;
}

.circle_gauche {
  background-color: #F0EDEE;
}

.circle_droite {
  background-color: #F0EDEE;
}

/*------------------------------- Window Box -------------------------------*/
.window_box {
  display: flex;
  justify-content:space-between;
  margin-top: 40px;
  height: 75vh;
}

/*-------------------------------  Window Gauche ------------------------------- */
.window_gauche{
  width: 15%;
}

/*-------------------------------  Window Droite ------------------------------- */
.window_droite{
  width: 65%;
}

/*-------------------------------  Window Dossiers ------------------------------- */
.window_dossiers{
  width: 10%;
}


/*-------------------------------  Music ------------------------------- */
.music {
  margin-bottom: 40px;
  width: 100%;
  height: auto;
}

.window_contenu_music{
  padding: 20px;
  
}

.music_cover{
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 40px;
}

.music_cover img{
  width: 100px;
}

.timeline {
  background-color: #d3d3d3; /* fond gris clair */
  height: 5px;
  margin-bottom: 15px;
  width: 100%;
  position: relative;
}

.timeline .progress {
  background-color: black; /* barre noire qui grandit */
  height: 100%;
  width: 0%;
  position: absolute;
  top: 0;
  left: 0;
}

.controlers{
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.controlers img{
  width: auto;
  height: 25px;
}

.controlers img:hover{
  transform: scale(1.2);
}

.controlers img:active{
  transform: scale(0.8);
  opacity: 0.8;
}




/*-------------------------------  Notification ------------------------------- */
.notification {
  width: 100%;
}

.notification_active {
  transition: transform 0.2s;
  animation: slideIn 0.8s ease-out forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%) scale(1);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}
.notification.slid-in {
  animation: none; /* empêche la relance */
}

/* Animation vibration */
@keyframes vibrate {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-10px); }
  30%  { transform: translateX(10px); }
  45%  { transform: translateX(-10px); }
  60%  { transform: translateX(10px); }
  75%  { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

.notification.vibrating {
  animation: vibrate 0.4s ease;
}


/*-------------------------------  Principale ------------------------------- */
.principal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.principal .window_contenu {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  flex: 1;
  align-items: stretch;
}

.image {
  background-image: url("images/pp.png");
  background-position: center;
  background-size: cover;
  border: 3px solid #0A090C;
  width: 100%;
  height: auto;
}

.introcution{
   width: 100%;
  margin: 20px;
}

h4{
  font-size: 80px;
  margin: 0px;
  margin-bottom: 20px;
  text-align: center ;
}

.p_home{
  text-align: center;
}

.introcution_2 {
   width: 100%;
  margin: 20px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* <--- le truc magique */
  height: 100%;  /* optionnel mais souvent utile */
}

.icones {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.icone_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%; /* identique à l’ancienne largeur des vidéos */
}

.hoverVideo {
  width: 100%; /* au lieu de width: 20% */
  height: auto;
  display: block;
}

.mobile-image {
  display: none;
}

.icone_item p {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
}


/*------------------------------- All Works ------------------------------- */
.projets {
  display: grid;
  gap: 16px;
  /* max 4 colonnes, qui prennent toujours toute la largeur */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  max-width: 100%;

  flex: 1;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
}

@media (min-width: 0px) {
  .projets {
    grid-template-columns: repeat(1, 1fr); /* mobile */
  }
}

@media (min-width: 500px) {
  .projets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 800px) {
  .projets {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .projets {
    grid-template-columns: repeat(4, 1fr); /* jamais plus que 4 */
  }
}


.projet {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.projet_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; /* ✅ garde l’image dans son cadre */
  border: 3px solid #0A090C;
  cursor: none;

}

.photo_work {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* ✅ animation fluide */
}

.photo_work:hover {
  transform: scale(1.1); /* ✅ agrandit l’image sans bouger le cadre */
}

.titre_projet {
  margin-top: 8px;
  font-family: sk-modernist-bold;
  font-size: 16px;
  text-align: center;
  color: #F0EDEE;
  border: 3px solid #0A090C;
  background-color: #0A090C;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;

}

/* Empêche le contenu principal de dépasser */
.principal .window_contenu:has(.projets) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Scroll Bar */
/* width */
::-webkit-scrollbar {
  width: 20px;
}


 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #0A090C; 
  border: 5px solid #F0EDEE;
    margin-right: 10px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #0A090C; 
}

/*------------------------------- Projet  ------------------------------- */
.projet_explications{
  width: 40%;
   position: relative;
  height: 100%; /* important */
}

.buttons{
  position: absolute;
  bottom: 65px;
  width: 88%;
  display: flex;
  justify-content: space-between;
}

.projet_explications h2{
  margin-bottom: 0px;
}

.projet_explications h3{
  margin-top: 0px;
}

.button{
  color: #0A090C;
  font-family: sk-modernist-bold;
  text-decoration: none;
  border: 3px solid #0A090C;
  padding-left : 10px;
  padding-right : 10px;
  padding-top : 2px;
  padding-bottom : 5px;

  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 1s;
  transition: all ease 0.5s;

  cursor: none;

}

.button:hover {
    color: #F0EDEE;
    background: #0A090C;
    box-shadow: inset 160px 0 0 0 #0A090C;
}

.projet_scroll {
  width: 60%;
  overflow-y: auto;         
  padding: 20px;
  box-sizing: border-box;
}

.photo_projet {
  width: 100%;
  object-fit: cover; 
  margin-bottom: 20px; 
}

.photo_fin{
  margin-bottom: 0px;
}


/* Empêche le contenu principal de dépasser */
.principal .window_contenu:has(.projet_scroll) {
  overflow: hidden;
  padding: 0;
}

/* Scroll Bar */
/* width */
::-webkit-scrollbar {
  width: 20px;
}


 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #0A090C; 
  border: 5px solid #F0EDEE;
  margin-right: 10px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {

  background: #0A090C; 
}

.projet_explications{
  padding: 20px;
}

/*-------------------------------  About me ------------------------------- */
ul {
  list-style: none;   /* enlève les puces */
  padding: 0;         /* enlève le retrait par défaut */
  padding-top: 20px;
  margin: 0;          /* optionnel : enlève aussi la marge */
}

li{
  margin-bottom: 20px;
}

li a{
  color: #0A090C;
  text-decoration: none;
  margin-left: 15px;
  cursor: none;
}

li a:hover{
  font-family: sk-modernist-bold;
}


.contact{
  height: auto;
}

.contact_contenu{
  margin: 20px;
}

.icone{
  height: 20px;
}



/*-------------------------------  Dossiers ------------------------------- */
.window_dossiers {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: auto;

  margin-top: 10px;


}

.open-window{
  cursor: none;
}

.dossier p {
  font-family: sk-modernist-bold;
  font-size: 20px;
  color:#0A090C; 
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
}

.dossier_contenu{
  text-align: center;

}

.window_dossiers img{
  width: 70%;
  justify-content: center;

  cursor: none;

}

/*-------------------------------  DESKTOP ------------------------------- */
@media (min-width: 769px) {
.principal_projets{
display: none;
}

 .boutons_menu{
    display: none;
  }
}
/*-------------------------------  MOBIL ------------------------------- */
@media (max-width: 768px) {
  .barre{
    display: none;
  }

  .window_gauche, .window_dossiers, .custom-cursor{
    display: none;
  }

  #audio{
    display: none;
  }

  .window_droite{
    width: 95%;
    height: auto;
    padding-bottom: 50px;
  }

  .principal .window_contenu{
    display: block;
  }

 .window{
    height: auto;
  }

  h1{
    font-size: 18px;
  }

  h2{
    font-size: 25px;
  }

  h3{
    font-size: 22px;
  }

  /* HOME */

  .introcution_2{
    align-items: center;
    margin: 0px;
  }

  h4{
    font-size: 50px;
  }

  p{
    font-size: 16px;
  }

  .p_home br{
    display: none;
  }

  .introcution{
    margin: 0px;
  }

 .icones{
    margin-top: 50px;
    display: block;
 }

 .icone_item{
  margin: auto;
  width: 100%;
 }

 .desktop-video {
    display: none !important;
  }
  .mobile-image {
    display: block;
    width: 100%;
    height: auto;
  }



  .window_box{
    display: block;
    justify-content: center;
  }

.boutons_menu{
  display: flex;
  justify-content: space-between;

  
  margin-bottom: 20px;

  width: 100%;
}

.button{
  background-color: #F0EDEE;
  font-size: 16px;
}

 
.button:active{
  background-color: #0A090C;
  color: #F0EDEE;
}

.window_contenu_projet{
  display: block;
}

.projet_scroll{
  width: 100%;
}

.projet_explications{
  width: 80%;
  display: block;
}

.buttons{
  position: unset;
  width: 110%;
  display: flex;
  justify-content: space-between;

  padding-top: 20px;
}

#top {
  scroll-margin-top: 50px; /* ajuste selon la hauteur que tu veux */
}

.contact{
  margin-top: 20px;
  box-shadow: none;
}




}