@charset "UTF-8";

@font-face {
  font-family: "Whyte";
  src: url("./../fonts/ABCWhyteVariableEdu-Regular.woff") format("woff");
  src: url("./../fonts/ABCWhyteVariableEdu-Regular.woff2") format("woff2");
}

/* ==========================================================================
   VARIABLES
   ========================================================================== */
:root {
  /* Couleurs */
  --clr-text: #ffffff; /* Couleur de texte principale (blanc) */
  --clr-background: #000000; /* Couleur de fond principale (noir) */
  --clr-link: #1427f9; /* Couleur des liens et accents */
  --linear-gradient: #1427f97e, #01074b00;

  /* Transitions */
  --transition-default: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --paddinghorizontal: 1.5rem;
  --column-gap: 0.5rem;
  --border-width: 1.5px;
  --header-height: 3rem;
  --margin-txt: 1rem 0 2rem 0;

  /* Z-index */
  --z-header: 100000;
  --z-about: 99999;
  --z-modal: 99998;
  --z-overlay: 99997;

  /* Scale Effect */
  --scale-min: 0.2;
  --scale-max: 1;
  --scale-ratio: 0.7;
  --scale-speed: 1200ms;
  --scale-easing: ease-out;
  --center-offset: var(--header-height);

  /* Scroll Timing */
  --scroll-speed: 1200ms;
  --scroll-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Masquer les barres de défilement sur tous les éléments scrollables */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

/* Pour Firefox */
* {
  scrollbar-width: none;
}

/* Pour IE et Edge */
* {
  -ms-overflow-style: none;
}

body {
  margin: 0;
  padding: 0 var(--paddinghorizontal);
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-color: var(--clr-background);
  font-family: "Whyte", sans-serif;
  color: var(--clr-text);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.1rem;
  letter-spacing: -0.019rem;
  word-spacing: -0.005em;
  transition: var(--transition-default);
}

body.zoom-active {
  overflow: hidden;
}

.hidden {
  display: none;
}

.visible {
  display: block;
}

/* ==========================================================================
  FONT
   ========================================================================== */

a:link,
a:visited {
  background-color: transparent;
  color: var(--clr-text);
  text-decoration: none;
}

a:hover,
a:active {
  background-color: transparent;
  color: var(--clr-link);
  cursor: pointer;
  text-decoration: none;
}

@media (max-width: 768px) {
  body {
    font-size: 1.1rem;
    line-height: 1.3rem;
  }
}

/* Effet hover sur les éléments de tri */
.project-row.header > div[data-sort]:hover {
  color: var(--clr-link);
}

/* ==========================================================================
  PROJECT SECTIONS
   ========================================================================== */

/* Modifier le conteneur principal pour permettre de voir les projets adjacents */
.project-index:has(.project-container.open) {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--header-height);
  padding: var(--header-height) 0; /* Ajouter du padding uniquement en haut et en bas */
}

.project-index:has(.project-container.open)::-webkit-scrollbar {
  display: none;
}

.indent {
  display: inline-block;
  height: 2rem; /* Ajustez selon vos besoins */
}

/* Style pour les containers de projets */
.project-container {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: scale(var(--scale-min));
  transition: transform var(--scale-speed) var(--scale-easing),
    scroll-snap-align var(--scroll-timeline-duration)
      var(--scroll-timeline-easing);
}

/* Ajuster la hauteur et les marges des projets ouverts */
.project-container.open {
  position: relative;
  grid-column: 1 / -1;
  height: 60vh; /* Réduire davantage la hauteur */
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.project-container.open.in-view {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  pointer-events: all;
}

/* Ajuster le carousel pour la nouvelle hauteur */
.project-container.open .carousel {
  height: 50vh; /* Réduire la hauteur du carousel */
  max-height: 50vh;
  width: auto;
  order: -1;
}

/* Ajuster l'échelle et l'opacité des projets non centrés */
.project-container.open:not(.in-view) {
  transform: scale(0.7); /* Réduire davantage l'échelle */
  opacity: 0.8; /* Réduire davantage l'opacité */
  filter: blur(3px); /* Augmenter légèrement le flou */
  pointer-events: none; /* Désactiver les interactions */
}

.project-container .carousel {
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-medium);
  pointer-events: none;
}

.project-container.open .carousel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  height: 80vh;
  width: auto;
  max-height: 80vh;
  order: -1;
}

/* Animation pour l'index */

.project-container.open .project-row:not(.header) {
  transform: translateY(-10px);
  opacity: 0;
  transition-delay: 0.1s;
}

