/* D&P — ARTICLE PROJET ÉDITORIAL */
body.dp-project-single {
  --dp-project-bg: #faf5e8;
  --dp-project-ink: #2c2c2a;
  --dp-project-gap: 16px;
  --dp-project-ease: cubic-bezier(.22, .61, .36, 1);
  background: var(--dp-project-bg);
}

body.dp-project-single #masthead,
body.dp-project-single .entry-header,
body.dp-project-single .article-post-thumbnail {
  display: none !important;
}

/* La navigation et les articles similaires de Kadence sont remplacés plus bas. */
body.dp-project-single .post-navigation,
body.dp-project-single .entry-related {
  display: none !important;
}

body.dp-project-single .content-area,
body.dp-project-single .content-container.site-container,
body.dp-project-single .site-main,
body.dp-project-single .content-wrap,
body.dp-project-single article.single-entry,
body.dp-project-single .entry-content-wrap,
body.dp-project-single .entry-content.single-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: var(--dp-project-bg);
}

.dp-project-menu {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  min-height: 82px;
  padding: 0 8vw;
  color: #faf5e8;
  background: transparent;
  font-family: Urbanist, sans-serif;
  transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease;
}

body.admin-bar .dp-project-menu { top: 32px; }

.dp-project-menu a {
  position: relative;
  padding: 31px 0 27px;
  color: inherit !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.dp-project-menu a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 22px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--dp-project-ease);
}

.dp-project-menu a:hover::after,
.dp-project-menu a:focus-visible::after { transform: scaleX(1); }

.dp-project-menu a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

body.dp-project-after-hero .dp-project-menu {
  color: var(--dp-project-ink);
  border-bottom: 1px solid rgba(44, 44, 42, .12);
  background: rgba(250, 245, 232, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.dp-project-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: #faf5e8;
  background: #2c2c2a;
}

.dp-project-hero-image,
.dp-project-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dp-project-hero-image {
  object-fit: cover;
  transform: scale(1.01);
  animation: dpProjectHeroIn 900ms var(--dp-project-ease) forwards;
}

.dp-project-hero-shade {
  background: linear-gradient(180deg, rgba(20, 20, 18, .08) 30%, rgba(20, 20, 18, .68) 100%);
}

.dp-project-hero-content {
  position: absolute;
  right: 8vw;
  bottom: clamp(54px, 7vw, 100px);
  left: 8vw;
  z-index: 2;
}

.dp-project-hero h1 {
  max-width: 1100px;
  margin: 0;
  color: #faf5e8 !important;
  font-family: Syne, sans-serif;
  font-size: clamp(58px, 10vw, 150px);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.065em;
  opacity: 0;
  transform: translateY(18px);
  animation: dpProjectTextIn 700ms var(--dp-project-ease) 180ms forwards;
}

.dp-project-hero-meta {
  margin: 0 0 20px;
  color: #faf5e8 !important;
  font-family: Urbanist, sans-serif;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  animation: dpProjectTextIn 650ms var(--dp-project-ease) 340ms forwards;
}

@keyframes dpProjectHeroIn {
  to { transform: scale(1.045); }
}

@keyframes dpProjectTextIn {
  to { opacity: 1; transform: translateY(0); }
}

body.dp-project-single .entry-content > .wp-block-kadence-rowlayout,
body.dp-project-single .entry-content > .kb-row-layout-wrap {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--dp-project-bg) !important;
}

body.dp-project-single .entry-content > .wp-block-kadence-rowlayout > .kt-row-column-wrap,
body.dp-project-single .entry-content > .kb-row-layout-wrap > .kt-row-column-wrap {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dp-project-intro {
  padding: clamp(84px, 10vw, 150px) 8vw;
  background: var(--dp-project-bg);
}

.dp-project-intro > .kt-inside-inner-col {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(340px, 1.2fr);
  column-gap: 10vw;
  align-items: start;
}

.dp-project-kicker {
  grid-column: 1;
  margin: 0 0 24px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dp-project-intro h2 {
  grid-column: 1;
  margin: 0 !important;
  color: var(--dp-project-ink) !important;
  font-family: Syne, sans-serif;
  font-size: clamp(34px, 4vw, 64px) !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em;
  text-align: left !important;
}

.dp-project-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--dp-project-ink);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.7;
}

