/* Client logo strips: one tone, one visual weight (meeting of 23 September:
   "too colorful, the size is different for each logo, it looks messy").

   Tone: every plain wordmark is flattened to the same ink at the same
   opacity, so green, red and blue marks read as one grey. The three marks
   with white detail inside (TF1, Michelin's Bibendum, the Institut Pasteur
   seal) would turn into solid blobs that way, so they carry
   data-logo-tone="detail" and are greyed instead, tuned to the same weight.

   Weight: each logo carries --logo-h, set in the markup from its own aspect
   ratio (height = 2.28rem x ratio^-0.4), so very wide wordmarks sit lower and
   compact marks taller, and every logo reads at about the same presence.
   Each strip scales that one value; nothing else sets a logo's height. */

:root .hero__clients .hero__client-logo,
:root .closing-contact__logo,
:root .brand-marquee__group img,
:root .contact-page__clients img,
:root .realisations-clients .marquee img {
  filter: brightness(0);
  opacity: .58;
  width: auto; max-width: none; max-height: none;
  object-fit: contain;
}

:root img[data-logo-tone="detail"][src] { filter: grayscale(1) contrast(1.15) brightness(.7); opacity: .7; }

/* The hero strip: the reference size, ten logos in two rows of five. Columns
   take their content's width (spread with space-between) so a wide wordmark
   like Johnson & Johnson keeps its size instead of being squeezed. */
:root .home-editorial .hero__clients { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); justify-content: space-between; align-items: center; column-gap: 1.5rem; row-gap: 1.125rem; max-width: 40rem; }
:root .home-editorial .hero__clients li { display: flex; align-items: center; min-height: 2.25rem; }
:root .home-editorial .hero__clients .hero__client-logo { height: var(--logo-h, 1.4rem); max-width: 100%; }
/* The contact section, a step smaller beside the form. */
:root .closing-contact__logos { grid-template-columns: repeat(5, minmax(0, auto)); justify-content: space-between; column-gap: 1.25rem; }
:root .closing-contact__logo { height: calc(var(--logo-h, 1.4rem) * .88); max-width: 100%; object-position: left center; }
/* The capabilities marquee and the page strips, a step larger. */
:root .brand-marquee__group img { height: calc(var(--logo-h, 1.4rem) * 1.25); }
:root .contact-page__clients img,
:root .realisations-clients .marquee img { height: calc(var(--logo-h, 1.4rem) * 1.05); }
/* The contact page strip: the same five columns as the hero, 5 and 5. */
:root .contact-page__clients { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); justify-content: space-between; column-gap: 1.5rem; }
:root .contact-page__clients li { display: flex; align-items: center; min-width: 0; min-height: 2.5rem; }
:root .contact-page__clients img { max-width: 100%; object-position: left center; }

@media (max-width: 1023px) {
  :root .home-editorial .hero__clients { column-gap: 1.25rem; }
  :root .home-editorial .hero__clients .hero__client-logo { height: calc(var(--logo-h, 1.4rem) * .86); }
}
/* Phones: two rows of five would be too small to read, so five rows of two. */
@media (max-width: 639px) {
  :root .home-editorial .hero__clients,
  :root .closing-contact__logos,
  :root .contact-page__clients { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; column-gap: 1.5rem; row-gap: .5rem; }
  :root .home-editorial .hero__clients li { min-height: 2rem; }
  :root .home-editorial .hero__clients .hero__client-logo { height: calc(var(--logo-h, 1.4rem) * .78); }
}

/* Mouse drag on the horizontal carousels (drag-scroll.js, 7 Oct 2026). */
.is-draggable { cursor: grab; }
.is-draggable.is-dragging { cursor: grabbing; user-select: none; }
.is-draggable.is-dragging * { pointer-events: none; }