/* ============================================================
   Fresh Detailing 95 — realisations.css
   Page « Nos réalisations » (liste en bandes) + fiche réalisation.
   Chargée uniquement quand $pageRealisations est vrai (voir head.php).
   ============================================================ */

/* ---------- Bandeau de tête ---------- */

.realisations-banner {
  padding-block: calc(var(--space-3xl) + 2rem) var(--space-lg);
}
.realisations-banner .page-banner__title {
  font-size: var(--fs-4xl);
  max-width: 14ch;
}

.realisations-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--c-border);
  max-width: 780px;
}
.realisations-stats .stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--c-gold-300);
}
.realisations-stats .stat__label {
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  margin-top: 0.35em;
}
@media (max-width: 700px) {
  .realisations-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
}

/* ---------- Filtres ---------- */

.realisations-section { padding-top: 0; }

.realisations-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.filter-group__label {
  flex: 0 0 auto;
  width: 5.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.realisations-filters .filter-bar { margin-bottom: 0; flex: 1 1 auto; }

/* La rangée des marques déborde vite : elle défile au lieu de se replier
   sur quatre lignes qui repousseraient les bandes hors de l'écran. */
.filter-bar--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.filter-bar--scroll::-webkit-scrollbar { display: none; }
.filter-bar--scroll .filter-chip { flex: 0 0 auto; }

.filter-chip { display: inline-flex; align-items: center; gap: 0.5em; }
.filter-chip__count {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  padding: 0.1em 0.45em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text-faint);
}
.filter-chip.is-active .filter-chip__count {
  background: rgba(26, 18, 6, 0.18);
  color: #1a1206;
}

.realisations-count {
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}
.realisations-empty {
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--c-text-soft);
}

@media (max-width: 760px) {
  .filter-group { flex-direction: column; align-items: flex-start; gap: 0.5em; }
  .filter-group__label { width: auto; }
  .realisations-filters .filter-bar { width: 100%; }
}

/* ---------- Les bandes ---------- */

.band-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --d vaut 0 quand la bande est au centre de l'écran et tend vers 1 à mesure
   qu'elle s'en éloigne ; realisations.js l'écrit à chaque frame. Sans JS la
   variable reste à 0 : les bandes s'affichent à taille pleine, non dégradées. */
.band {
  --d: 0;
  transform: scale(calc(1 - var(--d) * 0.15));
  opacity: calc(1 - var(--d) * 0.5);
  transform-origin: center center;
}
.band.is-hidden { display: none; }

/* Les photos sont en 4/3 : plus la bande est panoramique, plus « cover » en
   rogne. Le 16/9 en montre les trois quarts au lieu de la moitié. */
.band__link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
}
.band__link:focus-visible {
  outline: 2px solid var(--c-gold-300);
  outline-offset: 4px;
}

.band__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1);
  transition: transform var(--dur-slow) var(--ease-out);
}
.band__link:hover .band__img { transform: scale(1.05); }

/* Voile de lecture : plus dense en bas à gauche, là où se pose le texte. */
.band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 6, 8, 0.92) 0%, rgba(6, 6, 8, 0.55) 32%, rgba(6, 6, 8, 0.05) 62%),
    linear-gradient(to right, rgba(6, 6, 8, 0.75) 0%, transparent 55%);
}

.band__body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: clamp(1.25rem, 3vw, 2.75rem);
}

.band__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-width: 44rem;
}

.band__index {
  position: absolute;
  top: clamp(1rem, 2.5vw, 2rem);
  right: clamp(1rem, 2.5vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.13);
  letter-spacing: 0.02em;
}

.band__head {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.band__brand {
  font-weight: 700;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.band__date { color: var(--c-text-faint); letter-spacing: 0.06em; }

/* Roboto Light : la police du site de référence donné par le client
   (muller-prestige.com), réservée à ce titre plutôt qu'étendue au corps du
   texte. Bebas Neue (--font-display) n'a qu'un seul dessin, épais par
   nature — impossible d'obtenir un rendu fin en jouant sur son poids. */
.band__title {
  display: block;
  font-family: "Roboto", var(--font-body);
  font-size: clamp(1.35rem, 2.7vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.band__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: 0.4em;
  flex-wrap: wrap;
}
.band__tags { display: flex; flex-wrap: wrap; gap: 0.4em; }
.band__tag {
  font-size: var(--fs-xs);
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-border-strong);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
}
.band__tag--muted { color: var(--c-text-faint); border-color: var(--c-border); background: none; }

.band__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-gold-300);
  white-space: nowrap;
}
.band__cta svg { transition: transform var(--dur-fast) var(--ease-out); }
.band__link:hover .band__cta svg { transform: translateX(5px); }

@media (max-width: 900px) {
  .band { transform: scale(calc(1 - var(--d) * 0.09)); opacity: calc(1 - var(--d) * 0.35); }
  .band__link { aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  .band__link { aspect-ratio: 4 / 3; }
  .band__foot .band__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .band { transform: none; opacity: 1; }
  .band__img, .band__link:hover .band__img { transform: scale(1); }
}

/* ============================================================
   Fiche réalisation
   ============================================================ */

.realisation-hero {
  position: relative;
  min-height: min(82vh, 780px);
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-xl);
  overflow: hidden;
}
.realisation-hero__media { position: absolute; inset: 0; }
.realisation-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
/* Le fil d'Ariane et le titre se posent sur la moitié basse de la photo, qui
   peut être claire (atelier sous néons) : le voile y reste dense, et un second
   dégradé depuis la gauche protège le début des lignes. */
