/* Page Créations — liste éditoriale horizontale */

@font-face {
  font-family: "Climate Crisis";
  src: url("../fonts/climate-crisis/ClimateCrisis-Regular-VariableFont_YEAR.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.creations-page {
  --creations-paper: #eee9de;
  --creations-paper-light: #f7f2e8;
  --creations-ink: #151711;
  --creations-muted: rgba(21, 23, 17, .66);
  --creations-line: rgba(21, 23, 17, .2);
  --creations-gutter: clamp(20px, 4vw, 72px);
  --creations-max: 1480px;
  --creations-enter: cubic-bezier(.16, 1, .3, 1);
  min-width: 320px;
  color: var(--creations-ink) !important;
  background:
    radial-gradient(ellipse at 10% -6%, rgba(111, 48, 47, .1), transparent 34%),
    radial-gradient(ellipse at 92% 20%, rgba(49, 79, 61, .1), transparent 38%),
    radial-gradient(ellipse at 24% 82%, rgba(45, 80, 98, .07), transparent 30%),
    radial-gradient(ellipse at 82% 88%, rgba(79, 58, 88, .06), transparent 28%),
    linear-gradient(135deg, #f6f1e7 0%, #ebe8dc 48%, #f4eddf 100%) !important;
  background-size: auto !important;
}

.creations-page .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--creations-line) !important;
  background: rgba(238, 233, 222, .9) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

.creations-page .header-row {
  width: min(calc(100% - (2 * var(--creations-gutter))), var(--creations-max)) !important;
  min-height: 78px !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  padding: 0 !important;
}

.creations-page .brand-text {
  color: var(--creations-ink) !important;
  font-size: clamp(21px, 1.55vw, 27px) !important;
  font-weight: 700 !important;
  line-height: .9 !important;
  letter-spacing: -.025em !important;
  text-shadow: none !important;
}

.creations-page .brand-text span {
  margin-top: 8px !important;
  color: rgba(21, 23, 17, .56) !important;
  font-size: 7px !important;
}

.creations-page .header-right {
  grid-column: 2 !important;
  justify-self: end !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: clamp(18px, 2.5vw, 38px) !important;
}

.creations-page .site-nav {
  gap: clamp(18px, 2.4vw, 38px) !important;
}

.creations-page .site-nav a {
  position: relative !important;
  padding: 10px 0 !important;
  border: 0 !important;
  color: rgba(21, 23, 17, .72) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  text-decoration: none !important;
  transform: none !important;
}

.creations-page .site-nav a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: .22em !important;
  bottom: 4px !important;
  left: 0 !important;
  height: 1px !important;
  background: #a56c31 !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 380ms var(--creations-enter) !important;
}

.creations-page .site-nav a:is(:hover, :focus-visible),
.creations-page .site-nav a[aria-current="page"] {
  color: var(--creations-ink) !important;
}

.creations-page .site-nav a:is(:hover, :focus-visible)::after,
.creations-page .site-nav a[aria-current="page"]::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

.creations-page .instagram-link {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--creations-line) !important;
  color: var(--creations-ink) !important;
  background: transparent !important;
}

.creations-page .instagram-link svg {
  stroke: currentColor !important;
}

.creations-page main {
  color: var(--creations-ink) !important;
  background: transparent !important;
}

.creations-page .container {
  width: min(calc(100% - (2 * var(--creations-gutter))), var(--creations-max)) !important;
  margin-inline: auto !important;
}

.creations-hero {
  padding: clamp(68px, 7vw, 108px) 0 clamp(28px, 3vw, 44px) !important;
}

.creations-hero .container {
  display: block !important;
}

.creations-hero h1 {
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--creations-ink) !important;
  font-family: "Climate Crisis", var(--font-title) !important;
  font-size: clamp(42px, 5vw, 78px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: "YEAR" 1988 !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  text-wrap: balance !important;
}

.creations-hero h1 span {
  display: block !important;
  color: inherit !important;
  font: inherit !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.creations-hero h1 span + span {
  margin-top: .08em !important;
}

.creations-hero p {
  max-width: 620px !important;
  margin: clamp(30px, 4vw, 58px) 0 0 !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--creations-line) !important;
  color: var(--creations-muted) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.creations-list-section {
  padding: clamp(38px, 4.5vw, 72px) 0 clamp(90px, 12vw, 180px) !important;
}

.creations-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 30px) !important;
  border-bottom: 0 !important;
}

