:root {
  --g-blur: 18px;
  --g-blur-sm: 10px;
  --g-sat: 1.5;
  --g-dim: .74;
  --g-line: rgba(255, 255, 255, .12);
  --g-line-hi: rgba(255, 255, 255, .18);
  --g-hi: rgba(255, 255, 255, .16);
  --g-sheen: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 55%, rgba(255, 255, 255, 0));
  --g-fill-dock: rgba(14, 14, 16, .66);
  --g-fill-mega: rgba(11, 11, 13, .80);
  --g-fill-chip: rgba(10, 10, 12, .58);
  --g-fill-bar: rgba(8, 8, 10, .74);
  --g-fill-drawer: rgba(12, 9, 11, .64);
  --g-fill-soft: rgba(255, 255, 255, .055);
  --g-shadow: 0 22px 54px -18px rgba(0, 0, 0, .78), 0 3px 12px rgba(0, 0, 0, .34);
  --g-shadow-sm: 0 8px 20px -8px rgba(0, 0, 0, .6);
}
@media (max-width: 899px) { :root { --g-blur: 12px; --g-blur-sm: 7px; } }

.nav { transition: top .6s var(--ease-out), left .6s var(--ease-out), right .6s var(--ease-out), padding .6s var(--ease-out), background-color .5s, border-color .5s, box-shadow .5s; }
.nav.is-scrolled {
  background: var(--g-fill-dock); border-color: var(--g-line);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-dim)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-dim));
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 -1px 0 rgba(0, 0, 0, .28), var(--g-shadow);
}
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--g-sheen); opacity: 0; transition: opacity .5s; }
.nav.is-scrolled::before { opacity: 1; }

.mega { opacity: 1; transition: transform .22s var(--ease-out); }
.mega__inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 38%, rgba(255, 255, 255, 0)), var(--g-fill-mega);
  -webkit-backdrop-filter: blur(24px) saturate(var(--g-sat)) brightness(var(--g-dim)); backdrop-filter: blur(24px) saturate(var(--g-sat)) brightness(var(--g-dim));
  box-shadow: inset 0 0 0 1px var(--g-line), inset 0 1px 0 var(--g-hi), 0 36px 90px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .22s var(--ease-out);
}
.mega.is-open .mega__inner { opacity: 1; }
.mega__label { color: rgba(245, 245, 242, .72); }
.mega__n { color: rgba(245, 245, 242, .6); }
.mega__d { color: rgba(245, 245, 242, .68); }
.mega__group--creative .mega__t { color: rgba(245, 245, 242, .8); }
.mega__group--creative .mega__d { color: rgba(245, 245, 242, .62); }
.mega__item:hover .mega__d, .mega__item:focus-visible .mega__d { color: rgba(245, 245, 242, .86); }
.mega__item:hover, .mega__item:focus-visible { background: rgba(255, 255, 255, .06); }

.nav__lang { padding-block: 3px; padding-inline: .55rem; border-radius: 999px; background: var(--g-fill-soft); box-shadow: inset 0 0 0 1px var(--g-line), inset 0 1px 0 rgba(255, 255, 255, .1); }
@media (min-width: 900px) and (max-width: 1140px) { .nav__lang { padding-inline: .3rem; } }
@media (min-width: 900px) and (max-width: 1060px) { .nav__lang { padding-inline: .12rem; } }

.drawer__overlay { background: rgba(5, 5, 5, .66); -webkit-backdrop-filter: none; backdrop-filter: none; }
.drawer__panel {
  background: var(--g-fill-drawer);
  -webkit-backdrop-filter: blur(22px) saturate(var(--g-sat)); backdrop-filter: blur(22px) saturate(var(--g-sat));
  border-inline-start-color: var(--g-line-hi);
  box-shadow: -40px 0 100px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(255, 255, 255, .09);
}
.drawer__panel::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
@media (max-width: 899px) {
  .drawer__panel { background: rgba(12, 9, 11, .95); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.dtypes span { background: var(--g-fill-soft); border-color: var(--g-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); -webkit-backdrop-filter: none; backdrop-filter: none; }

.work__badge, .sv-tag, .ap-seq__tag, .ct-open__tag, .reels__chips li {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)), var(--g-fill-chip);
  border: 1px solid var(--g-line); border-radius: 999px; color: var(--c-paper, #F5F5F2);
  -webkit-backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat));
  box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow-sm);
}
.work__badge, .sv-tag { padding: .28rem .75rem; }
.ap-seq__tag, .ct-open__tag { padding: .32rem .8rem; }

