/* ==========================================================================
   PCR Énergie — ARCHIVE RÉALISATIONS (PRO) — FULL TOKENS
   Fichier : assets/css/archive-realisations.css
   Dépend : variables.css + main.css
   Objectifs :
   - Hero pro
   - Toolbar + chips
   - Offcanvas filtres (canvas)
   - Grille stable + gouttières
   - Infinite scroll state (spinner/status)
   - Cards pro (vignette paysage + badge)
   Notes :
   - “Branché au max” = usage massif des tokens (colors, spaces, radius, shadows, transitions)
   ========================================================================== */

/* =========================================================
   WRAPPER
   ========================================================= */
.pcr-realisations-archive{
  width: 100%;
}


/* lock scroll quand canvas ouvert */
html.pcr-noscroll,
body.pcr-noscroll{
  overflow: hidden !important;
}

/* =========================================================
   HERO
   ========================================================= */
.pcr-realisations-archive .pcr-hero.pcr-realsHero{
  position: relative;
  overflow: hidden;
  background: var(--pcr-color-surface);
  border-bottom: var(--pcr-border);

  min-height: clamp(220px, 30svh, 360px);
  display: flex;
  align-items: center;

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

@supports not (height: 100svh){
  .pcr-realisations-archive .pcr-hero.pcr-realsHero{
    min-height: clamp(220px, 30vh, 360px);
  }
}

/* Fond visuel léger (garde les rgba pour l’overlay fin, mais tokens pour les teintes marque) */
.pcr-realisations-archive .pcr-hero.pcr-realsHero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 22%, var(--pcr-color-primary-soft), transparent 48%),
    radial-gradient(circle at 82% 18%, var(--pcr-color-secondary-soft), transparent 52%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.24));
  opacity: .95;
}

.pcr-realisations-archive .pcr-hero.pcr-realsHero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 520px at 18% 12%, rgba(0,0,0,.10), rgba(0,0,0,.42)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.40));
  pointer-events:none;
}

.pcr-realisations-archive .pcr-realsHero__inner{
  position: relative;
  z-index: 1;
}

/* Titres */
.pcr-realisations-archive .pcr-title{
  margin: 0;
  font-family: var(--pcr-font-heading);
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--pcr-color-heading);
}

.pcr-realisations-archive .pcr-lead{
  margin: var(--pcr-space-4) 0 0;
  max-width: 70ch;
  font-family: var(--pcr-font-body);
  font-size: clamp(15px, 2vw, 18px);
  line-height: var(--pcr-leading-normal);
  color: color-mix(in srgb, var(--pcr-color-text) 82%, transparent);
}

/* Light mode : overlay plus soft */
html[data-theme="light"] .pcr-realisations-archive .pcr-hero.pcr-realsHero::before{
  background:
    radial-gradient(circle at 16% 22%, var(--pcr-color-primary-soft), transparent 52%),
    radial-gradient(circle at 82% 18%, var(--pcr-color-secondary-soft), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.65));
}
html[data-theme="light"] .pcr-realisations-archive .pcr-hero.pcr-realsHero::after{
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.20));
}

/* =========================================================
   TOOLBAR (Filtrer + chips)
   ========================================================= */
.pcr-realsTools{
  margin-top: var(--pcr-space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcr-space-3);
  align-items: center;
}

/* Bouton filtre (s’appuie sur tes classes boutons si présentes) */
.pcr-realsTools__filter{
  display: inline-flex;
  align-items: center;
  gap: var(--pcr-space-3);
  padding: var(--pcr-space-3) var(--pcr-space-4);
  border-radius: var(--pcr-radius-md);
}

/* Petit pictogramme “filtre” */
.pcr-realsTools__icon{
  width: 26px;
  height: 26px;
  border-radius: var(--pcr-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: color-mix(in srgb, var(--pcr-color-primary-soft) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--pcr-color-border) 70%, transparent);
  color: var(--pcr-color-text);
}

/* Chips wrap */
.pcr-realsChips{
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcr-space-3);
  align-items: center;
}

