:root{
  --ink:#0B0B0A; --paper:#EDEAE3; --body:#A9A79E; --dim:#8C8A80;
  --line:#26261F; --accent:#CFF32B; --quote:#C6C3BA;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
  --gut:clamp(20px,5vw,56px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
}
.wrap{position:relative;z-index:1;max-width:1440px;margin:0 auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:#E4FF6B}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin:0;text-wrap:pretty}
.mono{font-family:var(--mono)}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* ——— structure ——— */
.band{border-bottom:1px solid var(--line)}
.split{display:grid;grid-template-columns:2fr 1fr}
.split>*{padding:clamp(32px,4vw,60px) var(--gut)}
.split>*:first-child{border-right:1px solid var(--line)}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split>*:first-child{border-right:0;border-bottom:1px solid var(--line)}
}

/* ——— nav ——— */
header{border-bottom:1px solid var(--line);position:relative;z-index:2}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px var(--gut)}
.brand{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.nav ul{display:flex;align-items:center;gap:clamp(14px,2vw,30px);list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav ul a{color:var(--body)}
.nav ul a:hover{color:var(--paper)}
.cta{display:inline-block;background:var(--accent);color:var(--ink)!important;padding:8px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cta:hover{background:#E4FF6B;color:var(--ink)!important}

/* ——— hero ——— */
h1{font-size:clamp(26px,3.2vw,46px);line-height:1.04;font-weight:800;letter-spacing:-.02em}
.sub{margin-top:24px;font-size:clamp(15px,1.4vw,17px);color:var(--body);max-width:44ch}
.fiche dl{margin:0}
.fiche .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--body)}
.fiche .row:last-child{border-bottom:1px solid var(--line)}
.fiche dt{letter-spacing:.06em;text-transform:uppercase}
.fiche dd{margin:0;font-size:20px;color:var(--paper)}

/* ——— offre ——— */
h2{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.01em;line-height:1.15}
.price{border:1px solid var(--accent);padding:18px 22px;font-family:var(--mono);white-space:nowrap;align-self:flex-start}
.price b{display:block;font-size:clamp(26px,3vw,34px);font-weight:400;color:var(--accent);letter-spacing:-.02em}
.price span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--body);margin-top:6px}
.offer-top{display:flex;gap:clamp(20px,3vw,40px);align-items:flex-end;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--quote)}
.chips span{border:1px solid var(--line);padding:7px 13px;white-space:nowrap}
.scope{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-family:var(--mono);font-size:12px;line-height:1.45}
.scope .no{color:var(--body)}
.scope i{font-style:normal;color:var(--accent)}
.scope .no i{color:var(--body)}

/* ——— réalisations ——— */
.work{list-style:none;margin:0;padding:0}
.work li{display:grid;grid-template-columns:160px 1fr 300px;gap:24px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.work li:last-child{border-bottom:1px solid var(--line)}
.work .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--body)}
.work .tag.prod{color:var(--accent)}
.work .name{font-size:clamp(16px,1.6vw,19px);font-weight:600}
.work .meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--body);text-align:right}
@media(max-width:760px){
  .work li{grid-template-columns:1fr;gap:6px}
  .work .meta{text-align:left}
}

/* ——— avis ——— */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(24px,3vw,40px)}
blockquote{margin:0;border-top:1px solid var(--line);padding-top:22px}
blockquote.own{border-top-color:var(--accent)}
blockquote p{font-size:clamp(15px,1.5vw,18px);line-height:1.45}
blockquote footer{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--body)}

/* ——— faq ——— */
details{border-top:1px solid var(--line);max-width:82ch}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:18px 0;font-size:clamp(15px,1.5vw,18px);font-weight:600;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-weight:400}
details[open] summary::after{content:"–"}
details p{padding:0 0 20px;color:var(--body);max-width:70ch}

/* ——— form ——— */
form{display:flex;flex-direction:column;gap:14px;margin-top:28px;max-width:640px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.f2{grid-template-columns:1fr}}
label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--body);display:block;margin-bottom:6px}
input,textarea{
  width:100%;background:transparent;border:1px solid var(--line);color:var(--paper);
  font-family:var(--mono);font-size:13px;padding:12px 14px;border-radius:0;
}
input:hover,textarea:hover{border-color:#3A3A31}
textarea{resize:vertical;min-height:110px}
button{
  background:var(--accent);color:var(--ink);border:0;border-radius:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;align-self:flex-start;min-height:44px;
}
button:hover{background:#E4FF6B}
.note{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--body)}
.keep{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:12px;color:var(--quote)}

/* ——— footer ——— */
footer.site{padding:32px var(--gut) 44px;font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--dim);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer.site a{color:var(--body)}

/* ——— motion : CSS natif, aucune librairie ——— */
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    .band,.work li,blockquote{animation:rise linear both;animation-timeline:view();animation-range:entry 5% entry 45%}
    @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  }
}

/* ——— portrait ——— */
.me{display:flex;align-items:flex-start;gap:18px}
.me img{width:96px;height:96px;object-fit:cover;border:1px solid var(--line);display:block;flex-shrink:0}
.me p{font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.04em;color:var(--body)}
.me strong{display:block;color:var(--paper);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}

/* ——— pages de texte (mentions, confidentialité) ——— */
.prose{padding:clamp(32px,4vw,60px) var(--gut);max-width:78ch}
.prose h1{font-size:clamp(26px,3.4vw,40px);margin-bottom:8px}
.prose h2{font-size:clamp(16px,1.6vw,19px);font-weight:600;margin:38px 0 12px}
.prose h2 .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:8px;font-weight:400}
.prose p,.prose li{color:var(--body);max-width:74ch}
.prose p+p{margin-top:12px}
.prose ul{padding-left:18px;margin:12px 0}
.prose li{margin-bottom:8px}
.prose dl{margin:12px 0;display:grid;grid-template-columns:200px 1fr;gap:4px 20px;font-size:15px}
.prose dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:4px}
.prose dd{margin:0;color:var(--paper)}
@media(max-width:600px){.prose dl{grid-template-columns:1fr;gap:2px 0}.prose dd{margin-bottom:10px}}
.updated{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* ——— clôture : formulaire pleine largeur, puis une rangée ——— */
.closing{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);margin-top:clamp(36px,4vw,52px);padding-top:28px;border-top:1px solid var(--line)}
@media(max-width:760px){.closing{grid-template-columns:1fr}}
input::placeholder,textarea::placeholder{color:#85837A;opacity:1}