.creation-row {
  --creation-accent: #a56c31;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
  align-items: start !important;
  gap: 0 !important;
  padding: clamp(12px, 1.35vw, 20px) !important;
  border: 2px solid color-mix(in srgb, var(--creation-accent) 58%, transparent) !important;
  color: var(--creations-ink) !important;
  background: linear-gradient(120deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .1)) !important;
  box-shadow: 0 18px 60px rgba(42, 32, 19, .06) !important;
  text-decoration: none !important;
  outline-offset: 8px !important;
  transition:
    border-color 280ms var(--creations-enter),
    box-shadow 280ms var(--creations-enter),
    transform 280ms var(--creations-enter) !important;
}

.creation-row--girls { --creation-accent: #6f302f; }
.creation-row--songe { --creation-accent: #314f3d; }
.creation-row--premier { --creation-accent: #2d5062; }
.creation-row--hiero { --creation-accent: #4f3a58; }
.creation-row--sf { --creation-accent: #9a4218; }
.creation-row--ateliers { --creation-accent: #9b741c; }

.creation-media {
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #111 !important;
}

.creation-media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid rgba(255, 250, 240, .18) !important;
  pointer-events: none !important;
}

.creation-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(.88) contrast(1.03) !important;
  transform: scale(1.01) !important;
  transition: transform 800ms var(--creations-enter), filter 800ms var(--creations-enter) !important;
}

.creation-row--girls .creation-media img { object-position: 58% center !important; }
.creation-row--premier .creation-media img { object-position: center 43% !important; }

.creation-copy {
  min-width: 0 !important;
  padding: clamp(20px, 2.2vw, 30px) clamp(6px, .7vw, 10px) clamp(6px, .7vw, 10px) !important;
  text-align: center !important;
}

.creation-copy .project-type {
  display: block !important;
  margin: 0 0 14px !important;
  color: var(--creation-accent) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: .24em !important;
}

.creation-copy h2 {
  margin: 0 auto 20px !important;
  color: var(--creations-ink) !important;
  font-family: "Climate Crisis", var(--font-title) !important;
  font-size: clamp(24px, 2.4vw, 40px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: "YEAR" 1988 !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  white-space: normal !important;
  text-wrap: balance !important;
  transition: color 260ms ease !important;
}

.creation-copy p {
  max-width: 52ch !important;
  margin: 0 auto !important;
  color: var(--creations-muted) !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
}

@media (hover: hover) and (pointer: fine) {
  .creation-row:hover,
  .creation-row:focus-visible {
    border-color: var(--creation-accent) !important;
    box-shadow: 0 24px 68px color-mix(in srgb, var(--creation-accent) 22%, transparent) !important;
    transform: translateY(-4px) !important;
  }

  .creation-row:hover .creation-media img,
  .creation-row:focus-visible .creation-media img {
    filter: saturate(1) contrast(1.04) !important;
    transform: scale(1.045) !important;
  }

  .creation-row:hover .creation-copy h2,
  .creation-row:focus-visible .creation-copy h2 {
    color: var(--creation-accent) !important;
  }
}

.creations-page .site-footer {
  border-top: 1px solid var(--creations-line) !important;
  background: rgba(238, 233, 222, .62) !important;
}

.creations-page .footer-row {
  width: min(calc(100% - (2 * var(--creations-gutter))), var(--creations-max)) !important;
}

.creations-page .footer-copy,
.creations-page .footer-links a {
  color: var(--creations-muted) !important;
}

@media (max-width: 980px) {
  .creations-list {
    gap: 20px !important;
  }

  .creation-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

@media (max-width: 780px) {
  .creations-page {
    --creations-gutter: clamp(18px, 5vw, 26px);
  }

  .creations-page .header-row {
    min-height: 70px !important;
    align-items: center !important;
  }

  .creations-page .brand-text {
    font-size: 21px !important;
  }

  .creations-page .header-right {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .creations-page .menu-toggle {
    display: inline-flex !important;
    min-width: 52px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(21, 23, 17, .3) !important;
    border-radius: 0 !important;
    color: var(--creations-ink) !important;
    background: transparent !important;
  }

  .creations-page .site-nav {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: min(260px, calc(100vw - (2 * var(--creations-gutter)))) !important;
    padding: 12px 20px !important;
    border: 1px solid var(--creations-line) !important;
    border-radius: 0 !important;
    background: rgba(247, 242, 232, .98) !important;
    box-shadow: 0 20px 55px rgba(21, 23, 17, .14) !important;
  }

  .creations-page .site-nav a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    color: var(--creations-ink) !important;
  }

  .creations-page .instagram-link {
    display: none !important;
  }

  .creations-hero {
    padding: 52px 0 42px !important;
  }

  .creations-hero h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 9.6vw, 48px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
  }

  .creations-hero p {
    max-width: 520px !important;
    margin-top: 28px !important;
    font-size: 15px !important;
  }

  .creations-list {
    grid-template-columns: 1fr !important;
  }

  .creation-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 16px 16px 24px !important;
  }

  .creation-media {
    aspect-ratio: 4 / 3 !important;
  }

  .creation-copy {
    padding: 20px 2px 0 !important;
  }

  .creation-copy .project-type {
    margin-bottom: 10px !important;
  }

  .creation-copy h2 {
    margin-bottom: 14px !important;
    font-size: clamp(28px, 8.7vw, 42px) !important;
    line-height: 1.02 !important;
  }

  .creation-copy p {
    max-width: 58ch !important;
    font-size: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creation-row,
  .creation-media img,
  .creation-copy h2,
  .creations-page .site-nav a::after {
    transition: none !important;
  }
}

/* Direction 2026 — polaroids d'archive, composition libre et chromatique. */
.creations-hero {
  overflow: hidden !important;
  padding-bottom: clamp(78px, 8vw, 128px) !important;
}

.creations-hero h1 {
  width: min(1120px, 100%) !important;
}

.creations-hero h1 span {
  width: fit-content !important;
  animation: creations-title-enter 760ms var(--creations-enter) both !important;
}

.creations-hero h1 span + span {
  position: relative !important;
  margin-top: .12em !important;
  margin-left: clamp(30px, 9vw, 140px) !important;
  padding-bottom: .22em !important;
  animation-delay: 90ms !important;
}

.creations-hero h1 span + span::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: clamp(4px, .45vw, 7px) !important;
  background: linear-gradient(90deg,
    #6f302f 0 25%,
    #314f3d 25% 50%,
    #2d5062 50% 75%,
    #4f3a58 75% 100%) !important;
  transform-origin: left !important;
  animation: creations-line-enter 820ms 260ms var(--creations-enter) both !important;
}

.creations-list-section {
  padding-top: clamp(0px, .7vw, 10px) !important;
}

.creations-list-section .container {
  width: min(calc(100% - (2 * var(--creations-gutter))), 1220px) !important;
}

.creations-list {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: clamp(18px, 2.1vw, 32px) !important;
  row-gap: clamp(28px, 3.3vw, 48px) !important;
  align-items: start !important;
}

.creation-row {
  --card-rotation: -1deg;
  --card-delay: 120ms;
  isolation: isolate !important;
  grid-column: 1 / span 7 !important;
  grid-template-rows: auto auto !important;
  padding: clamp(10px, .95vw, 14px) clamp(10px, .95vw, 14px) clamp(20px, 2vw, 30px) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background:
    linear-gradient(145deg, #fffdf7, #f2eee5) !important;
  box-shadow:
    0 28px 70px rgba(42, 32, 19, .11),
    0 2px 0 rgba(255, 255, 255, .8) inset !important;
  transform: rotate(var(--card-rotation)) !important;
  animation: creations-card-enter 820ms var(--card-delay) var(--creations-enter) both !important;
  transition:
    box-shadow 420ms var(--creations-enter),
    transform 420ms var(--creations-enter) !important;
}

.creation-row:nth-child(2) {
  --card-rotation: 1.15deg;
  --card-delay: 190ms;
  grid-column: 8 / span 5 !important;
  margin-top: clamp(18px, 2.2vw, 32px) !important;
}

.creation-row:nth-child(3) {
  --card-rotation: .8deg;
  --card-delay: 260ms;
  grid-column: 1 / span 5 !important;
  margin-left: clamp(6px, 1vw, 14px) !important;
}

.creation-row:nth-child(4) {
  --card-rotation: -1.2deg;
  --card-delay: 330ms;
  grid-column: 6 / span 7 !important;
  margin-top: clamp(16px, 2vw, 28px) !important;
}

.creation-row:nth-child(5) {
  --card-rotation: .65deg;
  --card-delay: 400ms;
  grid-column: 1 / span 7 !important;
  margin-top: 0 !important;
}

.creation-row:nth-child(6) {
  --card-rotation: -1deg;
  --card-delay: 470ms;
  grid-column: 8 / span 5 !important;
  margin-top: clamp(18px, 2.2vw, 32px) !important;
}

.creation-row::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: clamp(12px, 1.4vw, 20px) clamp(-18px, -1.3vw, -10px) clamp(-18px, -1.3vw, -10px) clamp(12px, 1.4vw, 20px) !important;
  background: color-mix(in srgb, var(--creation-accent) 16%, #ece7dc) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--creation-accent) 12%, transparent) !important;
  transform: rotate(calc(var(--card-rotation) * -1.25)) !important;
  transition: background 420ms ease, box-shadow 420ms ease, transform 420ms var(--creations-enter) !important;
}

.creation-row::after {
  content: "01" !important;
  position: absolute !important;
  z-index: 3 !important;
  top: clamp(22px, 2.2vw, 34px) !important;
  right: clamp(-17px, -1.1vw, -10px) !important;
  display: grid !important;
  width: clamp(46px, 4vw, 62px) !important;
  height: clamp(30px, 2.7vw, 42px) !important;
  place-items: center !important;
  color: #fffaf0 !important;
  background: var(--creation-accent) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(9px, .75vw, 11px) !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--creation-accent) 24%, transparent) !important;
  transform: rotate(calc(var(--card-rotation) * -1.5)) !important;
  transition: transform 420ms var(--creations-enter) !important;
}

.creation-row:nth-child(2)::after {
  content: "02" !important;
  right: auto !important;
  left: clamp(-17px, -1.1vw, -10px) !important;
}

.creation-row:nth-child(3)::after { content: "03" !important; }

.creation-row:nth-child(4)::after {
  content: "04" !important;
  right: auto !important;
  left: clamp(-17px, -1.1vw, -10px) !important;
}

.creation-row:nth-child(5)::after { content: "05" !important; }
.creation-row:nth-child(6)::after {
  content: "06" !important;
  right: auto !important;
  left: clamp(-17px, -1.1vw, -10px) !important;
}

.creation-media {
  aspect-ratio: 16 / 10 !important;
  box-shadow: 0 0 0 1px rgba(21, 23, 17, .18) !important;
}

.creation-row:nth-child(2) .creation-media,
.creation-row:nth-child(3) .creation-media {
  aspect-ratio: 16 / 10 !important;
}

.creation-row:nth-child(4) .creation-media {
  aspect-ratio: 16 / 10 !important;
}

.creation-row:nth-child(5) .creation-media {
  aspect-ratio: 16 / 10 !important;
}

.creation-row:nth-child(6) .creation-media {
  aspect-ratio: 16 / 10 !important;
}

.creation-row--ateliers .creation-media img { object-position: 50% 46% !important; }

.creation-media::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: clamp(4px, .42vw, 7px) !important;
  background: var(--creation-accent) !important;
  opacity: .9 !important;
  transform: scaleY(.34) !important;
  transform-origin: bottom !important;
  transition: transform 620ms var(--creations-enter) !important;
}

.creation-media img {
  filter: saturate(.86) contrast(1.035) !important;
}

.creation-copy {
  position: relative !important;
  padding: clamp(18px, 1.7vw, 26px) clamp(8px, .8vw, 12px) 0 !important;
}

.creation-copy .project-type {
  width: fit-content !important;
  margin: 0 auto clamp(11px, 1.1vw, 16px) !important;
  padding: 7px 10px 6px !important;
  color: var(--creation-accent) !important;
  background: color-mix(in srgb, var(--creation-accent) 6%, transparent) !important;
}

.creation-copy h2 {
  max-width: 18ch !important;
  font-size: clamp(25px, 2.65vw, 43px) !important;
}

.creation-row:nth-child(2) .creation-copy h2,
.creation-row:nth-child(3) .creation-copy h2 {
  font-size: clamp(23px, 2.15vw, 35px) !important;
}

.creation-copy p {
  max-width: 48ch !important;
}

@media (hover: hover) and (pointer: fine) {
  .creation-row:hover,
  .creation-row:focus-visible {
    border-color: rgba(255, 255, 255, .94) !important;
    box-shadow:
      0 34px 90px color-mix(in srgb, var(--creation-accent) 14%, rgba(42, 32, 19, .12)),
      0 2px 0 rgba(255, 255, 255, .9) inset !important;
    transform: translateY(-10px) rotate(0deg) !important;
  }

  .creation-row:hover::before,
  .creation-row:focus-visible::before {
    background: color-mix(in srgb, var(--creation-accent) 23%, #ece7dc) !important;
    box-shadow: 0 26px 58px color-mix(in srgb, var(--creation-accent) 19%, transparent) !important;
    transform: translate(4px, 4px) rotate(0deg) !important;
  }

  .creation-row:hover::after,
  .creation-row:focus-visible::after {
    transform: translateY(-5px) rotate(0deg) !important;
  }

  .creation-row:hover .creation-media::before,
  .creation-row:focus-visible .creation-media::before {
    transform: scaleY(1) !important;
  }
}

@keyframes creations-title-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes creations-line-enter {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes creations-card-enter {
  from { opacity: 0; transform: translateY(36px) rotate(0deg); }
  to { opacity: 1; transform: translateY(0) rotate(var(--card-rotation)); }
}

@media (max-width: 1100px) {
  .creations-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 22px) !important;
  }

  .creation-row,
  .creation-row:nth-child(2),
  .creation-row:nth-child(3),
  .creation-row:nth-child(4),
  .creation-row:nth-child(5) {
    grid-column: auto !important;
    margin: 0 !important;
  }

  .creation-row:nth-child(6) {
    grid-column: auto !important;
    margin: 0 !important;
  }

  .creation-row:nth-child(even) {
    margin-top: 16px !important;
  }

  .creation-copy h2,
  .creation-row:nth-child(2) .creation-copy h2,
  .creation-row:nth-child(3) .creation-copy h2 {
    font-size: clamp(23px, 3vw, 34px) !important;
  }
}

@media (max-width: 780px) {
  .creations-hero {
    padding-bottom: 66px !important;
  }

  .creations-hero h1 span + span {
    margin-left: clamp(16px, 8vw, 34px) !important;
  }

  .creations-list {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .creation-row,
  .creation-row:nth-child(2),
  .creation-row:nth-child(3),
  .creation-row:nth-child(4),
  .creation-row:nth-child(5),
  .creation-row:nth-child(6),
  .creation-row:nth-child(even) {
    margin: 0 !important;
    padding: 12px 12px 26px !important;
    transform: none !important;
  }

  .creation-row::before {
    inset: 12px -8px -10px 10px !important;
    transform: none !important;
  }

  .creation-row::after,
  .creation-row:nth-child(2)::after,
  .creation-row:nth-child(4)::after,
  .creation-row:nth-child(5)::after {
    top: 20px !important;
    right: -7px !important;
    left: auto !important;
    transform: none !important;
  }

  .creation-row:nth-child(6)::after {
    top: 20px !important;
    right: -7px !important;
    left: auto !important;
    transform: none !important;
  }

  .creation-media,
  .creation-row:nth-child(2) .creation-media,
  .creation-row:nth-child(3) .creation-media,
  .creation-row:nth-child(4) .creation-media,
  .creation-row:nth-child(5) .creation-media {
    aspect-ratio: 4 / 3 !important;
  }

  .creation-row:nth-child(6) .creation-media {
    aspect-ratio: 4 / 3 !important;
  }

  .creation-copy {
    padding: 22px 5px 0 !important;
  }

  .creation-copy h2,
  .creation-row:nth-child(2) .creation-copy h2,
  .creation-row:nth-child(3) .creation-copy h2 {
    font-size: clamp(27px, 8vw, 39px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creations-hero h1 span,
  .creations-hero h1 span + span::after,
  .creation-row {
    animation: none !important;
  }

  .creation-row::before,
  .creation-row::after,
  .creation-media::before {
    transition: none !important;
  }
}

/* Corrections optiques finales des titres de créations. Placées après la grille
   responsive pour conserver leur priorité à toutes les largeurs. */
.creation-row--girls .creation-copy h2 {
  position: relative !important;
  transform: translateX(-.18em) !important;
}

.creation-row--hiero .creation-copy h2 {
  width: 100% !important;
  max-width: none !important;
  font-size: clamp(24px, 2.35vw, 39px) !important;
  letter-spacing: -.045em !important;
  white-space: nowrap !important;
}

.creation-row--sf .creation-copy h2 {
  width: 100% !important;
  max-width: none !important;
  color: #6f2d12 !important;
  font-size: clamp(25px, 2.6vw, 42px) !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) {
  .creation-row--hiero .creation-copy h2 {
    font-size: clamp(22px, 2.8vw, 30px) !important;
  }

  .creation-row--sf .creation-copy h2 {
    font-size: clamp(23px, 3vw, 34px) !important;
  }
}

@media (max-width: 780px) {
  .creation-row--girls .creation-copy h2 {
    transform: translateX(-.1em) !important;
  }

  .creation-row--hiero .creation-copy h2 {
    font-size: clamp(20px, 6.7vw, 30px) !important;
  }

  .creation-row--sf .creation-copy h2 {
    font-size: clamp(23px, 7.4vw, 34px) !important;
  }
}