/* ==========================================================================
   PCR Énergie — SINGLE RÉALISATION (single-realisations.php)
   Fichier : assets/css/single-realisations.css
   Dépend : variables.css + main.css + carousel.css (si tu le charges globalement)
   Objectifs :
   - Reprendre EXACTEMENT le HERO des pages (pcr-pageHero)
   - Ajouter : meta hero + galerie réalisation en CAROUSEL universel
   ========================================================================== */

/* =========================================================
   WRAPPER
   ========================================================= */
.pcr-real-single{
  width: 100%;
}

/* =========================================================
   HERO (identique page.css)
   ========================================================= */
.pcr-real-single .pcr-pageHero{
  position: relative;
  overflow: hidden;
  background: var(--pcr-color-surface);
  border-bottom: 1px solid var(--pcr-color-border);

  min-height: clamp(220px, 30svh, 380px);

  display: flex;
  align-items: center;

  padding: clamp(26px, 4vw, 54px) 0;
}

/* Fallback si svh non supporté */
@supports not (height: 100svh){
  .pcr-real-single .pcr-pageHero{ min-height: clamp(220px, 30vh, 380px); }
}

/* Background image via variable inline */
.pcr-real-single .pcr-pageHero.has-hero-img::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--pcr-page-hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
  opacity: .95;
}

/* Fallback gradient si pas d’image */
.pcr-real-single .pcr-pageHero.no-hero-img::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(64,196,255,.16), transparent 46%),
    radial-gradient(circle at 82% 18%, rgba(255,59,48,.10), transparent 52%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.16));
}

/* Overlay constant */
.pcr-real-single .pcr-pageHero::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 18% 12%, rgba(0,0,0,.10), rgba(0,0,0,.48)),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.46));
  pointer-events: none;
}

/* =========================================================
   HERO — INNER (centrage garanti 1200px max)
   ========================================================= */
.pcr-real-single .pcr-pageHero__inner{
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--pcr-container-max);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--pcr-container-pad);
  padding-right: var(--pcr-container-pad);
}

/* =========================================================
   YOAST BREADCRUMBS (au-dessus du titre)
   ========================================================= */
.pcr-real-single .pcr-breadcrumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin: 0 0 var(--pcr-space-3);
  padding: 0;

  font-size: var(--pcr-text-sm);
  color: color-mix(in srgb, var(--pcr-color-text) 72%, transparent);
}

.pcr-real-single .pcr-breadcrumbs a{
  color: inherit;
  text-decoration: none;
}

.pcr-real-single .pcr-breadcrumbs a:hover{
  color: var(--pcr-link-hover);
  text-decoration: underline;
}

.pcr-real-single .pcr-breadcrumbs span,
.pcr-real-single .pcr-breadcrumbs strong{
  color: inherit;
  font-weight: var(--pcr-weight-medium);
}

.pcr-real-single .pcr-breadcrumbs .breadcrumb_last{
  font-weight: var(--pcr-weight-semibold);
  color: color-mix(in srgb, var(--pcr-color-text) 86%, transparent);
}

/* =========================================================
   TITRE + LEAD
   ========================================================= */
