/* ===== FONT FACE ===== */
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Cache l'aperçu du lien au survol */
.gallery-item a {
  pointer-events: none;
}

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Helvetica Now Display', sans-serif;
  background-color: #fff;
  color: #000;
  overflow-x: hidden;
  transition: background-color 0.5s, color 0.5s;
}

/* ===== HEADER (MODIFIÉ) ===== */
.main-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background-color: transparent;
  z-index: 100;
}
.main-header nav {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative; /* Référence pour le positionnement absolu */
}

/* Styles communs pour les liens et le titre */
.main-header, .nav-link, .nav-title {
  font-family: "Helvetica Now Display", sans-serif;
  letter-spacing: -0.03em;
  font-weight: 500;
  /*text-transform: uppercase;*/
  color: black;
  text-decoration: none;
  transition: color 0.5s;
   user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}
/* **AJOUT : Style pour les liens visités** */
.nav-link:visited, .nav-title:visited {
  color: black; /* Force la couleur noire */
  text-decoration: none; /* Force l'absence de soulignement */
}

.nav-link:hover, .nav-title:hover { opacity: 0.6; }
.nav-title { font-size: 16.5px; }
.nav-link { font-size: 16.5px; }


.nav-links-left {
  display: flex; /* Aligne Works et About */
  gap: 15px; /* Espace entre Works et About */
  position: absolute; /* AJOUT : Sorti du flux normal */
  left: 310px; /* **AJOUT** : Contrôle la distance depuis la gauche. Ajustez cette valeur. */
  top: 50%; /* AJOUT : Centre verticalement */
  transform: translateY(-50%); /* AJOUT : Ajustement fin du centrage vertical */
}

.nav-links-right {
  display: flex; /* Aligne Instagram et Let's Work */
  gap: 545px;
  position: absolute; /* Sorti du flux normal */
  right: 20px; /* Contrôle la distance depuis la droite. Ajustez cette valeur. */
  top: 50%; /* Centre verticalement */
  transform: translateY(-50%); /* Ajustement fin du centrage vertical */

}

/* **NOUVEAU : Appliquer le blend mode sur les pages projet ET works** */
body.project-page .main-header,
body.works-page .main-header {
  mix-blend-mode: difference;
}

/* S'assurer que le texte reste visible (blanc) sur fond noir */
body.project-page .nav-link,
body.project-page .nav-title,
body.works-page .nav-link,
body.works-page .nav-title {
   color: white !important;
}


/* ===== GALLERY ===== */
.gallery-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.gallery-track {
  display: flex;
  gap: 8vw;
  will-change: transform;
  transition: gap 0.3s ease;
}
.gallery-item {
  flex: 0 0 auto;
  height: 70vh;
  width: auto;
  opacity: 0;
  position: relative;
  /* box-shadow: 0 0 0 rgba(0, 0, 0, 0); */ /* Supprimé ou commenté */
  border: 5.5px solid transparent; /* Ajout bordure transparente */
}
/* Apparition de l'ombre ET curseur personnalisé au survol */
.gallery-item:hover,
.gallery-item:hover a, /* AJOUT : Cible le lien à l'intérieur */
.gallery-item:hover img, /* AJOUT : Cible l'image à l'intérieur */
.gallery-item:hover video /* AJOUT : Cible la vidéo à l'intérieur */
{
  
border-color: #000000; /* Ajout bordure noire */
  /* Curseur par défaut (mode clair) */
  /* Ajout des coordonnées 0 0 pour aligner sur la pointe */
  cursor: url('cursors/custom-cursor1.png') 25 25, pointer;
}

/* Règle pour le curseur en mode sombre */
body.dark .gallery-item:hover,
body.dark .gallery-item:hover a, /* AJOUT : Cible le lien à l'intérieur */
body.dark .gallery-item:hover img, /* AJOUT : Cible l'image à l'intérieur */
body.dark .gallery-item:hover video /* AJOUT : Cible la vidéo à l'intérieur */
{
  /* Curseur pour le mode sombre */
  /* Ajout des coordonnées 0 0 pour aligner sur la pointe */
  cursor: url('cursors/custom-cursor2.png') 25 25, pointer;
}


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

/* ==================================== */
/* ===== CAPTION (NOUVELLE STRUCTURE) ===== */
/* ==================================== */

/* --- Bloc 1: Le Titre (Normal) --- */
.central-caption-title {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-100%); /* Aligne le BAS du titre au centre */
  margin-bottom: -5px; /* Ajuste l'espacement pour coller au sous-titre */
  text-align: right;
  pointer-events: none;
  z-index: 99; /* Juste en dessous du sous-titre */
  white-space: nowrap;
}

.central-caption-title h2 {
  font-size: 36px;
  font-weight: 700;
  color: #000000; /* Noir par défaut */
  transition: color 0.5s;
  user-select: none;
  line-height: 1.1; /* Ajout pour cohérence */
  margin: 0; /* Ajout pour reset */
}

/* --- Bloc 2: Le Sous-titre (Blendé) --- */
.central-caption-sub {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(0%); /* Aligne le HAUT du sous-titre au centre */
  margin-top: -9px; /* Ajuste l'espacement pour coller au titre */
  text-align: right;
  pointer-events: none;
  z-index: 100;
  white-space: nowrap;
  mix-blend-mode: difference; /* LE BLEND MODE EST ICI */
}

