/* Mlsoon skin: shared across the dark and light presentation modes. */
@import url("/mlsoon-loader.css?v=2");
:root {
  --slate: #0e0825;
  --slate-950: #070313;
  --slate-800: #1a0f40;
  --slate-600: #3c247d;
  --gold: #e8a830;
  --gold-600: #c47d28;
  --teal: #ab82ce;
  --teal-300: #c9ace2;
  --paper: #fffaf0;
  --bg: var(--paper);
  --ink: var(--slate);
  --accent: var(--gold);
  --accent-2: var(--teal);
}

.home { background: #0e0825; }

/* Shared chrome: `web-logo` is wider than the former lock-up. These widths
   preserve the original F+ visual footprint in the header, menu and footer. */
.nav__logo img,
.overlay__logo {
  width: clamp(112px, 10.25vw, 132px) !important;
  height: auto !important;
}

.footer__logo img {
  width: clamp(108px, 9.7vw, 124px) !important;
  height: auto !important;
}

@media (max-width: 640px) {
  .nav__logo img,
  .overlay__logo { width: 108px !important; }
  .footer__logo img { width: 112px !important; }
}

/* `web-logo` is intentionally much wider than the original F+ lockup.
   Keep its perceived footprint aligned with the original hero composition. */
.home .hero__logo img {
  width: clamp(180px, 32vw, 520px);
}

@media (max-width: 640px) {
  .home .hero__logo img { width: min(68vw, 300px); }
}

.home .hero-canvas__gl {
  background: radial-gradient(120% 90% at 78% 16%, #542ba0 0, transparent 55%), radial-gradient(90% 80% at 10% 100%, #0e0825 0, transparent 60%), #120a2a;
}
.home .hero-canvas__grad { background: linear-gradient(0deg, rgba(14, 8, 37, .88) 0, rgba(14, 8, 37, .28) 48%, rgba(14, 8, 37, 0) 68%); }

/* Shared inner-page canvas and surfaces: no inherited green F+ palette. */
.hero-canvas__gl {
  background:
    radial-gradient(120% 90% at 78% 16%, #542ba0 0, transparent 55%),
    radial-gradient(90% 80% at 10% 100%, #0e0825 0, transparent 60%),
    #120a2a !important;
}

.hero-canvas__grad {
  background: linear-gradient(0deg, rgba(14, 8, 37, .88) 0, rgba(14, 8, 37, .28) 48%, rgba(14, 8, 37, 0) 68%) !important;
}

/* The About hero keeps the visual field visible behind the copy. */
.agence .hero-canvas__grad {
  background: linear-gradient(0deg, rgba(14, 8, 37, .82) 0, rgba(14, 8, 37, .34) 34%, rgba(14, 8, 37, 0) 62%) !important;
}

.agence .hero__title,
.agence .services__title,
.agence .band__title,
.agence .trust__title {
  font-family: "Onest", Arial, sans-serif !important;
  font-style: normal !important;
}

.agence, .clients, .equipe, .contact, .projets, .projet, .legal {
  background: #0e0825 !important;
}

.clients .panel, .equipe .panel, .contact .panel,
.projets .panel, .projet .panel, .equipe .stats {
  background-color: rgba(60, 36, 125, .25) !important;
  border-color: rgba(201, 172, 226, .18) !important;
}

/* About remains an open visual field: expertise and CTA do not sit on
   opaque lavender cards, so the particle scene can stay present. */
.agence .panel,
.agence .services,
.agence .stats,
.agence .cta {
  background: transparent !important;
}

.agence .panel {
  /* Same translucent, frosted layer as the F+ reference, recoloured for Mlsoon. */
  background: rgba(26, 15, 64, .32) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  border-color: rgba(201, 172, 226, .18) !important;
}

/* The values in the About principles grid are deliberately compact. The
   original scale is intended for short marks, not multi-line sentences. */
.agence .stat__n {
  font-size: clamp(34px, 2.8vw, 48px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

/* Portrait supplied for the About page: its original 1:2 framing is adapted
   to the existing 3:4 editorial panel without letting the foreground hand
   dominate the composition. */
.agence .trust__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 48% !important;
  filter: grayscale(1) contrast(1.05) brightness(.92) !important;
}

/* Keep the existing Contact location band but remove the inherited Paris
   photography in favour of the local Mlsoon visual language. */
.contact .band__media {
  background:
    radial-gradient(80% 110% at 78% 28%, rgba(84,43,160,.52), transparent 62%),
    radial-gradient(70% 100% at 16% 88%, rgba(232,168,48,.11), transparent 64%),
    #0e0825;
}
.contact .band__media img { opacity: 0 !important; }
.contact .coord--address { grid-column: 1 / -1; }

/* Static Clients page — keeps the editorial pacing of the reference while
   giving Mlsoon a distinct, dark-purple roster. */
.mlsoon-clients {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  background: #0e0825;
}

.mlsoon-clients > :not(.hero-canvas) { position: relative; z-index: 1; }
.clients-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 170px 8vw 88px;
}
.clients-eyebrow {
  margin: 0 0 24px;
  color: #c9ace2 !important;
  font: 700 12px/1.2 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.clients-hero h1,
.clients-intro h2,
.clients-note h2 {
  margin: 0;
  max-width: 940px;
  font-family: var(--font-display);
  font-size: clamp(58px, 8.4vw, 142px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .88;
}
.clients-hero h1 span { color: var(--gold); }
.clients-lead {
  max-width: 550px;
  margin: 38px 0 0;
  color: rgba(255,250,240,.82) !important;
  font-size: clamp(17px,1.45vw,22px) !important;
  line-height: 1.55;
}
.clients-scroll {
  margin: 72px 0 0;
  color: #c9ace2 !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.clients-scroll span { display: inline-block; margin-left: 8px; color: var(--gold); }
.clients-intro,
.clients-note {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(260px,.72fr);
  column-gap: 8vw;
  align-items: end;
  padding: 160px 8vw;
  background: rgba(26,15,64,.32);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-block: 1px solid rgba(201,172,226,.15);
}
.clients-intro .clients-eyebrow,
.clients-note .clients-eyebrow { grid-column: 1 / -1; }
.clients-intro h2,
.clients-note h2 { font-size: clamp(44px,5.2vw,82px); }
.clients-intro h2 em { color: #c9ace2; font-style: normal; }
.clients-intro > p:last-child,
.clients-note > p:last-child {
  margin: 0;
  color: rgba(255,250,240,.74) !important;
  font-size: 17px !important;
  line-height: 1.7;
}
.clients-roster { padding: 132px 8vw 148px; }
.clients-roster__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 52px;
}
.clients-roster__head .clients-eyebrow { margin: 0; }
.clients-roster__head > p:last-child {
  max-width: 420px;
  margin: 0;
  color: rgba(255,250,240,.62) !important;
  font-size: 14px !important;
  line-height: 1.6;
}
.clients-grid { border-top: 1px solid rgba(201,172,226,.2); }
.client-card {
  display: grid;
  grid-template-columns: 80px minmax(0,1fr);
  gap: 28px;
  min-height: 208px;
  padding: 35px 0 38px;
  border-bottom: 1px solid rgba(201,172,226,.16);
  transition: padding .35s var(--ease-out), background .35s var(--ease-out);
}
.client-card:hover { padding-inline: 26px; background: rgba(92,52,150,.14); }
.client-card__number {
  padding-top: 7px;
  color: #ab82ce;
  font: 700 13px/1 ui-monospace,monospace;
}
.client-card__body { display: grid; grid-template-columns: minmax(250px,.9fr) minmax(220px,1.1fr); column-gap: 7vw; align-items: start; }
.client-card h2 {
  grid-row: span 2;
  margin: 0;
  color: var(--paper);
  font: 800 clamp(34px,4.15vw,70px)/.92 var(--font-display);
  letter-spacing: -.06em;
}
.client-card__focus {
  margin: 5px 0 14px !important;
  color: #c9ace2 !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.45;
}
.client-card__body > p:last-child { margin: 0 !important; color: rgba(255,250,240,.66) !important; font-size: 15px !important; line-height: 1.62; }
.client-card--public { background: linear-gradient(90deg, rgba(92,52,150,.22), rgba(26,15,64,.05)); }
.client-card--public .client-card__number { color: var(--gold); }
.clients-note { background: linear-gradient(135deg, rgba(60,36,125,.55), rgba(14,8,37,.42)); }
.mlsoon-clients .cta { background: transparent !important; }

@media (max-width: 760px) {
  .clients-hero { min-height: 90svh; padding: 140px 24px 56px; }
  .clients-intro, .clients-note { grid-template-columns: 1fr; gap: 32px; padding: 100px 24px; }
  .clients-roster { padding: 92px 24px; }
  .clients-roster__head { display: block; }
  .clients-roster__head > p:last-child { margin-top: 20px; }
  .client-card { grid-template-columns: 36px 1fr; gap: 14px; min-height: 0; padding-block: 28px; }
  .client-card:hover { padding-inline: 0; background: transparent; }
  .client-card__body { grid-template-columns: 1fr; gap: 0; }
  .client-card h2 { grid-row: auto; margin-bottom: 20px; font-size: clamp(33px,11vw,54px); }
}
.footer { background: #0e0825 !important; }
.footer__legal { display: none !important; }
.footer__copy { color: rgba(255, 250, 240, .62) !important; }

/* Case-study transitions are self-contained: no secondary preview buttons. */
.hpanel .work__link { display: none !important; }

html.theme-light { background: #f5eefb; }

/* The dark presentation uses the white/gold lockup; the light presentation
   switches to the official full-colour Mlsoon lockup. */
html.theme-light .nav__logo img,
html.theme-light .hero__logo img,
html.theme-light .footer__logo img,
html.theme-light .overlay__logo {
  content: url("/logos/web-logo/MSN-DARK.svg");
  /* Counter the global light-mode inversion so official brand colours remain
     faithful instead of becoming their complementary shades. */
  filter: invert(1) hue-rotate(180deg) contrast(1.111) !important;
}