.creation-page { background: var(--cream); }

.creation-hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(370px, .82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(45px, 7vw, 105px);
  padding: 122px clamp(22px, 5vw, 76px) 70px;
  background: var(--coral);
  overflow: hidden;
}
.creation-hero-copy { position: relative; z-index: 2; max-width: 660px; }
.creation-hero h1 { margin-bottom: 30px; font-size: clamp(62px, 8vw, 118px); line-height: .84; }
.creation-hero h1 em { color: var(--cream); }
.creation-hero-copy > p:not(.eyebrow) { max-width: 560px; color: rgba(0,0,0,.75); font-size: 18px; }
.creation-collage { position: relative; height: min(680px, 74vh); min-height: 530px; }
.creation-collage figure { position: absolute; margin: 0; overflow: hidden; box-shadow: var(--shadow); }
.collage-main { inset: 5% 0 5% 16%; }
.collage-top { z-index: 2; left: 0; top: 0; width: 34%; height: 39%; }
.collage-bottom { z-index: 2; right: -2%; bottom: 0; width: 43%; height: 36%; }
.creation-sticker { position: absolute; z-index: 3; left: 4%; bottom: 11%; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; background: var(--sun); font-family: var(--display); font-size: 20px; line-height: .94; text-align: center; transform: rotate(-8deg); }

