/* ============================================
   HERO MASONRY — CSS pour reproduire la maquette
   ============================================ */

/* Wrapper principal */
.hero-masonry-wrapper {
  position: relative;
  width: 100%;
  height: 100vh; /* ajustez selon vos besoins */
  overflow: hidden;
}

/* Grille masonry en fond */
.masonry-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 4px;
  width: 100%;
  height: 100%;
}

/* Placement de chaque item selon la maquette */
.grid-item {
  position: relative;
  overflow: hidden;
}

/* Image 1 — grande cellule gauche, span 2 lignes */
.item-1 {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* Image 2 — bas gauche */
.item-2 {
  grid-column: 1 / 3;  /* ← couvre col 1 ET col 2 en bas */
  grid-row: 3;
}

/* Image 3 — milieu centre */
.item-3 {
  grid-column: 2;
  grid-row: 2;
}

/* Image 4 — haut centre */
.item-4 {
  grid-column: 2;
  grid-row: 1;
}

/* Image 5 — haut droite large */
.item-5 {
  grid-column: 3 / 5;
  grid-row: 1;
}

/* Image 6 — milieu col 3 */
.item-6 {
  grid-column: 3;
  grid-row: 2;
}

/* Image 7 — bas col 3 */
.item-7 {
  grid-column: 3;
  grid-row: 3;
}

/* Image 8 — droite, span 2 lignes bas */
.item-8 {
  grid-column: 4;
  grid-row: 2 / 4;
}

/* Images et vidéos MP4 remplissent leur cellule */
.grid-item img,
.grid-item video {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* YouTube iframe : zoom + centrage pour couvrir la cellule sans bandes noires */
.grid-item iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Ratio 16/9 : largeur = hauteur * 16/9, on surdimensionne pour couvrir */
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* empêche les clics sur l'iframe */
  border: 0;
}

/* Overlay sombre sur chaque image (optionnel, effet grille) */
.item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease;
}

.grid-item:hover .item-overlay {
  background: rgba(0, 0, 0, 0.05);
}

/* Overlay global sombre sur toute la grille */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* Contenu texte par-dessus */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 60px 0 16%;
  color: #fff;
}

.hero-content h1,
.hero-content h2 {
  font-family: "Godger", Sans-serif;
  font-size: 135px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  /*letter-spacing: 3px;*/
  margin: 0 0 20px;
  color: #ffffff;
}

.hero-content h1 span  {
    color: #ff5a00;

}
/* Mot(s) en orange comme dans la maquette */
.hero-content .highlight {
  color: #ff6b1a;
}

.hero-content p {
  font-size: 18px;
  max-width: 600px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ============================================
   MOBILE MASONRY — STYLE DECKS
   ============================================ */
@media (max-width: 767px) {

  .masonry-grid {

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 2px;

   /* grid-auto-rows: 120px;*/

    grid-auto-flow: dense;

    height: auto !important;
	
	margin-top: 50px;
  }

  /* RESET DESKTOP */
  .item-1,
  .item-2,
  .item-3,
  .item-4,
  .item-5,
  .item-6,
  .item-7,
  .item-8 {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* =====================================
     TON LAYOUT
     [1][3]
     [2 large]
     [4][6]
     [5 large]
     [7][8]
     ===================================== */

  /* ligne 1 */
  .item-1 {
    grid-column: 1;
  }

  .item-3 {
    grid-column: 2;
  }

  /* ligne 2 large */
  .item-2 {
    grid-column: 1 / 3 !important;
  }

  /* ligne 3 */
  .item-4 {
    grid-column: 1;
  }

  .item-6 {
    grid-column: 2;
  }

  /* ligne 4 large */
  .item-5 {
    grid-column: 1 / 3 !important;
  }

  /* ligne 5 */
  .item-7 {
    grid-column: 1;
  }

  .item-8 {
    grid-column: 2;
  }

  /* tailles */
  .item-2,
.item-5 {
  grid-column: 1 / 3 !important;

  height: 120px !important;
  min-height: 120px !important;
}
.grid-item {
  height: 100%;
}.item-2,
.item-5 {
  aspect-ratio: 16/5;
}
  .item-1,
  .item-3,
  .item-4,
  .item-6,
  .item-7,
  .item-8 {
    min-height: 120px;
  }

  /* médias */
  .grid-item img,
  .grid-item video,
  .grid-item iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* iframe youtube */
  .grid-item iframe {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 220%;
    height: 120%;

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

}