/* Toutes les polices utilisées ici sont des polices système gratuites.
   Aucun fichier de police externe ni licence commerciale n'est requis. */

:root{
  --paper:#f4f2ec;
  --ink:#16181c;
  --muted:#666b73;
  --line:rgba(22,24,28,.16);
  --blue:#86a6dc;
  --violet:#a78bd8;
  --dark:#0e131a;
  --pad:clamp(22px,5.8vw,88px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}
.header{
  position:fixed;z-index:20;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.header.scrolled{
  background:rgba(244,242,236,.78);
  border-color:var(--line);
  backdrop-filter:blur(16px);
}
.logo{font-weight:700;letter-spacing:-.04em;font-size:1.03rem}
.logo span{color:#6e8fc9}
nav{display:flex;gap:clamp(22px,3vw,44px);font-size:.88rem}
nav a{position:relative;color:#373b42}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .25s}
nav a:hover::after{right:0}
.menu-button{display:none;border:0;background:none;padding:0;color:var(--ink)}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:130px var(--pad) 90px;
  overflow:hidden;
}
.mountains{position:absolute;inset:0;z-index:-1}
.mountains svg{width:100%;height:100%;display:block;transform:scale(1.035);transition:transform .1s linear}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(244,242,236,.98) 0%,rgba(244,242,236,.86) 38%,rgba(244,242,236,.18) 75%,rgba(244,242,236,.06) 100%);
}
.hero-content{width:min(760px,70vw)}
.kicker{margin:0 0 28px;font-size:.73rem;font-weight:700;letter-spacing:.2em;color:#5273ad}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
h1{
  margin-bottom:30px;
  font-size:clamp(5rem,10.6vw,10rem);
  line-height:.84;
  letter-spacing:-.068em;
}
h1 em,.work h2 em{
  font-weight:400;
  color:transparent;
  background:linear-gradient(100deg,#4f6d9f 0%,#91a8d7 44%,#ad89d5 100%);
  -webkit-background-clip:text;background-clip:text;
}
.lead{
  max-width:610px;
  margin-bottom:36px;
  color:#565c64;
  font-size:clamp(1.05rem,1.6vw,1.28rem);
  line-height:1.72;
}
.text-link{
  display:inline-flex;gap:40px;align-items:center;
  padding:0 0 9px;border-bottom:1px solid currentColor;
  font-size:.96rem;
}
.text-link span{transition:transform .25s}
.text-link:hover span{transform:translate(6px,6px)}
.hero-note{
  position:absolute;right:var(--pad);bottom:76px;
  display:flex;gap:26px;align-items:flex-start;
  color:#444a52;font-size:.78rem;letter-spacing:.05em;
}
.hero-note p{margin:0;line-height:1.7}
.scroll{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  width:42px;height:42px;border:1px solid rgba(22,24,28,.38);border-radius:50%;
  display:grid;place-items:center;
}
.scroll span{width:8px;height:8px;border-right:1px solid;border-bottom:1px solid;transform:rotate(45deg) translate(-2px,-2px)}

.lab{padding:120px var(--pad) 130px;background:#faf9f5}
.section-title{
  display:grid;grid-template-columns:.32fr 1fr;align-items:end;
  padding-bottom:65px;border-bottom:1px solid var(--line);
}
.section-title p{margin:0;color:var(--muted);font-size:.75rem;letter-spacing:.16em}
.section-title h2,.work h2{
  margin:0;font-size:clamp(3.7rem,7vw,7rem);line-height:.92;letter-spacing:-.055em;
}
.cards{display:grid;grid-template-columns:repeat(3,1fr)}
.cards article{
  min-height:360px;padding:34px 34px 32px 0;margin-right:34px;
  border-bottom:1px solid var(--line);
}
.cards article+article{padding-left:34px;border-left:1px solid var(--line)}
.cards span{display:block;margin-bottom:100px;color:#747981;font-size:.76rem}
.cards h3{font-size:2.2rem;letter-spacing:-.035em}
.cards p{max-width:290px;color:var(--muted);line-height:1.7}
.cards a{display:inline-flex;gap:12px;margin-top:28px;font-size:.88rem}
.cards b{font-weight:400;transition:transform .25s}
.cards article:hover b{transform:translateX(7px)}

.work{
  padding:130px var(--pad);
  display:grid;grid-template-columns:1.15fr .85fr;gap:9vw;align-items:end;
  background:var(--dark);color:#f4f1e9;
}
.kicker.dark{color:#9eb6e2}
.work-text{margin:0;color:#a8adb5;line-height:1.8;font-size:1.08rem;max-width:500px}
.contact{
  padding:72px var(--pad);
  display:flex;justify-content:space-between;gap:30px;
  background:var(--dark);color:#a8adb5;border-top:1px solid rgba(255,255,255,.13)
}
.contact a{color:#fff}
footer{
  display:flex;justify-content:space-between;gap:30px;
  padding:26px var(--pad);
  background:var(--dark);color:#6f7680;border-top:1px solid rgba(255,255,255,.13);
  font-size:.78rem;
}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:820px){
  .header{padding-top:max(20px,env(safe-area-inset-top))}
  nav{
    position:absolute;top:72px;left:18px;right:18px;
    padding:22px;border:1px solid var(--line);border-radius:16px;
    background:rgba(244,242,236,.96);backdrop-filter:blur(18px);
    display:none;flex-direction:column;gap:20px;
  }
  nav.open{display:flex}
  .menu-button{display:block}
  .hero{align-items:flex-start;padding-top:150px;padding-bottom:120px}
  .hero-content{width:100%}
  .hero::after{background:linear-gradient(180deg,rgba(244,242,236,.97) 0%,rgba(244,242,236,.86) 48%,rgba(244,242,236,.18) 100%)}
  .mountains svg{transform:scale(1.12) translateY(7%)}
  h1{font-size:clamp(4.6rem,19vw,7rem)}
  .lead{max-width:92%;font-size:1.06rem}
  .hero-note{display:none}
  .section-title,.work{grid-template-columns:1fr;gap:28px}
  .cards{grid-template-columns:1fr}
  .cards article,.cards article+article{
    min-height:auto;margin:0;padding:34px 0 40px;border-left:0;border-bottom:1px solid var(--line)
  }
  .cards span{margin-bottom:55px}
  .work{padding-top:100px;padding-bottom:100px}
  .contact,footer{flex-direction:column}
}

@media(max-width:480px){
  :root{--pad:22px}
  .hero{min-height:100svh;padding-top:132px}
  h1{font-size:clamp(4.2rem,18.8vw,5.5rem);line-height:.88}
  .kicker{font-size:.67rem;letter-spacing:.17em}
  .lead{line-height:1.65}
  .scroll{bottom:22px}
  .lab{padding-top:92px;padding-bottom:95px}
  .section-title{padding-bottom:48px}
  .section-title h2,.work h2{font-size:clamp(3.4rem,15vw,5rem)}
}