/* chip */
.pcr-chip{
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--pcr-color-border) 70%, transparent);
  background: color-mix(in srgb, var(--pcr-color-surface) 76%, transparent);
  color: var(--pcr-color-text);

  display: inline-flex;
  align-items: center;
  gap: var(--pcr-space-3);

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

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

  cursor: pointer;
  transition:
    transform var(--pcr-dur-fast) var(--pcr-ease),
    background var(--pcr-dur-fast) var(--pcr-ease),
    border-color var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-chip:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--pcr-color-border) 55%, var(--pcr-color-heading) 45%);
  background: color-mix(in srgb, var(--pcr-color-surface-2) 78%, transparent);
}

.pcr-chip:focus-visible{
  outline: none;
  box-shadow: var(--pcr-focus-ring);
}

.pcr-chip__k{ opacity: .78; }
.pcr-chip__v{ font-weight: var(--pcr-weight-semibold); }

/* Le petit X de la chip */
.pcr-chip__x{
  width: 22px;
  height: 22px;
  border-radius: var(--pcr-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: color-mix(in srgb, var(--pcr-color-surface-2) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--pcr-color-border) 70%, transparent);
  line-height: 1;
}

html[data-theme="light"] .pcr-chip__x{
  background: color-mix(in srgb, var(--pcr-color-surface-2) 70%, transparent);
  border-color: color-mix(in srgb, var(--pcr-color-border) 85%, transparent);
}

/* Chip “clear” */
.pcr-chip--clear{
  border-color: color-mix(in srgb, var(--pcr-color-secondary) 35%, var(--pcr-color-border));
  background: color-mix(in srgb, var(--pcr-color-secondary-soft) 70%, transparent);
}
.pcr-chip--clear:hover{
  border-color: color-mix(in srgb, var(--pcr-color-secondary) 55%, var(--pcr-color-border));
}

/* =========================================================
   SECTION / GRID
   ========================================================= */
.pcr-realisations-archive .pcr-section.pcr-realsSection{
  padding: var(--pcr-space-8) 0;
  overflow: hidden;
  width: 100%;
}


/* Force gouttières (safe-area inclus) */
.pcr-realisations-archive .pcr-wrap{
  padding-left: max(var(--pcr-container-pad), env(safe-area-inset-left));
  padding-right: max(var(--pcr-container-pad), env(safe-area-inset-right));
}

/* Grille */
.pcr-realsGrid{
  display: grid;
  gap: clamp(var(--pcr-space-4), 2vw, var(--pcr-space-6));
}

.pcr-realisations-archive .pcr-grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px){
  .pcr-realisations-archive .pcr-grid--3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .pcr-realisations-archive .pcr-section.pcr-realsSection{
    padding: var(--pcr-space-7) 0;
  }
  .pcr-realisations-archive .pcr-grid--3{
    grid-template-columns: 1fr;
  }
}

/* empty state */
.pcr-empty{
  grid-column: 1 / -1;
  border: 1px dashed var(--pcr-color-border);
  border-radius: var(--pcr-radius-lg);
  background: color-mix(in srgb, var(--pcr-color-surface) 82%, transparent);
  padding: clamp(var(--pcr-space-4), 3vw, var(--pcr-space-6));
  box-shadow: var(--pcr-shadow-sm);
}

.pcr-empty__t{
  margin: 0 0 var(--pcr-space-2);
  font-family: var(--pcr-font-heading);
  font-size: clamp(18px, 2.6vw, 22px);
  color: var(--pcr-color-heading);
}

.pcr-empty__p{
  margin: 0 0 var(--pcr-space-5);
  color: var(--pcr-color-muted);
}

/* =========================================================
   Infinite scroll status / spinner
   ========================================================= */
.pcr-realsMore{
  width: 100%;
  height: 1px;
}

.pcr-realsStatus{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pcr-space-3);
  margin-top: var(--pcr-space-6);
  min-height: 34px;
}