.central-caption-sub p {
  font-size: 36px;
  font-weight: 500;
  color: #ffffff; /* Couleur de base TOUJOURS BLANCHE */
  transition: color 0.5s;
  user-select: none;
  line-height: 1.1; /* Ajout pour cohérence */
  margin: 0; /* Ajout pour reset */
}

/* ==================================== */
/* ===== CAPTION GAUCHE (DATE) ===== */
/* ==================================== */

/* --- Bloc 1: Le Mois (Normal) --- */
.central-caption-month {
  position: fixed;
  top: 50%;
  left: 20px; /* Changé de 'right' à 'left' */
  transform: translateY(-100%);
  margin-bottom: -5px;
  text-align: left; /* Changé de 'right' à 'left' */
  pointer-events: none;
  z-index: 99;
  white-space: nowrap;
}

.central-caption-month h2 {
  font-size: 36px;
  font-weight: 700;
  color: #000000; /* Noir par défaut */
  transition: color 0.5s;
  user-select: none;
  line-height: 1.1;
  margin: 0;
}

/* --- Bloc 2: L'Année (Blendé) --- */
.central-caption-year {
  position: fixed;
  top: 50%;
  left: 20px; /* Changé de 'right' à 'left' */
  transform: translateY(0%);
  margin-top: -9px;
  text-align: left; /* Changé de 'right' à 'left' */
  pointer-events: none;
  z-index: 100;
  white-space: nowrap;
  mix-blend-mode: difference; /* LE BLEND MODE EST ICI */
}

.central-caption-year p {
  font-size: 36px;
  font-weight: 500;
  color: #ffffff; /* Couleur de base TOUJOURS BLANCHE */
  transition: color 0.5s;
  user-select: none;
  line-height: 1.1;
  margin: 0;
}


/* ===== GRADIENTS ===== */
.gallery-container::before,
.gallery-container::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 400px;
  pointer-events: none;
  z-index: 10;
  transition: background 0.5s;
}
.gallery-container::before { left: 0; background: linear-gradient(to right, rgba(255,255,255,0.7), rgba(255,255,255,0)); }
.gallery-container::after { right: 0; background: linear-gradient(to left, rgba(255,255,255,0.7), rgba(255,255,255,0)); }

/* ===== THEME TOGGLE BUTTON ===== */
#theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 16px;
  height: 16px;
  background-color: black;
  border-radius: 50%;
  cursor: pointer;
  z-index: 200;
  /* MODIFIÉ : Ajout transition opacité */
  transition: background-color 0.5s, transform 0.2s, opacity 0.6s ease;
}
#theme-toggle:hover {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

/* ===== DARK THEME ===== */
body.dark {
  background-color: #000 !important; /* On peut revenir au NOIR PUR */
  color: #fff !important;
}
body.dark .nav-link,
body.dark .nav-title,
body.dark .number-item { color: #fff !important; }

/* NOUVELLE RÈGLE DARK MODE (SIMPLE) - MODIFIÉE */
body.dark .central-caption-title h2,
body.dark .central-caption-month h2 {
  color: #ffffff !important; /* Le titre ET le mois deviennent blancs */
}
/* Plus besoin de règles pour le sous-titre, le blend mode s'en charge */


body.dark .gallery-container::before { background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0)); }
body.dark .gallery-container::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.7), rgba(0,0,0,0)); }
body.dark #theme-toggle { background-color: white !important; }
body.dark #idle-screen .idle-overlay { background-color: #000; }

body.dark.project-page .project-info {
  background-color: #000; /* Assure que le fond reste noir */
  color: #fff; /* Assure que le texte est blanc */
}

/* Gestion de l'ombre au survol en mode sombre */
body.dark .gallery-item:hover {
 border-color: #ffffff;
}

/* New rule for About Page dark theme consistency */
/* Ajout des sélecteurs pour les paragraphes et utilisation de !important pour assurer l'écrasement des couleurs de base. */
body.dark.about-page .about-text p,
body.dark.about-page .about-contact p,
body.dark.about-page .about-text a,
body.dark.about-page .about-contact a,
body.dark.about-page .about-stars .star { /* Ajout du sélecteur pour les étoiles */
  color: #fff !important; /* Assure que le texte, les liens et les étoiles sont explicitement blancs en mode sombre */
}

/* ===== ÉCRAN D'INACTIVITÉ (MODIFIÉ pour 3 colonnes rapprochées) ===== */
#idle-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 500;
  overflow: hidden;
}

#idle-screen.active { opacity: 1; }

/* --- ✅ CORRECTION 1 : L'OVERLAY A ÉTÉ RESTAURÉ --- */
.idle-overlay {
  position: absolute; /* Restauré */
  top: 0;             /* Restauré */
  left: 0;            /* Restauré */
  width: 100%;        /* Restauré */
  height: 100%;       /* Restauré */
  background-color: white;
  opacity: 0.77;
  z-index: 500;
}

/* Conteneur global pour les colonnes */
.idle-columns-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 501;
}

/* Styles de base pour TOUTES les colonnes */
.idle-text {
  position: absolute;
  top: 0;
  height: 100%;
  width: 45vw; /* Largeur large pour contenu */
  text-align: center;
  pointer-events: none;
  will-change: transform;
  /* overflow: hidden; retiré */
}

