/* Instrument Sans (SIL Open Font License), self-hosted: no request to Google Fonts. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Maquette r11 · Nuggets en couleur (round 11).
   Same grammar as r6 (big type, tiny labels, generous air, colour in full-width bands),
   four palettes swapped through tokens. Pink is display-size only in every palette. */

:root {
  /* Forêt (current): chalk, forest, magenta, blush */
  --canvas: #FFF8F6;
  --ink: #00522D;         /* 8.9:1 on canvas */
  --ink-deep: #003D21;
  --meta: #3F5F4E;        /* 6.8:1 on canvas, 5.9:1 on blush */
  --blush: #FCE5DF;
  --blush-deep: #F6CFC4;
  --pink: #DB3C8A;        /* display sizes and marks only */
  --on-ink: #CFE3D7;      /* secondary text on ink bands, 7:1 */
  --line: #EBD5CE;
  --white: #FFFFFF;

  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* type scale: six steps */
  --fs-lab: 12px;
  --fs-body: 17px;
  --fs-lead: 22px;
  --fs-h2: clamp(30px, 3.2vw, 44px);
  --fs-display: clamp(48px, 6.7vw, 96px);
  --fs-figure: clamp(34px, 8.2vw, 124px);

  --g: 16px;
  --sec: clamp(72px, 8vw, 120px);
  --r: 28px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Prune: plum ink, rose blush. Ink 13.9:1, meta 7.9:1, pink 4.3:1 */
/* Encre: near-black ink, hot pink. Ink 17:1, meta 7:1, pink 3.8:1 */
/* Indigo et pêche: indigo ink, peach blush, pink. Ink 13.5:1, meta 7:1, pink 3.6:1 */
@media (min-width: 768px) { :root { --g: 32px; } }
@media (min-width: 1200px) { :root { --g: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--ink) var(--blush); accent-color: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--sans);
  font-kerning: normal; -webkit-font-smoothing: antialiased; caret-color: var(--pink);
  overflow-x: clip; transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--canvas); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--g); top: 8px; z-index: 50; transform: translateY(-200%); background: var(--ink); color: var(--canvas); padding: 10px 16px; border-radius: 999px; }
.skip:focus { transform: none; }

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--g); }

/* ---------- type voices ---------- */
.lab { font: 600 var(--fs-lab)/1.35 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.display { font: 500 var(--fs-display)/0.98 var(--sans); letter-spacing: -0.04em; text-wrap: balance; }
.display em { font-style: normal; color: var(--pink); }
.h2 { font: 500 var(--fs-h2)/1.05 var(--sans); letter-spacing: -0.03em; text-wrap: balance; }
.h3 { font: 500 var(--fs-h2)/1.05 var(--sans); letter-spacing: -0.03em; }
.lead { font-size: var(--fs-lead); line-height: 1.4; color: var(--meta); max-width: 34ch; text-wrap: pretty; }


/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 28px; border-radius: 30px;
  font: 600 var(--fs-body)/1 var(--sans); text-decoration: none; white-space: nowrap;
  border: 1.5px solid var(--ink);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; transition: transform 0.4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn[data-mail]:hover svg, .btn[href^="#"]:hover svg { transform: translateY(3px); }
.btn--solid { background: var(--ink); color: var(--canvas); }
.btn--solid:hover { background: var(--ink-deep); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--blush); }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 20; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); flex: none; }
.brand .mark { width: auto; height: 56px; }
.brand .word { display: grid; font: 600 var(--fs-lab)/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; }
.nav-desk { display: none; }
.nav-desk ul { display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--blush); }
.nav-desk a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; text-decoration: none; transition: background-color 0.25s var(--ease); }
.nav-desk a:hover { background: var(--canvas); }
.nav-desk a[aria-current="page"] { background: var(--ink); color: var(--canvas); }
.lang { display: none; align-items: center; gap: 6px; font: 600 var(--fs-lab)/1 var(--sans); letter-spacing: 0.06em; }
.lang a { color: var(--meta); text-decoration: none; }
.menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  border-radius: 999px; background: var(--ink); color: var(--canvas); font-weight: 600;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; left: var(--g); right: var(--g); top: calc(100% - 4px); background: var(--blush); border-radius: var(--r); padding: 12px 24px 24px; display: grid; gap: 16px; }
.menu-panel li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--blush-deep); text-decoration: none; font-size: var(--fs-lead); }
.menu-panel a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }
.menu-panel .lang { display: flex; }
@media (min-width: 1040px) {
  .bar { min-height: 112px; }
  .brand .mark { height: 76px; }
  .nav-desk { display: block; }
  .lang { display: flex; }
  .menu { display: none; }
}

