/* Direction éditoriale propre à Créations ; aucun style de l’accueil n’est remplacé. */
.collection-heading{background:radial-gradient(ellipse at 88% 54%,#e6ccd044 0,transparent 35%)}
.collection-heading .section-top{padding-bottom:22px;border-bottom:1px solid #4a112220}
.collection-heading .page-title{position:relative;z-index:1;max-width:78%}
.collection-heading .page-title em{background:linear-gradient(transparent 90%,#e6ccd06b 90%);padding-right:.08em}
.collection-thread{opacity:.34}
.collection-guide:before,.collection-guide:after{content:'';position:absolute;pointer-events:none;border:1px solid #4a112229;border-radius:100px 100px 2px 2px;inset:2% -8% -3% 7%;transform:rotate(7deg);z-index:-1}
.collection-guide:before{background:linear-gradient(155deg,#ead6ce66,#f5f1ea00 70%);transform:rotate(-7deg);inset:4% 5% -2% -5%}
.collection-guide .guide-ground{bottom:-6px;left:2%;right:-10%}
.collection-index .creation-grid{gap:100px 45px}
.collection-index .creation-card:nth-child(2){margin-top:145px}
.collection-index .creation-cover{border:1px solid #284d4014}
.collection-index .creation-art{inset:14% 6% 14%}
.collection-index .creation-cover:before{content:'';position:absolute;inset:9% 9% 8%;border:1px solid currentColor;opacity:.1;transform:rotate(5deg);pointer-events:none}
.collection-index .creation-web .creation-cover{background:radial-gradient(ellipse at 25% 20%,#eef2e7,#d5dfd3)}
.collection-index .creation-application .creation-cover{background:radial-gradient(ellipse at 80% 20%,#356552,#153e35 75%);color:#f5f1ea}
.collection-index .creation-application .creation-window{box-shadow:0 28px 55px #071d2970;transform:rotate(3deg) translateY(-4px)}
.collection-index .creation-musique{width:88%}
.collection-index .creation-musique .creation-cover{background:radial-gradient(ellipse at 15% 20%,#7d2943,#341521 70%)}
.collection-index .creation-musique .creation-cover:before{inset:10% 6%;transform:rotate(-3deg)}
.collection-index .creation-caption{border-bottom:1px solid var(--line);padding-bottom:24px}
.collection-index .creation-caption .tiny{color:var(--wine);letter-spacing:.18em}
.collection-index .creation-caption>span{color:var(--wine)}
.collection-index .creation-caption p:last-child{max-width:330px;line-height:1.7}
.collection-index .creation-cover:hover .creation-window{transform:rotate(0deg) translateY(-5px)}
.collection-index .creation-musique .creation-art{inset:16% 8% 16%}
@media(max-width:1100px) and (min-width:801px){.collection-heading .page-title{max-width:80%}.collection-index .creation-art{inset:18% 6% 16%}}
@media(max-width:800px){.collection-heading .page-title{max-width:100%}.collection-heading .section-top{padding-bottom:17px}.collection-guide:before,.collection-guide:after{inset:2% 0 -2% 0}.collection-index .creation-grid{gap:60px 26px}.collection-index .creation-card:nth-child(2){margin-top:75px}.collection-index .creation-musique{width:100%}}
@media(max-width:560px){.collection-index .creation-grid{gap:45px}.collection-index .creation-card:nth-child(2){margin-top:0}.collection-index .creation-art{inset:18% 7% 15%}.collection-index .creation-musique .creation-art{inset:18% 8% 16%}.collection-index .creation-caption{padding-bottom:20px}.collection-guide:before,.collection-guide:after{inset:2% 0 -2% 6%}}
@media(prefers-reduced-motion:reduce){.collection-index .creation-window{transform:none!important}}

.collection-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28%);
  align-items: center;
  column-gap: clamp(20px, 4vw, 64px);
}

.collection-heading .section-top,
.collection-heading .heading-bottom,
.collection-heading .creation-sites-jump {
  grid-column: 1 / -1;
}

.collection-heading .page-title {
  grid-area: 2 / 1;
  max-width: none;
}

.collection-heading .collection-guide {
  grid-area: 2 / 2;
  position: relative;
  inset: auto;
  width: min(100%, 300px);
  height: auto;
  aspect-ratio: 2 / 3;
  justify-self: center;
}

.collection-heading .heading-bottom {
  padding-right: 0;
  min-height: 0;
}

@media (max-width: 800px) {
  .collection-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection-heading .collection-guide {
    grid-area: 3 / 1;
    width: clamp(155px, 38vw, 220px);
    margin-block: 8px 24px;
  }
}