/* Le 'track' qui contient l'animation */
.idle-animation-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* height retiré pour scroll infini */
  will-change: transform;
  overflow: hidden; /* Appliqué ici */
}

/* Colonne centrale */
.idle-column-center {
  left: 50%;
  transform: translateX(-50%);
  width: 45vw; /* Largeur de la colonne centrale */
  z-index: 2;
}
.idle-column-center .idle-animation-track {
  animation: scroll-up 30s linear infinite; /* Animation centrale */
}

/* Colonnes latérales */
.idle-column-left,
.idle-column-right {
  /*filter: blur(12px);*/
  opacity: 1;
  z-index: 1;
}

.idle-column-left {
  /* Positionne bord droit collé au bord gauche central */
  right: calc(50% + (48vw / 2)); /* MODIFIÉ: Marge 0vw */
}
.idle-column-right {
  /* Positionne bord gauche collé au bord droit central */
  left: calc(50% + (48vw / 2)); /* MODIFIÉ: Marge 0vw */
}
/* Animation inversée pour latérales */
.idle-column-left .idle-animation-track,
.idle-column-right .idle-animation-track {
  animation: animate-scroll-down 30s linear infinite; /* Animation inversée */
}

/* ==================================== */
/* === NOUVEAU : STYLES POUR LE SVG === */
/* ==================================== */

.idle-svg-container {
  flex-shrink: 0; /* Important pour l'animation */
  width: 100%;
  position: relative; /* Pour superposer les deux SVGs */
  line-height: 0; /* Empêche les espaces indésirables */
  margin: 0; /* CORRIGÉ : L'original n'avait pas de marge */
  padding-bottom: 2.5vh; /* AJOUTÉ : Pour donner de la hauteur et espacer */
}

.idle-svg-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- LOGIQUE DE THÈME (FORCÉE AVEC !important) --- */
/*
  - idle.svg (Blanc) a la classe .idle-svg-light
  - idle2.svg (Noir) a la classe .idle-svg-dark
*/

/* Par défaut (Thème Clair), on affiche le NOIR (idle2.svg) */
.idle-svg-light {
  display: none !important; /* FORCÉ CACHÉ */
  position: absolute; 
  top: 0;
  left: 0;
}
.idle-svg-dark {
  display: block !important; /* FORCÉ AFFICHÉ */
  position: static;
}

/* Logique du mode sombre (on affiche le BLANC, idle.svg) */
body.dark .idle-svg-light {
  display: block !important; /* FORCÉ AFFICHÉ */
  position: static;
}
body.dark .idle-svg-dark {
  display: none !important; /* FORCÉ CACHÉ */
}


/* =========================================== */
/* === ANCIEN CONTENU TEXTE (mis en commentaire) === */
/* =========================================== */
/*
.idle-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.75;
  margin: 0;
  flex-shrink: 0;
  width: 100%;
}

.idle-block span {
  display: block;
  font-weight: 500;
  font-size: 4vw;
  line-height: 0.75;
  margin: 0;
  white-space: nowrap;
}

.idle-block span.name {
  font-weight: 700;
  font-size: 5.28vw;
  line-height: 0.85;
}

.idle-block span.city {
  display: block;
  font-weight: 700;
  font-size: 42vw;
  line-height: 0.38;
  letter-spacing: -0.07em;
  transform: scaleY(0.5) scaleX(0.3);
  transform-origin: center;
}
*/
/* =========================================== */
/* =========================================== */



/* ==========================================================================================================
   PAGE ABOUT
   ========================================================================================================== */

/* ==============================
   ABOUT PAGE LAYOUT (Refactorisé avec Position Absolute)
============================== */
body.about-page {
  background-color: #fff;
  color: #000;
  overflow: hidden; /* Modifié : empêche tout scroll sur la page */
}

