:root{
  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --ink:#111111;
  --muted:#6B6B6B;
  --accent:#D97706;
  --accent2:#111111;
  --radius:0px;
  --font-display:"Archivo Black",sans-serif;
  --font-body:"Archivo",sans-serif;
  --font-utility:"Space Mono",monospace;

  --step--1:clamp(0.75rem,0.72rem + 0.15vw,0.84rem);
  --step-0:clamp(1rem,0.96rem + 0.2vw,1.125rem);
  --step-1:clamp(1.333rem,1.25rem + 0.4vw,1.5rem);
  --step-2:clamp(1.777rem,1.6rem + 0.8vw,2rem);
  --step-3:clamp(2.369rem,2rem + 1.6vw,2.75rem);
  --step-4:clamp(3.157rem,2.4rem + 3vw,3.8rem);
  --step-5:clamp(4.209rem,3rem + 5vw,5.2rem);
  --step-6:clamp(6rem,4rem + 9vw,10rem);

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;

  --section-pad:var(--space-9);
  --measure:64ch;
  --shadow-1:0 1px 0 var(--ink);
  --shadow-2:0 2px 0 var(--ink);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:120ms;
  --dur-2:220ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;max-inline-size:100%;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--muted);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.5;
}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.05;color:var(--ink)}
p{margin:0;color:var(--muted)}
a{color:inherit;text-decoration:none}
button{font-family:var(--font-utility);cursor:pointer}

.wrap{max-inline-size:1440px;margin-inline:auto;padding-inline:var(--space-6)}

section{padding-block:var(--section-pad)}

/* ===== HEADER ===== */
.bar{
  position:sticky;
  inset-block-start:0;
  z-index:20;
  background:var(--bg);
  border-block-end:1px solid var(--ink);
  padding-block:var(--space-4);
}
.bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-inline-size:1440px;
  margin-inline:auto;
  padding-inline:var(--space-6);
}
.bar-brand{font-family:var(--font-display);font-size:var(--step-1);color:var(--ink)}
.bar-nav{display:flex;gap:var(--space-6);list-style:none;padding:0;margin:0}
.bar-nav a{font-family:var(--font-utility);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.bar-cta{
  font-family:var(--font-utility);
  background:var(--accent2);
  color:var(--surface);
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  font-size:var(--step--1);
  text-transform:uppercase;
}

/* ===== HERO ===== */
.hero{
  display:grid;
  grid-template-columns:2fr 10fr;
  gap:var(--space-6);
  padding-block-start:var(--space-9);
  padding-block-end:var(--space-9);
  border-block-end:1px solid var(--ink);
  position:relative;
}
.hero-eyebrow{
  writing-mode:vertical-rl;
  transform:rotate(-180deg);
  font-family:var(--font-utility);
  text-transform:uppercase;
  font-size:var(--step--1);
  letter-spacing:.08em;
  align-self:end;
  justify-self:start;
  color:var(--muted);
}
.hero-main{position:relative}
.hero-title{
  font-size:var(--step-6);
  text-align:start;
  max-inline-size:14ch;
  color:var(--ink);
}
.hero-sub{
  margin-block-start:var(--space-6);
  max-inline-size:var(--measure);
  color:var(--muted);
  font-size:var(--step-1);
}
.hero-actions{
  display:flex;
  gap:var(--space-4);
  margin-block-start:var(--space-6);
}
.btn{
  font-family:var(--font-utility);
  padding:var(--space-3) var(--space-5);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  text-transform:uppercase;
  font-size:var(--step--1);
}
.btn-primary{background:var(--accent2);color:var(--surface)}
.btn-secondary{background:transparent;color:var(--ink)}
.hero-image{
  position:absolute;
  inset-inline-end:0;
  inset-block-end:calc(var(--space-9) * -1);
  inline-size:min(40%,420px);
  z-index:2;
}

/* ===== PLACEHOLDER IMAGES ===== */
.ph{
  background:
    repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 14px),
    var(--accent);
  background-blend-mode:multiply;
  border:1px solid var(--ink);
  position:relative;
  overflow:hidden;
}
.ph::after{
  content:attr(data-image-slot);
  position:absolute;
  inset-block-end:var(--space-3);
  inset-inline-start:var(--space-3);
  font-family:var(--font-utility);
  font-size:var(--step--1);
  color:var(--surface);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ===== PORTFOLIO ===== */
.portfolio{border-block-end:1px solid var(--ink)}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-block-end:var(--space-7);
  border-block-end:1px solid var(--ink);
  padding-block-end:var(--space-5);
}
.section-title{font-size:var(--step-3);color:var(--ink)}
.section-sub{color:var(--muted);max-inline-size:40ch}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--ink);
  border:1px solid var(--ink);
}
.project-card{
  background:var(--surface);
  position:relative;
  padding:var(--space-5);
  padding-block-start:var(--space-9);
  transition:none;
  overflow:hidden;
}
.project-card:hover{background:var(--ink);color:var(--surface)}
.project-card:hover .card-title{color:var(--surface)}
.project-card:hover .card-folder{color:transparent;-webkit-text-stroke:2px var(--surface)}
.card-image{aspect-ratio:4/5;margin-block-end:var(--space-4);filter:contrast(1.25) saturate(1.1)}
.card-folder{
  font-family:var(--font-utility);
  font-size:5rem;
  color:transparent;
  -webkit-text-stroke:2px var(--accent);
  position:absolute;
  inset-block-start:-30%;
  inset-inline-start:var(--space-4);
  line-height:1;
  z-index:3;
}
.card-title{font-size:var(--step-1);margin-block-start:var(--space-2);color:var(--ink)}

