:root { --bg:#0c0e13; --bg2:#12151c; --fg:#ebe7df; --mute:#8f8a80; --line:#262a33; --acc:#f85050; --soft:#cfcac0; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--fg); font-family:'Instrument Sans','Helvetica Neue',Arial,sans-serif; font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased; }
img, video { display:block; max-width:100%; }
a { color:inherit; }
.serif { font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-style:normal; letter-spacing:0; }
.acc { color:var(--acc); }
.label { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-weight:500; }
.wrap { max-width:1180px; margin-left:auto; margin-right:auto; padding-left:clamp(16px,4vw,48px); padding-right:clamp(16px,4vw,48px); }
.wrap-wide { max-width:1800px; margin-left:auto; margin-right:auto; padding-left:clamp(16px,3vw,40px); padding-right:clamp(16px,3vw,40px); }
.narrow { max-width:760px; margin-left:auto; margin-right:auto; padding-left:clamp(16px,4vw,48px); padding-right:clamp(16px,4vw,48px); }
section { padding-top:clamp(56px,8vw,110px); padding-bottom:clamp(56px,8vw,110px); }
h1, h2, h3 { font-family:'Instrument Sans','Helvetica Neue',Arial,sans-serif; font-weight:600; letter-spacing:-.03em; text-wrap:balance; }
h2 { font-size:clamp(30px,4vw,54px); line-height:1.05; }
h1 .serif, h2 .serif, h3 .serif { font-size:1.06em; }
p.body { font-size:16px; line-height:1.75; color:var(--soft); max-width:40em; }
p.body + p.body { margin-top:1.1em; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:36px; border-bottom:1px solid var(--line); padding-bottom:18px; }

/* en-tête */
header { position:fixed; top:0; left:0; right:0; z-index:40; display:flex; justify-content:space-between; align-items:center; padding:22px clamp(16px,4vw,48px); transition:background .35s ease, padding .35s ease; }
header.scrolled { background:rgba(12,14,19,.92); backdrop-filter:blur(10px); padding:14px clamp(16px,4vw,48px); border-bottom:1px solid var(--line); }
header .brand img { height:26px; width:auto; transition:height .35s ease; }
header.scrolled .brand img { height:22px; }
header nav { display:flex; gap:28px; align-items:center; }
header nav a { text-decoration:none; font-size:13px; font-weight:500; letter-spacing:.02em; position:relative; }
header nav a::after { content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
header nav a:hover::after { transform:scaleX(1); }
#burger { display:none; background:none; border:none; font-size:24px; color:var(--fg); cursor:pointer; }

/* hero */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#000; }
.hero video, .hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.8; }
.hero .veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%,var(--bg) 100%); }
.hero .in { position:relative; width:100%; padding:140px clamp(16px,4vw,48px) 64px; }
.hero h1 { font-size:clamp(64px,11vw,160px); line-height:.98; letter-spacing:-.035em; }
.hero .tag { margin-top:24px; font-size:clamp(15px,1.6vw,18px); max-width:34em; color:var(--soft); line-height:1.55; }
.hero .label { display:block; margin-bottom:18px; color:var(--soft); }
.hero .scroll { margin-top:34px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }

/* apparition au défilement */
.rv { opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease; }
.rv.on { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .rv { opacity:1; transform:none; transition:none; } }

/* films */
.grid { display:grid; grid-template-columns:1fr; gap:38px 28px; }
@media (min-width:720px) { .grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1300px) { .grid { grid-template-columns:1fr 1fr 1fr; } }
.card { text-decoration:none; min-width:0; display:block; cursor:pointer; }
.card:focus-visible { outline:2px solid var(--acc); outline-offset:6px; }
.ph { aspect-ratio:16/9; max-width:100%; overflow:hidden; background:var(--bg2); position:relative; border:1px solid var(--line); }
.ph.v { aspect-ratio:9/16; }
.ph img { width:100%; height:100%; object-fit:cover; transition:transform .9s ease, opacity .4s; opacity:.9; }
.card:hover .ph img, .ph:hover img { transform:scale(1.035); opacity:1; }
.ph .ig { position:absolute; left:16px; top:14px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.ph .play { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:rgba(12,14,19,.72); border:1px solid rgba(235,231,223,.5); display:flex; align-items:center; justify-content:center; transition:all .3s; pointer-events:none; }
.ph .play::after { content:''; display:block; width:0; height:0; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--fg); margin-left:4px; }
.card:hover .ph .play, .ph:hover .play { background:var(--acc); border-color:var(--acc); }
.card:hover .ph .play::after, .ph:hover .play::after { border-left-color:#000; }
.card h3 { font-size:clamp(22px,1.6vw,30px); margin-top:14px; line-height:1.15; letter-spacing:-.02em; }
.card:hover h3 { color:var(--acc); }
.card .m { margin-top:6px; }
.vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:28px; }
.vgrid .card h3 { font-size:19px; }