/* Style du header pour la page "About" - MODIFIÉ pour l'animation en 2 temps */
.about-page .nav-title {
  /* Étape 1: Taille de départ (identique à la page d'accueil) */
  font-size: 16.5px;
  line-height: 1;
  text-align: center;
  position: relative;
  top: 0; /* Position de départ (au lieu de 35px) */
   user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

/* Configuration du contneur principal avec Position Relative. */
.about-main {
  position: relative; /* Indispensable pour positionner les enfants */
  height: 100vh; /* Hauteur fixe de 100% de l'écran */
  box-sizing: border-box;
   user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

/* PHOTO */
.about-photo-wrapper {
  position: absolute; /* Ajouté */
  bottom: 20px; /* MODIFIÉ */
  left: 20px; /* MODIFIÉ */
  width: 35vw; /* Modifié : largeur fixe de 35% du viewport */
  height: 80vh; /* Garde la hauteur que tu avais définie */
  overflow: hidden;
}
.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TEXTE - MODIFICATIONS ICI */
.about-text {
  position: absolute; /* Ajouté */
  top: calc(100vh - 80vh - 22px);
  left: calc(35vw + 40px);
  max-width: 467px;
}
.about-text p {
  /* Style des liens de navigation (nav-link) repris ici */
  font-family: "Helvetica Now Display", sans-serif;
  font-size: 14px; /* Taille similaire aux liens de nav */
  font-weight: 400;
  letter-spacing: -0.03em;
  /*text-transform: uppercase; /* Ajouté : en majuscules */
  line-height: 1.3;
  margin-bottom: 1.4em;
  text-align: justify;
   user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}
.about-text a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}

/* CONTACT - MODIFICATIONS ICI */
.about-contact {
  position: absolute; /* Ajouté */
  bottom: 20px; /* MODIFIÉ : aligné en bas avec 10px de marge */
  left: calc(35vw + 40px);

  /* Nouveau style pour l'ensemble du bloc contact */
  font-family: "Helvetica Now Display", sans-serif;
  font-size: 14px; /* Taille similaire aux liens de nav */
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.00em;
  line-height: 1.2;
  /*text-transform: uppercase; /* Ajouté : en majuscules */
}
.about-contact p {
  margin: 0;
  /* Le p reprend l'ensemble des styles du .about-contact */
}
.about-contact a {
  color: inherit;
  text-decoration: none;
}
.about-contact a:hover { opacity: 0.6; }

/* NOUVEAU : Styles pour les étoiles sur la page About */
.about-stars {
  position: absolute; /* Positionnement absolu pour le placement */
  bottom: 70px; /* Alignées en bas avec la photo et le contact */
  right: 70px; /* Sur le côté droit */
  display: grid; /* Utilisation de Grid pour l'agencement 2x2 */
  grid-template-columns: repeat(2, auto); /* Colonnes s'adaptent au contenu */
  grid-template-rows: repeat(2, auto); /* Lignes s'adaptent au contenu */
  gap: 0px;
  z-index: 50;
  /* Ajout pour mieux contrôler le positionnement des étoiles avec marges négatives */
  justify-content: end;
  align-content: end;
}

.about-stars .star {
  display: block;
  font-family: "Helvetica Now Display", sans-serif; /* Reprend la police */
  font-weight: 700;
  font-size: 23vw;
  line-height: 1; /* Pas d'espace en plus */
  letter-spacing: -0.07em; /* Reprend le même espacement */
  color: black; /* Couleur par défaut */

  /* Les mêmes transformations que la ville dans l'écran d'inactivité */
  transform: scaleY(0.5) scaleX(0.3);
  transform-origin: center; /* Important pour que la transformation soit centrée */

  /* **AJOUT DES MARGES NÉGATIVES** */
  margin: -6vw -7vw; /* Top/Bottom Left/Right - Ajustez ces valeurs si besoin */
  /* **AJOUT : Empêche la sélection du texte** */
  user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}


/* ===== RESPONSIVE (POUR ABOUT PAGE) ===== */
/* Ce bloc est conservé. Il repasse en mode "Grid" (plus robuste) sur mobile */
@media (max-width: 1200px) {
  .about-main {
    /* Sur mobile, on repasse en Grid (1 seule colonne) */
    display: grid; /* Ajouté pour ré-activer la grid */
    position: static; /* Ajouté pour annuler 'position: relative' */
    height: auto; /* Ajouté */
    min-height: 100vh; /* Ajouté */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto; /* 4 lignes maintenant avec les étoiles */
    grid-template-areas:
      "photo"
      "text"
      "contact"
      "stars"; /* Nouvelle zone pour les étoiles */
    padding: 100px 5vw 5vh 5vw; /* Ré-introduction du padding pour mobile */
    gap: 2rem; /* Espace simple entre les blocs */
  }

  /* Règle ajoutée pour réinitialiser la position des éléments sur mobile */
  .about-photo-wrapper,
  .about-text,
  .about-contact,
  .about-stars { /* Ajout de .about-stars */
    position: static;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto; /* Ajouté pour les étoiles */
    width: auto; /* Laisse la grid gérer la largeur */
  }

  .about-photo-wrapper {
    height: 60vh; /* Une hauteur plus adaptée au mobile */
    width: 100%; /* L'image prend 100% de la colonne grid */
  }

  .about-text {
    align-self: start; /* Réinitialise l'alignement */
    max-width: 100%; /* Prend toute la largeur */
  }

  /* Retouches taille sur mobile pour éviter qu'ils ne soient trop petits */
  .about-text p,
  .about-contact {
    font-size: 16px;
  }

  .about-stars {
    grid-area: stars; /* Place les étoiles dans la zone 'stars' */
    justify-content: center; /* Centre les étoiles horizontalement sur mobile */
    align-items: center; /* Centre verticalement si besoin */
    gap: 0px;
  }

  .about-stars .star {
    font-size: 25vw;
    margin: -6vw -8vw; /* Ajustement des marges négatives pour mobile */
  }

  /* ** NOUVEAU : Cacher Instagram sur mobile ** */
  .nav-link-instagram {
    display: none;
  }
}


/* ==============================
   ANIMATION CASCADE (MODIFIÉ)
============================== */

/* Animation en 2 temps (Étape 1) : fondu d'opacité (sans mouvement) */
.fade-in {
  opacity: 0;
  /* transform: translateY(30px); -- Supprimé comme demandé */
  animation: fadeInOnly 0.5s forwards ease-out; /* Durée plus rapide (0.5s) */
}

@keyframes fadeInOnly {
  to {
    opacity: 1;
    /* transform: translateY(0); -- Supprimé comme demandé */
  }
}

/* Décalages pour la cascade (Étape 1). Réajusté */
.delay-1 { animation-delay: 0.1s; } /* Texte EN / Projet col 1 p1 */
.delay-2 { animation-delay: 0.2s; } /* Texte FR / Projet col 1 p2 */
.delay-3 { animation-delay: 0.3s; } /* Photo / Projet col 2 p1 */
.delay-4 { animation-delay: 0.4s; } /* Contact Insta / Projet col 2 p2 */
.delay-5 { animation-delay: 0.5s; } /* Contact Email / Projet col 3 p1 */
.delay-6 { animation-delay: 0.6s; } /* Contact Tel / Projet SVG */
.delay-7 { animation-delay: 0.7s; } /* Contact Ville */
.delay-8 { animation-delay: 0.8s; } /* Étoiles */



/* MODIFIÉ : Keyframes pour le défilement (texte monte) */
@keyframes scroll-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100% / 6)); /* Défile d'un bloc */
  }
}