/* ---------- sections ---------- */
.sec { padding-block: var(--sec) 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: 40px; }
.sec-meta { flex: 0 0 100%; color: var(--meta); font-size: var(--fs-lead); line-height: 1.4; padding-right: max(0px, calc(100% - 46ch)); }

/* ---------- hero: one block, two CTAs side by side, creator reel ---------- */
.hero { position: relative; isolation: isolate; padding: 24px 0 0; }
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: -112px 0 -80px;
  background:
    radial-gradient(42% 52% at 78% 34%, color-mix(in srgb, var(--pink) 15%, transparent), transparent 70%),
    radial-gradient(48% 60% at 12% 18%, color-mix(in srgb, var(--blush) 95%, transparent), transparent 70%);
  pointer-events: none; transform: translate3d(0, calc(var(--sy, 0) * 0.18px), 0);
}
.hero-grid { display: grid; gap: 40px; }
.hero-main { display: grid; gap: 28px; align-content: center; }
.hero-copy { display: grid; gap: 20px; }
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cta-pair .btn { flex: 1 1 auto; padding: 0 20px; }
@media (min-width: 600px) { .cta-pair .btn { flex: 0 0 auto; padding: 0 32px; } }

/* reel: names scroll like a menu; the centred name is the photo shown */
.reel { --reel-h: 300px; display: grid; gap: 16px; }
.reel-photos { position: relative; order: -1; height: min(420px, 100vw); border-radius: var(--r); overflow: hidden; background: var(--blush); }
.reel-par { position: absolute; inset: -6% 0; transform: translate3d(0, calc(var(--sy, 0) * -0.07px), 0); }
.reel-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.7s var(--ease), transform 1.4s var(--ease); }
.reel-photos img.is-on { opacity: 1; transform: none; }
.reel-names {
  position: relative; height: 132px; overflow: hidden;
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.reel-names ul { transition: transform 0.7s var(--ease); text-align: center; }
.reel-names li { white-space: nowrap; }
.reel-names button, .reel-names span {
  display: block; width: 100%; padding: 4px 0; border: 0; background: none; cursor: pointer; text-align: inherit;
  font: 400 var(--fs-h2)/1.15 var(--sans); letter-spacing: -0.03em; color: var(--ink); opacity: 0.28;
  transition: opacity 0.5s var(--ease), font-weight 0.5s var(--ease);
}
.reel-names .is-on button, .reel-names .is-on span { opacity: 1; font-weight: 600; }
.reel-names button:hover { opacity: 0.6; }
.reel-names .is-on button:hover { opacity: 1; }
.reel.no-anim ul, .reel.no-anim button, .reel.no-anim span { transition: none; }
@media (min-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: center; }
  .hero-main .display { max-width: 9ch; }
  .reel { --reel-h: min(640px, calc(100svh - 200px)); grid-template-columns: max-content minmax(0, 1fr); column-gap: 40px; align-items: center; }
  .reel-photos { order: 0; height: var(--reel-h); }
  .reel-names { height: var(--reel-h); }
  .reel-names ul { text-align: right; }
  .reel-names button, .reel-names span { padding: 6px 0; }
}

/* ---------- collab strip: two rows of small squares ---------- */
.sec-head .arrows { display: none; gap: 8px; }
@media (min-width: 900px) { .sec-head .arrows { display: flex; } }
.arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background-color 0.25s var(--ease), opacity 0.25s;
}
.arrow svg { width: 20px; height: 20px; }
.arrow .flip svg { transform: scaleX(-1); }
.arrow:hover:not(:disabled) { background: var(--blush); }
.arrow:disabled { opacity: 0.3; cursor: default; }
.strip {
  --pad: max(var(--g), calc((100vw - 1440px) / 2 + var(--g)));
  --sq: 42vw;
  position: relative; display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: var(--sq);
  gap: 28px 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 var(--pad) 20px; scroll-padding-inline: var(--pad);
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.strip li { scroll-snap-align: start; min-width: 0; }
@media (min-width: 600px) { .strip { --sq: 26vw; } }
@media (min-width: 900px) { .strip { --sq: calc((min(100vw, 1440px) - 2 * var(--g) - 6 * 16px) / 6.5); gap: 32px 16px; } }
.sq { display: grid; gap: 10px; text-decoration: none; }
.sq img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; background: var(--blush); transition: border-radius 0.5s var(--ease); }
.sq:hover img { border-radius: 36px; }
.sq:hover strong { text-decoration: underline; text-underline-offset: 0.22em; }
.sq-cap { display: grid; gap: 4px; }
.sq-cap strong { font-weight: 600; line-height: 1.3; }
.sq-cap .x { font-weight: 400; }
.sq-cap .lab { display: inline-flex; align-items: center; gap: 6px; color: var(--meta); }
.sq-cap .lab svg { width: 11px; height: 11px; }

