:root {
  --black: #080807;
  --black-soft: #10100e;
  --panel: #141410;
  --gold: #b69a62;
  --gold-light: #d0b77e;
  --ivory: #f0ecdf;
  --muted: #aaa597;
  --line: rgba(196, 170, 111, .24);
  --font-body: 'DM Sans', sans-serif;
  --font-display: 'Manrope', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--black); color: var(--ivory); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: var(--black); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.noise { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.site-header { height: 88px; padding: 0 7vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(196,170,111,.14); background: rgba(8,8,7,.92); position: absolute; inset: 0 0 auto; z-index: 20; backdrop-filter: blur(14px); }
.brand, .footer-brand { display: flex; align-items: center; gap: 12px; font: 800 12px var(--font-display); letter-spacing: .17em; }
.brand img { width: 43px; height: 43px; object-fit: contain; border-radius: 50%; }
.brand b { color: var(--gold); font-weight: 600; }
.navigation { display: flex; gap: clamp(22px,3vw,48px); }
.navigation a, .header-cta { color: #c8c2b4; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; transition: color .25s; }
.navigation a:hover, .navigation a.active, .header-cta { color: var(--gold-light); }
.header-cta span, .button span { margin-left: 12px; }
.menu-toggle { display: none; }
.hero { min-height: 790px; height: min(100svh, 980px); position: relative; display: grid; place-items: center; padding: 130px 24px 100px; overflow: hidden; background: radial-gradient(ellipse at 50% 43%, rgba(147,119,67,.13), transparent 42%), linear-gradient(180deg,#0b0b09 0%,#080807 100%); }
.hero:before, .hero:after { content: ''; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(182,154,98,.08); border-radius: 50%; left: 50%; top: 48%; transform: translate(-50%,-50%); }
.hero:after { width: 690px; height: 690px; }
.hero-glow { position: absolute; width: 500px; height: 300px; background: rgba(178,145,82,.08); filter: blur(100px); top: 25%; left: 50%; transform: translateX(-50%); }
.hero-content { position: relative; z-index: 1; text-align: center; max-width: 760px; }
.eyebrow, .overline, .section-index, .hero-kicker, .hero-bottom, .project-meta, .visual-caption, .visual-corner, .coming-soon, .copyright, .back-top { font-size: 9px; letter-spacing: .2em; }
.eyebrow { color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 15px; }
.eyebrow-line { width: 35px; height: 1px; background: var(--gold); opacity: .7; }
.hero-logo { display: block; width: 145px; height: 145px; object-fit: contain; margin: 35px auto 24px; border-radius: 50%; }
.hero-kicker { color: var(--gold-light); margin: 0 0 20px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.065em; }
h1 { font-size: clamp(55px,8vw,100px); line-height: .99; margin-bottom: 22px; }
h1 em, h2 em, .manifesto-quote em { color: var(--gold-light); font-family: Georgia,serif; font-weight: 400; }
.hero-description { color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 17px 23px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; transition: .25s ease; }
.button-primary { color: #11100c; background: var(--gold-light); border: 1px solid var(--gold-light); }
.button-primary:hover { background: transparent; color: var(--gold-light); }
.text-link { color: var(--ivory); font-size: 11px; letter-spacing: .07em; }
.text-link span { color: var(--gold); margin-left: 8px; }
.hero-bottom { position: absolute; bottom: 35px; left: 7vw; right: 7vw; display: flex; justify-content: space-between; color: #777367; font-size: 8px; }
.scroll-cue b { color: var(--gold); margin-left: 8px; }
.section-shell { padding-left: 12vw; padding-right: 12vw; }
.intro { min-height: 570px; display: grid; grid-template-columns: .7fr 1.5fr .6fr; align-items: center; gap: 30px; border-top: 1px solid var(--line); }
.section-index { color: var(--gold); white-space: nowrap; }
.section-index span { color: #766b54; padding: 0 5px; }
.overline { color: var(--gold); margin-bottom: 22px; }
h2 { font-size: clamp(42px,5.5vw,70px); line-height: 1.08; margin-bottom: 25px; }
.body-copy, .studio-text p, .contact-note { color: var(--muted); font-size: 14px; line-height: 1.95; max-width: 570px; }
.intro-mark { justify-self: end; font: 300 clamp(100px,17vw,220px) Georgia,serif; color: rgba(240,236,223,.07); }
.intro-mark span { color: var(--gold); }
.projects { padding-top: 105px; padding-bottom: 115px; background: #0d0d0b; }
.section-heading { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: start; margin-bottom: 55px; }
.section-heading .overline { margin-top: 32px; }
.section-heading h2 { margin-bottom: 15px; }
.heading-note { color: var(--muted); font-size: 13px; }
.project-feature { display: grid; grid-template-columns: 1.4fr .8fr; background: var(--panel); border: 1px solid var(--line); }
.project-visual { min-height: 420px; background: #181713; position: relative; overflow: hidden; }
.thumbnail-button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #181713; color: var(--ivory); overflow: hidden; text-align: left; }
.video-thumbnail { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .7s; }
.thumbnail-button:hover .video-thumbnail { transform: scale(1.035); }
.thumbnail-shade { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.7),transparent 55%),rgba(0,0,0,.12); }
.play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; display: grid; place-items: center; padding-left: 4px; border: 1px solid rgba(240,236,223,.8); border-radius: 50%; color: var(--ivory); background: rgba(8,8,7,.35); backdrop-filter: blur(5px); transition: .25s; }
.thumbnail-button:hover .play-button { background: var(--gold-light); color: var(--black); border-color: var(--gold-light); }
.visual-caption, .visual-corner { position: absolute; bottom: 24px; color: var(--ivory); font-size: 8px; }
.visual-caption { left: 25px; }.visual-caption span { color: var(--gold-light); margin-left: 8px; }
.visual-corner { right: 25px; color: var(--gold-light); }
.video-embed { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; position: absolute; inset: 0; }
.project-info { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
.project-meta { display: flex; justify-content: space-between; color: var(--gold); font-size: 8px; }
.project-info h3 { font: 500 clamp(28px,3vw,40px) var(--font-display); letter-spacing: -.04em; margin: 38px 0 17px; }
.project-info p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.project-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 25px; color: #928c7d; font-size: 10px; }
.inline-link { background: none; border: 0; padding: 0; color: var(--gold-light); font-size: 10px; cursor: pointer; }.inline-link b { margin-left: 8px; }
.coming-soon { margin-top: 35px; color: #777367; font-size: 8px; }.pulse-dot { display: inline-block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; margin-right: 10px; }
.manifesto { padding: 130px 20px; text-align: center; background: radial-gradient(ellipse at center,rgba(157,126,67,.1),transparent 55%),#090908; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manifesto-quote { font: 400 clamp(37px,5.5vw,68px)/1.2 var(--font-display); letter-spacing: -.05em; margin: 35px 0; }
.manifesto-rule { width: 55px; height: 1px; background: var(--gold); margin: 0 auto 25px; }.manifesto-inner > span { color: var(--gold); font-size: 9px; letter-spacing: .2em; }
.studio { padding-top: 115px; padding-bottom: 130px; }.studio-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9vw; margin-top: 65px; }.studio-title h2 { font-size: clamp(38px,5vw,62px); }.studio-text p { margin-bottom: 22px; }.studio-text .text-link { display: inline-block; margin-top: 15px; }
.contact { padding-top: 40px; padding-bottom: 120px; }.contact-panel { padding: 75px 9vw; border: 1px solid var(--line); background: radial-gradient(ellipse at 85% 20%,rgba(182,154,98,.1),transparent 45%),var(--panel); }.contact-panel .overline { margin-top: 55px; }.contact-panel h2 { font-size: clamp(48px,6vw,78px); }.contact-note { max-width: 490px; margin-bottom: 30px; }.email-note { display: block; width: fit-content; margin-top: 20px; color: var(--gold-light); font-size: 12px; letter-spacing: .04em; }
.site-footer { min-height: 105px; padding: 25px 7vw; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; }.footer-brand img { width: 35px; height: 35px; border-radius: 50%; }.footer-brand span { font-size: 9px; }.copyright, .back-top { color: #777367; font-size: 8px; }.back-top { color: var(--gold); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease,transform .8s ease; }.reveal.visible { opacity: 1; transform: none; }
@media (max-width: 800px) {
  .site-header { height: 75px; padding: 0 6vw; }.brand { font-size: 10px; }.brand img { width: 37px; height: 37px; }.header-cta { display: none; }
  .menu-toggle { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 10px 0 10px 10px; }.menu-toggle i { width: 24px; height: 1px; background: var(--gold-light); }
  .navigation { display: none; position: absolute; top: 74px; left: 0; right: 0; padding: 25px 7vw 30px; background: #0c0c0a; border-bottom: 1px solid var(--line); flex-direction: column; gap: 22px; }.navigation.open { display: flex; }
  .hero { min-height: 740px; height: 100svh; }.hero-logo { width: 118px; height: 118px; }.hero-bottom { left: 6vw; right: 6vw; }.hero-bottom span:nth-child(2) { display: none; }
  .section-shell { padding-left: 7vw; padding-right: 7vw; }.intro { min-height: auto; padding-top: 90px; padding-bottom: 90px; grid-template-columns: 1fr; gap: 35px; }.intro-mark { display: none; }
  .section-heading { grid-template-columns: 1fr; gap: 15px; }.section-heading .overline { margin-top: 20px; }.projects { padding-top: 80px; padding-bottom: 85px; }.project-feature { grid-template-columns: 1fr; }.project-visual { min-height: 300px; }.video-embed { min-height: 300px; }.project-info { padding: 32px 25px; }.project-info h3 { margin-top: 27px; }
  .studio { padding-top: 85px; padding-bottom: 90px; }.studio-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 45px; }.contact { padding-bottom: 80px; }.contact-panel { padding: 45px 7vw; }.contact-panel .overline { margin-top: 40px; }
  .site-footer { padding: 28px 7vw; flex-wrap: wrap; }.copyright { order: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }.reveal { opacity: 1; transform: none; } }

/* Pages et navigation supplémentaires */
.site-header{position:relative}.hero{min-height:690px;height:auto}.navigation{gap:clamp(12px,1.8vw,30px)}.site-footer{flex-wrap:wrap}.footer-links{display:flex;flex-direction:column;gap:12px}.social-links,.legal-links{display:flex;flex-wrap:wrap;gap:12px 20px}.social-links a,.legal-links a{font-size:11px;color:var(--gold-light)}.legal-links a{color:var(--muted)}.page-hero{padding:100px 12vw 55px;background:radial-gradient(ellipse at 65% 30%,rgba(182,154,98,.1),transparent 55%)}.page-hero h1{font-size:clamp(44px,7vw,82px)}.page-body{padding:20px 12vw 110px;max-width:1150px}.page-body p,.page-body li{font-size:15px;line-height:2;color:var(--muted)}.page-body h2{font-size:clamp(25px,3vw,39px);margin-top:40px}.page-body h3{font-size:19px;color:var(--ivory);margin-top:30px}.page-body a{color:var(--gold-light)}.feature-quote{font:400 clamp(24px,3vw,39px)/1.4 Georgia,serif!important;color:var(--gold-light)!important;max-width:800px}.page-cta{margin-top:35px}.notice{border-left:2px solid var(--gold);padding:15px 25px;background:var(--panel)}@media(max-width:800px){.page-hero{padding:75px 7vw 30px}.page-body{padding:15px 7vw 80px}.site-footer{align-items:flex-start}.footer-links{width:100%}}

/* Navigation des réalisations : flèches latérales et transition */
.project-carousel { position: relative; padding: 0 58px 40px; }
.carousel-stage { overflow: hidden; }
.carousel-arrow { position: absolute; top: calc((100% - 40px) / 2); transform: translateY(-50%); z-index: 2; width: 48px; height: 60px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--gold-light); font-size: 29px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.carousel-prev { left: 0; }.carousel-next { right: 0; }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: var(--gold-light); color: var(--black); border-color: var(--gold-light); }
.carousel-arrow:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.carousel-status { position: absolute; bottom: 5px; left: 58px; right: 58px; display: flex; align-items: center; gap: 18px; color: var(--gold-light); font-size: 10px; letter-spacing: .15em; }
.carousel-track { height: 2px; background: var(--line); flex: 1; }
.carousel-track > span { display: block; height: 100%; background: var(--gold-light); width: 50%; transition: width .3s; }
.slide-enter { animation: project-slide-in .35s ease both; }
@keyframes project-slide-in { from { opacity: .4; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.project-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle,rgba(182,154,98,.15),transparent 65%),#141410; color: var(--gold-light); letter-spacing: .25em; font-size: 11px; }
.placeholder-mark { font: 300 150px Georgia,serif; color: rgba(240,236,223,.14); line-height: 1; }
.placeholder-mark span { color: var(--gold); }
@media(max-width:800px) { .project-carousel { padding: 0 0 78px; } .carousel-arrow { top: auto; bottom: 8px; transform: none; width: 46px; height: 48px; } .carousel-prev { left: 0; } .carousel-next { right: 0; } .carousel-status { left: 64px; right: 64px; bottom: 30px; } }
@media(prefers-reduced-motion:reduce) { .slide-enter { animation: none; } }