/* ========================================
   Page DÉTAIL PROJET
   ======================================== */
/*.projet-parallax-image {
  bottom: -100px !important;}*/

 .cta-button {
    grid-column: 3 / span 9 !important;
}
/* ========================================
   Hero - image de fond plein cadre
   ======================================== */

.hero-projet-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Responsive hero via <picture> (remplace background-image inline) */
.hero-projet-cover picture.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-projet-cover picture.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.projet-details-all {
    background-color: var(--color-white);
}

/* Pas de contenu texte dans le hero, on vide le padding bas hérité */
.hero-projet-cover .hero-projets-content {
  display: none;
}

.projet-images-container .projet-main-image {
    cursor:inherit
}


/* ========================================
   Section suivante - scroll over hero
   ======================================== */

.section-projet-detail {
  position: relative;
  z-index: 600;
  background-color: var(--color-white);
  width: 100%;
  padding: 75px 0;
}

/* En-tête déplacé depuis le hero */
.projet-detail-entete {
  grid-column: 3 / span 5;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.projet-detail-entete h1 {
  color: var(--color-sapin);
}

.section-projet-detail .section-grid h2 {
  grid-column: 2 / span 10;
}

/* ========================================
   Bloc brief : images gauche + texte droite
   ======================================== */

.projet-brief-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  padding-top: 80px;
}

.projet-brief-images {
  grid-column: 2 / span 5;
}

.projet-brief-images-1 {
    position: absolute;
    width: 35%;
    right: -60px;
    left: auto;
    bottom: -200px;
    height: auto;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    z-index: 2;
}