/* ---------- figures band: three figures on one line ---------- */
.band { background: var(--ink); color: var(--canvas); margin-top: var(--sec); padding-block: var(--sec); transition: background-color 0.4s var(--ease); }
.band :focus-visible { outline-color: var(--canvas); }
.band .sec-meta { color: var(--on-ink); }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(12px, 3vw, 48px); }
.figures { padding-block: clamp(40px, 5vw, 72px); background:
  radial-gradient(60% 140% at 100% 0%, color-mix(in srgb, var(--pink) 26%, transparent), transparent 60%),
  radial-gradient(50% 120% at 0% 100%, color-mix(in srgb, var(--canvas) 10%, transparent), transparent 60%),
  var(--ink); }
.figs > div { display: grid; gap: 8px; align-content: start; }
.figs dd { order: -1; font: 500 var(--fs-figure)/0.9 var(--sans); letter-spacing: -0.045em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.figs dt { color: var(--on-ink); }

/* ---------- brand marquee: two rows, opposite directions (pauses on hover) ---------- */
.brands { overflow: hidden; }
.mq { display: grid; gap: 28px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-row { display: flex; width: max-content; }
.mq-track { display: flex; align-items: center; gap: 72px; padding-right: 72px; flex: none; animation: mq 56s linear infinite; }
.mq-b .mq-track { animation-direction: reverse; animation-duration: 60s; }
.mq-track img { width: auto; max-width: none; opacity: 0.9; }
.mq-track li { display: grid; place-items: center; height: 48px; }
.brands:hover .mq-track, .brands:focus-within .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-100%); } }

/* ---------- footer: classic columns ---------- */
.site-footer { margin-top: var(--sec); background: linear-gradient(180deg, var(--blush), color-mix(in srgb, var(--blush) 70%, var(--blush-deep))); color: var(--ink); padding-top: clamp(56px, 6vw, 88px); border-radius: 40px 40px 0 0; transition: background-color 0.4s var(--ease); }
.foot-grid { display: grid; gap: 40px; padding-bottom: 48px; }
.foot-brand { display: grid; gap: 16px; align-content: start; }
.foot-brand p { color: var(--meta); max-width: 32ch; }
.brand--foot .mark { height: 56px; }
.foot-col { display: grid; gap: 16px; align-content: start; }
.foot-h { font: 600 var(--fs-lab)/1.35 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); }
.foot-col ul:not(.social) { display: grid; gap: 10px; }
.foot-col a:not(.icon-btn) { text-decoration: none; }
.foot-col a:not(.icon-btn):hover { text-decoration: underline; }
.foot-mail { justify-self: start; margin-inline: -12px; padding: 4px 12px; border-radius: 14px; font: 400 var(--fs-body)/1.55 var(--sans); overflow-wrap: anywhere; user-select: all; }
.foot-mail.is-flash { animation: flash 1.4s var(--ease) 2; }
@keyframes flash {
  0%, 100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
  45% { background: var(--canvas); box-shadow: 0 0 0 3px var(--pink); }
}
.social { display: flex; gap: 8px; }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink); border: 1.5px solid var(--ink); transition: background-color 0.25s var(--ease); }
.icon-btn:hover { background: var(--canvas); }
.icon-btn svg { width: 20px; height: 20px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px 88px; border-top: 1px solid var(--blush-deep); font-size: var(--fs-lab); color: var(--meta); }
.foot-legal a { text-decoration: none; }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); column-gap: 48px; }
  .foot-legal { padding-bottom: 24px; }
}

