/* Les guides roses de la maquette ne font pas partie du fond final. */
.branding-projects { position: relative; z-index: 2; margin-top: -8em; background: transparent; color: var(--ink); overflow: clip; }
.marquee--branding { margin-top: 0; padding-block: 3em; background: transparent; }
/* Le rouge recouvre le contenu audiovisuel avant sa limite de section.
   Le blanc commence sous le ruban, sur la même diagonale, sans cache noir. */
.marquee--branding .marquee__ribbon { position: relative; isolation: isolate; transform: rotate(2.5deg); }
.marquee--branding .marquee__ribbon::after { content: ''; position: absolute; z-index: -1; top: calc(100% - 1px); left: 0; width: 100%; height: 12em; background: var(--paper); pointer-events: none; }
.branding-projects__body { position: relative; background: var(--paper); padding: 7em 0 8em; }
.branding-projects__title { margin: 0 auto 1.15em; font: 800 7em/1 var(--font-heading); letter-spacing: -.035em; text-transform: uppercase; text-align: center; }
.branding-projects__title span { display: inline-block; padding: 0 .08em .025em; color: #fff; background: var(--red); transform: rotate(-3deg); }
.interactive-collage { font-size: calc(100vw / 76.5); width: 63.75em; height: 37em; margin-inline: auto; }
.interactive-collage__collection, .interactive-collage__list { width: 100%; height: 100%; }
.interactive-collage__list { position: relative; isolation: isolate; }
.interactive-collage__item { z-index: 0; position: absolute; top: 0; left: 0; }
.interactive-collage__item.is--1 { top: 6em; }
.interactive-collage__item.is--2 { top: 17em; left: 5em; }
.interactive-collage__item.is--3 { z-index: 1; top: 14em; left: 13.5em; }
.interactive-collage__item.is--4 { left: 24em; }
.interactive-collage__item.is--5 { z-index: 3; top: auto; bottom: 0; left: 26em; }
.interactive-collage__item.is--6 { z-index: 2; top: 9em; left: 31.5em; }
.interactive-collage__item.is--7 { z-index: 1; top: 16em; left: 39em; }
.interactive-collage__item.is--8 { top: 5em; left: auto; right: 0; }
/* Conserver les plans de la maquette au survol et au focus, sans permutation. */
.interactive-collage__item-inner { transform-origin: center; will-change: transform; backface-visibility: hidden; }
.branding-card { display: block; position: relative; width: 16.25em; aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; font-size: inherit; background: transparent; overflow: hidden; cursor: pointer; }
.branding-card.is--landscape { width: 20em; aspect-ratio: 4 / 3; }
.branding-card.is--portrait { width: 15em; aspect-ratio: 3 / 4; }
/* Un pixel de débordement sous le masque évite les filets de sous-pixel. */
.branding-card img { display: block; position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; pointer-events: none; }
.branding-card:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; }
@media (min-width: 1800px) { .interactive-collage { font-size: calc(1800px / 76.5); } }
@media (max-width: 991px) {
  .branding-projects__body { padding-block: 5em 6em; }
  .branding-projects__title { font-size: 6em; }
}
@media (max-width: 767px) {
  .branding-projects__body { padding-block: 3em 5em; }
  .branding-projects__title { font-size: clamp(2rem, 8.8vw, 4.1em); margin-bottom: 1.3em; }
  .interactive-collage { font-size: 2.1vw; width: 40em; height: 70em; }
  .interactive-collage__item.is--1 { top: 4em; left: 0; }
  .interactive-collage__item.is--2 { top: 21em; left: 0; }
  .interactive-collage__item.is--3 { top: 32em; left: 3em; }
  .interactive-collage__item.is--4 { top: 0; left: 23em; }
  .interactive-collage__item.is--5 { top: 53em; bottom: auto; left: 14em; }
  .interactive-collage__item.is--6 { top: 18em; left: 18em; }
  .interactive-collage__item.is--7 { top: 43em; left: 20em; }
  .interactive-collage__item.is--8 { top: 35em; left: 24em; right: auto; }
}

.interactive-collage + .interactive-collage { margin-top: 8em; }