/* ----- SINGLE REALISATION ----- */

/* ----- HERO (content left, image right) ----- */
.realisation-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: calc(100vh - 72px - 24px);
}

/* Decorative shape stuck to the right edge */
.realisation-hero__accent {
  position: absolute;
  top: 50%;
  right: calc( -1 * ( ( 100vw - 100% ) / 2 ) );
  transform: translateY(-50%);
  width: 30vw;
  height: 80%;
  background: var(--color-primary);
  border-radius: 1000px 0 0 1000px;
  z-index: -1;
  pointer-events: none;
}
/* Admin bar takes part of the available height */
body.admin-bar .realisation-hero {
  min-height: calc(100vh - 72px - 24px - 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .realisation-hero {
    min-height: calc(100vh - 72px - 24px - 46px);
  }
}

/* No vertical padding: hero sits under the header, CTA touches the footer */
body.single-realisation main.section {
  padding-top: 0;
  padding-bottom: 0;
}
.realisation-hero__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* Mockup: no card styling (radius, shadow, overflow) inherited from the cover */
.realisation-hero__cover:has(.realisation-device-switcher) {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* Hand-drawn hint pointing to the mockup (hidden in one column) */
.realisation-hero__hint {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 13rem;
  color: var(--color-black);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.realisation-hero__hint svg {
  width: 6.5rem;
  height: auto;
  margin-left: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.realisation-hero__hint:hover svg {
  transform: translate(0.25rem, -0.25rem);
}

/* ----- DEVICE MOCKUPS ----- */
.realisation-device-switcher {
  width: 100%;
}

/* Shared base: SVG frame behind, screen (iframe or image) on top */
.realisation-device {
  position: relative;
  width: 100%;
  display: none;
}
.realisation-device.is-active {
  display: block;
}
.realisation-device__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.realisation-device__screen {
  z-index: 1;
}
/* Mobile: the frame stays above the iframe so the notch and home bar show */
.realisation-device--mobile .realisation-device__frame {
  z-index: 2;
}
.realisation-device__screen iframe,
.realisation-device__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Overlay on iframe mockups, fades out on hover (hidden on mobile) */
.realisation-device__overlay {
  --label-x: 50%;
  --label-y: 50%;
  --label-tilt: perspective(1000px) rotateY(-12deg) rotateX(4deg);
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-primary-dark) 50%, transparent);
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.realisation-device__overlay span {
  position: absolute;
  left: var(--label-x);
  top: var(--label-y);
  /* Same tilt as the mobile mockup */
  transform: translate(-50%, -50%) var(--label-tilt);
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-yellow);
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.realisation-device__screen:hover .realisation-device__overlay {
  opacity: 0;
}
.realisation-device--desktop .realisation-device__overlay {
  --label-x: 47.17%;
  --label-y: 44.32%;
  /* Tilt of the screen plane at the label position (see SCREEN_CORNERS in realisation-device.js) */
  --label-tilt: matrix(1.0019, -0.1581, -0.0951, 1.0131, 0, 0);
}
@media (max-width: 768px) {
  .realisation-device__overlay {
    display: none;
  }
}

/* Desktop: the screen is a perspective quadrilateral, clipped here and corrected in JS (matrix3d) */
.realisation-device--desktop {
  aspect-ratio: 3575.789 / 3305.392;
}
.realisation-device--desktop .realisation-device__screen {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    14.2673% 26.7561%,
    94.5667% 6.5188%,
    90.316% 67.3522%,
    9.5139% 74.3501%
  );
}

/* Mobile: straight screen, a plain rectangle in % */
.realisation-device--mobile {
  aspect-ratio: 1186.696 / 2293.448;
  /* Fixed size above 768px, adaptive below */
  width: 350px;
  margin-inline: auto;
  /* Slight 3D tilt on the whole card */
  transform: perspective(1000px) rotateY(-12deg) rotateX(4deg);
}
.realisation-device--mobile .realisation-device__screen {
  position: absolute;
  left: 5.085%;
  top: 1.5679%;
  width: 89.3632%;
  height: 95.9507%;
  /* Radius calibrated to the real screen ratio (same in px on both axes) */
  border-radius: 8% / 3.86%;
  overflow: hidden;
}
/* Notch strip: content pushed down, top band filled in black */
.realisation-device--mobile .realisation-device__screen iframe,
.realisation-device--mobile .realisation-device__screen img {
  top: 6.5%;
  height: 93.5%;
}
.realisation-device--mobile .realisation-device__screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.5%;
  background: #2b2b2b;
  pointer-events: none;
}

/* Desktop / mobile switch icon */
.realisation-device-switcher__toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent-yellow);
  color: var(--color-primary-dark);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}
.realisation-device-switcher__toggle:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: scale(1.06);
}
.realisation-device-switcher__toggle svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: currentColor;
}

/* Flat iframe, no mockup (fixed ratio via padding-top) */
.realisation-hero__flat-iframe {
  position: relative;
  width: 100%;
  padding-top: 62%;
}
.realisation-hero__flat-iframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Client, project type and button: inline, separated by vertical borders */
.realisation-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.realisation-hero__meta-item {
  padding-inline: 1.5rem;
}
.realisation-hero__meta-item:first-child {
  padding-left: 0;
}
.realisation-hero__meta-item:not(:last-child) {
  border-right: 1px solid var(--color-border);
}
.realisation-hero__meta-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.realisation-hero__meta-value {
  font-weight: 700;
}

