:root { --portfolio-ink: #183652; --portfolio-muted: #647a94; --portfolio-blue: #0b62c4; }

.gallery-section {
  scroll-margin-top: 88px;
  padding: 68px 0 58px;
  overflow: hidden;
  border-block: 1px solid #e5edf6;
  background: linear-gradient(180deg, #f9fbfe 0%, #f2f6fb 100%);
}
.gallery-heading {
  width: min(1324px, calc(100% - 116px));
  margin: 0 auto 28px;
}
.gallery-heading > div { max-width: 720px; }
.gallery-heading > div > p {
  margin: 0 0 10px;
  color: #55718f;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.gallery-heading h2 {
  margin: 0;
  color: var(--portfolio-ink);
  font-size: clamp(32px, 3.7vw, 46px);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -1.9px;
}
.gallery-heading-note {
  display: block;
  margin-top: 10px;
  color: #788da5;
  font-size: 14px;
  line-height: 1.5;
}
.marquee {
  box-sizing: border-box;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px max(58px, calc((100vw - 1324px) / 2)) 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: none;
  scroll-behavior: auto !important;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee:active { cursor: grabbing; }
.marquee.is-at-end { overscroll-behavior-x: none; }
.marquee:focus-visible { outline: 3px solid rgba(11,98,196,.42); outline-offset: -4px; }
.marquee-track { display: flex; width: max-content; }
.project-group { display: flex; flex: none; align-items: stretch; gap: 24px; padding-right: 0; }
.project-card {
  display: flex;
  flex: 0 0 clamp(620px, 62vw, 820px);
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(25,62,99,.10);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(31,64,100,.10), 0 2px 8px rgba(31,64,100,.035);
  scroll-snap-align: start;
}
.card-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  height: clamp(300px, 30vw, 390px);
  overflow: hidden;
  border-radius: 16px;
  background: #e7edf4;
}
.paired-photo { position: relative; min-width: 0; height: 100%; margin: 0; overflow: hidden; background: #e7edf4; }
.paired-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform .9s cubic-bezier(.2,.65,.3,1);
}
.paired-photo--render img { transform: scale(1.3); }
.project-card:hover .paired-photo img { transform: scale(1.025); }
.project-card:hover .paired-photo--render img { transform: scale(1.33); }
.paired-photo figcaption {
  position: absolute;
  left: 11px;
  bottom: 11px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  color: #fff;
  background: rgba(21,48,76,.58);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .25px;
}

@media (max-width: 900px) {
  .gallery-heading { width: calc(100% - 64px); }
  .marquee { padding-inline: 32px; }
  .project-card { flex-basis: min(84vw, 700px); }
  .card-photo-pair { height: clamp(280px, 40vw, 350px); }
}
@media (max-width: 600px) {
  .gallery-section { padding: 45px 0 37px; }
  .gallery-heading { width: calc(100% - 36px); margin-bottom: 20px; }
  .gallery-heading h2 { font-size: 34px; letter-spacing: -1.3px; }
  .gallery-heading-note { margin-top: 8px; font-size: 12px; }
  .marquee { padding: 4px 18px 18px; scroll-padding-inline: 18px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }
  .project-group { gap: 14px; padding-right: 0; }
  .project-card { flex-basis: min(90vw, 560px); padding: 8px; border-radius: 19px; }
  .card-photo-pair { height: clamp(240px, 68vw, 315px); gap: 4px; border-radius: 12px; }
  .paired-photo figcaption { left: 7px; bottom: 7px; padding: 6px 8px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .paired-photo img { transition: none; }
}


/* Légende textuelle sous chaque paire de photos. */
.project-card {
  flex-direction: column;
  gap: 12px;
}
.card-photo-pair {
  flex: 0 0 auto;
}
.project-caption-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid rgba(11,98,196,.18);
  border-radius: 999px;
  color: #234b77;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,246,254,.92));
  box-shadow: 0 4px 14px rgba(31,64,100,.07);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .1px;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .project-card { gap: 10px; }
  .project-caption-chip { padding: 7px 10px; font-size: 11px; }
}


/* Fin réelle du rail : la dernière carte arrive au bord, sans espace fantôme. */
.marquee {
  direction: ltr !important;
  padding-right: 0 !important;
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain;
}
.marquee-track,
.project-group {
  margin-right: 0 !important;
  padding-right: 0 !important;
}