/* ==========================================================================
CAROUSELS
   ========================================================================== */

.slide {
  width: 100%;
  height: 100%;
  will-change: transform;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all var(--transition-medium);
  padding: 0;
  position: relative;
  transform-origin: center calc(50% - var(--center-offset));
}

.slide.active {
  opacity: 1;
  transform: scale(1);
}

/* Styles spécifiques pour les vidéos */
.slide video {
  max-width: 90%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.slide img,
.slide video {
  max-height: 100%; /* Réduire la hauteur maximale des médias */
  width: auto;
  object-fit: contain;
  margin: 0;
  padding: 0;
  position: relative;
  transform-origin: center calc(50% - var(--center-offset));
}

/* Orientation paysage sur mobile */
@media (max-height: 480px) and (orientation: landscape) {
  .project-container.open {
    height: auto;
    min-height: 120vh; /* Augmenter pour assurer que tout le contenu est visible en défilement */
    margin-bottom: 2rem;
    padding-top: calc(var(--header-height) + 1rem);
  }

  .project-index:has(.project-container.open) {
    height: auto;
    overflow-y: auto;
  }

  .project-container.open .carousel {
    height: auto;
    min-height: 90vh; /* Presque toute la hauteur de l'écran */
    margin: 0.5rem 0;
  }

  .slide img,
  .slide video {
    max-height: 70vh;
    max-width: 80vw;
    margin: 0 auto;
  }

  /* Ajuster la disposition des informations du projet */
  .project-container.open .project-row {
    padding: 0.25rem 0;
    margin-top: 0.5rem;
  }
}

.slide img:hover,
.slide video:hover {
  cursor: -webkit-image-set(url("../images/assets/zoom.svg") 1x) 12 12, zoom-in;
  cursor: image-set(url("../images/assets/zoom.svg") 1x) 12 12, zoom-in;
}

.project-container.sorting-out {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.project-container.sorting-in {
  opacity: 1;
  transform: scale(1);
}

.carousel {
  position: relative;
  width: 100%;
  height: 0;
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-medium);
}

.carousel-counter {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  padding: 0.2rem 0.5rem;
  margin: 0;
  visibility: hidden;
  color: var(--clr-background);
  background-color: var(--clr-text);
  border-radius: 40px;
  z-index: 5;
}
.slides-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
}

.slides-container:active {
  cursor: grabbing;
}

.carousel-button {
  position: absolute;
  top: 0;
  height: 100%;
  width: 30%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  color: transparent;
  transition: background var(--transition-fast) ease;
}

/* Animation du point qui pulse */
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.5);
  }
}

/* Point blanc pulsant uniquement sur le bouton next du premier carousel */
.carousel.first-carousel .carousel-button.next::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 30px;
  height: 30px;
  background-color: var(--clr-link);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  animation: pulse 5s ease-in-out infinite;
  pointer-events: none;
  box-shadow: 0 0 20px 0px var(--clr-background);
}

.carousel-button.next.clicked::after,
.carousel:not(.first-carousel) .carousel-button.next::after {
  display: none; /* Masquer le point sur les autres carousels ou quand déjà cliqué */
}

.carousel-button.next:hover {
  cursor: -webkit-image-set(url("../images/assets/next.svg") 1x) 12 12, e-resize;
  cursor: image-set(url("../images/assets/next.svg") 1x) 12 12, e-resize;
}

.carousel-button.prev:hover {
  cursor: -webkit-image-set(url("../images/assets/prev.svg") 1x) 12 12, w-resize;
  cursor: image-set(url("../images/assets/prev.svg") 1x) 12 12, w-resize;
}

.carousel-button.prev {
  left: 0;
}

.carousel-button.next {
  right: 0;
}

/* ==========================================================================
  INDEX SECTION
   ========================================================================== */

.project-title,
.project-category {
  /* padding-right: 50vw; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  transform: translateZ(0);
  will-change: transform;
}

.project-date {
  padding-right: var(--paddinghorizontal);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  transform: translateZ(0);
  will-change: transform;
}

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

/* Retirer l'effet de hover général */
.project-row.header > div {
  cursor: pointer;
}

/* Garder uniquement la couleur pour l'état actif */
.project-row.header .project-title.active,
.project-row.header .project-category.active,
.project-row.header .project-date.active {
  color: var(--clr-link);
}

/* Maintenir les autres effets de hover sur les lignes de projet */
.project-row:not(.header):hover {
  color: var(--clr-link);
  cursor: pointer;
}

.project-index:has(.project-container.open) .project-row.header {
  padding: calc(0.75rem * 2) 0;
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-medium),
    visibility var(--transition-medium);
}