.pj-filter.is-stuck {
  background: var(--g-fill-bar);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-dim)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-dim));
  box-shadow: 0 1px 0 var(--g-line), inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 32px -18px rgba(0, 0, 0, .7);
}
.bg-cat { background: var(--g-fill-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
@media (max-width: 899px) { .pj-filter__btn { background: var(--g-fill-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } }

.moben-slogan--hero {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), var(--g-fill-chip);
  -webkit-backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat));
  box-shadow: inset 0 0 0 1px var(--g-line-hi), inset 0 1px 0 rgba(255, 255, 255, .22), var(--g-shadow-sm);
}
.hero__play { border-color: var(--g-line-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 30px -10px rgba(0, 0, 0, .6); }

.vcard figure {
  background: radial-gradient(90% 70% at 0% 0%, rgba(120, 6, 40, .3), rgba(120, 6, 40, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
  border-color: var(--g-line); box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow-sm);
}

#cr-reseaux ul { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
#cr-reseaux li { padding: 0; }
.credits__col a[data-social] {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem .5rem .8rem; border-radius: 999px; line-height: 1.1;
  background: var(--g-fill-soft); color: rgba(245, 245, 242, .86);
  box-shadow: inset 0 0 0 1px var(--g-line), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: color .3s, box-shadow .3s, background-color .3s;
}
.credits__col a[data-social]::before {
  content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--social-icon) center / contain no-repeat; mask: var(--social-icon) center / contain no-repeat;
  transition: background-color .3s;
}
.credits__col a[data-social="youtube"] { --social-icon: url("/assets/img/social/youtube.svg"); }
.credits__col a[data-social="instagram"] { --social-icon: url("/assets/img/social/instagram.svg"); }
.credits__col a[data-social="tiktok"] { --social-icon: url("/assets/img/social/tiktok.svg"); }
.credits__col a[data-social="linkedin"] { --social-icon: url("/assets/img/social/linkedin.svg"); }
.credits__col a[data-social]:hover, .credits__col a[data-social]:focus-visible { color: var(--c-paper, #F5F5F2); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(217, 14, 67, .75), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 4px rgba(217, 14, 67, .1); }
.credits__col a[data-social]:hover::before, .credits__col a[data-social]:focus-visible::before { background: var(--c-red, #D90E43); }
html[dir="rtl"] .credits__col a[data-social] { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 899px) { .credits__col a[data-social] { padding-block: .72rem; } }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --g-fill-dock: rgba(14, 14, 16, .94); --g-fill-mega: rgba(11, 11, 13, .96); --g-fill-chip: rgba(10, 10, 12, .84); --g-fill-bar: rgba(8, 8, 10, .95); --g-fill-drawer: rgba(12, 9, 11, .95); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --g-fill-dock: rgb(14, 14, 16); --g-fill-mega: rgb(11, 11, 13); --g-fill-chip: rgb(10, 10, 12); --g-fill-bar: rgb(8, 8, 10); --g-fill-drawer: rgb(12, 9, 11); --g-sheen: none; }
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .drawer__panel { background: rgb(12, 9, 11); }
}
@media (prefers-contrast: more) {
  :root { --g-fill-dock: rgb(14, 14, 16); --g-fill-mega: rgb(11, 11, 13); --g-fill-chip: rgb(10, 10, 12); --g-fill-bar: rgb(8, 8, 10); --g-fill-drawer: rgb(12, 9, 11); --g-line: rgba(255, 255, 255, .45); --g-line-hi: rgba(255, 255, 255, .6); }
}
@media (prefers-reduced-motion: reduce) {
  .nav::before, .mega, .mega__inner, .credits__col a[data-social], .credits__col a[data-social]::before { transition: none; }
  .moben-slogan--hero { animation: none; }
}