@font-face { font-family: 'Creato'; src: url('fonts/CreatoDisplay-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Creato'; src: url('fonts/CreatoDisplay-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Creato'; src: url('fonts/CreatoDisplay-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Creato'; src: url('fonts/CreatoDisplay-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Creato'; src: url('fonts/CreatoDisplay-Black.otf') format('opentype'); font-weight: 900; font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: #14140f; font-family: 'Creato', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: #14140f; text-decoration: none; }
a:hover { color: #e30613; }
img { display: block; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: #e30613; color: #fff; }
::placeholder { color: #b0b0a8; font-family: 'Creato', Helvetica, sans-serif; }
input:focus, textarea:focus { outline: none; border-color: #14140f; }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }

/* Curseur mire AutoCAD */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, input, textarea, label { cursor: none; }
}
.cur-h, .cur-v, .cur-dot { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; opacity: 0; }
.cur-h { width: 100vw; height: 1px; background: #14140f; }
.cur-v { width: 1px; height: 100vh; background: #14140f; }
.cur-dot { width: 5px; height: 5px; margin: -3px 0 0 -3px; border: 1px solid #14140f; background: #fff; z-index: 9999; }
.cur-coord { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; opacity: 0; font-family: 'Creato', monospace; font-size: 8px; font-weight: 500; letter-spacing: .04em; color: #fff; background: #14140f; padding: 2px 5px; white-space: nowrap; transform: translate(14px, 14px); }
@media (pointer: coarse) { .cur-h, .cur-v, .cur-dot, .cur-coord { display: none; } }

/* Aperçu flottant */
.float-preview { position: fixed; top: 0; left: 0; width: 360px; height: 200px; z-index: 90; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity .3s; transform: translate(-50%, -50%); box-shadow: 0 30px 60px rgba(20,20,15,.25); }
.float-preview img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.96) contrast(.98); }
@media (pointer: coarse) { .float-preview { display: none; } }

/* Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,.85); backdrop-filter: blur(16px); border-bottom: 1px solid #ececea; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.brand img { height: 30px; }
.nav nav { display: flex; gap: clamp(14px, 2.5vw, 36px); align-items: center; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; flex-wrap: wrap; }
.btn-pill { padding: 9px 20px; border: 1.5px solid #14140f; border-radius: 999px; transition: background .25s, color .25s; }
.btn-pill:hover { background: #14140f; color: #fff; }

/* Hero */
.hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: #14140f; }
.hero .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero .slide.is-active { opacity: 1; }
.hero .slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.2) brightness(1) contrast(1.02); animation: kenburns 7s ease-out both; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,15,.5) 0%, rgba(20,20,15,0) 42%); }
.hero-in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 8vh, 96px); }
.hero-kicker { font-size: 14px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #fff; opacity: .75; margin-bottom: 16px; animation: rise 1s .2s cubic-bezier(.16,1,.3,1) both; }
.hero h1 { font-size: clamp(44px, 8.5vw, 128px); line-height: .98; font-weight: 900; letter-spacing: -.02em; color: #fff; text-wrap: balance; animation: rise 1s .35s cubic-bezier(.16,1,.3,1) both; }
.hero h1 em { font-weight: 300; font-style: italic; }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 40px; flex-wrap: wrap; animation: rise 1s .5s cubic-bezier(.16,1,.3,1) both; }
.hero-foot-left { display: flex; flex-direction: column; gap: 14px; }
.hero-ref { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: .9; }
.dots { display: flex; gap: 8px; }
.dots button { width: 44px; height: 3px; border: none; padding: 0; background: rgba(255,255,255,.35); transition: background .3s; }
.dots button.is-active { background: #e30613; }
.hero-link { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid #e30613; padding-bottom: 4px; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(48px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* Kickers */
.kicker { font-size: 14px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #e30613; }
.kicker.mb { margin-bottom: clamp(32px, 5vh, 56px); }

/* Atelier */
.atelier { padding: clamp(72px, 12vh, 140px) 0; }
.atelier-title { margin-top: 32px; font-size: clamp(28px, 4.2vw, 56px); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; max-width: 1100px; text-wrap: balance; }
.atelier-title em { font-style: italic; font-weight: 300; }
.domains { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(48px, 7vh, 80px); }
.domains > div { border-top: 2px solid #14140f; padding-top: 20px; }
.dnum { font-size: 40px; font-weight: 300; color: #8a8a80; line-height: 1; }
.domains h3 { margin: 14px 0 8px; font-size: 19px; font-weight: 700; }
.dtxt { font-size: 15px; line-height: 1.6; color: #6b6b62; font-weight: 300; }
.atelier-lede { margin-top: clamp(48px, 7vh, 80px); font-size: 18px; line-height: 1.7; font-weight: 300; max-width: 720px; color: #4a4a42; }

/* Projets */
.projets { background: #14140f; color: #fff; padding: clamp(72px, 12vh, 140px) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vh, 56px); }
.section-head .muted { font-size: 15px; color: #8a8a80; font-weight: 300; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vh, 40px); }
.filter { background: transparent; color: #8a8a80; border: 1.5px solid #3a3a32; border-radius: 999px; padding: 9px 20px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-family: inherit; transition: all .25s; }
.filter.is-active { background: #fff; color: #14140f; }
.proj-list { display: flex; flex-direction: column; }
.proj-row { display: flex; align-items: baseline; gap: clamp(12px, 2vw, 32px); width: 100%; text-align: left; background: none; border: none; border-top: 1px solid #2c2c26; padding: clamp(18px, 2.6vh, 28px) 0; font-family: inherit; color: #fff; transition: padding-left .35s cubic-bezier(.16,1,.3,1), color .35s; }
.proj-row:hover { padding-left: 24px; color: #e30613; }
.pnum { font-size: 14px; font-weight: 300; color: #8a8a80; min-width: 32px; }
.ptitle { font-size: clamp(16px, 1.9vw, 24px); font-weight: 400; flex: 1; min-width: 0; }
.pmeta { font-size: 13px; font-weight: 300; color: #8a8a80; white-space: nowrap; }
.ptag { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8a8a80; white-space: nowrap; }
@media (max-width: 640px) { .pmeta { display: none; } }

/* Démarche */
.demarche { padding: clamp(72px, 12vh, 140px) 0; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.step { display: flex; flex-direction: column; gap: 16px; }
.onum { font-size: clamp(64px, 8vw, 104px); font-weight: 900; line-height: .9; color: transparent; }
.onum.ink { -webkit-text-stroke: 1.5px #14140f; }
.onum.red-stroke { -webkit-text-stroke: 1.5px #e30613; }
.step h3 { font-size: 22px; font-weight: 700; }
.step p:not(.onum) { font-size: 16px; line-height: 1.65; font-weight: 300; color: #4a4a42; }

/* Contact */
.contact { border-top: 1px solid #ececea; padding: clamp(72px, 12vh, 140px) 0; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(40px, 5vw, 72px); }
.stack { display: flex; flex-direction: column; gap: 28px; }
.contact-title { font-size: clamp(36px, 5vw, 64px); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
.red-txt { color: #e30613; }
.coords { display: flex; flex-direction: column; gap: 18px; font-size: 17px; font-weight: 300; line-height: 1.5; }
.coords .label { margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a8a80; }
.ul { border-bottom: 1px solid #14140f; }
form { display: flex; flex-direction: column; gap: 20px; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
form input, form textarea { border: 1.5px solid #d5d5cf; padding: 14px 16px; font-size: 16px; font-family: inherit; font-weight: 400; background: #fff; }
form textarea { resize: vertical; }
.send-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.send-row button { background: #e30613; color: #fff; border: none; padding: 16px 44px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-family: inherit; transition: background .25s; }
.send-row button:hover { background: #14140f; }
.sent-note { font-size: 15px; color: #1f8a5b; }

/* Footer */
footer { background: #14140f; color: #fff; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 44px; }
.foot-logo { height: 33px; }
.foot-legal { flex: 1; min-width: 300px; text-align: center; }
.foot-legal p { font-size: 12px; font-weight: 300; line-height: 1.8; color: #8a8a80; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,15,.92); display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 64px); }
.lightbox[hidden] { display: none; }
.lb-inner { max-width: 1000px; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.lb-img { width: 100%; height: 60vh; background-size: cover; background-position: center; filter: saturate(.7) brightness(.96) contrast(.98); }
.lb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lb-head h3 { font-size: clamp(22px, 3vw, 32px); font-weight: 900; color: #fff; }
.lb-meta { margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #e30613; }
.lb-desc { margin-top: 8px; font-size: 16px; line-height: 1.6; font-weight: 300; color: #b0b0a8; max-width: 680px; }
.lb-close { background: none; border: 1.5px solid #fff; border-radius: 999px; color: #fff; padding: 10px 24px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-family: inherit; transition: background .25s, color .25s; }
.lb-close:hover { background: #fff; color: #14140f; }