.pcr-realsStatus__txt{
  margin: 0;
  font-size: var(--pcr-text-sm);
  color: color-mix(in srgb, var(--pcr-color-text) 70%, transparent);
}

.pcr-realsSpinner{
  width: 22px;
  height: 22px;
  border-radius: var(--pcr-radius-pill);

  /* épaisseur gardée en dur (OK), mais couleurs tokenisées */
  border: 2px solid color-mix(in srgb, var(--pcr-color-border) 70%, transparent);
  border-top-color: var(--pcr-color-primary);

  animation: pcrSpin .7s linear infinite;
}

@keyframes pcrSpin{
  to{ transform: rotate(360deg); }
}

/* Fallback (désactivé de toute façon) */
.pcr-realsFallback{
  margin-top: var(--pcr-space-6);
  display: flex;
  justify-content: center;
}

/* =========================================================
   OFFCANVAS (canvas filtres)
   ========================================================= */
.pcr-realsCanvas{
  position: fixed;
  inset: 0;
  z-index: var(--pcr-z-overlay);

  display: none;
  align-items: stretch;
  justify-content: flex-end;
}

.pcr-realsCanvas.is-open{
  display: flex;
}

.pcr-realsCanvas__backdrop{
  position: absolute;
  inset: 0;
  background: var(--pcr-overlay-bg);
  backdrop-filter: blur(3px);
}

/* Panel : utilise ton token de largeur */
.pcr-realsCanvas__panel{
  position: relative;
  width: var(--pcr-offcanvas-w);
  height: 100%;

  background: var(--pcr-offcanvas-bg);
  border-left: 1px solid var(--pcr-offcanvas-border);
  box-shadow: var(--pcr-shadow-lg);

  padding: var(--pcr-offcanvas-pad);

  transform: translateX(var(--pcr-space-4));
  opacity: 0;
  transition:
    transform var(--pcr-dur) var(--pcr-ease),
    opacity var(--pcr-dur) var(--pcr-ease);
}

.pcr-realsCanvas.is-open .pcr-realsCanvas__panel{
  transform: translateX(0);
  opacity: 1;
}

.pcr-realsCanvas__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pcr-space-3);
  padding-bottom: var(--pcr-space-4);
  border-bottom: 1px solid var(--pcr-color-divider);
  margin-bottom: var(--pcr-space-5);
}

.pcr-realsCanvas__title{
  margin: 0;
  font-family: var(--pcr-font-heading);
  font-size: var(--pcr-text-xl);
  line-height: 1.15;
  color: var(--pcr-color-heading);
}

/* Bouton fermeture canvas */
.pcr-realsCanvas__close{
  appearance: none;
  width: 42px;
  height: 42px;
  border-radius: var(--pcr-radius-pill);
  border: 1px solid var(--pcr-color-border);
  background: color-mix(in srgb, var(--pcr-color-surface-2) 70%, transparent);
  color: var(--pcr-color-text);
  cursor: pointer;

  font-size: 22px;
  line-height: 1;

  transition:
    transform var(--pcr-dur-fast) var(--pcr-ease),
    background var(--pcr-dur-fast) var(--pcr-ease),
    border-color var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-realsCanvas__close:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--pcr-color-surface-2) 82%, transparent);
  border-color: color-mix(in srgb, var(--pcr-color-border) 55%, var(--pcr-color-heading) 45%);
}
.pcr-realsCanvas__close:focus-visible{
  outline: none;
  box-shadow: var(--pcr-focus-ring);
}

/* Fields */
.pcr-realsForm{
  display: grid;
  gap: var(--pcr-space-5);
}

.pcr-realsField{
  display: grid;
  gap: var(--pcr-space-2);
}

.pcr-realsLabel{
  font-size: var(--pcr-text-sm);
  color: color-mix(in srgb, var(--pcr-color-text) 74%, transparent);
  font-weight: var(--pcr-weight-medium);
}