.realisation-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--c-bg) 1%, rgba(8, 8, 10, 0.94) 24%, rgba(8, 8, 10, 0.62) 46%, rgba(8, 8, 10, 0.18) 72%, rgba(8, 8, 10, 0.6) 100%),
    linear-gradient(to right, rgba(8, 8, 10, 0.72) 0%, rgba(8, 8, 10, 0.2) 45%, transparent 68%);
}
.realisation-hero__inner { position: relative; z-index: 1; }
.realisation-hero__title {
  font-size: var(--fs-4xl);
  max-width: 16ch;
  margin-top: var(--space-2xs);
}
.realisation-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em 1.4em;
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
}
.realisation-hero__meta li { display: flex; align-items: center; gap: 1.4em; }
.realisation-hero__meta li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-gold-500);
}
.realisation-hero__meta li + li { gap: 0.9em; }

/* ---------- Récit + fiche latérale ---------- */

.realisation-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--space-xl);
  align-items: start;
}
.realisation-story__text { max-width: 68ch; }
.realisation-story__text p { margin-bottom: var(--space-sm); color: var(--c-text-soft); }
.realisation-lede {
  font-size: var(--fs-md);
  color: var(--c-text) !important;
  border-left: 2px solid var(--c-gold-500);
  padding-left: var(--space-sm);
}

.realisation-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55em var(--space-md);
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
.realisation-spec li {
  display: flex;
  gap: 0.6em;
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
}
.realisation-spec svg { flex-shrink: 0; margin-top: 0.2em; color: var(--c-gold-300); }

.realisation-card {
  position: sticky;
  top: calc(var(--header-h) + var(--space-sm));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: radial-gradient(120% 100% at 50% 0%, rgba(232, 200, 119, 0.09), transparent 62%), var(--c-bg-elevated);
}
.realisation-card__title { font-size: var(--fs-lg); }
.realisation-facts { display: flex; flex-direction: column; }
.realisation-facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.7em 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.realisation-facts dt { color: var(--c-text-faint); flex-shrink: 0; }
.realisation-facts dd { text-align: right; font-weight: 600; }
.realisation-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  transition: color var(--dur-fast);
}
.realisation-card__link:hover { color: var(--c-gold-300); }

@media (max-width: 960px) {
  .realisation-story__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .realisation-card { position: static; }
}
@media (max-width: 560px) {
  .realisation-spec { grid-template-columns: 1fr; }
}

/* ---------- Protocole ---------- */

/* La fiche latérale est plus courte que le récit : sans ce rattrapage, la
   colonne vide sous la carte double l'impression de blanc avant le protocole. */
.realisation-protocole { padding-top: var(--space-lg); }
.realisation-protocole__title { font-size: var(--fs-2xl); margin: var(--space-2xs) 0 var(--space-lg); }
.protocole-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm);
  counter-reset: protocole;
}
.protocole-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: var(--space-md);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.protocole-step:hover { border-color: var(--c-border-strong); transform: translateY(-3px); }
.protocole-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--gradient-gold);
  opacity: 0.55;
}
.protocole-step__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-gold-300);
}
.protocole-step__label { font-size: var(--fs-sm); color: var(--c-text-soft); }

/* ---------- Mosaïque photos ---------- */

.realisation-gallery__title { font-size: var(--fs-2xl); margin: var(--space-2xs) 0 var(--space-lg); }
.realisation-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-sm);
}
.realisation-shot {
  position: relative;
  grid-column: span 2;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
/* Rythme éditorial : deux larges, trois étroites, et on recommence. */
.realisation-shot:nth-child(5n + 1),
.realisation-shot:nth-child(5n + 2) { grid-column: span 3; aspect-ratio: 3 / 2; }

.realisation-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out), filter var(--dur-med);
}
.realisation-shot:hover img { transform: scale(1.05); }
.realisation-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.55), transparent 45%);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.realisation-shot:hover::after { opacity: 1; }
.realisation-shot__n {
  position: absolute;
  left: 0.9rem;
  bottom: 0.7rem;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.realisation-shot:hover .realisation-shot__n { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .realisation-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .realisation-shot,
  .realisation-shot:nth-child(5n + 1),
  .realisation-shot:nth-child(5n + 2) { grid-column: span 1; aspect-ratio: 4 / 3; }
  .realisation-shot:nth-child(5n + 1) { grid-column: span 2; aspect-ratio: 3 / 2; }
}
@media (max-width: 520px) {
  .realisation-gallery { grid-template-columns: 1fr; }
  .realisation-shot, .realisation-shot:nth-child(5n + 1) { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* ---------- Navigation entre fiches ---------- */

.realisation-nav__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-md);
  align-items: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--c-border);
}
.realisation-nav__link { display: flex; flex-direction: column; gap: 0.25em; }
.realisation-nav__link--next { text-align: right; align-items: flex-end; }
.realisation-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.realisation-nav__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  transition: color var(--dur-fast);
}
.realisation-nav__link:hover .realisation-nav__name { color: var(--c-gold-300); }

@media (max-width: 760px) {
  .realisation-nav__grid { grid-template-columns: 1fr 1fr; }
  .realisation-nav__all { grid-column: 1 / -1; order: 3; justify-self: center; }
}