/* ---------- inner page heroes ---------- */
.page-hero { display: grid; gap: 32px; padding-block: 24px 8px; }
.hero-p { color: var(--meta); max-width: 52ch; }
@media (min-width: 1040px) {
  .hero--text .page-hero { min-height: 0; padding-block: 72px 24px; }
  .hero--text .hero-main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 80px; align-items: start; }
  .hero--text .hero-copy { padding-top: 0.6em; }
  .hero--text .display { max-width: 10ch; }
}

/* ---------- Créateurs ---------- */
.split-2 { display: grid; gap: 32px; }
@media (min-width: 900px) { .split-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; } }
.why-p { margin-top: 20px; color: var(--meta); max-width: 44ch; }
.big-list { border-top: 1px solid var(--ink); }
.big-list li { padding-block: 20px; border-bottom: 1px solid var(--line); font: 500 var(--fs-lead)/1.35 var(--sans); }
.diff .h2 { color: var(--canvas); }
.diff-body { display: grid; gap: 20px; max-width: 64ch; }
.diff-body p { color: var(--on-ink); }
.diff-body .diff-lead { color: var(--canvas); font: 500 var(--fs-lead)/1.4 var(--sans); }

.roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
@media (min-width: 900px) { .roster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 16px; } }
.card { display: grid; gap: 16px; text-decoration: none; }
.card-media { display: block; border-radius: var(--r); overflow: hidden; background: var(--blush); }
.card-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-media { position: relative; }
.card-open { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); color: var(--ink); opacity: 0; transform: translateY(8px) rotate(-45deg); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.card-open svg { width: 18px; height: 18px; }
.card:hover .card-open, .card:focus-visible .card-open { opacity: 1; transform: none; }
.card-body { display: grid; gap: 6px; }
.card-name { font: 500 var(--fs-lead)/1.2 var(--sans); }
.card:hover .card-name { text-decoration: underline; text-underline-offset: 0.2em; }
.card-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.card-stats > span { display: inline-flex; align-items: center; gap: 6px; }
.card-stats svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .foot-mail.is-flash { background: var(--canvas); box-shadow: 0 0 0 3px var(--pink); }
  .mq { mask-image: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 48px; padding-inline: var(--g); max-width: 1440px; margin: 0 auto; }
  .mq-row { width: auto; }
  .mq-row, .mq-track:not([aria-hidden]) { display: contents; }
  .mq-track[aria-hidden="true"] { display: none; }
}

/* ======================= round 8 ======================= */

/* ---------- micro-animations: reveal on scroll, buttons ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .strip[data-reveal] { transform: translateX(40px); }
.js .strip[data-reveal].is-in { transform: none; }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--solid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--pink) 45%, transparent) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.9s var(--ease); }
.btn--solid:hover::before { transform: translateX(120%); }
.btn:active { transform: scale(0.98); }
.sq-img { display: block; overflow: hidden; border-radius: 20px; }
.sq-img img { transition: transform 0.8s var(--ease), border-radius 0.5s var(--ease); }
.sq:hover .sq-img img { transform: scale(1.06); }
.sq:hover img { border-radius: 20px; }

/* ---------- services: two living cards ---------- */
.serv-cols { display: grid; gap: 16px; }
.serv {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 32px 24px 0; border-radius: 32px; text-decoration: none; min-height: 520px;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.serv::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: transform 1.2s var(--ease); }
.serv:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--ink) 45%, transparent); }
.serv:hover::before { transform: scale(1.08) translate(-2%, 2%); }
.serv--brands { background: var(--ink); color: var(--canvas); }
.serv--brands::before { background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--pink) 38%, transparent), transparent 70%), radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--canvas) 12%, transparent), transparent 70%); }
.serv--creators { background: var(--blush); color: var(--ink); }
.serv--creators::before { background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--pink) 30%, transparent), transparent 70%), radial-gradient(60% 60% at 0% 100%, var(--white), transparent 70%); }
.serv-top { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.serv-k { font: 600 var(--fs-lab)/1.35 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
.serv-go { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); color: var(--ink); transform: rotate(-45deg); transition: transform 0.6s var(--ease), background-color 0.4s var(--ease); }
.serv--creators .serv-go { background: var(--ink); color: var(--canvas); }
.serv-go svg { width: 22px; height: 22px; }
.serv:hover .serv-go { transform: none; }
.serv-title { font: 500 var(--fs-h2)/1.05 var(--sans); letter-spacing: -0.03em; max-width: 14ch; text-wrap: balance; }
.serv-p { max-width: 40ch; opacity: 0.85; }
.serv--brands .serv-p { color: var(--on-ink); opacity: 1; }
.serv--creators .serv-p { color: var(--meta); opacity: 1; }
.serv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.serv-chips span { padding: 8px 14px; border-radius: 999px; font-weight: 500; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.serv-art { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-bottom: 28px; }
.logo-chip { display: grid; place-items: center; height: 56px; padding: 0 18px; border-radius: 16px; background: var(--white); transition: transform 0.6s var(--ease); }
.logo-chip img { width: auto; max-width: 120px; }
.serv:hover .logo-chip:nth-child(odd) { transform: translateY(-4px); }
.serv:hover .logo-chip:nth-child(even) { transform: translateY(4px); }
.serv-art--faces { gap: 0; align-items: center; }
.serv-art--faces img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--blush); margin-right: -14px; transition: transform 0.5s var(--ease); }
.serv:hover .serv-art--faces img { transform: translateX(calc(var(--k, 0) * 1px)); }
.serv:hover .serv-art--faces img:nth-child(2) { transform: translateX(4px); }
.serv:hover .serv-art--faces img:nth-child(3) { transform: translateX(8px); }
.serv:hover .serv-art--faces img:nth-child(4) { transform: translateX(12px); }
.serv:hover .serv-art--faces img:nth-child(5) { transform: translateX(16px); }
.serv:hover .serv-art--faces img:nth-child(6) { transform: translateX(20px); }
.face-more { margin-left: 28px; font-weight: 600; }
@media (min-width: 900px) {
  .serv-cols { grid-template-columns: 1fr 1fr; }
  .serv { padding: 44px 44px 0; }
  .serv-art { padding-bottom: 44px; }
}