.pcr-realsInput,
.pcr-realsSelect{
  width: 100%;
  border-radius: var(--pcr-input-radius);
  border: 1px solid var(--pcr-input-border);
  background: var(--pcr-input-bg);
  color: var(--pcr-input-fg);

  padding: var(--pcr-input-pad-y) var(--pcr-input-pad-x);
  font-size: var(--pcr-text-md);

  transition:
    border-color var(--pcr-dur-fast) var(--pcr-ease),
    box-shadow var(--pcr-dur-fast) var(--pcr-ease),
    background var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-realsInput:focus,
.pcr-realsSelect:focus{
  outline: none;
  box-shadow: var(--pcr-focus-ring);
  border-color: color-mix(in srgb, var(--pcr-color-primary) 55%, var(--pcr-input-border));
}

.pcr-realsActions{
  display: grid;
  gap: var(--pcr-space-3);
  margin-top: var(--pcr-space-2);
}

.pcr-realsHint{
  margin: 0;
  font-size: var(--pcr-text-sm);
  color: color-mix(in srgb, var(--pcr-color-text) 66%, transparent);
}

/* Mobile safe-area */
@media (max-width: 768px){
  .pcr-realsCanvas__panel{
    padding-top: calc(var(--pcr-offcanvas-pad) + env(safe-area-inset-top));
    padding-bottom: calc(var(--pcr-offcanvas-pad) + env(safe-area-inset-bottom));
  }
}

/* Désactive définitivement le fallback "Charger plus" */
.pcr-realsFallback{
  display: none !important;
}







/* Classe container réutilisable partout */
.pcr-container,
.pcr-wrap{
  width: min(100%, var(--pcr-container-max));
  margin-inline: auto;

  /* gouttières + safe area */
  padding-left: max(var(--pcr-container-pad), env(safe-area-inset-left));
  padding-right: max(var(--pcr-container-pad), env(safe-area-inset-right));
}

/* Si tu as des templates qui utilisent .pcr-section en full width,
   on garantit que la section prend 100% et que seul le contenu est contraint */
.pcr-section{
  width: 100%;
}

/* Optionnel : wrapper de page */
.pcr-page,
.pcr-realisations-archive{
  width: 100%;
}







/* =========================================================
   ARCHIVE RÉALISATIONS — VERROU CENTRAGE LISTING (1200px)
   Ne touche pas les couleurs / backgrounds
   ========================================================= */

/* La page et la section peuvent rester full width */
.pcr-realisations-archive,
.pcr-realisations-archive .pcr-realsSection{
  width: 100%;
  max-width: 100%;
}

/* LE CONTENEUR QUI DOIT ÊTRE CENTRÉ */
.pcr-realisations-archive .pcr-realsSection > .pcr-wrap{
  /* centre + limite */
  width: min(100%, var(--pcr-container-max)) !important; /* 1200px */
  max-width: var(--pcr-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* gouttières */
  padding-left: max(var(--pcr-container-pad), env(safe-area-inset-left)) !important;
  padding-right: max(var(--pcr-container-pad), env(safe-area-inset-right)) !important;

  /* neutralise full-bleed */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Neutralise les hacks fréquents qui cassent le centrage */
.pcr-realisations-archive .pcr-realsSection > .pcr-wrap,
.pcr-realisations-archive .pcr-realsGrid,
.pcr-realisations-archive .pcr-grid,
.pcr-realisations-archive [data-pcr-results]{
  margin-inline: auto !important;
}

/* Si un CSS global force la grille à prendre le viewport */
.pcr-realisations-archive .pcr-realsGrid,
.pcr-realisations-archive .pcr-realsGrid.pcr-grid,
.pcr-realisations-archive [data-pcr-results]{
  width: 100% !important;
  max-width: 100% !important;

  /* annule margin négatifs et full-bleed */
  margin-left: 0 !important;
  margin-right: 0 !important;

  /* annule translate/left */
  left: auto !important;
  right: auto !important;
  transform: none !important;

  box-sizing: border-box !important;
}

/* Anti-scroll horizontal si une card déborde */
.pcr-realisations-archive .pcr-realsSection{
  overflow-x: clip;
}