.pcr-real-single .pcr-pageHero__title{
  margin: 0;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.pcr-real-single .pcr-pageHero__lead{
  margin: var(--pcr-space-4) 0 0;
  max-width: 70ch;
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(232,237,246,.86);
}

html[data-theme="light"] .pcr-real-single .pcr-pageHero__lead{
  color: rgba(17,24,39,.78);
}

/* =========================================================
   META (Type • CP Ville) spécifique Réalisation
   - Ton template met: <p class="pcr-pageHero__meta">...</p>
   ========================================================= */
.pcr-real-single .pcr-pageHero__meta{
  margin: var(--pcr-space-3) 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;

  font-size: var(--pcr-text-sm);
  color: color-mix(in srgb, rgba(232,237,246,.92) 78%, transparent);
}

html[data-theme="light"] .pcr-real-single .pcr-pageHero__meta{
  color: rgba(17,24,39,.70);
}

/* Option : petit “pill” si tu ajoutes des spans plus tard */
.pcr-real-single .pcr-pageHero__meta .pcr-pill{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}

/* =========================================================
   BODY (identique page.css)
   ========================================================= */
.pcr-real-single .pcr-pageBody{
  padding: var(--pcr-space-8) 0;
}

.pcr-real-single .pcr-pageBody__inner{
  width: 100%;
  max-width: var(--pcr-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pcr-container-pad);
  padding-right: var(--pcr-container-pad);
}

.pcr-real-single .pcr-pageBody__article{
  min-width: 0;
}

.pcr-real-single .pcr-pageBody__content{
  max-width: 76ch;
}

.pcr-real-single .pcr-pageBody__content > *:last-child{
  margin-bottom: 0;
}

.pcr-real-single .pcr-pageBody__pagination{
  margin-top: var(--pcr-space-6);
  padding-top: var(--pcr-space-4);
  border-top: 1px solid var(--pcr-color-divider);
}

/* =========================================================
   GALERIE RÉALISATION — CAROUSEL (spécifique)
   - Le template doit utiliser:
     <section class="pcr-carousel pcr-real-galleryCarousel" ...>
       ...
   - Objectif: galerie clean, images "cover", hauteur stable, responsive
   ========================================================= */

/* Espace avant le contenu */
.pcr-real-galleryCarousel{
  margin: 0 0 var(--pcr-space-7);
}

/* Track gap cohérent (si data-gap absent => 16px par défaut via carousel.css) */
.pcr-real-galleryCarousel{
  --pcr-car-gap: clamp(10px, 1.6vw, 16px);
}

/* Items: cartes photo */
.pcr-real-galleryCarousel .pcr-carousel__item{
  border-radius: var(--pcr-radius-md);
  overflow: hidden;
  border: 1px solid var(--pcr-color-border);
  background: color-mix(in srgb, var(--pcr-color-surface) 85%, transparent);
}

/* Images en mode cover avec hauteur stable */
.pcr-real-galleryCarousel .pcr-carousel__item img{
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
}

/* Dots un peu plus espacés sur galerie */
.pcr-real-galleryCarousel .pcr-carousel__dots{
  margin-top: var(--pcr-space-5);
}

/* Flèches: un peu plus visibles sur photos */
.pcr-real-galleryCarousel .pcr-carousel__btn{
  border-color: color-mix(in srgb, var(--pcr-color-border) 70%, #fff 30%);
  background: color-mix(in srgb, var(--pcr-color-surface) 78%, rgba(0,0,0,.22));
}

/* =========================================================
   Responsive (hérité page.css)
   ========================================================= */
@media (max-width: 768px){
  .pcr-real-single .pcr-pageHero{
    min-height: clamp(200px, 28svh, 320px);
  }
  .pcr-real-galleryCarousel .pcr-carousel__item img{
    height: clamp(200px, 56vw, 360px);
  }
}

@supports not (height: 100svh){
  @media (max-width: 768px){
    .pcr-real-single .pcr-pageHero{ min-height: clamp(200px, 28vh, 320px); }
  }
}

@media (max-width: 640px){
  .pcr-real-single .pcr-pageBody{
    padding: var(--pcr-space-7) 0;
  }
  .pcr-real-single .pcr-pageBody__content{
    max-width: none;
  }
  .pcr-real-galleryCarousel .pcr-carousel__item img{
    height: clamp(190px, 66vw, 320px);
  }
}


/* =========================================================
   META BADGES — RÉALISATION (HERO)
   ========================================================= */
.pcr-real-single .pcr-pageHero__meta .pcr-pill{
  display: inline-flex;
  align-items: center;
  gap: var(--pcr-space-2);

  padding: var(--pcr-space-2) var(--pcr-space-3);
  border-radius: var(--pcr-radius-sm);

  font-family: var(--pcr-font-body);
  font-size: var(--pcr-text-sm);
  font-weight: var(--pcr-weight-medium);
  line-height: 1;

  color: var(--pcr-color-text);

  background: color-mix(
    in srgb,
    var(--pcr-color-surface) 78%,
    transparent
  );

  border: var(--pcr-border-width) solid
    color-mix(
      in srgb,
      var(--pcr-color-border) 70%,
      transparent
    );

  backdrop-filter: blur(6px);
  box-shadow: var(--pcr-shadow-sm);

  white-space: nowrap;
}

/* Hover subtil (desktop uniquement) */
@media (hover:hover){
  .pcr-real-single .pcr-pageHero__meta .pcr-pill:hover{
    background: color-mix(
      in srgb,
      var(--pcr-color-surface-2) 82%,
      transparent
    );
    border-color: color-mix(
      in srgb,
      var(--pcr-color-border) 85%,
      transparent
    );
  }
}

/* =========================================================
   LIGHT MODE (tokens only)
   ========================================================= */
html[data-theme="light"]
.pcr-real-single .pcr-pageHero__meta .pcr-pill{
  color: var(--pcr-color-text);

  background: color-mix(
    in srgb,
    var(--pcr-color-surface-2) 70%,
    transparent
  );

  border-color: var(--pcr-color-border);
  box-shadow: none;
}


/* =========================================================
   GALERIE RÉALISATION — CAROUSEL PAYSAGE DESKTOP
   Objectif:
   - Desktop: 3 vignettes visibles (paysage)
   - Tablet: 2 vignettes visibles
   - Mobile: 1 vignette visible (plein)
   ========================================================= */

/* 0) Assure que le carousel ne s'étire pas en full-bleed */
.pcr-real-galleryCarousel{
  width: 100%;
  max-width: var(--pcr-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pcr-container-pad);
  padding-right: var(--pcr-container-pad);
}

/* 1) Largeur des items (le point clé pour voir plusieurs slides) */
.pcr-real-galleryCarousel .pcr-carousel__item{
  /* fallback si carousel.css n'a pas de flex-basis défini */
  flex: 0 0 calc((100% - (2 * var(--pcr-car-gap))) / 3); /* 3 visibles */
}

/* 2) Image: ratio paysage stable + cover */
.pcr-real-galleryCarousel .pcr-carousel__item img{
  width: 100%;
  height: auto;                 /* important: on stoppe les hauteurs clamp */
  aspect-ratio: 16 / 9;         /* paysage */
  object-fit: cover;
  display: block;
}

/* 3) Tablet: 2 visibles */
@media (max-width: 980px){
  .pcr-real-galleryCarousel .pcr-carousel__item{
    flex-basis: calc((100% - (1 * var(--pcr-car-gap))) / 2);
  }
}

/* 4) Mobile: 1 visible */
@media (max-width: 640px){
  .pcr-real-galleryCarousel{
    padding-left: max(var(--pcr-container-pad), env(safe-area-inset-left));
    padding-right: max(var(--pcr-container-pad), env(safe-area-inset-right));
  }
  .pcr-real-galleryCarousel .pcr-carousel__item{
    flex-basis: 100%;
  }
  .pcr-real-galleryCarousel .pcr-carousel__item img{
    aspect-ratio: 4 / 3; /* un peu plus haut sur mobile (optionnel) */
  }
}