/* NOUVEAU : Keyframes pour le défilement inversé (texte descend) */
@keyframes animate-scroll-down {
  from {
    transform: translateY(calc(-100% / 6));
  }
  to {
    transform: translateY(0);
  }
}

/* ==========================================================================================================
   NOUVEAU : PAGE PROJET
   ========================================================================================================== */

/* **AJOUT : Bloquer le scroll sur les pages projet** */
body.project-page {
  overflow: hidden; /* Empêche tout défilement */
}


/* Conteneur principal de la page projet */
.project-main {
  padding-top: 0px; /* Espace pour le header fixe */
  width: 100%;
}

/* Section pour le visuel principal */
.project-visual {
  width: 100%;
  height: 78vh; /* Hauteur du visuel, ajuste selon tes préférences */
 /* background-color: #212121; Fond noir par défaut */
  overflow: hidden; /* Cache ce qui dépasse */
  position: relative; /* **AJOUTÉ : Pour superposer les visuels** */
  /* **MODIFIÉ : Curseur personnalisé (mode clair)** */
  cursor: url('cursors/custom-cursor1.png') 25 25, pointer;
  /* --- AJOUT TRANSITION --- */
  transition: height 0.6s ease;
}

/* **AJOUT : Curseur personnalisé pour le mode sombre** */
body.dark.project-page .project-visual {
  cursor: url('cursors/custom-cursor2.png') 25 25, pointer;
}


.project-visual img,
.project-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recouvre la zone sans déformer */
  display: block;

  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.4s ease-in-out; /* Durée du fondu */
}

/* Section pour les informations en bas */
.project-info {
  background-color: #fff; /* Fond blanc */
  color: #000; /* Texte noir */
  padding: 20px 20px; /* Espacement intérieur */
  display: flex; /* Utilise Flexbox pour les colonnes */
  gap: 90px; /* Espace entre les colonnes AIDE À GERER LA JUSTIF_____________________ */
  /* --- MODIFICATION TRANSITION --- */
  transition: background-color 0.5s, color 0.5s, opacity 0.5s ease;
}

/* Style des colonnes d'information */
.info-column {
  flex: 1; /* Chaque colonne prend une part égale */
  font-size: 14px; /* Taille de texte pour les infos */
  font-size: 14px; /* Taille similaire aux liens de nav */
  font-weight: 400;
  letter-spacing: -0.00em;
  line-height: 1.15;
  text-align: justify;
   user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  /* --- AJOUT TRANSITION --- */
  transition: opacity 0.6s ease;
}


/* Styles spécifiques pour aligner/distribuer le contenu */
.info-column.column-1 {
  flex-basis: 55.5%; /* La première colonne prend plus de place */
}

.info-column.column-2 {
  flex-basis: 25%;
  text-align: left;
}

.info-column .date-project {
    text-align: left;
    margin-top: -1em;
    margin-bottom: 2em;
    font-size: 16.5px;
    font-weight: 500;
}

.info-column.column-3 {
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pousse le copyright en bas */
  text-align: right; /* Aligne le texte à droite */
}

.info-column p {
  margin-top: -0.2em;
  margin-bottom: 2.3em; /* Espace sous chaque paragraphe */
  /* --- AJOUT TRANSITION --- */
  transition: opacity 0.6s ease;
}

.info-column p:last-child {
  margin-bottom: 0; /* Pas d'espace sous le dernier paragraphe */
}

/* ==================================== */
/* ===== ÉTOILES SVG SUR PAGE PROJET ===== */
/* ==================================== */

/* C'EST CE BLOC QUI A ÉTÉ MODIFIÉ */
.project-stars-svg {
  display: block; 
  width: 35px; 
  height: auto; 
  transition: filter 0.5s, transform 0.6s ease;
  cursor: pointer; 

  /* --- NOUVEAU POSITIONNEMENT FIXE --- */
  position: fixed; /* Reste immobile à l'écran */
  bottom: 55px;    /* Positionné 55px du bas */
  right: 20px;     /* Positionné 20px de la droite */
  z-index: 200;    /* S'assure qu'il est au-dessus du visuel (et au même niveau que #theme-toggle) */
}


/* Inversion des couleurs pour le thème sombre */
body.dark .project-stars-svg {
  filter: invert(1); /* Inverse le SVG (noir devient blanc) */
}

/* ==================================== */
/* ===== COMPTEUR VISUEL PROJET ===== */
/* ==================================== */

