:root{--noir:#000;--encre:#0e0e13;--bleu:#2f62ff;--bordeaux:#8a1538;--texte:#ecebf0;--doux:#a3a2ae;--ligne:#25252e}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--noir);color:var(--texte);font:400 1.05rem/1.65 Figtree,system-ui,sans-serif}
h1,h2,h3,.logo,.letters{font-family:Syne,system-ui,sans-serif;font-weight:800;line-height:1}
a{color:inherit}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.sr{position:absolute;left:-9999px}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(18px,5vw,64px);background:rgba(0,0,0,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.logo{font-size:1.6rem;text-decoration:none;letter-spacing:.04em}
nav{display:flex;gap:26px;align-items:center}
nav a{text-decoration:none;color:var(--doux)}
nav a:hover{color:var(--texte)}
.btn{display:inline-block;background:var(--bleu);color:#fff;padding:14px 26px;border-radius:999px;font:700 1rem Figtree,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--bordeaux)}
nav .btn{color:#fff;padding:9px 20px}
section{padding:clamp(64px,10vw,130px) clamp(18px,5vw,64px)}
h2{font-size:clamp(2rem,5vw,3.6rem);max-width:16ch;margin-bottom:40px}
/* Hero */
.hero{padding-top:clamp(24px,5vw,60px);padding-bottom:clamp(40px,6vw,80px)}
.letters{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(4px,1.5vw,20px);font-size:clamp(7rem,30vw,26rem);letter-spacing:-.03em}
.L{display:block;text-decoration:none;overflow:hidden;padding-bottom:.08em}
.L span{display:block;transition:transform .35s}
.L:hover span{transform:translateY(-.04em)}
.c{color:var(--bleu)}
.m span{color:transparent;-webkit-text-stroke:max(2px,.012em) var(--texte)}
.d{color:var(--bordeaux)}
.L span{animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.m span{animation-delay:.12s}.d span{animation-delay:.24s}
@keyframes up{from{transform:translateY(105%)}}
.hero-text{display:flex;flex-wrap:wrap;gap:28px 60px;align-items:center;justify-content:space-between;margin-top:20px;border-top:1px solid var(--ligne);padding-top:32px}
.lead{max-width:34rem;font-size:1.25rem;color:var(--doux)}
/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px}
.services h2{grid-column:1/-1}
.svc{padding:28px 0 0;border-top:6px solid var(--bleu)}
.svc.m{border-color:var(--texte)}
.svc.d{border-color:var(--bordeaux)}
.svc h3{font-size:1.9rem;margin-bottom:12px}
.svc>p{color:var(--doux);margin-bottom:20px}
.svc ul{list-style:none;padding:0}
.svc li{padding:11px 0;border-top:1px solid var(--ligne)}
/* Réalisations */
.work{background:var(--encre)}
.sub{color:var(--doux);margin:-20px 0 36px}
.grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.tile{min-height:340px;border-radius:6px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.t1{background:linear-gradient(135deg,var(--bleu),#0a1a55)}
.t2{background:linear-gradient(160deg,#000,var(--bordeaux))}
.t3{background:linear-gradient(200deg,var(--bordeaux),var(--bleu))}
.tile figcaption{padding:20px;display:flex;flex-direction:column;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
/* Méthode */
.method ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:e}
.method li{counter-increment:e;border-left:3px solid var(--bordeaux);padding-left:22px}
.method li::before{content:counter(e);font:800 2.6rem Syne,sans-serif;color:var(--bleu)}
.method h3{font-size:1.4rem;margin:6px 0 8px}
.method p{color:var(--doux)}
/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);background:var(--bordeaux)}
.contact p{max-width:30ch}
.coords{margin-top:28px;font-weight:700}
form{display:grid;gap:18px}
label{display:grid;gap:6px;font-weight:500}
input,select,textarea{font:inherit;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:12px}
select option{color:#000}
.contact .btn{background:#000;justify-self:start}
.contact .btn:hover{background:var(--bleu)}
.hp{position:absolute;left:-9999px}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:28px clamp(18px,5vw,64px);color:var(--doux);font-size:.9rem}
@media(max-width:820px){
 nav a:not(.btn){display:none}
 .services,.grid,.method ol,.contact{grid-template-columns:1fr}
 .svc{margin-bottom:40px}
 .tile{min-height:220px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
/* v2 : contenu complet */
.after{grid-column:1/-1;margin-top:20px;color:var(--doux);max-width:46rem}
.audit{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,6vw,80px);background:var(--encre);align-items:center}
.audit>div>p{max-width:38rem;color:var(--doux)}
.steps3{list-style:none;padding:0;margin-top:24px}
.steps3 li{padding:12px 0;border-top:1px solid var(--ligne)}
.auditbox{border:2px solid var(--bleu);border-radius:8px;padding:32px;display:grid;gap:12px;justify-items:start}
.auditbox strong,.ogrid strong{font:800 2.6rem Syne,sans-serif;line-height:1}
small{font:400 .9rem Figtree,sans-serif;color:var(--doux)}
.method h2,.offers h2,.fit h2,.faq h2{max-width:20ch}
.method ol{grid-template-columns:repeat(4,1fr)}
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ogrid article{border:1px solid var(--ligne);border-radius:8px;padding:30px;display:grid;gap:14px;align-content:start}
.ogrid .feat{background:var(--bordeaux);border-color:var(--bordeaux)}
.ogrid .feat small,.ogrid .feat p{color:#e8d3da}
.ogrid h3{font-size:1.6rem}
.ogrid ul{list-style:none;padding:0}
.ogrid li{padding:8px 0;border-top:1px solid rgba(255,255,255,.15)}
.btn.ghost{background:transparent;border:2px solid var(--bleu);justify-self:start}
.btn.ghost:hover{background:var(--bleu)}
.ogrid .btn{justify-self:start}
.foot{margin-top:28px;color:var(--doux);font-size:.9rem;max-width:56rem}
.fit{background:var(--encre)}
.fit ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fit li{border-top:6px solid var(--bleu);padding-top:16px;color:var(--doux)}
.fit li:nth-child(even){border-color:var(--bordeaux)}
.fit strong{display:block;color:var(--texte);margin-bottom:6px}
.faq div{max-width:50rem}
details{border-top:1px solid var(--ligne);padding:18px 0}
summary{cursor:pointer;font-weight:700;list-style:none}
summary::after{content:"+";float:right;color:var(--bleu);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--doux)}
.consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.92rem}
.consent input{margin-top:4px}
.consent a{color:#fff}
.placeholder{background:rgba(47,98,255,.25);padding:0 4px}
.legal{max-width:46rem;margin:auto;padding:60px 20px}
.legal h1{font-size:2.4rem;margin-bottom:20px}
.legal h2{font-size:1.3rem;max-width:none;margin:30px 0 8px}
.legal a{color:var(--bleu)}
@media(max-width:820px){.audit,.ogrid,.fit ul,.method ol{grid-template-columns:1fr}}