/* ---------- contact box: compact ---------- */
.write {
  display: flex; align-items: center; gap: 20px; width: fit-content; max-width: 100%; margin-inline: auto; padding: 24px 32px 24px 24px; border-radius: 28px;
  background: linear-gradient(120deg, var(--blush), color-mix(in srgb, var(--pink) 16%, var(--blush)));
}
.write-ic { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--canvas); }
.write-ic svg { width: 26px; height: 26px; }
.write:hover .write-ic svg { animation: nudge 0.8s var(--ease); }
@keyframes nudge { 40% { transform: translateY(-3px) rotate(-8deg); } }
.write-t { display: grid; gap: 4px; min-width: 0; }
.write-h { font: 500 var(--fs-h2)/1.1 var(--sans); letter-spacing: -0.03em; }
.write-p { color: var(--meta); overflow-wrap: anywhere; }
.write-p a { color: var(--ink); font-weight: 600; user-select: all; }

/* ---------- talent modal ---------- */
.tm { width: min(1120px, calc(100vw - 32px)); max-height: min(860px, calc(100svh - 32px)); padding: 0; border: 0; border-radius: 32px; background: var(--canvas); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.35); }
.tm::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); backdrop-filter: blur(6px); }
.tm[open] { animation: tm-in 0.5s var(--ease); }
.tm[open]::backdrop { animation: fade 0.4s var(--ease); }
@keyframes tm-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes fade { from { opacity: 0; } }
.tm-in { position: relative; display: grid; max-height: inherit; }
.tm-x { position: absolute; z-index: 2; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--white); color: var(--ink); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); transition: transform 0.4s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease); }
.tm-x svg { width: 22px; height: 22px; }
.tm-x:hover { transform: rotate(90deg); background: var(--ink); color: var(--canvas); }
.tm-media { height: 260px; }
.tm-media img { width: 100%; height: 100%; object-fit: cover; }
.tm-body { display: grid; gap: 20px; align-content: start; padding: 28px 24px 24px; min-width: 0; }
.tm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-right: 56px; }
.tm-name { font: 500 var(--fs-h2)/1.05 var(--sans); letter-spacing: -0.03em; }
.tm-links { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-btn--sm { width: 40px; height: 40px; border-width: 1px; }
.icon-btn--sm svg { width: 18px; height: 18px; }
.tm-tagline { color: var(--meta); max-width: 52ch; }
.tm-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px; margin: 0 -4px; scrollbar-width: none; }
.tm-tabs [role=tab] {
  flex: none; display: grid; gap: 2px; text-align: left; padding: 12px 18px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--line); background: var(--white); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tm-tabs [role=tab]:hover { border-color: var(--ink); }
