/* site/css/pages/realisations.css — Galerie parallax */

/* Intro / titre galerie */
.rea-intro {
  padding: calc(104px + var(--space-10)) 0 var(--space-9);
  text-align: center;
  background: var(--bg-primary);
}
.rea-intro .eyebrow { display: inline-block; margin-bottom: var(--space-4); }
.rea-intro h1 { color: var(--fg-on-light); margin-bottom: var(--space-5); }
.rea-intro h1 em { color: var(--fg-on-light); font-weight: 600; font-style: normal; }
.rea-intro p {
  color: var(--fg-on-dark-muted); max-width: 640px;
  margin: 0 auto; font-size: var(--fs-lead); line-height: var(--lh-relaxed);
  text-align: justify; text-align-last: center; -webkit-hyphens: none; hyphens: none;
}

/* Galerie parallax */
.parallax-gallery {
  background: var(--bg-primary);
  padding: var(--space-7) var(--container-pad) var(--space-10);
  display: flex; gap: var(--space-4);
  align-items: flex-start;
  overflow: hidden;
}
.pgal__col {
  flex: 1; display: flex; flex-direction: column; gap: var(--space-4);
  will-change: transform;
}
.pgal__col--b { margin-top: var(--space-9); }
.pgal__col--c { margin-top: var(--space-5); }

.pgal__tile {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border-on-dark);
  background: var(--bg-elevated);
}
.pgal__tile__zoom {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 38px; height: 38px;
  border: 1px solid var(--dsp-gold-line);
  background: var(--dsp-navy-60);
  display: grid; place-items: center; color: var(--accent);
  opacity: 0; transform: translateY(-6px); z-index: 2;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pgal__tile:hover .pgal__tile__zoom { opacity: 1; transform: translateY(0); }
.pgal__tile img {
  width: 100%; height: auto; display: block;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.pgal__tile:hover img { transform: scale(1.04); filter: brightness(1.06); }
.pgal__tile__cap {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: var(--space-5);
  background: linear-gradient(to top, var(--dsp-navy-80) 0%, transparent 55%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.pgal__tile:hover .pgal__tile__cap { opacity: 1; }
.pgal__tile__cap span {
  font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--accent);
}
.pgal__tile::before, .pgal__tile::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border-color: var(--accent); border-style: solid; z-index: 2;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.pgal__tile::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.pgal__tile::after  { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }
.pgal__tile:hover::before, .pgal__tile:hover::after { opacity: 1; }

@media (max-width: 768px) {
  .parallax-gallery { flex-direction: column; }
  .pgal__col { transform: none !important; margin-top: 0; }
}

/* Bandeau stats */
.stats-band {
  background: var(--bg-soft);
  border-top: 1px solid var(--border-on-dark);
  padding: var(--space-10) 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-8); text-align: center; }
.stat-item__number {
  font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 300;
  color: var(--accent); line-height: 1; margin-bottom: var(--space-3); letter-spacing: -0.02em;
}
.stat-item__suffix { color: var(--accent); }
.stat-item__label  { font-size: var(--fs-small); color: var(--fg-on-dark-muted); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2,1fr); gap: var(--space-6); } }

/* === Relief au survol — tuiles + stats === */
.pgal__tile, .stat-item { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.pgal__tile:hover, .stat-item:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0,0,0,0.42); }

/* === Angles arrondis === */
.pgal__tile, .stat-item, .stats-band { border-radius: 14px; }
.pgal__tile { overflow: hidden; }

/* ===== Carrousel 3D (coverflow lifté) ===== */
.rea-carousel-wrap { padding: var(--space-9) 0 var(--space-10); overflow: hidden; }
.rea-carousel {
  position: relative;
  perspective: 1900px;
  height: clamp(320px, 50vw, 580px);
}
.rea-carousel__track {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.rea-card {
  position: absolute; top: 50%; left: 50%;
  width: clamp(280px, 46vw, 620px); aspect-ratio: 16 / 10;
  border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border-on-dark);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
  transform: translate(-50%, -50%);
  transition: transform 0.6s var(--ease-out), opacity 0.55s var(--ease-out),
              filter 0.55s var(--ease-out), box-shadow 0.4s var(--ease-out);
  will-change: transform, opacity; user-select: none;
  background: var(--bg-elevated);
}
.rea-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.rea-card__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-6) var(--space-5) var(--space-4);
  background: linear-gradient(transparent, rgba(11,22,48,0.88));
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.rea-card__cap span {
  color: var(--fg-on-dark); font-size: var(--fs-small);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.rea-card__zoom {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(11,22,48,0.55); border: 1px solid var(--dsp-gold-line);
  color: var(--accent); display: grid; place-items: center;
  opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.3s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rea-card--active {
  box-shadow: 0 44px 96px rgba(0,0,0,0.72), 0 0 0 1px var(--dsp-gold-line);
}
.rea-card--active .rea-card__cap { opacity: 1; }
.rea-card--active .rea-card__zoom { opacity: 1; transform: scale(1); }
.rea-card--active:hover .rea-card__zoom { background: var(--dsp-gold-12); border-color: var(--dsp-gold-hover); }

.rea-carousel__ctrl {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-6); margin-top: var(--space-8);
}
.rea-arrow {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--dsp-gold-line); background: rgba(22,35,63,0.6);
  color: var(--accent); display: grid; place-items: center; cursor: pointer;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.15s;
}
.rea-arrow:hover { background: var(--dsp-gold-12); border-color: var(--dsp-gold-hover); }
.rea-arrow:active { transform: translateY(1px); }
.rea-carousel__count {
  color: var(--fg-on-dark-muted); font-size: var(--fs-small);
  letter-spacing: 0.18em; min-width: 96px; text-align: center;
}
@media (max-width: 700px) { .rea-card { width: 80vw; } }
@media (prefers-reduced-motion: reduce) { .rea-card { transition: opacity 0.3s; } }

/* ===== Responsive mobile — carrousel 3D ===== */
@media (max-width: 768px) { .rea-card { width: 80vw; } .rea-card__zoom { width: 44px; height: 44px; } }
@media (max-width: 600px) { .rea-carousel { height: clamp(240px, 62vw, 320px); } }
@media (max-width: 420px) { .rea-carousel__ctrl { gap: var(--space-4); } .rea-carousel__count { min-width: 72px; letter-spacing: 0.12em; } }

/* ===== Flèches latérales sur le carrousel (nav directe, sans lightbox) ===== */
.rea-carousel__side {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 300; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--dsp-gold-line); background: rgba(11,22,48,0.55);
  color: var(--accent); display: grid; place-items: center; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.15s;
}
.rea-carousel__side.prev { left: var(--space-4); }
.rea-carousel__side.next { right: var(--space-4); }
.rea-carousel__side:hover { background: var(--dsp-gold-12); border-color: var(--dsp-gold-hover); }
.rea-carousel__side:active { transform: translateY(-50%) scale(0.94); }
@media (max-width: 600px) { .rea-carousel__side { width: 44px; height: 44px; } }