@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper: #ECE9E1;
  --paper-raised: #F4F2EC;
  --ink: #1B2430;
  --ink-soft: #3E4757;
  --navy: #1B2430;
  --navy-line: #3A4556;
  --rust: #9C4A1C;
  --rust-soft: #B8622A;
  --line: #C9C4B6;
  --max: 920px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Spectral', serif;
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
}

h1{font-size:clamp(2.1rem, 4.2vw, 3.1rem); letter-spacing:-0.01em;}
h2{font-size:clamp(1.5rem, 2.6vw, 1.9rem);}

p{margin:0 0 1.1em;}

a{color:inherit;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 1.1em;
  display:block;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* ---- nav ---- */
header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:10;
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.brand-mark{
  width:9px; height:9px;
  background:var(--rust);
  display:inline-block;
  transform:rotate(45deg);
  flex:none;
}
nav.links{display:flex; gap:28px;}
nav.links a{
  font-family:'IBM Plex Mono', monospace;
  font-size:.82rem;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--ink-soft);
  padding:4px 0;
  border-bottom:1px solid transparent;
}
nav.links a:hover, nav.links a.active{
  color:var(--ink);
  border-bottom-color:var(--rust);
}

/* ---- horizon divider (signature element) ---- */
.horizon{
  max-width:var(--max); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:14px;
  color:var(--line);
}
.horizon .rule{flex:1; height:1px; background:var(--line);}
.horizon svg{flex:none; opacity:.9;}

/* ---- sections ---- */
section{padding:76px 0;}
section.tight{padding:52px 0;}

.hero{padding:96px 0 80px;}
.hero .lede{
  font-size:1.15rem;
  color:var(--ink-soft);
  max-width:640px;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.88rem;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--paper);
  background:var(--ink);
  padding:14px 22px;
  margin-top:8px;
}
.cta:hover{background:var(--rust);}
.cta .arrow{transition:transform .15s ease;}
.cta:hover .arrow{transform:translateX(3px);}

/* ---- steps ---- */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:36px;
  margin-top:8px;
}
.step{border-top:1px solid var(--line); padding-top:18px;}
.step .tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:.76rem;
  color:var(--rust);
  letter-spacing:.08em;
  text-transform:uppercase;
  display:block;
  margin-bottom:10px;
}
.step h3{
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:1.05rem;
  margin:0 0 .5em;
}
.step p{color:var(--ink-soft); font-size:.97rem; margin:0;}

/* ---- dark band ---- */
.band{
  background:var(--navy);
  color:var(--paper-raised);
}
.band .eyebrow{color:var(--rust-soft);}
.band h2, .band h1{color:var(--paper-raised);}
.band p{color:#B9C0CC;}
.band .line-under{border-color:var(--navy-line);}

/* ---- data grid (marché page) ---- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--navy-line);
  margin:36px 0;
  border:1px solid var(--navy-line);
}
.stat{
  background:var(--navy);
  padding:26px 24px;
}
.stat .num{
  font-family:'IBM Plex Mono', monospace;
  font-size:2.1rem;
  color:var(--paper-raised);
  display:block;
  margin-bottom:6px;
}
.stat .label{
  font-size:.92rem;
  color:#9FA8B6;
  line-height:1.4;
}

.source-note{
  font-family:'IBM Plex Mono', monospace;
  font-size:.76rem;
  color:#7D8595;
  letter-spacing:.02em;
  margin-top:10px;
}

/* ---- contact ---- */
.contact-block{
  border:1px solid var(--line);
  padding:40px 36px;
  margin-top:28px;
  background:var(--paper-raised);
}
.contact-email{
  font-family:'IBM Plex Mono', monospace;
  font-size:1.3rem;
  text-decoration:none;
  color:var(--ink);
  display:inline-block;
  border-bottom:1px solid var(--rust);
  padding-bottom:2px;
}
.contact-email:hover{color:var(--rust);}
.contact-meta{
  font-size:.9rem;
  color:var(--ink-soft);
  margin-top:18px;
}

/* ---- footer ---- */
footer.site{
  border-top:1px solid var(--line);
  padding:36px 0 48px;
  margin-top:20px;
}
footer.site .wrap{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:10px;
}
footer.site .fbrand{
  font-family:'IBM Plex Mono', monospace;
  font-size:.8rem;
  color:var(--ink-soft);
  letter-spacing:.03em;
}
footer.site .fmeta{
  font-family:'IBM Plex Mono', monospace;
  font-size:.76rem;
  color:#948F80;
}

/* ---- reveal ---- */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---- responsive ---- */
@media (max-width: 720px){
  .steps{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  nav.links{gap:16px;}
  .nav-inner{flex-wrap:wrap; gap:12px;}
  section{padding:56px 0;}
  .hero{padding:64px 0 52px;}
}

/* focus visibility */
a:focus-visible, .cta:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:3px;
}