.tm-tabs [aria-selected="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.tab-n { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tab-n svg { width: 18px; height: 18px; }
.tab-v { font-size: var(--fs-lab); color: var(--meta); }
.tm-tabs [aria-selected="true"] .tab-v { color: var(--on-ink); }
.tm-aud { display: grid; gap: 28px; padding-top: 4px; animation: fade 0.5s var(--ease); }
.tm-aud[hidden] { display: none; }
.tm-aud section { display: grid; gap: 14px; align-content: start; }
.aud-h { font: 600 var(--fs-body)/1.3 var(--sans); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.aud-h span { font-weight: 400; color: var(--meta); }
.aud-2 { display: grid; gap: 28px; }
.split { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 3px; }
.split .s-f, .dot.s-f { background: var(--pink); }
.split .s-m, .dot.s-m { background: var(--ink); }
.split-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.split-legend span { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.bars { display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 84px 1fr 52px; align-items: center; gap: 14px; }
.b-track { height: 12px; border-radius: 999px; background: var(--blush); overflow: hidden; }
.b-fill { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--ink) 70%, var(--pink))); animation: grow 0.9s var(--ease); }
.b-fill--alt { background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 70%, var(--blush-deep)), var(--pink)); }
@keyframes grow { from { width: 0; } }
.b-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sample { padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--meta); color: var(--meta); font-size: var(--fs-lab); line-height: 1.5; }
@media (min-width: 900px) {
  .tm { overflow: hidden; }
  .tm-in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); height: min(860px, calc(100svh - 32px)); }
  .tm-body { overflow-y: auto; overscroll-behavior: contain; }
  .tm-media { height: 100%; }
  .tm-body { padding: 40px 40px 32px; }
  .aud-2 { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .tm-tabs { flex-wrap: wrap; overflow: visible; }
}

/* ---------- mentions légales ---------- */
.display--sm { font-size: var(--fs-h2); }
.legal-grid { display: grid; gap: 32px; }
.legal-body { display: grid; gap: 32px; max-width: 72ch; }
.legal-body section { display: grid; gap: 10px; }
.legal-h { font: 600 var(--fs-lead)/1.3 var(--sans); }
.legal-body p { color: var(--meta); }
.legal-body strong { color: var(--ink); }
@media (min-width: 900px) { .legal-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; } .legal-grid .display { position: sticky; top: 24px; align-self: start; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero::before, .reel-par { transform: none; }
}

/* ======================= round 9 ======================= */

/* ---------- segmented nav: calm active pill + soft hover glide ---------- */
.nav-desk ul { position: relative; }
.nav-desk a { position: relative; z-index: 2; transition: color 0.3s var(--ease); }
.nav-pill, .nav-hover { position: absolute; left: 0; top: 6px; bottom: 6px; width: 0; border-radius: 999px; pointer-events: none; }
.nav-pill { z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, var(--white)), var(--ink)); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--white) 18%, transparent);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-hover { z-index: 0; background: var(--canvas); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent); opacity: 0; scale: 0.92;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), width 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, scale 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-desk .is-hovering .nav-hover { opacity: 1; scale: 1; }
.nav-desk ul:not(.has-pill) .nav-pill, .nav-desk ul:not(.has-pill) .nav-hover { display: none; }
.nav-desk .has-pill a, .nav-desk .has-pill a:hover, .nav-desk .has-pill a[aria-current="page"] { background: transparent; color: var(--ink); }
.nav-desk .has-pill a.is-cur { color: var(--canvas); }
.nav-desk .no-anim .nav-pill, .nav-desk .no-anim .nav-hover, .nav-desk .no-anim a { transition: none; }

/* ---------- Entreprises hero: logo wall, three columns scrolling on their own ---------- */
.lw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; height: 420px; overflow: hidden;
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.lw-col { display: flex; flex-direction: column; }
.lw-track { display: grid; gap: 12px; padding-bottom: 12px; animation: lw 48s linear infinite; }
.lw-col--1 .lw-track { animation-direction: reverse; animation-duration: 56s; }
.lw-col--2 .lw-track { animation-duration: 52s; }
.lw li { display: grid; place-items: center; height: 96px; padding: 0 16px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.lw li:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--ink) 35%, transparent); }
.lw img { width: auto; max-width: 100%; }
.lw:hover .lw-track { animation-play-state: paused; }
@keyframes lw { to { transform: translateY(-100%); } }
@media (min-width: 1040px) { .lw { height: min(600px, calc(100svh - 220px)); gap: 16px; } .lw-track { gap: 16px; padding-bottom: 16px; } .lw li { height: 112px; } }
@media (prefers-reduced-motion: reduce) { .lw-track { animation: none; } }

