/* Header Gallery Styles - Intégré au design existant */

/* Variables personnalisées pour le header */
:root {
  --container-width: 1600px;
  --gap: clamp(10px, 7.35vw, 80px);
  --gutter: 2rem;
  --power-1-out: linear(
    0 0%,
    0.0027 3.64%,
    0.0106 7.29%,
    0.0425 14.58%,
    0.0957 21.87%,
    0.1701 29.16%,
    0.2477 35.19%,
    0.3401 41.23%,
    0.5982 55.18%,
    0.7044 61.56%,
    0.7987 68.28%,
    0.875 75%,
    0.9297 81.25%,
    0.9687 87.5%,
    0.9922 93.75%,
    1 100%
  );
  --power-2-out: linear(
    0 0%,
    0.0036 9.62%,
    0.0185 16.66%,
    0.0489 23.03%,
    0.0962 28.86%,
    0.1705 34.93%,
    0.269 40.66%,
    0.3867 45.89%,
    0.5833 52.95%,
    0.683 57.05%,
    0.7829 62.14%,
    0.8621 67.46%,
    0.8991 70.68%,
    0.9299 74.03%,
    0.9545 77.52%,
    0.9735 81.21%,
    0.9865 85%,
    0.9949 89.15%,
    1 100%
  );
  --power-3-out: linear(
    0 0%,
    0.0029 13.8%,
    0.0184 21.9%,
    0.0339 25.51%,
    0.0551 28.81%,
    0.0827 31.88%,
    0.1168 34.76%,
    0.1962 39.57%,
    0.3005 44.02%,
    0.4084 47.53%,
    0.6242 53.45%,
    0.7493 57.93%,
    0.8495 62.97%,
    0.8888 65.67%,
    0.9213 68.51%,
    0.9629 73.9%,
    0.9876 80.16%,
    0.998 87.5%,
    1 100%
  );
  --power-4-out: linear(
    0 0%,
    0.0012 14.95%,
    0.0089 22.36%,
    0.0297 28.43%,
    0.0668 33.43%,
    0.0979 36.08%,
    0.1363 38.55%,
    0.2373 43.07%,
    0.3675 47.01%,
    0.5984 52.15%,
    0.7121 55.23%,
    0.8192 59.21%,
    0.898 63.62%,
    0.9297 66.23%,
    0.9546 69.06%,
    0.9733 72.17%,
    0.9864 75.67%,
    0.9982 83.73%,
    1 100%
  );
  --sine: linear(
    0 0%,
    0.2861 18.47%,
    0.4829 32.08%,
    0.6437 44.52%,
    0.7712 56.07%,
    0.8722 67.47%,
    0.9115 73.02%,
    0.9434 78.49%,
    0.9682 83.91%,
    0.9859 89.3%,
    0.9965 94.66%,
    1 100%
  );
}

@media (max-width: 600px) {
  :root {
    --gutter: 1rem;
  }
}

/* Styles pour le nouveau header */
.header-gallery {
  position: relative;
  /* La hauteur totale sera définie par le contenu et le pinSpacing de GSAP */
}

/* Override le padding-top excessif dans ce contexte spécifique */
.header-gallery .padding-top.padding-custom3 {
  padding-top: 1.5rem !important; /* Réduit de 4rem à 1.5rem */
}

/* Le bloc titre est maintenant un bloc normal */
.header-gallery .header_component {
  position: relative;
  z-index: 10;
  padding-bottom: 1rem; /* Réduit encore de 2rem à 1rem */
  height: auto !important; /* Override la hauteur de 250vh */
}

/* Conteneur de l'animation, prêt à être épinglé */
.header-gallery .gallery-content {
  position: relative;
  width: 100vw;
  height: auto; /* Changé de 100vh à auto */
  min-height: 80vh; /* Augmenté de 50vh à 80vh pour plus d'espace pour la galerie */
  overflow: visible;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1rem; /* Réduit de 2rem à 1rem */
}

/* Image héro initiale (sera créée par JS) */
.hero-image-animation {
  z-index: 5;
}

/* Titre de la galerie */
.gallery-title {
  position: absolute;
  top: 20vh; /* Positionné au-dessus de la galerie */
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--neutral-color-900, #1a1a1a);
  text-align: center;
  margin: 0;
  width: 65vw;
  opacity: 0; /* Commence invisible, GSAP la révèlera */
  z-index: 10;
}

/* La grille d'images, positionnée plus bas pour l'animation finale */
.gallery-grid {
  position: absolute;
  top: 40vh; /* Changé de 50% à 40vh pour centrer sur l'écran */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 91vw; /* Changé de 90% à 100vw pour prendre toute la largeur */
  max-width: none; /* Supprimé la limite de largeur maximale */
  height: auto; /* Changé de 100% à auto */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
  padding: 0.5rem; /* Réduit de 1rem à 0.5rem pour plus d'espace pour les images */
  opacity: 0; /* Commence invisible, GSAP la révèlera */
}

/* Styles des layers (inchangés) */
.gallery-grid > .layer {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.gallery-grid > .layer:nth-of-type(1) div:nth-of-type(odd) { grid-column: 1; }
.gallery-grid > .layer:nth-of-type(1) div:nth-of-type(even) { grid-column: -2; }
.gallery-grid > .layer:nth-of-type(2) div:nth-of-type(odd) { grid-column: 2; }
.gallery-grid > .layer:nth-of-type(2) div:nth-of-type(even) { grid-column: -3; }
.gallery-grid > .layer:nth-of-type(3) div { grid-column: 3; }
.gallery-grid > .layer:nth-of-type(3) div:last-of-type { grid-row: -1; }

/* Image principale (scaler) - son conteneur est dans la grille */
.gallery-grid .scaler {
  position: relative;
  grid-area: 2 / 3;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* Image principale (scaler) - son image est positionnée pour l'animation */
.gallery-grid .scaler img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  aspect-ratio: 16 / 9;
}

/* Les animations sont maintenant gérées par GSAP */

/* Assurer que le header s'intègre bien avec la navbar existante */
.navbar_component + .header-gallery {
  margin-top: 0;
}

/* Styles pour le logo Le Laptop */
.navbar_logo {
  height: 40px; /* Taille appropriée pour la navbar */
  width: auto;
  max-width: 200px;
  object-fit: contain;
}


/* Si la navbar a une classe spécifique pour les fonds sombres */
.navbar_component.dark .navbar_logo,
.navbar_component.is-dark .navbar_logo {
  filter: brightness(0) invert(1);
}

/* Styles pour les images des experts - format portrait proche du carré */
.layout_image-wrapper {
  aspect-ratio: 4/5; /* Format portrait proche du carré */
  overflow: hidden;
}

.layout_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* Privilégie le haut de l'image (visage) */
}