/* Animation pour le tri */

.project-index.sorting .project-row:not(.header) {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--transition-medium),
    transform var(--transition-medium);
  pointer-events: none;
}

/* ==========================================================================
 PROJECT ZOOM
   ========================================================================== */

.project-zoom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--clr-background);
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  transition: opacity var(--transition-medium),
    transform var(--transition-medium);
  z-index: var(--z-modal);
  padding: 3rem 5rem;
  overflow-y: auto;
  --accent-color: var(--clr-link);
}

.project-zoom.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
  overflow-x: hidden;
}

.project-zoom-header {
  display: grid;
  font-size: 1.1875rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 3rem;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  gap: var(--column-gap);
  transform: scale(var(--scale-min));
  transition: transform 500ms var(--scale-easing);
  transform-origin: center top;
  will-change: transform;
}

.project-zoom.active .project-zoom-header {
  transform: scale(var(--scale-max));
}

.project-zoom-header.scrolled {
  transform: scale(var(--scale-min));
}

/* Deuxième ligne : About et Info */
.project-zoom-header .project-zoom-section:nth-child(2) {
  grid-column: 9 / span 4;
  grid-row: 1;
}

.project-zoom-header .project-zoom-section:nth-child(1) {
  grid-column: 2 / span 5;
  grid-row: 1;
}

.project-zoom-content {
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1;
  text-align: left;
  /* text-transform: uppercase; */
}

.project-zoom-section {
  margin-bottom: 2rem;
}
.project-zoom-footer {
  margin-top: 4rem;
}

.project-zoom-footer-separator {
  width: 100%;
  height: 1px;
  background-color: var(--clr-text);
  margin-bottom: 2rem;
}

.project-zoom-suggested-projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

.suggested-project {
  cursor: pointer;
  transition: color var(--transition-medium);
}

.suggested-project:hover {
  color: var(--clr-link);
}

.suggested-project-media {
  width: 100%;
  aspect-ratio: 3/2;
  margin-bottom: 1rem;
  overflow: hidden;
}

.suggested-project-media img,
.suggested-project-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}

.suggested-project:hover .suggested-project-media img,
.suggested-project:hover .suggested-project-media video {
  transform: scale(1.05);
}

.suggested-project-info {
  opacity: 0.5;
  font-size: 0.9em;
  transition: opacity var(--transition-medium);
}

.suggested-project:hover .suggested-project-info {
  opacity: 1;
  color: var(--clr-link);
}

.project-zoom-content,
.project-zoom-info,
.project-zoom-about {
  padding: var(--paddinghorizontal) 0 var(--paddinghorizontal) 0;
  width: 100%;
  padding-right: 0;
}

.project-zoom-info,
.project-zoom-about {
  text-align: left;
}

/* Styles responsifs */
@media (max-width: 1015px) {
  .project-zoom-header {
    grid-template-rows: auto auto auto;
  }

  .project-zoom-header .project-zoom-section:nth-child(1),
  .project-zoom-header .project-zoom-section:nth-child(2),
  .project-zoom-header .project-zoom-section:nth-child(3) {
    grid-column: 1 / span 12;
  }

  .project-zoom-header .project-zoom-section:nth-child(3) {
    grid-row: 1;
  }

  .project-zoom-header .project-zoom-section:nth-child(1) {
    grid-row: 2;
  }

  .project-zoom-header .project-zoom-section:nth-child(2) {
    grid-row: 3;
  }

  .project-zoom-content {
    font-size: 6rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* Optimisation spécifique pour les écrans autour de 1080px */
@media (min-width: 1016px) and (max-width: 1200px) {
  .project-zoom {
    padding: 2rem 3rem; /* Réduire les marges latérales */
  }

  .project-zoom-header {
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem; /* Réduire l'espace entre les colonnes */
    margin-bottom: 2rem; /* Réduire l'espace vertical */
  }

  .project-zoom-header .project-zoom-section:nth-child(1) {
    grid-column: 1 / span 6; /* Ajuster pour prendre plus d'espace */
  }

  .project-zoom-header .project-zoom-section:nth-child(2) {
    grid-column: 8 / span 5; /* Repositionner pour l'équilibre */
  }

  /* Ajuster les marges pour les éléments internes */
  .project-zoom-about,
  .project-zoom-info {
    padding-right: 1rem;
  }

  /* Améliorer la grille d'images */
  .project-zoom-images {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem; /* Réduire l'espace entre les images */
  }

  .project-zoom-images img {
    grid-column: span 2; /* Maintenir deux colonnes par image */
  }

  /* Réduire légèrement le padding pour les sections */
  .project-zoom-section {
    margin-bottom: 1.5rem;
  }

  /* Améliorer la grille info */
  .project-info-grid {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 0.5rem 1rem;
  }
}

@media (max-width: 480px) {
  .project-zoom-content {
    font-size: 3rem;
  }
}

/* Styles pour les sections du header */
.project-zoom-section {
  display: flex;
  flex-direction: column;
  gap: var(--column-gap);
}

/* Ajuster la largeur du contenu Info */
.project-zoom-section:last-child .project-zoom-info {
  width: 90%; /* Prendre la moitié de l'espace */
}

.project-zoom-section:last-child .project-zoom-label-title {
  width: 50%; /* Prendre la moitié de l'espace */
}

.project-zoom-close {
  position: relative;
  top: 0;
  cursor: pointer;
  transform: scale(1);
  transition: transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5rem;
}

.project-zoom-close:hover {
  transform: translateX(-5px);
  color: var(--accent-color);
}

.project-zoom-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--column-gap);
  width: 100%;
  margin: 0 auto;
}