.projet-brief-texte {
  grid-column: 8 / span 4;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ========================================
   Section démarche créative
   ======================================== */

.section-projet-demarche {
  position: relative;
  z-index: 500;
  width: 100%;
  padding: 150px 0;
  background-color: var(--color-white);
}

.section-projet-demarche .section-grid {
  align-items: center;
}

/* Texte démarche - gauche */
.projet-demarche-texte {
  grid-column: 3 / span 4;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Images démarche - droite */
.projet-demarche-images {
  grid-column: 7 / span 5;
}

/* Miroir du parallax pour les blocs à droite :
   l'image secondaire sort à droite au lieu de gauche */
.projet-parallax-image--right {
  left: auto !important;
  right: -60px;
  width: 35%;
}

/* ========================================
   Image pleine largeur supplémentaire
   ======================================== */

.section-projet-image-full {
  position: relative;
  z-index: 490;
  width: 100%;
  padding: 150px 0 0 0;
}

.projet-image-full-wrapper {
  grid-column: 3 / span 6;
  border-radius: 0 0 0 20px;
  overflow: hidden;
}

.projet-image-full-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.projet-video-embed {
  position: relative;
  padding-bottom: 56.25%; /* ratio 16:9 */
  height: 0;
  overflow: hidden;
}

.projet-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ========================================
   Section vous aimerez aussi
   ======================================== */

.section-projets-similaires {
  position: relative;
  z-index: 500;
  background-color: var(--color-creme);
  width: 100%;
  padding: 80px 0;
}

.projets-similaires-titre {
  grid-column: 3 / span 8;
  margin-bottom: 2.5rem;
}

.projets-similaires-liste {
  grid-column: 3 / span 8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.projet-similaire-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-charbon);
  cursor: pointer;
}

.projet-similaire-img-wrapper {
  overflow: hidden;
  border-radius: 0 0 0 10px;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.projet-similaire-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.projet-similaire-card:hover .projet-similaire-img-wrapper img {
  transform: scale(1.05);
}

.projet-similaire-card:hover h5 {
  color: var(--color-corail);
  transition: 0.4s ease;
}

.projet-similaire-card h5 {
  color: var(--color-charbon);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  padding-top: 15px;
  text-transform: lowercase;
  
}

.projet-similaire-card p {
  color: var(--color-charbon-light-2);
  font-size: 0.9rem;
  font-weight: 400;
  margin: 0;
}

.projets-similaires-cta {
  grid-column:3 / span 8;
  display: flex;
  justify-content: flex-end;
  margin-top: 2.5rem;
}

.projets-similaires-cta .cta-button {
  grid-column: unset;
  margin-top: 0;
}

/* ========================================
   Responsive
   ======================================== */

/* ── Laptop 1024–1279px ── */

@media (max-width: 1279px) {
  .projet-detail-entete   { grid-column: 2 / span 7; }
  .projet-brief-images    { grid-column: 2 / span 5; }
  .projet-brief-texte     { grid-column: 8 / span 4; }
  .projet-demarche-texte  { grid-column: 2 / span 4; }
  .projet-demarche-images { grid-column: 7 / span 5; }
  .projet-image-full-wrapper    { grid-column: 2 / span 8; }
  .projets-similaires-titre     { grid-column: 2 / span 10; }
  .projets-similaires-liste     { grid-column: 2 / span 10; }
  .projets-similaires-cta       { grid-column: 2 / span 10; }
}

/* ── Tablet 768–1023px ── */

@media (max-width: 1023px) {
  .projet-detail-entete { grid-column: 2 / span 10; }

  .projet-brief-images,
  .projet-brief-texte {
    grid-column: 2 / span 10;
  }

  .section-projet-demarche .section-grid {
    gap: 2rem;
}

.section-projet-demarche {
  padding: 0 0 75px 0;
}
  .projet-brief-images { margin-bottom: 2rem; }
  
  .projet-brief-images-1 {
    width: 40% !important;
  }

  .projet-demarche-texte  { grid-column: 2 / span 10; order: 2; }
  .projet-demarche-images { grid-column: 2 / span 9; order: 1; }

  .projet-parallax-image--right { right: -100px; bottom: -50px !important;}

  .projet-image-full-wrapper  { grid-column: 2 / span 10; }
  .projets-similaires-titre   { grid-column: 2 / span 10; }
  .projets-similaires-liste   { grid-column: 2 / span 10; }
  .projets-similaires-cta     { grid-column: 2 / span 10; }
}

/* ── Mobile 480–767px ── */

@media (max-width: 767px) {
  .section-projet-detail { padding: 50px 0; }

  .projet-detail-entete {
    grid-column: 2 / span 10;
    margin-bottom: 2rem;
  }

  .projet-brief-row {
    padding-top: 50px;
    row-gap: 2rem;
  }

  .projet-brief-images {
    grid-column: 2 / span 10;
    margin-bottom: 0;
  }

  /* Masquer l'image secondaire parallax (débordante) sur mobile */
  .projet-brief-images-1 { display: none; }

  .projet-brief-texte {
    grid-column: 2 / span 10;
  }

  .section-projet-demarche { padding: 50px 0; }

  .projet-demarche-texte {
    grid-column: 2 / span 10;
    order: 2;
  }

  .projet-demarche-images {
    grid-column: 2 / span 10;
    order: 1;
    margin-bottom: 2rem;
  }

  .projet-parallax-image     { display: none; }
  .projet-parallax-image--right { display: none; }

  .section-projet-image-full { padding: 50px 0 80px; }

  .projet-image-full-wrapper { grid-column: 2 / span 10; }

  .section-projet-detail .section-grid h2 { grid-column: 2 / span 10; }

  /* Section projets similaires */
  .section-projets-similaires { padding: 60px 0; }

  .projets-similaires-titre {
    grid-column: 2 / span 10;
    margin-bottom: 1.5rem;
  }

  .projets-similaires-liste {
    grid-column: 2 / span 10;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .projets-similaires-cta {
    grid-column: 2 / span 10;
    display: flex;
    justify-content: center;
  }
}

/* ── Mobile XS < 480px ── */

@media (max-width: 479px) {
  .projet-detail-entete   { grid-column: 2 / span 10; }
  .projet-brief-images    { grid-column: 2 / span 10; }
  .projet-brief-texte     { grid-column: 2 / span 10; }
  .projet-image-full-wrapper { grid-column: 2 / span 10; }

  .projets-similaires-liste {
    grid-template-columns: 1fr;
    grid-column: 2 / span 10;
  }

  .projets-similaires-titre,
  .projets-similaires-cta {
    grid-column: 2 / span 10;
  }
}