body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  background: white;
  overflow: hidden;
  min-height: 100vh;
  position: relative;
}

#click-to-start {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  color: rgb(11, 96, 72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  z-index: 9999;
  cursor: pointer;
}

/* Pour la page index : autoriser le scroll interne */
body.accueil-body {
  overflow: auto; /* autorise le scroll sur cette page uniquement */
}

/* HEADER */

.header {
  position: absolute;
  top: 60px;
  left: 60px;
  right: 60px;
  display: flex;
  justify-content: space-between;
  z-index: 30;
}

.header a {
  text-decoration: none;
  font-size: 50px;
  position: relative;
  display: inline-block;
  color: transparent; /* On masque la couleur de base */

  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(5, 60, 54, 0.7) 50%,  /* turquoise moyen-lumineux */
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: var(--x, 50%) 0%;
  background-clip: text;
  -webkit-background-clip: text;
  
  transition: background-position 0.05s ease-out;
}

/* Organisation des deux côtés du header */
.header {
  position: absolute;
  top: 60px;
  left: 60px;
  right: 120px;
  display: flex;
  justify-content: space-between;
  z-index: 30;
}

/* Empilement vertical */
.left-block, .right-block {
  display: flex;
  flex-direction: column;
}

.vertical-bio, .vertical-info {
  margin-top: 30px;
  writing-mode: horizontal-tb;
  transform: rotate(0deg);
  line-height: 1.2;
}

.vertical-info {
  text-align: right;
}

.vertical-bio p, .vertical-info p {
  margin: 0;
  font-size: 20px;
  color: rgb(195, 213, 202); /* couleur permanente */
  position: relative;
  overflow: hidden;
}

.vertical-bio p::after, .vertical-info p::after {
  content: "";
  position: absolute;
  left: var(--x, 50%);
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(4, 63, 57, 0.8);
  transform: translateX(-50%);
  pointer-events: none;
}

/* CONTENEUR DES VIDÉOS */
.videos-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 30px; /* espacement léger */
  z-index: 5;
}

.video-wrapper {
  width: 270px;   /* format vertical 9:16 */
  height: 480px;
  position: relative;
  overflow: hidden;
}

.video-wrapper iframe {
  pointer-events: none;
  object-fit: cover !important;
  pointer-events: none;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  aspect-ratio: 9 / 16;
}

/* MASQUE TYPE BANDES */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,1) 0px,      /* début bande opaque */
    rgba(255,255,255,1) 8px,      /* fin bande opaque */
    rgba(255,255,255,0) 30px,     /* fin dégradé de la bande */
    rgba(255,255,255,0) 60px      /* fin espace transparent */
  );
  animation: slideMask 40s linear infinite;
}

@keyframes slideMask {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-5%);
  }
}

/* ICONES RÉSEAUX (placeholder pour l’instant) */
.socials {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
}

.socials .icon {
  text-decoration: none;
  font-size: 14px;
  color: black;
}

.socials .icon img {
  width: 28px;
  height: 28px;
 background: rgb(255, 255, 255); /* léger fond gris pour voir l’image */
  padding: 4px;
  border-radius: 4px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .videos-container {
    flex-direction: column;
    gap: 20px;
    transform: translate(-50%, -45%);
  }

  .video-wrapper {
    width: 60vw;
    height: calc(60vw * 16 / 9);
  }
}

/* Bouton retour */
.back-button {
  position: absolute;
  top: 40px;
  left: 40px;
  font-size: 30px;
  color: rgb(214, 235, 242);
  text-decoration: none;
  transition: opacity 0.3s;
}
.back-button:hover {
  opacity: 0.6;
}

/* ===================================================== RESPONSIVE ===================================================== */
@media (max-width: 900px) {
 .projects-page {
   flex-direction: column;
   padding: 80px 20px;
   gap: 24px;
   height: auto;
 }


 .projects-left {
   max-width: 100%;
 }


 .projects-photos {
   width: 100%;
   height: auto;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 16px;
   overflow: visible;
 }


 .projects-photos a {
   width: 100%;
   height: auto;
   aspect-ratio: 1/1;
 }


 .socials {
   flex-direction: row;
   bottom: 20px;
   top: auto;
   left: 50%;
   transform: translateX(-50%);
 }


 .socials img {
   width: 24px;
   height: 24px;
 }
}


/* ---------- Révélation : éléments invisibles par défaut ---------- */
/* Texte caché */
.reveal-item {
 color: transparent;
 transition: color 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}


/* Images cachées (si l'élément est une image directement .reveal-item) */
.reveal-item img,      
.reveal-item[type="img"], 
.reveal-item {
 /* on ne touche pas ici */
}


/* ✅ Solution propre : on cible UNIQUEMENT les images avec la classe reveal-item */
img.reveal-item {
 opacity: 0;
 filter: brightness(0);
 transition: opacity 0.18s ease, filter 0.18s ease;
}


/* Quand révélé */
.reveal-item.revealed {
 color: rgba(64,224,208,0.95);
}


/* ✅ Et pour les images révélées : */
img.reveal-item.revealed {
 opacity: 1;
 filter: brightness(1);
}


/* rangée centrée sous les vidéos */
.reveal-row {
 display: flex;
 justify-content: center;
 gap: 80px;
 margin-top: 60px;
 z-index: 12; /* devant les vidéos mais sous la lampe (qui est z-index 9999) */
 position: relative;
}


/* Lampe turquoise translucide (overlay) */
#lampe {
 position: fixed;
 width: 240px;
 height: 240px;
 border-radius: 50%;
 pointer-events: none;
 background: radial-gradient(circle, rgba(64,224,208,0.55) 0%, rgba(64,224,208,0.25) 30%, rgba(64,224,208,0.0) 55%);
 mix-blend-mode: screen;
 transform: translate(-50%, -50%);
 z-index: 9999;
}


/* Optionnel : style visible pour texte quand révélé (turquoise) */
.reveal-item.revealed {
 color: rgba(64,224,208,0.95);
}
.reveal-item.revealed img {
 filter: brightness(1) opacity(1);
}


/* =============================
   RESPONSIVE MENU (mobile)
============================= */
@media (max-width: 768px) {

  /* Déplacement + réduction du menu gauche/droite */
  .left-block,
  .right-block {
    position: relative;
    top: 20px;
    left: 0;
    right: 0;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    gap: 12px;
  }

  /* Texte du menu plus petit et horizontal */
  .vertical-bio p,
  .vertical-info p {
    font-size: 16px;
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
  }

  /* Effet ligne toujours centré */
  .vertical-bio p::after,
  .vertical-info p::after {
    height: 100%;
    left: 50%;
  }

  /* Logo / liens de header plus petits */
  .header a {
    font-size: 32px;
  }
}