/* ---------- Entreprises hero: logo reel + one campaign per brand ---------- */
.reel--logos .reel-names button, .reel--logos .reel-names span { display: flex; justify-content: center; padding: 14px 0; }
.reel--logos .reel-names img { width: auto; max-width: 160px; transition: transform 0.6s var(--ease); }
.reel--logos .reel-names .is-on img { transform: scale(1.12); }
.reel-photos { margin: 0; }
.reel-cap { position: absolute; z-index: 1; left: 16px; bottom: 16px; display: grid; }
.reel-cap span { grid-area: 1 / 1; justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--canvas); color: var(--ink); font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reel-cap span.is-on { opacity: 1; transform: none; }
@media (min-width: 1040px) { .reel--logos .reel-names button, .reel--logos .reel-names span { justify-content: flex-end; padding: 18px 0; } }

/* ---------- home services: logos on one line, capsules as a 2 + 1 pyramid ---------- */
.serv-chips { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; max-width: 100%; }
.serv-chips span:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
.serv-chips span { text-align: center; }
.serv-art--logos { flex-wrap: nowrap; gap: 8px; }
.logo-chip { height: 52px; padding: 0 14px; flex: 1 1 0; min-width: 0; }
.logo-chip img { max-width: 100%; }
@media (max-width: 599px) {
  .serv-chips { grid-template-columns: 1fr; justify-items: start; }
  .serv-chips span:nth-child(3) { justify-self: start; }
}

/* ---------- Entreprises: three calm rows, one card each ---------- */
.rows { display: grid; border-top: 1px solid var(--line); }
.row { display: grid; gap: 28px; padding-block: 48px; border-bottom: 1px solid var(--line); }
.row-head { display: grid; gap: 16px; align-content: start; }
.row-head .h3 { display: grid; gap: 12px; }
.row-n { font: 600 var(--fs-lab)/1 var(--sans); letter-spacing: 0.06em; color: var(--pink); }
.row-short { font: 500 var(--fs-lead)/1.35 var(--sans); color: var(--ink); max-width: 30ch; }
.row-p { color: var(--meta); max-width: 50ch; }
.promise { margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--line); max-width: 50ch; }
.promise figcaption { font: 600 var(--fs-lab)/1.35 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); }
.promise blockquote { margin: 8px 0 0; font: 500 var(--fs-lead)/1.35 var(--sans); color: var(--ink); text-wrap: pretty; }
.promise blockquote::before { content: "“"; color: var(--pink); margin-right: 2px; }
.promise blockquote::after { content: "”"; color: var(--pink); margin-left: 2px; }
.list-card { display: grid; gap: 24px; align-content: start; padding: 28px; border-radius: 28px;
  background: linear-gradient(150deg, var(--blush), color-mix(in srgb, var(--blush) 75%, var(--white))); }
.list-t { font-weight: 600; margin-bottom: 4px; }
.ticks { display: grid; }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 10px 0; }
.ticks svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--ink); color: var(--canvas); }
@media (min-width: 900px) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; padding-block: 64px; align-items: start; }
  .list-card { padding: 36px; }
}

/* ======================= round 11 ======================= */
/* collab captions on one line */
.sq-cap strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* home services: one capsule per line */
.serv-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.serv-chips span:nth-child(3) { justify-self: auto; }
.face-more { text-decoration: underline; text-underline-offset: 0.22em; }
/* Entreprises rows: title, one line, promise */
.row-short { max-width: 36ch; color: var(--meta); font-weight: 400; }
.promise { margin-top: 4px; }
@media (min-width: 1200px) { .list-card:has(.list-g + .list-g) { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
/* talent modal: placeholder bio in the small note voice */
.tm-bio { color: var(--meta); font-size: var(--fs-lab); line-height: 1.5; max-width: 62ch; margin-top: -8px; }

/* r12: real audience data, 9 talents */
@media (min-width: 900px) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; } }
.aud-none { color: var(--meta); font-size: var(--fs-lab); line-height: 1.5; }
.split { background: var(--line); }
/* r12: topics as capsules above the tagline in the talent modal */
.tm-topics { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tm-topics li { padding: 6px 12px; border-radius: 999px; font-size: var(--fs-lab); font-weight: 500; line-height: 1.2; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }