/* A studio opening, followed by chapters rather than a product landing page. */
:root { --ease-out: cubic-bezier(.19,1,.22,1); --scene-x: 0px; --scene-y: 0px; }
body.nav-open { overflow: hidden; }
.site-header { position: fixed; inset: 0 0 auto; height: 94px; border: 0; background: linear-gradient(#101017c4, #10101700); backdrop-filter: none; transition: background .45s, height .45s; }
.site-header.scrolled, .nav-open .site-header { background: #111117ed; backdrop-filter: blur(15px); height: 78px; }
.header-inner { max-width: none; padding-inline: 44px; gap: 24px; }
.brand { width: auto; display: flex; align-items: center; gap: 15px; }
.brand img { width: 30px; height: 34px; margin: 0; }
.brand span { font-size:12.5px; letter-spacing: 2.2px; white-space: nowrap; }
.header-note { color: #bfb3cd; font-size:12px; letter-spacing: 2.3px; margin-left: auto; margin-right: auto; padding-right: 45px; }
.header-actions { gap: 23px; }
.motion-toggle { width: 28px; height: 32px; border-radius: 0; background: none; color: #cec4dc; }
.motion-toggle .icon { width: 14px; height: 14px; }
.resume-icon, .motion-toggle.is-paused .pause-icon { display: none; }
.motion-toggle.is-paused .resume-icon { display: block; }
.menu-toggle { display: flex; gap: 15px; align-items: center; padding: 12px 0 12px 5px; width: auto; height: auto; border-radius: 0; background: none; }
.menu-toggle span { width: auto; height: auto; background: none; transform: none; }
.menu-toggle .menu-label { font-size:13px; letter-spacing: 1px; }
.menu-toggle .menu-lines { display: flex; flex-direction: column; gap: 6px; width: 24px; }
.menu-lines i { height: 1px; background: #e1d9eb; display: block; width: 24px; transition: transform .35s; }
.menu-lines i:last-child { width: 17px; margin-left: auto; }
.menu-toggle[aria-expanded=true] span:first-child, .menu-toggle[aria-expanded=true] span:last-child { transform: none; }
.menu-toggle[aria-expanded=true] .menu-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] .menu-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); width: 24px; }
.mobile-nav { position: absolute; top: 78px; left: 0; right: 0; height: calc(100svh - 78px); background: #141219fa; backdrop-filter: blur(20px); padding: 60px max(8vw, 44px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; border: 0; box-shadow: 0 25px 80px #0008; overflow-y: auto; }
.menu-intro { align-self: center; }
.menu-intro img { width: 56px; opacity: .75; margin-bottom: 34px; }
.menu-intro p { font: 48px/1.18 var(--serif); letter-spacing: -1.5px; }
.menu-intro > span { display: block; font-size:12px; letter-spacing: 2px; color: #a79ab8; margin-top: 30px; }
.menu-chapters a { display: flex; align-items: center; gap: 25px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.menu-chapters small { font-size:12.5px; color: #9b8bac; }
.menu-chapters a > span { font: clamp(27px, 3vw, 43px)/1.2 var(--serif); letter-spacing: -1px; }
.menu-chapters .icon { margin-left: auto; color: #b9a7ce; width: 20px; height: 20px; transition: transform .3s; }
.menu-chapters a:hover .icon { transform: translate(4px,-4px); }
.reading-progress { height: 1px; background: #c7b4e6; position: fixed; z-index: 60; left: 0; right: 0; top: 0; transform-origin: left; transform: scaleX(var(--reading-progress, 0)); pointer-events: none; }
.chapter-rail { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 21px; }
.chapter-rail a { position: relative; padding: 4px 7px; color: #8c809b; transition: color .3s; }
.chapter-rail b { font-size:12px; font-weight: 400; letter-spacing: 1px; }
.chapter-rail a:after { content: ''; width: 13px; height: 1px; position: absolute; right: 1px; bottom: -1px; background: #d4c2eb; transform: scaleX(0); transform-origin: right; transition: transform .5s; }
.chapter-rail a.current { color: #f3f0e8; }
.chapter-rail a.current:after, .chapter-rail a:hover:after { transform: scaleX(1); }
.chapter-rail a > span { position: absolute; right: 35px; top: 1px; font-size:12.5px; white-space: nowrap; background: #15121ee8; padding: 3px 10px; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity .2s, transform .2s; }
.chapter-rail a:hover > span, .chapter-rail a:focus-visible > span { opacity: 1; transform: none; }

.hero { height: 100svh; max-height: none; min-height: 740px; background: #17151f; }
.hero-art { object-position: center 50%; animation: none; transform: scale(1.12) translate3d(var(--scene-x), var(--scene-y), 0); opacity: .94; }
.hero-shade { background: linear-gradient(0deg,#111117, #11111705 26%,#11111730 68%, #11111750), radial-gradient(ellipse at 50% 40%,#100c1c54 5%, #0f0d19a1 75%); }
.hero-content { align-items: center; text-align: center; padding-top: 50px; padding-bottom: 90px; position: relative; transform: translate3d(0, var(--hero-content-y, 0px), 0); opacity: var(--hero-content-opacity,1); }
.hero .hero-prologue { margin-bottom: 30px; letter-spacing: 2.6px; font-size:12px; gap: 19px; justify-content: center; color: #ded1e9; }
.prologue-line { width: 38px; height: 1px; background: #d8c7eb66; display: block; }
.hero h1 { width: min(660px,68vw); font-size: inherit; letter-spacing: normal; filter: drop-shadow(0 5px 34px #090610a0); }
.hero h1 img { width: 100%; height: auto; }
.hero-description { font: 24px/1.55 var(--serif); color: #e1d8e8; max-width: none; margin-top: 19px; letter-spacing: .1px; }
.hero-category { margin-top: 20px; color: #c2b5d0; font-size:12px; letter-spacing: 3px; }
.threshold-link { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 17px; font-size:13px; letter-spacing: 1px; }
.threshold-circle { border: 1px solid #d6c5e966; width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; transition: border-color .4s, background .4s; }
.threshold-circle:after { content: ''; position: absolute; inset: -7px; border: 1px solid #d6c5e920; border-radius: 50%; }
.threshold-circle .icon { width: 17px; height: 17px; transition: transform .4s var(--ease-out); }
.threshold-link:hover .threshold-circle { background: #d6c5e91a; border-color: #e4d5f3; }
.threshold-link:hover .icon { transform: translateY(4px); }
.hero-bottom { bottom: 27px; align-items: center; gap: 35px; }
.current-project { min-width: 308px; padding: 16px 0; }
.hero-caption { margin: 0 auto; color: #a99ab8; font-size:12px; }
.hero-bottom .video-trigger { margin-left: auto; color: #d2c5df; font-size:12.5px; }
.hero-bottom .play-circle { width: 30px; height: 30px; }
.hero-dust { z-index: -1; }
.hero-dust i { animation: none; opacity: 0; width: var(--spark-size,2px); height: var(--spark-size,2px); }
.hero-mist { position: absolute; inset: -15%; pointer-events: none; z-index: -1; opacity: 0; background-repeat: no-repeat; }
.mist-back { background: radial-gradient(ellipse at 20% 70%, #b6a0dc14, transparent 43%), radial-gradient(ellipse at 80% 45%,#d9b7ed12,transparent 38%); }
.mist-front { background: radial-gradient(ellipse at 50% 85%,#c9b3df1c, transparent 48%); }
.hero-aura { position: absolute; width: 65%; height: 85%; left: 30%; top: 0; z-index: -1; background: radial-gradient(ellipse,#ccb0e116, transparent 66%); pointer-events: none; opacity: .45; }

.section-pad { padding-top: 125px; padding-bottom: 125px; }
.section-heading { margin-bottom: 49px; }
.section-heading h2 { font-size: clamp(46px,5vw,68px); }
.section-kicker { margin-bottom: 27px; }
.project-feature { display: block; border: 0; background: none; min-height: 0; overflow: visible; }
.project-visual { min-height: 520px; background: #141019; border: 1px solid #9c86b22a; }
.project-visual > img { object-position: center 48%; transform: scale(1.045); }
.project-feature:hover .project-visual > img { transform: scale(1.06); }
.project-image-shade { background: linear-gradient(0deg,#0b0813e6, #0c091a15 75%); }
.project-wordmark { bottom: 104px; }
.project-wordmark > span:first-child { font-size: clamp(70px,9.5vw,140px); letter-spacing: 14px; }
.project-wordmark small { font-size:12px; letter-spacing: 4px; }
.wordmark-rule { width: 210px; }
.project-number { left: 34px; top: 32px; }
.image-note { bottom: 23px; font-size:12px; }
.project-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 90px; padding: 36px 0 0; }
.project-copy > .project-tags { grid-column: 1; grid-row: 1; }
.project-copy > .eyebrow { grid-column: 1; grid-row: 2; margin-top: 18px; margin-bottom: 19px; }
.project-copy > h3 { grid-column: 1; grid-row: 3; font-size: 41px; line-height: 1.15; margin-bottom: 0; }
.project-copy > p[data-i18n=projectSynopsis] { grid-column: 2; grid-row: 1 / 3; font-size:16.5px; line-height: 1.95; }
.project-copy > .project-copy-secondary { grid-column: 2; grid-row: 3; margin: 0; font-size:16px; line-height: 1.95; }
.project-copy > .button { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 30px; font-size:14px; }
.project-bottom { grid-column: 1 / -1; grid-row: 5; margin-top: 40px; font-size:12.5px; flex-direction: row; }
.studio { background: #17151c; }
.studio h2 { font-size: clamp(46px,5vw,69px); }
.studio h2 em, .next-section h2 em { font-style: normal; }
.values { display: block; margin-top: 75px; padding-top: 0; border-top: 0; }
.values article, .values article:first-child, .values article:last-child { display: grid; grid-template-columns: 55px 1.2fr 1fr; gap: 28px; align-items: center; padding: 31px 0; border: 0; border-top: 1px solid var(--line); }
.values h3 { margin: 0; font-size: 29px; line-height: 1.2; letter-spacing: -.5px; }
.values p { max-width: 380px; font-size:16px; line-height: 1.8; }
.value-number { font-size: 19px; }
.signature-card { transform-style: preserve-3d; }
.signature-card:before { border-color: #bea5d92e; }
.signature-card:after { border-color: #bea5d91a; }
.signature-card > img { filter: drop-shadow(0 6px 15px #0003); }
.signature-card.video-card > .bts-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; filter: none; animation: none; z-index: -1; }
.signature-card.video-card:before { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; margin: 0; background: linear-gradient(0deg,#100d19e8,transparent 45%,#100d19bc); z-index: 0; animation: none; }
.signature-card.video-card:after { display: none; }
.video-card .signature-top, .video-card .signature-play { z-index: 1; }
.button { position: relative; overflow: hidden; isolation: isolate; }
.button:before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 25%,#e9d4ff20 45%,transparent 65%); transform: translateX(-140%); pointer-events: none; z-index: -1; }
.button:hover:before { transform: translateX(140%); transition: transform .95s var(--ease-out); }
.button .icon, .text-link .icon, .signature-play > .icon { transition: transform .4s var(--ease-out); }
.button:hover .icon, .text-link:hover .icon, .signature-play:hover > .icon { transform: translate(3px,-3px); }
.project-visual:after, .signature-card > .card-glow { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--card-hover,0); background: radial-gradient(450px circle at var(--pointer-x,50%) var(--pointer-y,50%),#d5b6ff14,transparent 70%); transition: opacity .5s; }
.signature-card > .card-glow { z-index: -1; }
.next-section h2 { font-size: clamp(45px,4.3vw,63px); }
.faq details > p { overflow: hidden; }
dialog[open] { animation: cinema-dialog-in .5s var(--ease-out) both; }
dialog.closing { animation: cinema-dialog-out .24s ease-in both; }
dialog[open].closing::backdrop { animation: veil-out .24s ease-in both; }
dialog[open]::backdrop { animation: veil-in .45s ease both; }
.tab-panel.is-entering { animation: panel-in .4s var(--ease-out) both; }
.mobile-nav:not([hidden]):not(.closing) { animation: panel-in .5s var(--ease-out) both; }
/* La fermeture du menu. Elle n'existait pas : « hidden » est un display:none,
   qui ne s'anime pas. Le panneau s'ouvrait donc en douceur et disparaissait
   d'un coup — l'œil remarque l'asymétrie bien avant de remarquer l'animation.
   Même convention que les fenêtres, juste au-dessus : une classe « closing »
   et une sortie plus rapide que l'entrée, parce qu'on ferme pour passer à
   autre chose. */
.mobile-nav.closing { animation: panel-out .26s ease-in both; pointer-events: none; }

.motion-enabled .hero-content > * { animation: opening-in 1.5s var(--ease-out) both; }
.motion-enabled .hero .hero-prologue { animation-delay: .05s; }
.motion-enabled .hero h1 { animation-name: signature-in; animation-delay: .18s; animation-duration: 1.8s; }
.motion-enabled .hero-description { animation-delay: .5s; }
.motion-enabled .hero-category { animation-delay: .7s; }
.motion-enabled .threshold-link { animation-delay: .85s; }
.motion-enabled .hero-bottom { animation: opening-in 1.4s .95s var(--ease-out) both; }
.motion-enabled .hero-mist { opacity: 1; }
.motion-enabled .hero-art { animation: camera-drift 22s ease-in-out infinite alternate; }
.motion-enabled .mist-back { animation: mist-pass 22s ease-in-out infinite alternate; }
.motion-enabled .mist-front { animation: mist-pass 16s -8s ease-in-out infinite alternate-reverse; }
.motion-enabled .hero-aura { animation: aura-breathe 7s ease-in-out infinite alternate; }
.motion-enabled .hero-dust i { animation: firefly var(--spark-time,16s) var(--spark-delay,0s) linear infinite; }
.motion-enabled .threshold-circle .icon { animation: invitation 2.8s 2s ease-in-out infinite; }
.motion-enabled .signature-card:before { animation: orbit 40s linear infinite; border-style: dashed; }
.motion-enabled .signature-card.video-card:before { animation: none; }
.motion-enabled .signature-card:after { animation: orbit 60s linear infinite reverse; }
.motion-enabled .signature-card > img { animation: signature-float 7s ease-in-out infinite alternate; }
.motion-enabled .project-visual > img { transform: scale(1.065) translate3d(var(--image-x,0px),var(--image-y,0px),0); transition: transform 1.1s var(--ease-out); }
.scene-asleep *, .scene-asleep *:before, .scene-asleep *:after { animation-play-state: paused !important; }
.motion-enabled .current-project .status-dot { animation: status-glow 3s ease-in-out infinite; }
.motion-enabled [data-motion] { opacity: 0; transform: translate3d(0,40px,0); transition: opacity 1s var(--ease-out),transform 1.3s var(--ease-out); transition-delay: var(--motion-delay,0ms); }
.motion-enabled [data-motion=picture] { transform: translate3d(0,35px,0) scale(.975); }
.motion-enabled [data-motion].motion-in { opacity: 1; transform: translate3d(0,0,0) scale(1); }
.motion-suspended *, .motion-suspended *:before, .motion-suspended *:after { animation-play-state: paused !important; }
html:not(.motion-enabled) .hero-art { transform: scale(1.04); }
html:not(.motion-enabled) .hero-content { opacity: 1; transform: none; }
html:not(.motion-enabled) *, html:not(.motion-enabled) *:before, html:not(.motion-enabled) *:after { animation: none !important; }

@keyframes opening-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes signature-in { from { opacity: 0; transform: translateY(12px) scale(.94); filter: blur(5px) drop-shadow(0 5px 30px #090610); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 5px 34px #090610a0); } }
@keyframes mist-pass { from { transform: translate(-6%,2%) scale(1); } to { transform: translate(6%,-4%) scale(1.08); } }
@keyframes camera-drift { from { scale: 1; } to { scale: 1.045; } }
@keyframes aura-breathe { from { opacity: .2; transform: scale(.9); } to { opacity: .85; transform: scale(1.1); } }
@keyframes firefly { 0% { transform: translate3d(0,20px,0); opacity: 0; } 18% { opacity: .6; } 65% { opacity: .35; } 100% { transform: translate3d(var(--spark-drift,24px),-105px,0); opacity: 0; } }
@keyframes invitation { 0%,50%,100% { transform: translateY(0); } 70% { transform: translateY(4px); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes signature-float { from { transform: translateY(3px); } to { transform: translateY(-6px); } }
@keyframes status-glow { 0%,100% { box-shadow: 0 0 0 0 #c9b5e300; } 50% { box-shadow: 0 0 0 4px #c9b5e31a,0 0 12px #c9b5e33a; } }
@keyframes cinema-dialog-in { from { opacity: 0; transform: translateY(26px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes cinema-dialog-out { to { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-out { to { opacity: 0; } }
@keyframes panel-out { to { opacity: 0; transform: translateY(10px); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }

@media (min-width: 1550px) { .hero-content { padding-bottom: 90px; } .hero h1 { font-size: inherit; } }
@media (max-width: 1160px) { .header-note { padding-right: 0; } .hero h1 { font-size: inherit; } .project-copy { gap: 0 60px; } .project-wordmark > span:first-child { font-size: 100px; letter-spacing: 11px; } .values h3 { font-size: 25px; } .hero-bottom { gap: 25px; } }
@media (max-width: 960px) { .chapter-rail { display: none; } .header-note { display: none; } .hero { height: 100svh; min-height: 740px; } .hero h1 { font-size: inherit; width: min(650px,80vw); } .hero-content { padding-bottom: 100px; } .hero-description { max-width: none; } .project-visual { min-height: 450px; } .project-copy { gap: 0 45px; } .project-copy > h3 { font-size: 36px; } .hero-bottom { gap: 20px; } .hero-caption { display: none; } .values article, .values article:first-child, .values article:last-child { grid-template-columns: 35px 1fr 1fr; gap: 20px; } .menu-intro p { font-size: 38px; } .mobile-nav { gap: 40px; } }
@media (max-width: 720px) {
  .site-header, .site-header.scrolled, .nav-open .site-header { height: 76px; }
  .header-inner { padding-inline: 21px; gap: 15px; }
  .brand { gap: 10px; width: auto; }
  .brand img { width: 26px; height: 29px; }
  .brand span { font-size:12px; letter-spacing: 1.4px; }
  .header-actions { gap: 15px; }
  .menu-toggle { padding: 8px 0; }
  .menu-toggle .menu-label { display: none; }
  .menu-toggle .menu-lines { width: 21px; }
  .menu-lines i { width: 21px; }
  .motion-toggle { width: 20px; }
  .lang { font-size:12.5px; }
  .hero { height: 100svh; min-height: 720px; max-height: none; }
  .hero-art { object-position: 62% center; opacity: .94; }
  .hero-shade { background: linear-gradient(0deg,#111117,#11111710 35%,#11111732 70%,#11111770),radial-gradient(ellipse at 50% 38%,#100c1c4a,#100c1ca8 75%); }
  .hero-content { padding-top: 5px; padding-bottom: 65px; }
  .hero .hero-prologue { margin-bottom: 29px; font-size:12px; letter-spacing: 1.5px; gap: 10px; }
  .prologue-line { width: 16px; }
  .hero h1 { font-size: inherit; width: 95%; }
  .hero-description { font-size: 21px; line-height: 1.55; margin-top: 26px; max-width: 290px; }
  .hero-category { font-size:12px; line-height: 1.9; letter-spacing: 2.2px; margin-top: 24px; }
  .threshold-link { font-size:12.5px; margin-top: 38px; gap: 19px; }
  .threshold-circle { width: 42px; height: 42px; }
  .hero-bottom { bottom: 19px; flex-wrap: wrap; gap: 13px; }
  .current-project { min-width: 0; padding: 13px 0; width: 100%; }
  .hero-bottom .video-trigger { margin: 0; font-size:12.5px; padding: 0; }
  .hero-caption { display: block; order: 2; margin: 0 0 0 auto; font-size:12px; }
  .hero-bottom .play-circle { width: 25px; height: 25px; }
  .section-pad { padding-block: 77px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2 { font-size: 43px; }
  .project-visual { min-height: 370px; }
  .project-wordmark { bottom: 95px; }
  .project-wordmark > span:first-child { font-size: clamp(34px,9.8vw,62px); letter-spacing: 4px; }
  .project-wordmark small { font-size:12px; letter-spacing: 2px; }
  .wordmark-rule { width: 140px; }
  .project-number { left: 20px; top: 23px; font-size:12px; }
  .image-note { font-size:12px; left: 15px; right: 15px; line-height: 1.7; }
  .project-copy { display: flex; flex-direction: column; align-items: flex-start; padding-top: 27px; }
  .project-copy > .eyebrow { margin: 23px 0 15px; }
  .project-copy > h3 { font-size: 35px; margin: 0 0 25px; }
  .project-copy > p[data-i18n=projectSynopsis] { font-size:16px; line-height: 1.9; }
  .project-copy > .project-copy-secondary { font-size:16px; margin-top: 15px; }
  .project-copy > .button { margin-top: 27px; }
  .project-bottom { margin-top: 30px; font-size:12px; }
  .studio h2 { font-size: 46px; }
  .values { margin-top: 47px; }
  .values article, .values article:first-child, .values article:last-child { grid-template-columns: 28px 1fr; gap: 12px 15px; padding: 25px 0; }
  .values .value-number { grid-row: span 2; align-self: start; padding-top: 4px; }
  .values h3 { font-size: 25px; grid-column: 2; }
  .values p { grid-column: 2; font-size:15px; }
  .next-section h2 { font-size: 46px; }
  .mobile-nav { top: 76px; height: calc(100svh - 76px); grid-template-columns: 1fr; gap: 20px; align-content: start; padding: 32px 27px; }
  .menu-intro { display: none; }
  .menu-chapters a { gap: 18px; padding: 26px 0; }
  .menu-chapters a > span { font-size: 33px; }
  .menu-chapters small { font-size:12px; }
}
@media (max-width: 370px) { .brand span { font-size:12px; letter-spacing: 1px; } .header-actions { gap: 11px; } .hero-description { font-size: 20px; } .hero .hero-prologue { font-size: 5px; } .project-bottom { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } .hero-art { transform: scale(1.04) !important; } .hero-content { opacity: 1 !important; transform: none !important; } [data-motion] { opacity: 1 !important; transform: none !important; } }