.project-zoom-images img {
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--transition-medium),
    transform var(--transition-medium);
  max-height: 130vh;
  grid-column: span 2; /* Par défaut, les images prennent 2 colonnes */
  object-fit: cover;
}

/* Les vidéos prennent toute la largeur (4 colonnes) */
.project-zoom-images video {
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--transition-medium),
    transform var(--transition-medium);
  object-fit: contain;
  max-height: 80vh;
  grid-column: 1 / -1; /* De la première à la dernière colonne (4 colonnes) */
  max-width: 100%;
  display: block;
}

.project-zoom-images img.loaded,
.project-zoom-images video.loaded {
  opacity: 1;
  transform: scale(1);
}

/* Ajouter un bouton de zoom invisible au centre */
.slide-zoom-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: transparent;
  border: none;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.slide:hover .slide-zoom-button {
  opacity: 1;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.4rem var(--paddinghorizontal);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--clr-background);
  transition: all var(--transition-medium);
  pointer-events: auto;
}

.site-header-left {
  display: flex;
  gap: 2.5vw;
  align-items: center;
}

.site-header-left div {
  transition: opacity var(--transition-medium);
  cursor: pointer;
}

/* Navigation Links */
.projects-link:hover,
.index-link:hover,
.about-link:hover,
.current-project-title:hover {
  color: var(--clr-link);
  cursor: pointer;
  transition: var(--transition-medium);
}

.site-header-center {
  justify-self: start;
  grid-column: 2;
}

.site-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--column-gap);
}

.site-header-left .projects-link,
.site-header-left .index-link,
.site-header-left .about-link {
  pointer-events: auto;
  cursor: pointer;
}

/* ==========================================================================
   PROJECT INDEX
   ========================================================================== */

.project-index {
  display: grid;
  overflow-x: hidden;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--column-gap);
  width: 100%;
  margin: 0 auto;
}

/* Style pour le header de l'index */
.project-row.header {
  grid-column: 1 / -1;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.75rem 0;
}

/* Style pour les éléments du header */
.project-row.header > div {
  cursor: pointer;
  transition: color var(--transition-medium);
}

.project-row.header .project-title,
.project-row.header .project-category,
.project-row.header .project-date {
  width: 50%;
  text-align: left;
}

/* Style pour l'élément de tri actif */
.project-row.header > div[data-sort].active {
  color: var(--clr-link);
}

/* Effet hover sur les éléments de tri */
.project-row.header > div[data-sort]:hover {
  color: var(--clr-link);
}

/* Style pour les séparateurs */
.separator {
  grid-column: 1 / -1;
  border-bottom: var(--border-width) solid var(--clr-text);
  margin-bottom: var(--column-gap);
}

/* Cacher les séparateurs quand les containers sont ouverts */
.project-index:has(.project-container.open) .separator {
  display: none;
}

/* Responsive */
@media (max-width: 1200px) {
  .project-container {
    grid-column: span 4;
  }
}

@media (max-width: 900px) {
  .project-container {
    grid-column: span 5;
  }
}