/* ----- CONTENT BLOCKS ----- */
.realisation-blocks {
  display: flex;
  flex-direction: column;
  margin-top: var(--section-padding);
}
.realisation-block {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 3rem;
  /* No side padding: text starts at the container edge */
  padding: 3rem 0;
  margin: auto;
  /* Keep full width despite the auto margins */
  width: 100%;
  max-width: 1100px;
}
.realisation-block h2 {
  margin-bottom: 0;
}
/* Rule between blocks (except above the first) */
.realisation-block + .realisation-block {
  border-top: 1px solid var(--color-black);
}

/* First two blocks side by side: request (wider) and violet client card */
.realisation-blocks--duo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
}
.realisation-blocks--duo:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.realisation-blocks--duo .realisation-block {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  /* Title and text aligned to the top of the column */
  align-content: start;
  padding-block: 0;
  margin: 0;
  width: auto;
  max-width: none;
  border: 0;
}

/* Client card: violet, white text */
.realisation-blocks--duo .realisation-block.realisation-block--client {
  /* Same height as the request block, content centered */
  height: 100%;
  align-self: stretch;
  align-content: center;
  text-align: center;
  /* More space top and bottom than on the sides */
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
}
/* More specific than `.realisation-block h2` (declared later in the media queries) */
.realisation-blocks--duo .realisation-block--client h2 {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
}
.realisation-blocks--duo .realisation-block--client .realisation-block__content {
  font-size: 18px;
}
/* WYSIWYG content: restore lists, paragraphs and colors reset globally */
.realisation-block__content {
  font-size: 20px;
}
.realisation-block__content p {
  margin-bottom: 1em;
  color: inherit;
}
.realisation-block__content > :last-child {
  margin-bottom: 0;
}
.realisation-block__content ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1em;
}
.realisation-block__content ol {
  list-style: decimal;
  padding-left: 1.4rem;
  margin-bottom: 1em;
}
.realisation-block__content li {
  margin-bottom: 1.6em;
}
/* "Ce qui a été réalisé": the first <strong> of each list item (also inside a span) in dark primary */
.realisation-blocks:not(.realisation-blocks--duo) .realisation-block__content li > strong:first-of-type,
.realisation-blocks:not(.realisation-blocks--duo) .realisation-block__content li > span:first-of-type > strong:first-of-type {
  color: var(--color-primary-dark);
}

/* ----- GALLERY ----- */
.realisation-gallery {
  --cols: 2;
  margin-top: var(--section-padding);
  padding: clamp(9rem, 12vw, 11rem) clamp(1.5rem, 4vw, 3rem);
  /* Vertical padding leaves room for the scroll shift (--shift, SHIFT_MAX = 140) */
  overflow: hidden;
  background: var(--color-primary);
  column-count: var(--cols);
  column-gap: 1rem;
}
.realisation-gallery img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  break-inside: avoid;
}
.realisation-gallery.is-masonry {
  display: flex;
  gap: 1rem;
  column-count: auto;
}
.realisation-gallery__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  transform: translateY(calc(var(--shift, 0) * 1px));
  will-change: transform;
}
.realisation-gallery__col:nth-child(even) {
  transform: translateY(calc(var(--shift, 0) * -1px));
}
.realisation-gallery.is-masonry img {
  margin-bottom: 0;
}

@media (min-width: 769px) {
  .realisation-block h2 {
    font-size: clamp(1.6rem, 1.1rem + 1.7vw, 3.3rem);
  }
}
/* ----- MOBILE (<= 768px) ----- */
@media (max-width: 768px) {
  .realisation-hero__hint {
    display: none;
  }
  .realisation-hero {
    grid-template-columns: 1fr;
    /* No minimum height: the mockup follows the text */
    min-height: 0;
  }
  /* Content in row 1, mockup in row 2, violet shape shares the mockup cell */
  .realisation-hero__content {
    grid-area: 1 / 1;
  }
  .realisation-hero__cover {
    grid-area: 2 / 1;
  }
  .realisation-hero__cover:has(.realisation-device-switcher) {
    align-self: end;
  }
  .realisation-hero__accent {
    position: static;
    grid-area: 2 / 1;
    align-self: end;
    justify-self: end;
    width: 60%;
    margin-right: calc( -1 * ( ( 100vw - 100% ) / 2 ) );
    transform: none;
  }
  /* Phone mockup adapts to the available width */
  .realisation-device--mobile {
    width: min(390px, 70%);
  }
}
@media (max-width: 768px) {
  .realisation-block {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Smaller titles */
  .realisation-block h2 {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
  }
  .realisation-block__content {
    font-size: 1rem;
  }
}
@media (max-width: 480px) {
  .realisation-gallery {
    --cols: 1;
    /* One column: no scroll shift, smaller vertical padding */
    padding-block: 1.5rem;
  }
}

/* Blocks text takes the page gutter */
@media (max-width: 768px) {
  .realisation-block {
    width: auto;
    margin-inline: 0;
    padding-inline: 0;
  }
  .realisation-blocks--duo {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }
}

/* Space before the CTA block */
body.single-realisation .cta-section {
  margin-top: var(--section-padding);
}
/* After the discover-more cards: no extra gap, the section padding is the same above and below the cards */
body.single-realisation .discover-more + .cta-section {
  margin-top: 0;
}