.dp-project-copy p { margin: 0 0 1.45em; }
.dp-project-copy p:last-child { margin-bottom: 0; }

.dp-project-gallery {
  padding: 0 4vw clamp(90px, 9vw, 150px);
}

.dp-project-gallery > .kt-inside-inner-col,
.dp-project-gallery .wp-block-kadence-advancedgallery {
  width: 100%;
  max-width: none;
  margin: 0 !important;
}

.dp-project-gallery .kb-gallery-ul {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--dp-project-gap) !important;
  row-gap: var(--dp-project-gap) !important;
  column-gap: var(--dp-project-gap) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dp-project-gallery .kb-gallery-ul > .kadence-blocks-gallery-item {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  min-width: 0;
  min-height: 520px;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden;
}

.dp-project-gallery .dp-gallery-source { display: none !important; }
.dp-project-gallery .dp-gallery-half { grid-column: span 6 !important; }
.dp-project-gallery .dp-gallery-third { grid-column: span 4 !important; min-height: 420px; }
.dp-project-gallery .dp-gallery-wide { grid-column: span 8 !important; }
.dp-project-gallery .dp-gallery-side { grid-column: span 4 !important; }
.dp-project-gallery .dp-gallery-full { grid-column: 1 / -1 !important; min-height: 680px; }

.dp-project-gallery .kadence-blocks-gallery-item-inner,
.dp-project-gallery figure,
.dp-project-gallery .kb-gal-image-radius,
.dp-project-gallery .kb-gallery-image-contain {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.dp-project-gallery img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 650ms var(--dp-project-ease), filter 450ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .dp-project-gallery .kadence-blocks-gallery-item:hover img {
    transform: scale(1.02);
    filter: brightness(.92);
  }
}

body.dp-lightbox-open { overflow: hidden !important; }

.dp-project-lightbox-trigger { cursor: zoom-in; }