/* visionneuse plein écran */
#lb { position:fixed; inset:0; z-index:100; background:rgba(5,6,9,.94); display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
#lb.on { display:flex; }
.lb-box { position:relative; width:min(94vw, calc(88vh * 16 / 9)); aspect-ratio:16/9; background:#000; cursor:default; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb-box.v { width:min(94vw, calc(90vh * 9 / 16)); aspect-ratio:9/16; }
.lb-box.ig { width:min(94vw,440px); height:min(92vh,780px); aspect-ratio:auto; background:#fff; }
.lb-box iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#lb .x { position:fixed; top:16px; right:20px; width:48px; height:48px; font-size:30px; color:var(--fg); background:rgba(12,14,19,.6); border:1px solid var(--line); border-radius:50%; cursor:pointer; line-height:1; font-family:inherit; }
#lb .x:hover { background:var(--acc); border-color:var(--acc); color:#000; }
#lb .hint { position:fixed; bottom:18px; left:0; right:0; text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); pointer-events:none; }

/* prestations */
.serv { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.serv article { padding:34px 24px 34px 0; border-right:1px solid var(--line); min-width:0; }
.serv article + article { padding-left:24px; }
.serv article:last-child { border-right:0; }
.serv h3 { font-size:clamp(24px,2.4vw,32px); line-height:1.1; margin:10px 0 12px; letter-spacing:-.02em; }
.serv p { font-size:15px; color:var(--soft); max-width:30em; line-height:1.6; }

/* déroulé */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:36px; }
.step .n { font-family:'Instrument Serif',Georgia,serif; font-size:30px; color:var(--acc); line-height:1; }
.step h4 { font-weight:600; font-size:19px; margin:12px 0 8px; letter-spacing:-.01em; }
.step p { font-size:14.5px; line-height:1.65; color:var(--soft); }

/* contact */
.contact h2 { max-width:16em; }
.contact .big { font-weight:600; font-size:clamp(20px,3vw,40px); margin-top:28px; word-break:break-word; letter-spacing:-.03em; }
.contact .big a { text-decoration:none; border-bottom:2px solid var(--acc); }
.contact .tel { margin-top:12px; font-size:16px; color:var(--soft); }
.contact .tel a { text-decoration:none; }
.btn { display:inline-block; padding:15px 34px; border:1px solid var(--fg); color:var(--fg); background:transparent; font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.02em; text-decoration:none; border-radius:999px; cursor:pointer; transition:all .3s; }
.btn:hover { background:var(--acc); border-color:var(--acc); color:#000; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
.form-grid .wide { grid-column:1/-1; }
.f label { display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; font-weight:500; }
.f input, .f textarea, .f select { width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--bg2); font-family:inherit; font-size:15px; color:var(--fg); border-radius:0; }
.f input:focus, .f textarea:focus, .f select:focus { outline:none; border-color:var(--acc); }
.f select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ebe7df' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; cursor:pointer; }
.f input[type=date] { color-scheme:dark; }
.f .note { font-size:12.5px; color:var(--mute); margin-top:14px; }

/* pages simples */
.hero-page { padding:150px clamp(16px,4vw,48px) 60px; }
.hero-page h1 { font-size:clamp(40px,6vw,84px); line-height:1; }
.hero-page .label { display:block; margin-bottom:18px; }

/* pied de page */
footer { border-top:1px solid var(--line); padding:70px clamp(16px,4vw,48px) 34px; text-align:center; }
footer .biglogo img { width:min(720px,80vw); margin:0 auto 28px; }
footer .fil { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
footer .fil a { color:var(--soft); text-decoration:none; }
footer .fil a:hover { color:var(--acc); }
footer .cols { display:flex; justify-content:center; gap:34px; flex-wrap:wrap; margin:40px 0 36px; }
footer .cols a { text-decoration:none; font-size:13px; font-weight:500; }
footer .cols a:hover { color:var(--acc); }
footer .legal { border-top:1px solid var(--line); padding-top:24px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
footer .legal a { color:var(--mute); text-decoration:none; }
footer .legal a:hover { color:var(--fg); }

@media (max-width:760px) {
  header nav { position:fixed; inset:0; background:var(--bg); flex-direction:column; justify-content:center; gap:30px; display:none; z-index:50; }
  header nav.open { display:flex; }
  header nav a { font-size:20px; }
  #burger { display:block; z-index:60; position:relative; }
  .form-grid { grid-template-columns:1fr; }
  .serv article { border-right:0; border-bottom:1px solid var(--line); padding-left:0 !important; }
  .serv article:last-child { border-bottom:0; }
  .hero .in { padding-bottom:48px; }
}