/* Vector & Val overrides for the mirrored site. Site files are untouched; everything ours is in this folder. */

/* ---------- brand fonts (Cinzel = headings, Jost = text, DM Mono = data) */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/brand-1.ttf) format('truetype'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/brand-2.ttf) format('truetype'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/brand-3.ttf) format('truetype'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/brand-4.ttf) format('truetype'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/brand-5.ttf) format('truetype'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/brand-6.ttf) format('truetype'); }

/* ---------- navbar: menu button top left (the site's own phone menu, now at every width), mark + wordmark lockup centred */
.navbarBlock.navbarBlock { margin-top: 0; }                                   /* the menu panel must start at the very top, as on the phone layout */
.navbarBlock__left.navbarBlock__left, .navbarBlock__right.navbarBlock__right { margin-top: 1.5714285714rem; }   /* slimmer bar: 22 px from the top instead of 40 */
.navbarBlock__menu .menu__links.menu__links { margin-top: 84px; margin-bottom: 22px; }                          /* and a shorter drop-down */
.navbarBlock__menu .menu__links .links__link.links__link, .navbarBlock__menu .menu__links .links__lab.links__lab { font-size: 44px; }
.navbarBlock { --navbar-fg: #3f1770; }                                                                          /* deep royal purple for menu, lines and logo on light pages; the site's own toggle switches --navbar-fg to pearl over dark sections */
.navbarBlock__menu, .menuButton, .vv-brand { color: var(--navbar-fg); }
.navbarBlock__menu.navbarBlock__menu { color: #3f1770; }                                                        /* the drop-down panel is always pearl, so its entries stay purple */
.navbarBlock__right.navbarBlock__right { z-index: 6; }
.navbarBlock__left .left__title.left__title { display: none; }               /* the separate top-left mark is gone */
.navbarBlock__right .right__links.right__links { display: none !important; } /* the three options leave the top right */
.navbarBlock__right .right__buttons.right__buttons { display: flex; grid-column: 1 / 3; justify-self: start; align-self: start; margin-left: 1.4285714286rem; margin-top: -.9285714286rem; gap: 11px; }
.menuButton.menuButton { background: transparent; border-radius: 0; }                 /* plain hamburger lines, no box behind them */
.menuButton__cross.menuButton__cross { background: transparent; }
.menuButton__default.menuButton__default { width: 22px; height: 15px; }               /* the site drew the lines at 12 x 8 px inside its box; a touch larger without it */
.menuButton__default .default__line, .menuButton__cross .cross__line { stroke: var(--navbar-fg, #022016); }
.navbarBlock__menu.navbarBlock__menu { display: grid; position: absolute; left: 0; right: 0; background: #f4f4f4; border-radius: 0 0 20px 20px; z-index: 5; transform: translateY(-100%); }
.navbarBlock__menu .menu__infos.menu__infos { display: none; }               /* his tagline, already removed from the bar */
.navbarBlock__menu .menu__links .links__lab.links__lab { display: none !important; }   /* "Lab" removed from the menu */
.vv-mark__svg { display: block; height: 1.4285714286rem; width: auto; }
.navbarBlock__left .vv-brand { grid-row: 1; grid-column: 1 / -1; justify-self: center; align-self: start; margin: 0 auto; display: flex; align-items: center; gap: .5714285714rem; line-height: 0; pointer-events: auto; cursor: pointer; color: var(--navbar-fg); transition: color .4s ease; }
.vv-brand__svg { display: block; height: 1rem; width: auto; }

/* ---------- menu in the brand text face */
.navbarBlock__right .right__links .mainButton, .navbarBlock__right .right__links .navLabButton { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .03em; }
.navbarBlock__menu .menu__links .links__link .textComponent__content, .navbarBlock__menu .menu__links .links__lab .textComponent__content { font-family: 'Cinzel', serif; font-weight: 500; }
.navbarBlock__menu .menu__links .links__contact .textComponent__content, .navbarBlock__menu .menu__infos { font-family: 'Jost', sans-serif; }

/* ---------- home hero: the bracelet turns behind the giant statement as you scroll (frame sequence drawn on a canvas by overrides.js) */
.vv-turn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.page > .webglBg.heroBlock .beeBlock { position: relative; z-index: 1; }

/* ---------- footer on phones and tablets: no full-screen block above the giant title, so the white gap goes */
@media screen and (max-width: 1025px) {
  .footerBlock.footerBlock, .webglBg__content.isFooter.isFooter { min-height: 0; }
  .beeBlock.isFooter.isFooter { height: auto; min-height: 0; padding-top: 4.5rem; }
  .footerBlock__bottom.footerBlock__bottom { margin-top: 2.5rem; }
  .vv-apply { margin-top: 1.8rem; }
}

/* ---------- footer story panel (the old credits pop-up): brand purple with pearl type, on every page theme */
.footerBlock__popup.footerBlock__popup .popup__transitionWrapper--outer.popup__transitionWrapper--outer { background: #531d90 !important; color: #f4f3f6 !important; }
.footerBlock__popup .popup__content .content__left.content__left, .footerBlock__popup .popup__content .content__right.content__right { color: #f4f3f6; }
.footerBlock__popup .popup__top .top__cross.top__cross { background: #f4f3f6; }
.footerBlock__popup .popup__top .top__cross .svg-cross rect { fill: #531d90; }
.popup__content .content__left .left__content .content__textWrapper .wrapper__text .text__link:before,
.popup__content .content__left .left__content .content__textWrapper .wrapper__text .text__link:after { background: #f4f3f6; }
.footerBlock__popup .popup__top .top__infos, .footerBlock__popup .popup__content .content__left, .footerBlock__popup .popup__content .content__right { font-family: 'Jost', sans-serif; }

/* ---------- footer sign-up form (e-mail + mobile, "Apply") under the giant title */
.vv-apply { width: calc(100% - 5.7142857143rem); margin: 2.5rem auto 0; font-family: 'Jost', sans-serif; color: #3f1770; text-align: center; }
.vv-apply__lead { font-size: 15px; letter-spacing: .02em; margin: 0 0 1.1rem; }
.vv-apply__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1.7142857143rem; }
.vv-apply__field { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; width: 17rem; max-width: 100%; text-align: left; }
.vv-apply__field span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.vv-apply__field input { width: 100%; font: 400 16px/1.4 'Jost', sans-serif; color: #3f1770; background: transparent; border: 0; border-bottom: 1px solid rgba(63, 23, 112, .45); padding: .35rem 0; outline: none; transition: border-color .3s ease; -webkit-user-select: text; user-select: text; }
.vv-apply__field input::placeholder { color: rgba(63, 23, 112, .35); }
.vv-apply__field input:focus { border-bottom-color: #3f1770; }
.vv-apply__btn { font: 500 14px/1 'Jost', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #f4f3f6; background: #3f1770; border: 0; border-radius: 2rem; padding: .9rem 1.8rem; cursor: pointer; transition: background .3s ease; }
.vv-apply__btn:hover { background: #2a0e4e; }
.vv-apply__note { min-height: 1.3em; margin: .9rem 0 0; font-size: 13px; opacity: .8; }
.vv-apply__note.is-error { color: #a4322f; opacity: 1; }
.footerBlock .vv-apply { position: relative; z-index: 3; pointer-events: auto; }

/* ---------- sign-up form on the purple footers (home + About): pearl fields, pearl button */
.footerBlock.green .vv-apply, .footerBlock.white .vv-apply { color: #f4f3f6; }
.footerBlock.green .vv-apply__field input, .footerBlock.white .vv-apply__field input { color: #f4f3f6; border-bottom-color: rgba(244, 243, 246, .5); }
.footerBlock.green .vv-apply__field input::placeholder, .footerBlock.white .vv-apply__field input::placeholder { color: rgba(244, 243, 246, .45); }
.footerBlock.green .vv-apply__field input:focus, .footerBlock.white .vv-apply__field input:focus { border-bottom-color: #f4f3f6; }
.footerBlock.green .vv-apply__btn, .footerBlock.white .vv-apply__btn { color: #531d90; background: #f4f3f6; }
.footerBlock.green .vv-apply__btn:hover, .footerBlock.white .vv-apply__btn:hover { background: #ffffff; }
.footerBlock.green .vv-apply__note.is-error, .footerBlock.white .vv-apply__note.is-error { color: #ffd2cf; }

/* ---------- bookshelf statement ("Focus on innovation…") in Cinzel */
.webglSectionBlock__text.webglSectionBlock__text { font-family: 'Cinzel', serif; font-weight: 500; font-variation-settings: normal; font-size: 6.6vw; line-height: 1; letter-spacing: .01em; }
.webglSectionBlock__textWrapper .textWrapper__inner.textWrapper__inner { max-width: 88vw; }   /* Cinzel runs wider than the site's face, so the lines need more room */
.webglSectionBlock__text .text__line.text__line { white-space: nowrap; }

/* ---------- About hero: no full-screen block above the title, so it follows the corner texts closely */
.page > .webglBg.heroBlock:has(.heroBlock__top .top__center) .beeBlock.beeBlock { height: auto; min-height: 0; padding-top: 6.5rem; padding-bottom: 4rem; }

/* ---------- About card ("What every job includes"): deep purple on the purple page, pearl type, brand faces */
.cardBlock.cardBlock { background: #3f1770; color: #f4f3f6; border: 1px solid rgba(244, 243, 246, .28); }
.cardBlock .cardBlock__top.cardBlock__top { display: none; }                                    /* the "+6 years exp." line and the "(4)" count are gone */
.cardBlock__content .content__title.content__title { font-family: 'Cinzel', serif; font-weight: 500; color: #f4f3f6; padding-top: 2.8571428571rem; width: 22rem; line-height: 1.1; }
.cardBlock__content .content__jobs.content__jobs { margin-top: 3.5rem; }
.cardBlock__content .content__jobs .jobs__job .job__date.job__date, .cardBlock__content .content__jobs .jobs__job .job__name.job__name, .cardBlock__content .content__jobs .jobs__job .job__roles.job__roles { font-family: 'Jost', sans-serif; color: #f4f3f6; }
.cardBlock__content .content__jobs .jobs__job .job__date.job__date { min-width: 6.5rem; opacity: .75; }
.cardBlock__content .content__jobs .jobs__job .job__name.job__name { font-weight: 500; }
.cardBlock__content .content__jobs .jobs__job .job__roles.job__roles { opacity: .78; }
.cardBlock__content .content__jobs .jobs__job .job__line.job__line { background: #f4f3f6; opacity: .22; }
.cardBlock__content .content__jobs .jobs__job .job__current.job__current { display: none; }     /* the "Current" tag the site pins to the second row */

/* ---------- hero in the brand faces: giant statement in Cinzel, corner texts in Jost */
.beeBlock__container .container__titles--default .titles__wrapper .wrapper .title.title,
.beeBlock__container .container__titles--reveal .titles__wrapper .wrapper .title.title { font-family: 'Cinzel', serif; font-weight: 500; font-variation-settings: normal; font-size: 9.6vw; line-height: 1; letter-spacing: .01em; }
@media (max-width: 720px) { .beeBlock__container .container__titles--default .titles__wrapper .wrapper .title.title, .beeBlock__container .container__titles--reveal .titles__wrapper .wrapper .title.title { font-size: 11vw; } }
.heroBlock__top .top__city, .heroBlock__top .top__infos .infos__text, .heroBlock__top .top__infos .infos__text p, .heroBlock__top .agencies__text, .agencyLink { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .02em; }
.beeBlock .indication { font-family: 'Jost', sans-serif; }
.heroBlock__top .top__infos.top__infos { display: none; }   /* right-hand corner text removed, left blank on request */

/* ---------- the bee is gone: the bundle keeps its meshes hidden (its canvas layer stays, it also carries the loader mask and page-transition wipe); speech bubbles and the "(Click to feed the bee)" line: */
.beeTextIndication { display: none !important; }
.beeBlock .indication { display: none !important; }

/* ---------- loader: mark + wordmark in place of the name and tagline (loader timing is the site's original: uS=1.5, u5=2.25) */
.loaderBlock__container .container__title, .loaderBlock__container .container__infos { height: 2.2857142857rem; overflow: hidden; display: flex; align-items: center; }
.loaderBlock .title__content.vv-loader-mark, .loaderBlock .infos__content.vv-loader-brand { line-height: 0; }
.loaderBlock .title__content .vv-mark__svg { height: 1.7142857143rem; }
.loaderBlock .infos__content .vv-brand__svg { height: 1rem; }

/* ---------- removed: tagline next to the logo, sound button (desktop + phone), "click to enable sound" bubble */
.navbarBlock__left .left__infos { display: none !important; }
.soundButton { display: none !important; }
.cursorIndication__text--array { display: none !important; }
body.awaiting-sound-click, body.awaiting-sound-click #canvas-app, body.awaiting-sound-click #vue-app { cursor: auto !important; }

/* ---------- stripped sections: project rows 1, 2, 4, 5, 6 and the whole archives list (rows 7-29). Row 3 and the
   bookshelf statement stay. The wrapper's element order is 1,2,3,statement,4,5,6. Nothing is put in their place. */
.page > .wrapper > .projectBlock:nth-child(1),
.page > .wrapper > .projectBlock:nth-child(2),
.page > .wrapper > .projectBlock:nth-child(5),
.page > .wrapper > .projectBlock:nth-child(6),
.page > .wrapper > .projectBlock:nth-child(7),
.page > .archivesBlock { display: none !important; }
.page > .webglBg.introBlock:has(.introBlock__bottom) { display: none !important; }   /* the "Bonjour…" section with the showreel thumbnail, removed outright */
.page .contentBlock, .page > .webglBg:has(.contentBlock) { display: none !important; } /* About: the "Throughout my various…" block with awards and clients, removed outright */

/* ---------- footer story panel: brand type (site's scoped rules outrank a single class), and a compact phone layout */
.footerBlock__popup .popup__top .top__infos.top__infos { font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: .08em; }
.footerBlock__popup .popup__content .content__right.content__right { font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.25; }
.footerBlock__popup .popup__content .content__left.content__left { font-family: 'Jost', sans-serif; font-weight: 400; }
@media screen and (max-width: 700px) {
  .footerBlock__popup.footerBlock__popup, .footerBlock__popup .popup__transitionWrapper--outer.popup__transitionWrapper--outer,
  .footerBlock__popup .popup__transitionWrapper--outer .popup__transitionWrapper--inner.popup__transitionWrapper--inner { height: auto; max-height: 85dvh; }
  .footerBlock__popup .popup__top.popup__top { padding: 22px 24px 18px; }
  .footerBlock__popup .popup__content.popup__content { gap: 26px; padding: 0 24px 40px; }
  .footerBlock__popup .popup__content .content__right.content__right { font-size: 21px; line-height: 1.3; }
  .footerBlock__popup .popup__content .content__left.content__left { font-size: 13px; line-height: 1.45; }
  .footerBlock__popup .popup__content .content__left .left__content.left__content { gap: 10px; }
}

/* ---------- home page: dark purple page below the 3D room, pearl type. The room keeps its own light scene and purple corner texts. */
.webglBg--home.webglBg--home { background-color: #3f1770; }
.footerBlock.white.footerBlock:before { background: #3f1770; }
.heroBlock.heroBlock, .projectBlock.projectBlock, .footerBlock.white.footerBlock, .webglSectionBlock.webglSectionBlock, .webglSectionBlock__text.webglSectionBlock__text { color: #f4f3f6; }
.beeBlock__container .container__titles--default .title.title, .beeBlock__container .container__titles--reveal .title.title { color: #f4f3f6; }
.projectBlock .projectBlock__line, .projectBlock .line, .footerBlock.white .bottom__line { background-color: rgba(244, 243, 246, .3); }
.footerBlock.white .footerBlock__bottom .networks__link:before { background: #f4f3f6; }
.navbarBlock.home.vv-dark { --navbar-fg: #f4f3f6; }

/* ---------- row 3: the running project number is meaningless with one row left */
.projectBlock .title__number { display: none !important; }