:root{
  --bg-page: #fff;
  --bg-text: #fff;
  --ink: #1c1c1a;
  --muted: #6f6b62;
  --lb-nav: #f1ece0;
  --line: rgba(28,28,26,0.1);
  --accent: #797979;
}

/* ---- Grille principale de la page réalisation ---- */
.realisation-page{
  display: grid;
  grid-template-columns: 1.3fr 1.7fr;
  align-items: start;
  gap: 30px;
  padding: 60px 30px 0;
  background: var(--bg-page);
  color: var(--ink);
}

/* ---- Colonne 1 : titre + texte + avant (fond blanc) ---- */
.realisation-page .intro{
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 20px;
  background: var(--bg-text);
  padding: 2.5rem 2rem 0 0;
}

.realisation-page .intro .eyebrow{
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
}

.realisation-page .intro h1{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 3vw, 2.9rem);
  line-height: 1.08;
  margin: 0 0 1.8rem;
  color: var(--ink);
}

.realisation-page .intro p{
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 1.3rem;
}

/* ---- Colonne image fusionnée ---- */
.col-images{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

figure.frame{
  margin: 0;
  padding: 0;
}

figure.frame button.thumb{
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

figure.frame img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  filter: grayscale(0.08) saturate(0.92);
  transition: transform 0.6s cubic-bezier(.2,.7,.3,1), filter 0.4s ease;
}

figure.frame button.thumb:hover img{
  transform: scale(1.02);
  filter: grayscale(0) saturate(1.05);
}

figure.frame button.thumb:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ratio-3-2{ aspect-ratio: 3 / 2; }
.ratio-2-3{ aspect-ratio: 2 / 3; }
.ratio-1-1{ aspect-ratio: 1 / 1; }
.ratio-4-3{ aspect-ratio: 4 / 3; }
.ratio-4-5{ aspect-ratio: 4 / 5; }

/* ---- Lightbox (fond quasi noir) ---- */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 5vh 5vw;
}

.lightbox.open{ display: flex; }

.lightbox-stage{
	max-width: 75vw;
	max-height: 75vh;
	display: flex;
    gap: 40px; /* espace visible entre deux images pendant le swipe */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.lightbox-stage::-webkit-scrollbar{ display: none; }

.lightbox-stage img{
	flex: 0 0 100%;
	max-width: 75vw;
	max-height: 75vh;
	object-fit: contain;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	border-radius: 4px;
	box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}

#lightbox{
	overscroll-behavior-x: contain;
}

.lb-nav {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lb-nav);
  font-family: var(--serif);
  font-size: 1.9rem;
  padding: 0.8rem 1.1rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.lb-nav:hover{ opacity: 1; }
.lb-prev{ left: 1vw; }
.lb-next{ right: 1vw; }
.lb-prev svg, .lb-next svg{ color: var(--lb-nav); }
.lb-prev svg:hover, .lb-next svg:hover{ color: var(--lb-nav); }

.lb-close,
.avant-close{
  all: unset;
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: var(--lb-nav);
  font-size: 1.8rem;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.lb-close:hover,
.avant-close:hover { opacity: 1; }

.lb-counter{
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--lb-nav);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	opacity: 0.6;
}

/* ---- Responsive ---- */
@media (max-width: 900px){
  .realisation-page{
	grid-template-columns: 1fr; 
	padding: 12px; 
	gap: 12px; }
  .realisation-page .intro{
    position: relative;
    height: auto;
    padding: 3rem 0 2rem;
    top: 0;
  }
  .col-images {gap: 12px;}
  .pair {gap: 12px;}
  .lb-nav {
  	font-size: 1.4rem;
  	padding: 0.6rem;
  }
  .col-images {
        display: block;
        column-count: 2;
        column-gap: 12px;
    }
    .col-images .pair {
        display: contents;
    }
    .col-images .frame {
        margin: 0 0 12px;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (max-width: 620px){
  .pair{ grid-template-columns: 1fr; 
  }
  .col-images {
    column-count: 1;
  }
}

figure.frame{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

figure.frame.is-visible{
  opacity: 1;
  transform: translateY(0);
}

figure.frame.no-fade{
  opacity: 1;
  transform: none;
  transition: none;
}

/* Navbar between realisations */
.realisation-nav{
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid rgba(241,236,224,0.12);
}
.realisation-nav a,
.realisation-nav .is-disabled{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cfcabd;
    color:#1b1f22;
  text-decoration: none;
}
.realisation-nav a:hover{ color: #fff; }
.realisation-nav .is-disabled{ opacity: 0.3; pointer-events: none; }
.realisation-nav .nav-grid{
  color: var(--accent);
  padding: 0.4rem;
  border-radius: 4px;
  display: flex;
}
.realisation-nav .nav-grid:hover{ background: rgba(143,167,147,0.15); }

/* RIGHT-LEFT REALISATIONS NAVIGATION */
.rlz-nav{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  margin-top: 40px;
  border-top: 1.5px solid rgba(137, 137, 137, 0.5);
}
.rlz-prev,
.rlz-next{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #333;
  text-decoration: none;
}
.rlz-prev:hover,
.rlz-next:hover{ color: var(--accent); }
.rlz-disabled{ opacity: 0.3; pointer-events: none; }
.rlz-grid{
  display: inline-flex;
  color: var(--accent);
  padding: 0.4rem;
  border-radius: 4px;
  text-decoration: none;
}
.rlz-grid:hover{ background: rgba(143,167,147,0.15); }

@media (max-width: 576px){
  .rlz-label{ display: none; }
}

/* -------- CSS AJOUTÉ ------------- */
.realisation-page .intro-avant{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 0;
}

.realisation-page .intro-avant figure{
  flex: 1 1 0;
  max-width: 150px;
  min-width: 0;
  margin: 0;
}

.realisation-page .intro-avant img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.realisation-page .intro-avant.avant-ratio-1-1 img{ aspect-ratio: 1 / 1; }
.realisation-page .intro-avant.avant-ratio-3-4 img{ aspect-ratio: 3 / 4; }
.realisation-page .intro-avant.avant-ratio-4-5 img{ aspect-ratio: 4 / 5; }

.realisation-page .intro p.avant-label{
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4rem 0 0.5rem;
}

/* Miniature cliquable : on neutralise le style natif du bouton */
.realisation-page .avant-thumb{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.realisation-page .avant-thumb img{
  transition: opacity .2s ease;
}
.realisation-page .avant-thumb:hover img,
.realisation-page .avant-thumb:focus-visible img{
  opacity: .85;
}

/* Avant Lightbox */
.avant-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  cursor: default;
}
.avant-lightbox[hidden]{ display: none; }
.avant-lightbox img{
  max-width: 75vw;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}
@media (max-width: 600px){
  .avant-lightbox img{
    max-width: 92vw;
    max-height: 85vh;
  }
}

html.avant-open{ overflow: hidden; }  /* bloque le défilement derrière */