/* ----- import typo ----- */
@font-face {
  font-family : "Space Mono";
  src         : url("../font/SpaceMono-Italic.ttf");
}

@font-face {
  font-family : "Space Bold";
  src         : url("../font/SpaceMono-Bold.ttf");
}

@font-face {
  font-family : "Space Bold Ita";
  src         : url("../font/SpaceMono-BoldItalic.ttf");
}

@font-face {
  font-family : "Space Regu";
  src         : url("../font/SpaceMono-Regular.ttf");
}

/* ----- curseur ----- */
* {
  cursor : none !important;
}

.custom-cursor {
  position       : fixed;
  top            : 0;
  left           : 0;
  z-index        : 9999;

  height         : 20px;
  width          : 20px;

  border         : 2px solid white;
  border-radius  : 50%;

  transition     : transform 0.15s ease-out, background 0.3s ease;
  transform      : translate(-50%, -50%);

  pointer-events : none;
  mix-blend-mode: difference; /* l'effet visuel néga */
}

.custom-cursor.hover {
  background   : white;
  border-color : transparent;

  transform    : translate(-50%, -50%) scale(1.8);
}

li, a, button {
  cursor : none !important;
}

body {
  cursor           : none;
  background-color : #151515;
}

/* menu */
ol, ul {
  padding-left : 1rem;
}

.menu {
  margin      : 1rem;
  font-family : Space Mono;
}

.name {
  font-family : Space Regu;
}

.hover {
  padding          : 0 5px;

  background-color : white;
  color            : #000 !important;
}

.menu a {
  color           : #fff;
  text-decoration : none;

  transition      : 1s;
}

.menu a:hover {
  color : rgba(255, 255, 255, 0.7);
}

.menu li {
  margin        : 0 !important;

  border-bottom : 1px solid #fff;
  list-style    : none;
}

.txt {
  font-family : Space Mono;
  font-size   : 15px;
  color       : #fff;
  list-style  : none;
}

/* ----- portfolio ----- */
.portfolio-item {
  display    : none;

  margin     : 0 0;

  transition : all 0.3s ease-in-out;
}

.active-filter {
  display : block !important;
}

.filter-link {
  font-family : Space Mono;
}

.portfolio-item .card-title {
  font-family : Space Mono;
  font-size   : 15px;
  color       : #888;

  /*cursor: url(img/cursor.png), auto;*/
  transition  : 0.3s;
}

.card-title:hover {
  color : #fff;
}

/* ----- Info panel ----- */
#info-panel {
  position   : fixed;
  top        : 0;
  right      : -100%;
  z-index    : 2000;

  height     : 100%;
  width      : 57%;
  padding    : 20px;

  background : #252527;
  box-shadow : -4px 0 15px rgba(0, 0, 0, 0.2);

  transition : right 0.3s ease;
}

#info-panel.open {
  right : 0;
}

#close-info {
  position  : absolute;
  top       : 15px;
  right     : 20px;

  cursor    : pointer;
  font-size : 28px;
  color     : #fff;
}

.info-content {
  margin-top : 50px;
}

.info-content h2.info {
  margin      : 0;

  font-family : "Space Mono", monospace;
  font-size   : 30px;
  color       : #fff;
}

.info {
  font-family : Space Mono;
  color       : #fff;
}

.info-text {
  font-family : Space Mono;
  font-size   : 15px;
  color       : #fff;
}

/* ----- Project panel ----- */
#project-panel {
  position   : fixed;
  top        : 0;
  right      : -100%;
  z-index    : 2100;

  overflow-y : auto;
  height     : 100%;
  width      : 65.8%;
  padding    : 40px;

  color      : #fff;
  background: #252527;
  box-shadow : -4px 0 15px rgba(0,0,0,0.2);

  transition : right 0.3s ease;
}

#project-panel.open {
  right : 0;
}

#close-project {
  position  : absolute;
  top       : 15px;
  right     : 20px;

  cursor    : pointer;
  font-size : 28px;
  color     : #fff;
}

.project-title {
  margin-bottom : 15px;

  font-family   : "Space Bold", "Space Mono", monospace;
  font-size     : 24px;
  color         : #fff;
}

.project-description {
  font-family : "Space Mono", monospace;
  font-size   : 16px;
  color       : #fff;
}

.project-roles {
  display    : flex;

  padding-left: 0; /* supprime le retrait de ul */
  margin     : 0;

  list-style : none;

  flex-wrap  : wrap;
  gap        : 10px;
}

.project-roles li {
  padding       : 5px 12px;

  font-family   : "Space Mono", monospace;
  font-size     : 14px;
  color         : #fff;
  border        : 1px solid #fff;
  border-radius : 50px;
  white-space   : nowrap;
}

.project-image {
  width         : 100%;
  border-radius : 8px;

  aspect-ratio  : 1 / 1;
  object-fit    : cover;
}

/* Card title avec Space Mono toujours */
.portfolio-item .card-title {
  font-family : "Space Mono", monospace;
  font-size   : 15px;
  color       : #888;
  transition  : 0.3s;
}

.card-title:hover {
  color : #fff;
}

/* Preview image au survol */
#hover-preview {
  position       : absolute;
  display        : none;
  z-index        : 3000;

  height         : 200px;
  width          : 200px;

  object-fit     : cover;
  pointer-events : none;
}
ul.services {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

ul.services li {
  padding: 5px 12px;
  font-family: "Space Mono", monospace;
  font-size: 14px;
  color: #fff !important;
  border: 1px solid #fff!important;
  border-radius: 50px;
  white-space: nowrap;
}

.services-image {  
  width         : 400px;
}



/* Footer fixe en bas 
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #151515;
  font-family: Space Mono;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
}*/