/* ===== EXPERTISE ===== */
.expertise{
  background:var(--bg);
  color:var(--ink);
  display:grid;
  grid-template-columns:6fr 4fr;
  padding-block:var(--space-9);
}
.expertise-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
}
.expertise-list li{font-size:var(--step-3);font-family:var(--font-display);color:var(--ink)}
.expertise-block{background:var(--surface);border:1px solid var(--ink)}
.expertise-block a{color:var(--accent)}

/* ===== PROCESSUS ===== */
.processus-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-5);
}
.step-item:nth-child(even){margin-block-start:var(--space-7)}
.step-num{
  font-family:var(--font-utility);
  font-size:var(--step-5);
  color:transparent;
  -webkit-text-stroke:1px var(--accent);
  line-height:1;
}
.step-text{margin-block-start:var(--space-3);color:var(--muted)}

/* ===== APROPOS ===== */
.apropos{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:var(--space-7);
  border-block-start:1px solid var(--ink);
}
.apropos-image{aspect-ratio:4/5}
.apropos-text{max-inline-size:var(--measure)}
.apropos-quote{
  display:block;
  font-family:var(--font-display);
  font-size:var(--step-2);
  margin-block:var(--space-6);
  color:var(--ink);
}

/* ===== MARQUES ===== */
.marques{
  border-block:1px solid var(--ink);
  background:var(--surface);
  overflow-x:auto;
}
.marques-list{
  display:flex;
  gap:var(--space-4);
  list-style:none;
  padding:0;
  margin:0;
  font-family:var(--font-utility);
  white-space:nowrap;
  color:var(--ink);
}
.marques-list li::after{content:"/";margin-inline-start:var(--space-4);color:var(--accent)}
.marques-list li:last-child::after{content:""}

/* ===== CONTACT ===== */
.contact{
  background:var(--surface);
  padding-block:var(--space-9);
  position:relative;
  border-block-start:1px solid var(--ink);
}
.contact-grid{
  display:grid;
  grid-template-columns:6fr 6fr;
  gap:var(--space-7);
  align-items:start;
}
.contact-head{color:var(--ink)}
.contact-headline{font-size:var(--step-3);margin-block:var(--space-4);color:var(--ink)}
.lead-form{
  background:var(--bg);
  border:1px solid var(--ink);
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.lead-form input,.lead-form textarea{
  font-family:var(--font-body);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  padding:var(--space-3);
  background:var(--bg);
  font-size:var(--step-0);
  color:var(--ink);
}
.lead-form button{
  background:var(--accent);
  color:var(--ink);
  border:1px solid var(--ink);
  padding:var(--space-3);
  text-transform:uppercase;
  font-size:var(--step--1);
}
.lead-done{font-family:var(--font-utility);color:var(--ink)}
.contact-coords{
  font-family:var(--font-utility);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  color:var(--ink);
}

/* ===== FOOTER ===== */
footer{
  padding-block:var(--space-6);
  border-block-start:1px solid var(--ink);
  display:flex;
  justify-content:space-between;
  font-family:var(--font-utility);
  font-size:var(--step--1);
  color:var(--muted);
}

/* ===== RESPONSIVE ===== */
@media (max-width:1440px){
  .hero{grid-template-columns:1fr 11fr}
}
@media (max-width:768px){
  .hero{grid-template-columns:1fr 11fr;padding-block-start:var(--space-7)}
  .hero-image{position:absolute;inline-size:55%;inset-inline-end:0;inset-block-end:calc(var(--space-7) * -1)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .expertise{grid-template-columns:1fr}
  .expertise-block{min-block-size:200px;margin-block-start:var(--space-6)}
  .processus-grid{grid-template-columns:repeat(2,1fr)}
  .step-item:nth-child(even){margin-block-start:0}
  .apropos{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .marques-list{white-space:normal;flex-wrap:wrap}
}
@media (max-width:390px){
  .portfolio-grid{grid-template-columns:1fr}
  .bar-nav{display:none}
  .card-folder{font-size:3.4rem}
}


@media (prefers-reduced-motion: reduce){[data-motion]{opacity:1;transform:none}}