#visual-counter {
  position: absolute;
  bottom: 15px; /* Ajuste la distance du bas */
  right: 20px;  /* Ajuste la distance de la droite */
  font-family: "Helvetica Now Display", sans-serif;
  font-size: 16.5px;
  font-weight: 500;
  color: #ffffff; /* Couleur de base BLANCHE */
  mix-blend-mode: difference;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* --- AJOUT TRANSITION --- */
  transition: opacity 0.6s ease;
}

/* ==================================== */
/* ===== BOUTON VOLUME PROJET   ===== */
/* ==================================== */

#volume-toggle-button {
  position: absolute;
  bottom: 15px; /* Même alignement vertical que le compteur */
  right: 75px;  /* Positionné à gauche du compteur (ajuste 75px) */
  font-family: "Helvetica Now Display", sans-serif;
  font-size: 16.5px; /* Même taille que compteur */
  font-weight: 500;
  color: #ffffff; /* Base BLANCHE */
  mix-blend-mode: difference;
  z-index: 5;
  pointer-events: auto; /* Doit être cliquable */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* Style bouton simple */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /* Cacher par défaut */
  display: none;
  opacity: 0; /* Pour transition */
  /* --- MODIF TRANSITION --- */
  transition: opacity 0.3s ease, opacity 0.6s ease;
}

#volume-toggle-button.visible {
    display: inline-block; /* Ou 'block' */
    opacity: 1;
}

/* ==================================== */
/* ===== MODE PLEIN ÉCRAN PROJET (CORRIGÉ V2) ===== */
/* ==================================== */

/* --- Styles quand le mode plein écran est ACTIF --- */
body.project-fullscreen-active .project-visual {
    height: 100vh; /* Le visuel prend 100% de la hauteur */
}

/* Cache le fond de la barre d'info */
body.project-fullscreen-active .project-info {
    background-color: transparent !important;
    /* On ne cache PAS la section info elle-même, pour garder les étoiles */
}

/* Cache les infos (col 1, 2, et le copyright dans col 3) */
body.project-fullscreen-active .info-column.column-1,
body.project-fullscreen-active .info-column.column-2,
body.project-fullscreen-active .info-column.column-3 p { 
    opacity: 0;
    pointer-events: none;
}



/* --- Cache compteur, volume et bouton thème --- */
body.project-fullscreen-active #visual-counter,
body.project-fullscreen-active #volume-toggle-button,
body.project-fullscreen-active #theme-toggle {
    opacity: 0;
    pointer-events: none;
}


/* ======================== */
/* ===== INTRO LOADER (CORRIGÉ V3) ===== */
/* ======================== */

#intro-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  z-index: 10000;
  opacity: 1;
  pointer-events: auto;
  /* Correct transition for fade-out */
  transition: opacity 0.75s ease-out; /* 300ms duration */
  overflow: hidden;
  display: flex;
}

/* Conteneur des étoiles */
#intro-stars {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  font-family: "Helvetica Now Display", sans-serif;
  font-weight: 700;
  /* --- AJUSTE CES VALEURS --- */
  line-height: 0.5;   /* Essaye 0.5 ou 0.45 */
  font-size: 100px;   /* Taille TRÈS GRANDE - AJUSTE */
  /* --- FIN AJUSTEMENTS --- */
  color: #ffffff;
  opacity: 1;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  white-space: pre;
  padding-top: 10px;
}


/* Style d'une étoile individuelle */
.intro-star {
  opacity: 0;
  padding: 0;
  margin: 0;
  display: inline-block;
  transform: scaleY(0.5) scaleX(0.3);
  transform-origin: center;
  /* Ajuste la largeur pour la TRES grande taille */
  width: 0.4em; /* Essaye 0.4em */
  text-align: center;
}

/* Classe pour rendre une étoile visible */
.intro-star.visible {
  opacity: 1;
  /* Optional: Add a very short transition for smoother appearance */
  /* transition: opacity 0.05s linear; */
}


/* Classe pour faire disparaître le loader */
#intro-loader.hidden {
  opacity: 0;
  pointer-events: none;
}


/* =========================== */
/* ===== MESSAGE MOBILE (Mis à jour) ===== */
/* =========================== */

#mobile-warning {
  display: none; /* Caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  color: #000000;
  z-index: 20000;
  padding: 15px; /* Espace autour du contenu */
  font-family: 'Helvetica Now Display', sans-serif;
  box-sizing: border-box; /* Inclut le padding dans les dimensions */
  /* Supprime flex pour permettre le positionnement absolu des enfants */
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
  /* align-items: center; */
}

/* --- Style du bloc de texte --- */
.mobile-warning-text {
  position: relative; /* Flux normal, mais peut être décalé si besoin */
  font-size: 15px; /* Ajuste la taille si besoin */
  line-height: 1.2;
  max-width: 90%; /* Limite la largeur pour éviter le collage aux bords */
}

.mobile-warning-text p {
  margin-bottom: 3.5em; /* Espace entre les paragraphes */
  text-align:justify; /* Aligne le texte à gauche */
}
.mobile-warning-text p:last-child {
  margin-bottom: 0;
}


/* --- Style du bloc d'étoiles --- */
.mobile-warning-stars {
  position: absolute; /* Positionnement absolu */
  bottom: 30px;      /* Distance du bas */
  right: 30px;       /* Distance de la droite */
  display: grid;     /* Grille 2x2 */
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  gap: 0px;          /* Espace entre les étoiles */
  justify-content: end;
  align-content: end;
}

