/*
 * Finitions éditoriales — version 1.1.3
 *
 * Cette feuille complète le socle du thème sans modifier les contenus
 * Gutenberg. Elle concentre les détails de finition, les interactions et
 * les ajustements responsive afin de garder style.css lisible et stable.
 */

:root {
  --accent-deep: #c8733f;
  --paper-light: #fffdf6;
  --ink-shadow: rgba(15, 43, 73, 0.12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

::selection {
  color: var(--ink);
  background: rgba(239, 180, 134, 0.48);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 18px;
  z-index: 99999;
  padding: 12px 18px;
  color: var(--paper-light);
  background: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

body {
  background-image:
    radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.55), transparent 34rem),
    radial-gradient(circle at 87% 72%, rgba(193, 208, 215, 0.08), transparent 38rem);
}

.site-header {
  isolation: isolate;
  box-shadow: 0 0 0 rgba(15, 43, 73, 0);
  transition:
    min-height 240ms var(--ease-out),
    padding 240ms var(--ease-out),
    background-color 240ms ease,
    box-shadow 240ms ease;
}

.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 2;
  height: 2px;
  content: "";
  pointer-events: none;
  background: var(--accent-deep);
  transform: scaleX(var(--uvuv-scroll-progress, 0));
  transform-origin: left;
  transition: transform 80ms linear;
}

.site-header.is-scrolled {
  background: rgba(247, 243, 233, 0.965);
  box-shadow: 0 12px 38px rgba(15, 43, 73, 0.075);
}

.brand-mark img {
  transform-origin: center;
  transition: transform 300ms var(--ease-out);
}

.brand:hover .brand-mark img {
  transform: rotate(-2deg) translateY(-1px);
}

.brand-name,
.cover-page h1,
.chapter-copy h2,
.offers-heading h2,
.about-heading h1,
.about-intro {
  text-wrap: balance;
}

.gutenberg-nav .wp-block-navigation-item__content {
  transition: color 180ms ease;
}

.gutenberg-nav .wp-block-navigation-item__content:hover {
  color: var(--ink-soft);
}

.gutenberg-nav .wp-block-navigation-item__content::after {
  background: var(--accent-deep);
  transition: transform 240ms var(--ease-out);
}

.gutenberg-nav .wp-block-navigation__responsive-container-open,
.gutenberg-nav .wp-block-navigation__responsive-container-close {
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms var(--ease-out);
}

.gutenberg-nav .wp-block-navigation__responsive-container-open:hover,
.gutenberg-nav .wp-block-navigation__responsive-container-close:hover {
  color: var(--accent-deep);
  transform: rotate(2deg);
}

.cover-page {
  isolation: isolate;
}

.cover-page::before {
  position: absolute;
  top: 20%;
  right: 8%;
  z-index: -1;
  width: min(42vw, 650px);
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), transparent 69%);
}

.cover-page h1 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.scroll-cue,
.text-link,
.project-excerpt-link {
  border-bottom-color: var(--accent-deep);
  transition:
    color 180ms ease,
    border-color 180ms ease;
}

.scroll-cue span,
.text-link > a > span,
.project-excerpt-link [data-project-excerpt-arrow] {
  display: inline-block;
  transition: transform 240ms var(--ease-out);
}

.scroll-cue:hover span {
  transform: translateY(4px);
}

.text-link:hover,
.project-excerpt-link:hover {
  color: var(--ink-soft);
  border-bottom-color: var(--ink);
}

.text-link:hover > a > span,
.project-excerpt-link:hover [data-project-excerpt-arrow] {
  transform: translateX(5px);
}

.chapter-page {
  isolation: isolate;
}

.chapter-page::after {
  position: absolute;
  right: max(32px, calc((100vw - var(--content-max)) / 2));
  bottom: 0;
  left: max(32px, calc((100vw - var(--content-max)) / 2));
  z-index: -1;
  height: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(15, 43, 73, 0.09), transparent);
}

