/* =========================================================
   RÉALISATIONS — CSS COMPLET
   Objectifs :
   - Hero plein largeur (edge-to-edge) comme le Blog
   - Hauteur du hero + position du texte proches du Blog
   - Titre (H1) plus petit
   - Styles minimum pour les blocs ACF (images / grilles)
   ========================================================= */

/* ========= HERO (plein largeur) ========= */
.rp-realisations-page .rp-hero{
  /* Plein largeur même si le thème utilise un container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Décalage header transparent : variable injectée par le JS du single.php */
  padding-top: var(--rp-header-offset, 0px);

  /* Hauteur proche du hero Blog */
  min-height: 440px;

  position: relative;
  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;         /* centré verticalement comme le Blog */
  justify-content: center;
}

.rp-realisations-page .rp-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45); /* overlay proche */
}

.rp-realisations-page .rp-hero__inner{
  position: relative;
  z-index: 2;

  max-width: 1140px;
  margin: 0 auto;

  text-align: center;

  /* espace comme le Blog */
  padding: 28px 16px;
}

/* Texte du hero ("Réalisations") */
.rp-realisations-page .rp-hero__kicker{
  margin: 0 0 10px;
  color: #fff;

  /* Taille proche du Blog (pas énorme) */
  font-size: 42px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Breadcrumb */
.rp-realisations-page .rp-hero__breadcrumbs{
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 15px;
}
.rp-realisations-page .rp-hero__breadcrumbs a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.rp-realisations-page .rp-hero__breadcrumbs a:hover{
  text-decoration: underline;
}

/* ========= ARTICLE (titre + contenu) ========= */
.rp-realisations-page .rp-article{
  background: #fff;
}

/* Zone titre H1 sous le hero (comme un article) */
.rp-realisations-page .rp-entry-header{
  max-width: 1140px;
  margin: 0 auto;
  padding: 44px 16px 0;
  text-align: center;
}

/* H1 plus petit (avant c'était trop grand) */
.rp-realisations-page .rp-entry-title{
  margin: 0;

  /* Ajusté : plus petit + responsive */
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* Contenu */
.rp-realisations-page .rp-entry-content{
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px 16px 64px;
}

/* ========= ACF (minimum nécessaire, sans casser la typo du thème) ========= */
.rp-realisations-page .rp-realisations{
  margin-top: 16px;
}

.rp-realisations-page .rp-realisations .rp-row{
  padding: 0;
  margin-top: 18px;
}

.rp-realisations-page .rp-realisations img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* Grille d’images */
.rp-realisations-page .rp-realisations .rp-gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rp-realisations-page .rp-realisations .rp-gallery-item img{
  width: 100%;
}

/* Avant / Après */
.rp-realisations-page .rp-realisations .rp-beaf-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Liste de posts (si utilisée) */
.rp-realisations-page .rp-realisations .rp-post-list{
  margin: 10px 0 0;
  padding-left: 18px;
}

/* ========= RESPONSIVE ========= */
@media (max-width: 980px){
  .rp-realisations-page .rp-hero{
    min-height: 380px;
  }
  .rp-realisations-page .rp-hero__kicker{
    font-size: 34px;
  }
  .rp-realisations-page .rp-entry-title{
    font-size: clamp(26px, 4vw, 38px);
  }
  .rp-realisations-page .rp-realisations .rp-gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rp-realisations-page .rp-realisations .rp-beaf-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px){
  .rp-realisations-page .rp-hero{
    min-height: 320px;
  }
  .rp-realisations-page .rp-hero__kicker{
    font-size: 28px;
  }
  .rp-realisations-page .rp-entry-header{
    padding-top: 34px;
  }
  .rp-realisations-page .rp-realisations .rp-gallery-grid{
    grid-template-columns: 1fr;
  }
}