/* Style d'une étoile individuelle (similaire à .about-stars .star) */
.mobile-warning-stars .mobile-star {
  display: block;
  font-family: "Helvetica Now Display", sans-serif;
  font-weight: 500;
  /* Taille des étoiles - Ajuste cette valeur */
  font-size: 25vw; /* Très grande taille relative */
  line-height: 1;
  letter-spacing: -0.07em;
  color: black;
  transform: scaleY(0.5) scaleX(0.3);
  transform-origin: center;
  /* Marges négatives pour le chevauchement */
  margin: -6vw -7vw; /* Ajuste si besoin */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


/* Cache le contenu principal quand le message est actif */
/* Cette règle reste la même */
body.mobile-active > *:not(#mobile-warning) {
  display: none !important;
}

/* ============================================================================== */
/* ===== PAGE WIP (Work In Progress) ===== */
/* ============================================================================== */

/* Style général de la page WIP */
.wip-page {
    /* Assure que le contenu peut être positionné */
    position: relative;
    min-height: 100vh;
    overflow: hidden; /* Empêche le scroll si pas nécessaire */
}

/* Conteneur principal */
.wip-main {
    position: absolute;
    bottom: 40px; /* Position en bas de page */
    left: 20px;   /* Marge gauche */
    right: 20px;  /* Marge droite */
    display: flex; /* Aligne texte et étoiles */
    justify-content: space-between; /* Met le texte à gauche, les étoiles à droite */
    align-items: flex-end; /* Aligne les éléments sur leur ligne de base */
}

/* Bloc Texte */
.wip-text h1 {
    font-family: "Helvetica Now Display", sans-serif;
    font-weight: 700; /* Gras */
    font-size: 14vw; /* Taille relative grande */
    letter-spacing: -0.03em;
    line-height: 0.76;
    margin: 0 0 0px 0; /* Espace sous le titre */
    color: inherit; /* Hérite la couleur (noir/blanc) */
}

.wip-text p {
    font-family: "Helvetica Now Display", sans-serif;
    font-weight: 500; /* Medium */
    font-size: 16.5px; /* Taille relative plus petite */
    letter-spacing: -0.03em;
    line-height: 1.4;
    margin: 0 0 100px 0; /* Espace sous le titre */
    color: inherit;
}

/* Conteneur des étoiles animées */
.wip-stars {
    display: flex; /* Aligne les étoiles horizontalement */
    gap: 0px; /* Espace entre les étoiles (ajuste si besoin) */
    margin-bottom: 68px;
}

/* Style d'une étoile individuelle WIP */
.wip-star {
    font-family: "Helvetica Now Display", sans-serif;
    font-weight: 700;
    /* Taille des étoiles (similaire au grand texte ?) */
    font-size: 14vw;
    line-height: 1;
    color: inherit;
    /* Transformation condensée comme les autres étoiles */
    transform: scaleY(0.5) scaleX(0.3);
    transform-origin: center;
    display: inline-block;
    margin: 0 -4.5vw; /* Marges négatives pour les rapprocher */

    /* Animation */
    opacity: 0; /* Commence invisible */
    animation: wip-star-blink 1.7s infinite; /* Durée totale de la boucle */
}

/* Décalages d'animation pour chaque étoile */
.wip-star.star-1 {
    animation-delay: 0s;
}
.wip-star.star-2 {
    animation-delay: 0.2s; /* Apparaît un peu après la première */
}
.wip-star.star-3 {
    animation-delay: 0.4s; /* Apparaît après la deuxième */
}

/* Keyframes pour l'animation clignotante */
@keyframes wip-star-blink {
    0% { opacity: 0; }   /* Invisible au début */
    20% { opacity: 1; }  /* Apparaît */
    80% { opacity: 1; }  /* Reste visible */
    100% { opacity: 0; } /* Disparaît pour la boucle */
}

/* --- Responsive pour WIP --- */
@media (max-width: 768px) {
    .wip-main {
        flex-direction: column; /* Passe en colonne sur petit écran */
        align-items: flex-start; /* Aligne tout à gauche */
        bottom: 20px;
        left: 20px;
        right: 20px;
    }
    .wip-text h1 {
        font-size: 8vw; /* Plus grand sur mobile */
    }
    .wip-text p {
        font-size: 4vw;
    }
    .wip-stars {
        margin-top: 20px; /* Espace au-dessus des étoiles */
        align-self: flex-end; /* Met les étoiles à droite */
    }
    .wip-star {
        font-size: 8vw;
        margin: 0 -1.5vw;
    }
}


/* ================================================================================================ */
/* ===== PAGE WORKS (V2 - Hauteur Fixe) ===== */
/* ================================================================================================ */

/* --- 1. Définition de la grille --- */
:root {
  --page-padding: 20px;
  --col-1-width: 334px;  /* Largeur de la miniature */
  --col-2-width: 1fr;    /* Le titre prend l'espace restant */
  --col-3-width: 150px;  /* Largeur de la date */
  --col-4-width: 150px;  /* Largeur "Let's Work" (pour l'alignement) */

  /* AJOUT : variable pour contrôler l’écart entre le titre et la date */
  --date-shift: -483px; /* Valeur négative = rapproche la date du titre ; positive = l’éloigne */
}

/* --- 2. Classe de Grille --- */
.new-works-grid {
  display: grid;
  width: 100%;
  grid-template-columns: 
    var(--col-1-width) 
    var(--col-2-width) 
    var(--col-3-width) 
    var(--col-4-width);
  align-items: center;
  box-sizing: border-box;
}

/* --- 3. Conteneur --- */
.new-works-container {
  padding-top: 145px;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  box-sizing: border-box;
}

.new-works-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- 4. Style d'un item --- */
.new-works-item {
  border-top: 2.5px solid #000;
  transition: background-color 0.3s ease;
  position: relative; /* <-- Conservé : NÉCESSAIRE pour le calcul JS du "rail" */
}
.new-works-item:last-child {
  border-bottom: 2.5px solid #000;
}
.new-works-item a {
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
  color: #000;
  align-items: start;
}

.new-works-item:hover {
  background-color: #e8e8e8;
}

/* --- AJOUT : Animation Étape 1 --- */
/* Quand on survole la ligne, on déplace l'image/vidéo */
.new-works-item:hover .item-col-1 img,
.new-works-item:hover .item-col-1 video {
  transform: translateX(335px); /* Déplace de 30px vers la droite */
}

/* --- 5. Colonnes --- */
.item-col-1, .item-col-2, .item-col-3, .item-col-4 {
  box-sizing: border-box;
  height: 100%;
}

.item-col-1 {
  height: 150px;
  overflow: hidden; /* Le "masque" qui empêche le débordement */
}
.item-col-1 img,
.item-col-1 video { 
  width: 100%;
  height: 100%; 
  object-fit: cover; 
  display: block;
  
  /* Votre vitesse personnalisée est conservée */
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.item-col-2 {
  margin-left: 15px;
}

.item-col-2 h3 {
  font-family: "Helvetica Now Display", sans-serif;
  font-weight: 500;
  font-size: 16.5px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 5px 0;
  line-height: 0.7;
}
.item-col-2 p, .item-col-3 p {
  font-family: "Helvetica Now Display", sans-serif;
  font-weight: 400;
  font-size: 16.5px;
  margin: 0;
  line-height: 1.1;
}

.item-col-3 .month {
  font-weight: 500;
}
/* --- 🔧 AJUSTEMENT ÉCART TITRE / DATE --- */
.item-col-3 {
  margin-left: 10px;

  /* AJOUT : permet de déplacer toute la colonne de date sans casser la grille */
  transform: translateX(var(--date-shift));
  transition: transform 0.3s ease;
}

.item-col-3 p {
  text-align: right;
}

/* --- 6. Colonne 4 --- */
.item-col-4 {
  margin-left: 20px;
}

/* --- 7. Thème sombre --- */
body.dark .new-works-item {
  border-color: #fff;
}
body.dark .new-works-item a {
  color: #fff;
}
body.dark .new-works-item:hover {
  background-color: #1a1a1a;
}

/* --- 8. Responsive (Dates) --- */

/* Applique ces styles lorsque la largeur de la fenêtre
   est de 950px OU MOINS */
@media (max-width: 1350px) {

  /* 1. On cache la colonne de la date */
  .item-col-3 {
    display: none;
  }

  /* 2. On redéfinit la grille pour qu'elle n'ait plus de "trou" */
  .new-works-grid {
    grid-template-columns: 
      var(--col-1-width)  /* Col 1 (Image) */
      1fr                   /* Col 2 (Titre, qui prend la place) */
      var(--col-4-width); /* Col 4 (Alignement) */
  }
}

/* --- 9. Animation Étape 2 (Follower Global) --- */
/* BLOC ENTIER REMPLACÉ pour le follower global,
   avec la HAUTEUR et la VITESSE mises à jour */

#project-follower {
  /* Positionné par JS, mais on prépare le style */
  position: absolute;
  top: 0;
  left: 0;

  /* Dimensions */
  width: 700px; 
  height: 420px; 

  /* Cacher par défaut */
  opacity: 0;
  
  /* Style */
  z-index: 10;
  pointer-events: none;
  
  /* Effet "masque" pour le surgissement */
  overflow: hidden;

  /* MODIFIÉ : On retire 'left' de la transition CSS */
  transition: opacity 0.3s ease; /* (J'ai mis 0.3s pour l'opacity, c'était '0.1s linear' avant) */
}

#project-follower-media {
  width: 100%;
  height: 100%;

  /* État initial : caché à gauche */
  transform: translateX(-100%);
  
  /* Vitesse de surgissement (MISE À JOUR) : 0.2s, pour matcher Étape 1 */
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#project-follower-media img,
#project-follower-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Quand le follower est actif (via JS) */
#project-follower.is-active {
  opacity: 1;
}
#project-follower.is-active #project-follower-media {
  transform: translateX(0%); /* L'image surgit */
}

/* --- 10. Curseur Personnalisé --- */
/* AJOUT DE CE BLOC POUR LE CURSEUR */

/* Curseur pour le mode clair */
.new-works-item:hover,
.new-works-item:hover a {
  cursor: url('cursors/custom-cursor1.png') 25 25, pointer;
}

/* Curseur pour le mode sombre */
body.dark .new-works-item:hover,
body.dark .new-works-item:hover a {
  cursor: url('cursors/custom-cursor2.png') 25 25, pointer;
}