.chapter-copy h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.chapter-text,
.chapter-lead,
.approach-copy-body,
.about-copy,
.offers-description {
  text-wrap: pretty;
}

.chapter-quote,
.approach-quote {
  position: relative;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--accent-deep);
}

.chapter-quote::before,
.approach-quote::before {
  content: "";
  display: none;
}

.chapter-art img {
  transform: translateZ(0);
  transition:
    transform 800ms var(--ease-out),
    opacity 500ms ease;
}

.project-format {
  color: var(--ink);
}

.project-roles li {
  position: relative;
  padding-left: 17px;
}

.project-roles li::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--accent-deep);
  transform: translateY(-50%);
}

.project-excerpt {
  position: relative;
  padding-left: 22px;
}

.project-excerpt::before {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 2px;
  content: "";
  background: var(--accent);
}

.project-excerpt:not([hidden]) {
  animation: uvuv-excerpt-in 360ms var(--ease-out) both;
}

.project-dots {
  padding: 3px 8px;
  border: 1px solid rgba(15, 43, 73, 0.08);
  border-radius: 999px;
  background: rgba(247, 243, 233, 0.72);
  backdrop-filter: blur(8px);
}

.project-dots button::before {
  border-color: rgba(15, 43, 73, 0.58);
}

.project-dots button:hover::before,
.project-dots button:focus-visible::before,
.project-dots button.is-active::before {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
}

.uvuv-project-slide.is-active {
  animation: uvuv-slide-in 430ms var(--ease-out) both;
}

.offers-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 86%, rgba(255, 255, 255, 0.62), transparent 28rem),
    rgba(240, 232, 218, 0.58);
}

.offers-band::after {
  position: absolute;
  top: -16rem;
  right: -13rem;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(239, 180, 134, 0.22);
  border-radius: 50%;
}

.offers-inclusions ul {
  border-top-color: rgba(15, 43, 73, 0.2);
}

.offers-inclusions li {
  transition:
    background-color 240ms ease,
    padding 240ms var(--ease-out);
}

.offers-inclusions li:hover {
  background: rgba(255, 253, 246, 0.38);
}

.offer-price {
  position: relative;
  padding-left: 22px;
}

.offer-price::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: var(--accent-deep);
  transform: translateY(-50%);
}

.site-footer {
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.55), transparent 28rem),
    rgba(247, 243, 233, 0.5);
}

.footer-grid a {
  position: relative;
  transition: color 180ms ease;
}

.footer-grid a::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}

.footer-grid a:hover {
  color: var(--ink);
}

.footer-grid a:hover::after,
.footer-grid a:focus-visible::after {
  transform: scaleX(1);
}

.portrait-rule,
.footer-horizon,
.eyebrow::after {
  background: var(--accent-deep);
}

.offers-band .offers-heading .eyebrow::after {
  display: none;
}

.portrait-rule::after,
.footer-horizon span {
  background: var(--accent-deep);
}

.portrait-figure img {
  filter: saturate(0.98) contrast(1.015);
}

html.uvuv-js .uvuv-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms ease,
    transform 850ms var(--ease-out);
}

html.uvuv-js .uvuv-reveal.uvuv-reveal-art {
  transform: translateY(18px) scale(0.985);
}