@media (max-width: 600px) {
  .project-container {
    grid-column: span 12; /* 1 projet par ligne */
  }
}

.project-container.open .project-preview {
  display: none; /* Cache la preview quand ouvert */
}

.project-container.open .project-row {
  display: grid;
  grid-template-columns: 45% 35% 20%;
  padding: 0.5rem 0;
}

/* Style pour la preview avec animation */
.project-preview {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  cursor: pointer;
}

.project-preview img,
.project-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Effet de hover sur l'image et le texte */
.project-container:hover .project-preview img,
.project-container:hover .project-preview video {
  transform: scale(1.05);
}

.project-container:hover .project-row {
  color: var(--clr-link);
}

/* Annuler l'effet de hover quand le container est ouvert */
.project-container.open:hover .project-row {
  color: inherit;
}

/* Style pour les vidéos en preview */
.project-preview video {
  object-fit: cover;
}

.project-container.open .project-row {
  display: grid;
  grid-template-columns: 45% 35% 20%;
  padding: 0.5rem 0;
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */
.about-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--clr-link);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}

.about-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.about-content {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available; /* Pour iOS */
  background-color: var(--clr-link);
  padding: var(--paddinghorizontal);
  padding-top: var(--header-height);
  transform: translateX(100%);
  transition: transform var(--transition-medium);
  z-index: var(--z-about);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Animation en cascade pour les éléments de l'about */
.about-description,
.about-contact,
.about-section,
.about-credits {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-active .about-description {
  transition-delay: 0.2s;
}
.about-active .about-contact {
  transition-delay: 0.3s;
}
.about-active .about-section:nth-child(1) {
  transition-delay: 0.4s;
}
.about-active .about-section:nth-child(2) {
  transition-delay: 0.5s;
}
.about-active .about-section:nth-child(3) {
  transition-delay: 0.6s;
}
.about-active .about-credits {
  transition-delay: 0.7s;
}

.about-active .about-description,
.about-active .about-contact,
.about-active .about-section,
.about-active .about-credits {
  opacity: 1;
  transform: translateY(0);
}

.about-active .about-content {
  transform: translateX(0);
}

/* Container principal pour le contenu */
.about-main-content {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: min-content;
  gap: var(--column-gap);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2rem;
}

.about-left-column {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about-right-column {
  grid-column: 7 / span 6;
}

.about-sections-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Description */
.about-description {
  /* font-size: 1.2rem; */
  line-height: 1.4;
}

/* Contact */
.about-contact {
  margin: 2rem 0;
}

.about-contact a {
  margin-right: 2.5vw;
  color: var(--clr-text);
  text-decoration: none;
}

.about-contact a:hover {
  color: var(--clr-background);
}

.about-contact .contact-text {
  margin-right: 2.5vw;
  color: var(--clr-text);
  display: inline-block;
}

.about-section-title {
  margin-bottom: 1rem;
  border-bottom: var(--border-width) solid var(--clr-text);
  padding-bottom: 6px;
}

.about-section-row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  margin-bottom: 0.5rem;
  align-items: baseline;
}

.about-section-item {
  line-height: 1.4;
}

.about-section-date {
  text-align: right;
}

.about-credits {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--column-gap);
  width: 100%;
}

.about-credits div {
  grid-column: span 6;
}

.about-credits div:last-child {
  text-align: right;
}

.print-cv {
  font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 1024px) {
  :root {
    --paddinghorizontal: 1rem;
  }

  /* Ajuster la grille des projets */
  .project-row {
    grid-template-columns: 40% 35% 25%;
  }

  /* Ajuster la section About pour iPad */
  .about-content {
    padding-bottom: 2rem;
    overflow-y: auto;
  }

  .about-left-column {
    gap: 0rem;
  }

  .about-left-column,
  .about-right-column {
    grid-column: 1 / -1;
  }

  .about-sections-container {
    margin-top: 2rem;
    gap: 0rem;
  }

  .about-section {
    grid-template-columns: 100%;

    margin-bottom: 1.5rem;
  }

  .about-section .about-section-content,
  .about-section .about-section-title,
  .about-section .about-section-date {
    grid-column: 2;
  }

  .about-credits {
    grid-template-columns: 100%;

    margin-top: 2rem;
  }

  .about-credits div {
    grid-column: 1;
    text-align: left;
    margin-bottom: 0.25rem;
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  :root {
    --paddinghorizontal: 0.5rem;
  }

  .project-zoom-header {
    margin: 0.5rem 0;
  }

  .project-zoom-header .project-zoom-section {
    margin: 0.25rem 0;
  }

  .project-row {
    padding: 0.25rem 0;
  }
}

/* Orientation paysage sur mobile */
@media (max-height: 480px) and (orientation: landscape) {
  .project-container.open {
    height: auto;
    min-height: 120vh; /* Augmenter pour assurer que tout le contenu est visible en défilement */
    margin-bottom: 2rem;
    padding-top: calc(var(--header-height) + 1rem);
  }

  .project-index:has(.project-container.open) {
    height: auto;
    overflow-y: auto;
  }

  .project-container.open .carousel {
    height: auto;
    min-height: 90vh; /* Presque toute la hauteur de l'écran */
    margin: 0.5rem 0;
  }

  .slide img,
  .slide video {
    max-height: 70vh;
    max-width: 80vw;
    margin: 0 auto;
  }

  /* Ajuster la disposition des informations du projet */
  .project-container.open .project-row {
    padding: 0.25rem 0;
    margin-top: 0.5rem;
  }
}

/* Style pour les liens de collaboration */
.collab {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-medium);
}

.collab:hover {
  color: var(--clr-link);
}

/* Ajustements pour très petits écrans */
@media (max-width: 480px) {
  .project-zoom-header {
    margin: 0.5rem 0;
  }

  .project-zoom-header .project-zoom-section {
    margin: 0.25rem 0;
  }
}

/* Ajouter un pseudo-élément pour la barre de progression */
.zoom-active .site-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--scroll-width, 0%);
  height: var(--header-height);
  /* height: var(--border-width); */
  background-color: var(--clr-link);
  transition: width 0.1s linear;
}