.creative-hub { padding: clamp(88px, 10vw, 145px) clamp(22px, 6vw, 96px); background: var(--cream); }
.hub-heading { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(320px, 1.1fr); gap: 18px clamp(40px, 7vw, 110px); align-items: end; margin-bottom: clamp(48px, 7vw, 88px); }
.hub-heading .eyebrow { grid-column: 1 / -1; }
.hub-heading h2 { margin: 0; font-size: clamp(54px, 6.5vw, 96px); line-height: .9; }
.hub-heading > p:last-child { max-width: 540px; margin: 0 0 8px; color: rgba(0,0,0,.68); font-size: 17px; }
.creative-paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.4vw, 20px); }
.creative-path { min-height: 245px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-items: start; padding: clamp(23px, 3vw, 38px); color: var(--ink); background: var(--blush); text-decoration: none; transition: transform .22s ease, background .22s ease; }
.creative-path:nth-child(2) { background: var(--sun); }
.creative-path:nth-child(3) { background: var(--coral); }
.creative-path:hover, .creative-path:focus-visible { transform: translateY(-5px); }
.creative-path > span { font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.creative-path strong { grid-column: 1 / -1; align-self: end; max-width: 310px; font-family: var(--display); font-size: clamp(39px, 4vw, 58px); font-weight: 400; line-height: .88; }
.creative-path small { align-self: end; font-size: 11px; font-weight: 700; }
.creative-path i { align-self: end; font-size: 20px; font-style: normal; }

.creative-section { display: grid; grid-template-columns: minmax(280px, .6fr) minmax(590px, 1.4fr); gap: clamp(45px, 7vw, 110px); padding: clamp(90px, 11vw, 160px) clamp(22px, 6vw, 96px); }
.creative-intro { align-self: start; position: sticky; top: 120px; }
.creative-intro h2 { margin-bottom: 29px; font-size: clamp(53px, 6vw, 88px); line-height: .9; }
.creative-intro > p:not(.eyebrow) { max-width: 440px; color: rgba(0,0,0,.68); font-size: 16px; }
.creative-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2vw, 27px); }
.creative-card { position: relative; min-height: 420px; padding: 0; border: 0; overflow: hidden; background: var(--blush); cursor: zoom-in; text-align: left; box-shadow: 0 14px 42px rgba(0,0,0,.1); }
.creative-card.card-wide { grid-column: 1 / -1; min-height: 500px; }
.creative-card img { transition: transform .55s ease, filter .3s ease; }
.creative-card:hover img, .creative-card:focus-visible img { transform: scale(1.025); filter: saturate(1.05); }
.creative-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.76)); }
.creative-card > span { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 25px; color: var(--cream); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.creative-card i { font-style: normal; font-size: 17px; }

.community-section { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(540px, 1.32fr); gap: clamp(45px, 7vw, 110px); padding: clamp(90px, 11vw, 160px) clamp(22px, 6vw, 96px); background: var(--blush); }
.community-offer { align-self: start; padding: clamp(32px, 5vw, 72px); background: var(--coral); }
.community-lead { max-width: 690px; margin-bottom: 44px; font-family: var(--serif); font-size: clamp(25px, 3vw, 39px); line-height: 1.12; }
.community-steps { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid rgba(0,0,0,.28); }
.community-steps li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,.28); }
.community-steps > li > span { padding-top: 4px; font-size: 10px; font-weight: 800; letter-spacing: .12em; opacity: .55; }
.community-steps div { display: grid; gap: 3px; }
.community-steps strong { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.community-steps small { font-size: 13px; }

.creation-cta { min-height: 520px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: center; gap: 20px 60px; padding: clamp(70px, 9vw, 125px) clamp(22px, 8vw, 130px); background: var(--sun); }
.creation-cta .eyebrow { grid-column: 1 / -1; align-self: end; }
.creation-cta h2 { margin: 0; font-size: clamp(52px, 7vw, 96px); line-height: .9; }
.creation-cta h2 em { color: var(--coral); }
.creation-cta .circle-button { text-decoration: none; }

.lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 30px; visibility: hidden; pointer-events: none; }
.lightbox.is-open { visibility: visible; pointer-events: auto; }
.lightbox-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.85); opacity: 0; transition: opacity .25s ease; }
.lightbox.is-open .lightbox-backdrop { opacity: 1; }
.lightbox-dialog { position: relative; z-index: 2; max-width: min(1050px, 92vw); max-height: 90vh; margin: 0; padding: 54px 18px 18px; background: var(--cream); transform: translateY(16px); opacity: 0; transition: .25s ease; }
.lightbox.is-open .lightbox-dialog { transform: translateY(0); opacity: 1; }
.lightbox-dialog img { width: auto; max-width: 100%; height: auto; max-height: calc(90vh - 110px); margin: auto; object-fit: contain; background: transparent; }
.lightbox-dialog figcaption { padding: 14px 2px 0; font-family: var(--serif); font-size: 18px; }
.lightbox-close { position: absolute; right: 15px; top: 11px; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.lightbox-close span { font-size: 25px; font-weight: 400; }

@media (max-width: 1020px) {
  .creation-hero { grid-template-columns: .8fr 1fr; gap: 35px; }
  .creative-section, .community-section { grid-template-columns: 1fr; }
  .creative-intro { position: static; }
}

@media (max-width: 760px) {
  .creation-hero { min-height: auto; grid-template-columns: 1fr; padding: 110px 18px 52px; }
  .creation-hero h1 { font-size: clamp(70px, 22vw, 96px); }
  .creation-hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .creation-collage { height: 500px; min-height: 0; margin-top: 12px; }
  .collage-main { inset: 3% 0 5% 10%; }
  .collage-top { width: 41%; height: 36%; }
  .collage-bottom { width: 47%; height: 32%; }
  .creation-sticker { width: 88px; height: 88px; font-size: 16px; }
  .creative-hub { padding: 76px 18px; }
  .hub-heading { grid-template-columns: 1fr; gap: 22px; }
  .hub-heading .eyebrow { grid-column: auto; }
  .hub-heading h2 { font-size: 59px; }
  .hub-heading > p:last-child { font-size: 16px; }
  .creative-paths { grid-template-columns: 1fr; }
  .creative-path { min-height: 195px; }
  .creative-path strong { font-size: 48px; }
  .creative-section { gap: 45px; padding: 78px 18px; }
  .creative-intro h2 { font-size: 57px; }
  .creative-grid { grid-template-columns: 1fr; gap: 14px; }
  .creative-card, .creative-card.card-wide { grid-column: auto; min-height: 420px; }
  .community-section { gap: 44px; padding: 78px 18px; }
  .community-offer { padding: 30px 22px; }
  .community-lead { font-size: 27px; }
  .creation-cta { min-height: 520px; grid-template-columns: 1fr; gap: 32px; padding: 70px 20px; }
  .creation-cta h2 { font-size: 54px; }
  .creation-cta .circle-button { justify-self: end; }
  .lightbox { padding: 10px; }
  .lightbox-dialog { max-width: 100%; padding: 50px 10px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .creative-card img { transition: none; }
}

.creative-card { color: inherit; text-decoration: none; }
.creation-page-intro > * { margin-top: 0; }
.single-creation-content { padding: clamp(65px,9vw,120px) clamp(22px,7vw,110px); }
.single-creation-cover { height: min(75vh,800px); margin: 0 0 70px; }
.creation-project-gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 70px; }
.creation-project-gallery figure { min-height: 540px; margin: 0; }
@media (max-width:760px) {
  .creation-project-gallery { grid-template-columns: 1fr; }
}

/* Un média vidéo ajouté dans une galerie ne doit pas laisser un cadre vide. */
.creation-project-video video, .creation-project-video .wp-video { max-width: 100%; height: auto; }