html.uvuv-js .uvuv-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes uvuv-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes uvuv-excerpt-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes uvuv-menu-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 90px;
  }

  body.uvuv-menu-open {
    overflow: hidden;
  }

  .site-header {
    padding-right: max(18px, env(safe-area-inset-right));
    padding-left: max(18px, env(safe-area-inset-left));
  }

  .brand-mark {
    width: 50px;
    height: 50px;
  }

  .brand-name {
    font-size: 16px;
  }

  .gutenberg-nav .wp-block-navigation__responsive-container-open {
    width: 50px;
    height: 50px;
    background: rgba(255, 253, 246, 0.35);
  }

  .gutenberg-nav .wp-block-navigation__responsive-container.is-menu-open {
    animation: uvuv-menu-in 280ms var(--ease-out) both;
  }

  .gutenberg-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    border-bottom: 1px solid rgba(15, 43, 73, 0.11);
    font-size: clamp(27px, 8vw, 38px);
  }

  .cover-page {
    width: calc(100% - 38px);
    grid-template-rows: auto minmax(300px, 1fr);
    padding-top: calc(var(--header-height) + 28px);
  }

  .cover-page h1 {
    font-size: clamp(41px, 11vw, 66px);
  }

  .cover-art {
    width: min(88vw, 500px);
    margin-top: -24px;
  }

  .chapter-page,
  .approach-page,
  .project-page,
  .uvuv-project-carousel {
    min-height: 0;
    padding-top: calc(var(--header-height) + 34px);
    padding-bottom: 64px;
  }

  .chapter-page::after {
    right: 20px;
    left: 20px;
  }

  .chapter-copy h2,
  .uvuv-project-carousel .chapter-copy h2 {
    margin-top: 22px;
    margin-bottom: 18px;
    font-size: clamp(39px, 10.8vw, 56px);
    line-height: 1.04;
  }

  .chapter-art,
  .approach-art,
  .repair-art,
  .project-art {
    width: min(104%, 560px);
  }

  .chapter-text,
  .chapter-lead,
  .approach-copy-body {
    line-height: 1.68;
  }

  .chapter-quote,
  .approach-quote {
    margin-top: 30px;
    padding-top: 18px;
    font-size: clamp(21px, 5.8vw, 28px);
  }

  .uvuv-project-carousel .project-format {
    margin-bottom: 8px;
  }

  .uvuv-project-carousel .project-art {
    width: min(108%, 560px);
    margin-top: -6px;
    margin-bottom: 6px;
  }

  .uvuv-project-carousel h3 {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .uvuv-project-carousel .project-roles {
    margin-bottom: 20px;
  }

  .uvuv-project-carousel .project-dots {
    margin-top: 24px;
  }

  .project-excerpt {
    padding-left: 18px;
  }

  .offers-band {
    padding: 72px 24px;
  }

  .offers-heading {
    margin-bottom: 38px;
  }

  .offers-heading h2 {
    font-size: clamp(40px, 11vw, 56px);
  }

  .offers-inclusions li {
    padding: 18px 0;
  }

  .offer-price {
    font-size: clamp(31px, 9vw, 42px);
  }

  .site-footer {
    padding-top: 76px;
  }

  .about-hero {
    padding-top: calc(var(--header-height) + 46px);
  }
}

@media (max-width: 520px) {
  .cover-page h1 {
    font-size: clamp(39px, 11.5vw, 54px);
  }

  .chapter-page,
  .approach-page,
  .project-page,
  .uvuv-project-carousel {
    padding-right: 20px;
    padding-left: 20px;
  }

  .chapter-art,
  .approach-art,
  .repair-art {
    width: calc(100% + 18px);
    margin-right: -9px;
    margin-left: -9px;
  }

  .uvuv-project-carousel .project-art {
    width: calc(100% + 24px);
    margin-right: -12px;
    margin-left: -12px;
  }

  .page-mark {
    display: none;
  }

  .offers-band {
    padding-right: 20px;
    padding-left: 20px;
  }

  .offers-description {
    font-size: 16px;
    line-height: 1.7;
  }

  .text-link {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.uvuv-js .uvuv-reveal,
  html.uvuv-js .uvuv-reveal.uvuv-reveal-art {
    opacity: 1;
    transform: none;
  }

  .uvuv-project-slide.is-active,
  .project-excerpt:not([hidden]),
  .gutenberg-nav .wp-block-navigation__responsive-container.is-menu-open {
    animation: none;
  }
}