/* S'assurer que la barre n'apparaît que dans la vue zoom */
.site-header::after {
  width: 0;
}

/* Masquer la barre en mode about */
.about-active .site-header::after {
  display: none;
}

/*----------------------------------Type Specimen----------------------------------*/
.type-specimen-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--column-gap);
  width: 100%;
  padding-bottom: var(--paddinghorizontal);
  margin-bottom: 3rem;
  border-bottom: var(--border-width) solid var(--clr-text);
}

.type-specimen {
  margin: 0;
  padding-top: 2rem;
  /* margin-top: 40px; */
  padding: var(--paddinghorizontal) var(--paddinghorizontal);
  border-top: var(--border-width) solid var(--clr-text);
  text-align: center;
  width: 100%;
  height: 100%;
  display: inline-block;
  align-items: center;
  overflow: hidden;
  cursor: default;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: none;
}

/* Classes pour définir la largeur des blocs */
.type-specimen-block-12 {
  grid-column: span 12;
  display: block;
  width: 100%;
}
.type-specimen-block-8 {
  grid-column: span 8;
  display: block;
  width: 100%;
}
.type-specimen-block-6 {
  grid-column: span 6;
  display: block;
  width: 100%;
}
.type-specimen-block-4 {
  grid-column: span 4;
  display: block;
  width: 100%;
}
.type-specimen-block-3 {
  grid-column: span 3;
  display: block;
  width: 100%;
}
/* Classes de taille de texte avec responsive amélioré */
.text-xxxl {
  font-size: clamp(3rem, 28vw, 394px);
}

.text-xxl {
  font-size: clamp(2.5rem, 15vw, 200px);
}

.text-xl {
  font-size: clamp(2rem, 10vw, 150px);
}

.text-l {
  font-size: clamp(1.75rem, 8vw, 100px);
}

.text-m {
  font-size: clamp(1.25rem, 5vw, 50px);
}

.text-s {
  font-size: clamp(0.875rem, 3vw, 23px);
}

.text-xs {
  font-size: clamp(0.625rem, 2vw, 14px);
}

/* Breakpoints pour la mise en page responsive */
@media (max-width: 1200px) {
  .type-specimen-block-10 {
    grid-column: span 12;
  }
}

@media (max-width: 480px) {
  /* Ajustements supplémentaires pour très petits écrans */
  .type-specimen {
    padding-top: 15px;
    margin-top: 0px;
    padding-bottom: 15px;
  }

  .type-specimen-container {
    gap: 0.25rem;
  }

  /* Réduire encore les tailles de texte */
  .text-xxxl {
    font-size: clamp(7rem, 12vw, 10rem);
  }

  .text-xxl {
    font-size: clamp(4rem, 10vw, 5rem);
  }
}