.dp-project-lightbox {
  position: fixed;
  z-index: 1000000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 42px 76px;
  overflow: hidden;
  background: rgba(24, 24, 22, .94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.dp-project-lightbox.dp-is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dp-project-lightbox-image {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: calc(100dvh - 84px) !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .34);
  transform: scale(.965);
  transform-origin: var(--dp-lightbox-origin-x, 50%) var(--dp-lightbox-origin-y, 50%);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.dp-project-lightbox.dp-is-open .dp-project-lightbox-image { transform: scale(1); }

.dp-project-lightbox-close,
.dp-project-lightbox-arrow {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #f5f1e7;
  background: transparent;
  cursor: pointer;
}

.dp-project-lightbox-close {
  top: 18px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
}

.dp-project-lightbox-arrow {
  top: 50%;
  width: 54px;
  height: 70px;
  font-size: 28px;
  transform: translateY(-50%);
}

.dp-project-lightbox-previous { left: 12px; }
.dp-project-lightbox-next { right: 12px; }

.dp-project-lightbox-caption {
  position: absolute;
  right: 80px;
  bottom: 14px;
  left: 80px;
  margin: 0;
  overflow: hidden;
  color: #f5f1e7;
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dp-project-lightbox button:focus-visible {
  outline: 2px solid #f5f1e7;
  outline-offset: 2px;
}

.dp-project-end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  width: 100%;
  min-height: 190px;
  padding: 42px 8vw 46px;
  border-top: 1px solid rgba(44, 44, 42, .15);
  background: var(--dp-project-bg);
}

.dp-project-end a {
  color: var(--dp-project-ink);
  text-decoration: none;
}

.dp-project-end-project {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.dp-project-end-next { text-align: right; }

.dp-project-end-label,
.dp-project-end-archive {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.dp-project-end-project strong {
  overflow: hidden;
  font-family: Syne, sans-serif;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 500;
  line-height: 1.05;
  text-overflow: ellipsis;
}

.dp-project-end-archive {
  padding: 14px 18px;
  border: 1px solid rgba(44, 44, 42, .35);
  text-align: center;
  white-space: nowrap;
  transition: color 220ms ease, background-color 220ms ease;
}

.dp-project-end-archive:hover,
.dp-project-end-archive:focus-visible {
  color: var(--dp-project-bg);
  background: var(--dp-project-ink);
}

.dp-project-end-project:hover strong,
.dp-project-end-project:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dp-project-end a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.dp-project-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--dp-project-ease), transform 700ms var(--dp-project-ease);
}

.dp-project-reveal.dp-is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .dp-project-intro > .kt-inside-inner-col {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }

  .dp-project-kicker,
  .dp-project-intro h2,
  .dp-project-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .dp-project-gallery .kadence-blocks-gallery-item { min-height: 440px; }

  .dp-project-gallery .dp-gallery-third,
  .dp-project-gallery .dp-gallery-half,
  .dp-project-gallery .dp-gallery-wide,
  .dp-project-gallery .dp-gallery-side {
    grid-column: span 6 !important;
  }

  .dp-project-gallery .dp-gallery-tablet-full { grid-column: 1 / -1 !important; }
}

@media (max-width: 767px) {
  body.dp-project-single {
    overflow-x: hidden;
  }

  body.admin-bar .dp-project-menu { top: 46px; }

  .dp-project-menu {
    min-height: 68px;
    gap: 20px;
    padding-right: 24px;
    padding-left: 24px;
  }

  .dp-project-menu a {
    padding-top: 26px;
    padding-bottom: 23px;
    font-size: 10px;
  }

  .dp-project-menu a::after { bottom: 18px; }

  .dp-project-hero-content {
    right: 24px;
    bottom: 54px;
    left: 24px;
  }

  .dp-project-hero h1 { font-size: clamp(52px, 18vw, 86px); }
  .dp-project-intro { padding: 72px 24px; }

  .dp-project-gallery {
    position: static !important;
    right: auto !important;
    left: auto !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-right: 0 !important;
    margin-left: var(--dp-project-mobile-offset, 0px) !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
    transform: none !important;
  }

  .dp-project-gallery > .kt-inside-inner-col,
  .dp-project-gallery .wp-block-kadence-advancedgallery,
  .dp-project-gallery .kb-gallery-ul {
    position: static !important;
    right: auto !important;
    left: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }

  .dp-project-gallery .kb-gallery-ul {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    row-gap: 12px !important;
    column-gap: 12px !important;
  }

  .dp-project-gallery .dp-gallery-third,
  .dp-project-gallery .dp-gallery-half,
  .dp-project-gallery .dp-gallery-wide,
  .dp-project-gallery .dp-gallery-side,
  .dp-project-gallery .dp-gallery-full,
  .dp-project-gallery .dp-gallery-tablet-full {
    grid-column: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    min-height: 420px;
  }

  .dp-project-gallery img {
    object-position: center center !important;
  }

  .dp-project-end {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 32px;
    min-height: 0;
    padding-right: 24px;
    padding-left: 24px;
  }

  .dp-project-end-empty { display: none; }
  .dp-project-end-previous { order: 1; }
  .dp-project-end-next { order: 2; text-align: left; }
  .dp-project-end-archive { order: 3; }

  .dp-project-lightbox { padding: 58px 16px 52px; }

  .dp-project-lightbox-image {
    max-height: calc(100dvh - 110px) !important;
  }

  .dp-project-lightbox-arrow {
    top: auto;
    bottom: 4px;
    width: 54px;
    height: 44px;
    transform: none;
  }

  .dp-project-lightbox-previous { left: 10px; }
  .dp-project-lightbox-next { right: 10px; }

  .dp-project-lightbox-caption {
    right: 70px;
    bottom: 17px;
    left: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-project-hero-image,
  .dp-project-hero h1,
  .dp-project-hero-meta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .dp-project-menu,
  .dp-project-menu a::after,
  .dp-project-gallery img,
  .dp-project-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