.project-zoom[data-category="Type Design"] .type-specimen {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.type-specimen * {
  font-family: sans-serif;
  transition: font-family 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Ajouter un état de chargement */
.type-specimen.loading {
  opacity: 0.7;
}

.project-zoom-header .project-zoom-section {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.project-info-grid {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 0rem 1rem;
  align-items: baseline;
}

/* Animation du titre */
.site-header-center,
.site-header-right {
  transition: transform var(--transition-medium);
}

.about-active .site-header-center {
  transform: translateX(100%);
  opacity: 0;
}

/* Styles pour le header quand about est actif */
.about-active .site-header {
  background-color: var(--clr-link);
}

/* Transition fluide pour le changement de couleur */
.site-header,
.site-header-left,
.site-header-center,
.site-header-right {
  transition: all var(--transition-medium);
}

/* Bloquer le scroll du body quand about est actif */
body.about-active {
  overflow: hidden;
}

/* Styles pour le bouton de fermeture dans le header */
.projects-link.close-zoom {
  cursor: pointer;
  font-size: 1em; /* Même taille que le texte normal */
  font-weight: normal;
  transform: scale(
    1.5
  ); /* Ajuster la taille pour correspondre aux majuscules */
  display: inline-block; /* Nécessaire pour la transformation */
  transform-origin: center;
}

.projects-link.close-zoom:hover {
  opacity: 0.5;
  color: inherit;
}

/* Cacher l'ancien bouton de fermeture */
.project-zoom-header-container {
  display: none;
}

/* Optimisation des performances */
.project-container,
.slide,
.project-zoom {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Fix du bug de scroll sur iOS */
.project-zoom,
.about-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE et Edge */
}

.project-zoom::-webkit-scrollbar,
.about-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Fix des problèmes de z-index */
.site-header {
  isolation: isolate;
}

/* Optimisation des animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Masquer le bouton close-zoom quand about est actif */
.about-active .projects-link.close-zoom {
  display: none;
}

/* S'assurer que le lien Projects reste visible dans about */
.about-active .projects-link:not(.close-zoom) {
  display: inline-block;
}

/* Masquer le current-project-title quand about est actif */
.about-active .current-project-title {
  opacity: 0;
  visibility: hidden;
}

.current-project-title {
  text-align: right;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.6s ease-in-out 700ms;
}

.slide img:hover ~ .current-project-title,
.slide video:hover ~ .current-project-title,
.slide:hover ~ .current-project-title {
  color: var(--clr-link);
}

/* Permettre les interactions avec les liens même quand about est actif */
.about-active .site-header-left {
  pointer-events: all;
  z-index: calc(var(--z-about) + 1);
}

/* Maintenir le style quand about est actif */
.about-active .site-header-left .projects-link:hover,
.about-active .site-header-left .index-link:hover,
.about-active .site-header-left .about-link:hover {
  opacity: 0.5;
}

.about-link,
.project-link,
.index-link,
.close-zoom,
.current-project-title {
  z-index: 1000000000;
}

#about-content {
  grid-column: 2/4;
}

/* Responsive pour About */
@media (max-width: 1024px) {
  .about-left-column,
  .about-right-column {
    grid-column: 1 / -1;
  }

  .about-sections-container {
    margin-top: 2rem;
  }
}

/* Optimisation spécifique pour la section about entre 769px et 1020px */
@media (min-width: 768px) and (max-width: 1020px) {
  .about-content {
    overflow-y: auto;
    height: 100vh;
    padding-bottom: 2rem;
    -webkit-overflow-scrolling: touch;
  }

  .about-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .about-left-column,
  .about-right-column {
    width: 100%;
    grid-column: 1 / -1;
  }

  .about-sections-container {
    margin-top: 1.5rem;
  }

  .about-section-row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1rem;
    margin-bottom: 0.75rem;
    align-items: baseline;
  }

  .about-section-date {
    text-align: right;
  }

  .about-credits {
    margin-top: 2rem;
    padding-top: 0rem;
    grid-template-columns: 1fr 1fr;
  }

  #about-content {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

/* Tablettes et petits écrans */
@media (max-width: 1024px) {
  :root {
    --paddinghorizontal: 1rem;
  }

  /* Ajuster la grille des projets */
  .project-row {
    grid-template-columns: 40% 35% 25%;
  }

  /* Ajuster la section About */
  .about-section {
    display: grid;
    grid-template-columns: 100%;
    gap: 0.5rem;
  }

  .about-section .about-section-content,
  .about-section .about-section-title {
    grid-column: 1;
  }

  .about-credits {
    grid-template-columns: 100%;
    gap: 0.5rem;
  }

  .about-credits div {
    grid-column: 1;
    text-align: left;
  }
}

/* Animation wiggle pour le current-project-title */
@keyframes wiggle {
  0% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(-5deg) scale(1.4);
  }
  40% {
    transform: rotate(3deg) scale(1.7);
  }
  60% {
    transform: rotate(-3deg) scale(1.4);
  }
  80% {
    transform: rotate(2deg) scale(1.2);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

.current-project-title {
  transition: transform 0.3s ease-in-out;
}

.current-project-title.progress-complete {
  animation: wiggle 0.6s ease-in-out both;
  animation-iteration-count: 1;
}

/* Sélection de texte */

::selection {
  background-color: var(--clr-link);
  color: var(--clr-text);
}

::-moz-selection {
  background-color: var(--clr-link);
  color: var(--clr-text);
}

/* Transition plus douce pour les changements d'état */
.project-container {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* MOBILES */
@media (max-width: 768px) {
  .project-container.open {
    height: 45vh;
  }

  .slide img,
  .slide video {
    width: auto;
    max-width: 100%;
    padding: 0 1vw;
  }

  /* Project Index */
  .project-index:has(.project-container.open) {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--header-height);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2rem;
  }

  /* Project Row */
  .project-row {
    grid-template-columns: 1fr;
    padding: 0.25rem 0;
  }

  /* Project Zoom */
  .project-zoom {
    padding-top: calc(var(--header-height) + 0.5rem);
    padding-left: var(--paddinghorizontal);
    padding-right: var(--paddinghorizontal);
  }

  .project-zoom-content {
    font-size: 4rem;
  }

  .project-zoom-suggested-projects {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .project-zoom-images {
    grid-template-columns: 1fr;
    gap: var(--column-gap);
  }

  .project-zoom-images img {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
  }

  /* Header */
  .site-header {
    grid-template-columns: 40% 35% 25%;
    padding: 0.5rem var(--paddinghorizontal);
  }

  .site-header-left {
    gap: 0.75rem;
  }

  /* Project Zoom Header */
  .project-zoom-header {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0;
  }

  .project-zoom-header .project-zoom-section {
    margin: 0.5rem 0;
  }

  .project-zoom-header .project-zoom-section:last-child {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .project-zoom-header
    .project-zoom-section:last-child
    .project-zoom-label-title,
  .project-zoom-header .project-zoom-section:last-child .project-zoom-info {
    grid-column: 1;
    width: 100%;
    padding-right: 0;
  }

  .project-zoom-info {
    margin-top: 0.5rem;
    white-space: normal;
    line-height: 1.4;
  }

  /* About Section */
  .about-content {
    padding: var(--paddinghorizontal);
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
  }

  .about-main-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: visible;
    overflow-x: hidden;
  }

  .about-left-column,
  .about-right-column {
    width: 100%;
    grid-column: 1 / -1;
  }

  .about-section {
    margin-bottom: 1.5rem;
    width: 100%;
  }

  .about-section-title {
    margin-bottom: 0.5rem;
    width: 100%;
  }

  .about-section-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .about-section-item {
    margin-bottom: 0.25rem;
  }

  .about-section-date {
    text-align: left;
  }

  #about-content {
    grid-column: 1;
    margin-bottom: 1rem;
    width: 100%;
  }

  .about-credits {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    position: relative;
    bottom: 0;
    width: 100%;
  }

  .about-credits div {
    grid-column: 1;
    text-align: left;
  }

  .project-preview {
    display: none;
  }

  /* Type Specimen */
  .type-specimen {
    padding-top: 20px;
    margin-top: 0px;
    padding-bottom: 20px;
  }

  .type-specimen-block-8,
  .type-specimen-block-6,
  .type-specimen-block-4,
  .type-specimen-block-3,
  .type-specimen-block-2 {
    grid-column: span 12;
  }

  .text-xxxl {
    font-size: clamp(3rem, 15vw, 8rem);
  }

  .text-xxl {
    font-size: clamp(2.5rem, 12vw, 6rem);
  }

  .text-xl {
    font-size: clamp(2rem, 8vw, 4rem);
  }

  /* Project Info */
  .project-info-grid {
    grid-template-columns: minmax(100px, auto) 1fr;
    gap: 0rem 1rem;
  }

  /* Carousel Navigation */
  .carousel.first-carousel .carousel-button.next::after {
    right: 0%;
  }
}