:root {
  --night: #071522;
  --night-soft: #0d2233;
  --ivory: #f1e6c9;
  --paper: #d9c291;
  --gold: #caa45d;
  --ink: #201a12;
  --white: #fffaf0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font-family: Georgia, "Times New Roman", serif;
}

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 70px;
  align-items: center;
  gap: 2rem;
  padding: 0 4vw;
  background: linear-gradient(to bottom, rgba(2,10,17,.92), rgba(2,10,17,.62), transparent);
}

.brand {
  color: var(--gold);
  text-decoration: none;
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  letter-spacing: .04em;
}

nav { display: flex; gap: 1.8rem; }
nav a, .lang {
  color: var(--ivory);
  background: transparent;
  border: 0;
  text-decoration: none;
  font: inherit;
  font-size: .98rem;
}
nav a:hover { color: var(--gold); }

.lang {
  border: 1px solid rgba(202,164,93,.5);
  border-radius: 6px;
  padding: .55rem .75rem;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 120px 1.2rem 3rem;
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(3,10,16,.18), rgba(3,10,16,.22) 65%, rgba(3,10,16,.72)),
    radial-gradient(circle at center, transparent 20%, rgba(1,7,11,.3) 100%);
}

.parchment {
  position: relative;
  z-index: 2;
  width: min(760px, 92vw);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  color: var(--ink);
  background:
    linear-gradient(rgba(234,215,169,.94), rgba(217,194,145,.96)),
    repeating-linear-gradient(0deg, rgba(88,58,20,.03) 0 1px, transparent 1px 4px);
  border: 1px solid rgba(73,43,14,.5);
  box-shadow: 0 25px 65px rgba(0,0,0,.5);
  clip-path: polygon(2% 3%, 97% 1%, 100% 7%, 98% 93%, 94% 99%, 5% 97%, 0 91%, 1% 8%);
}

.eyebrow {
  margin: 0 0 .5rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
}
h1 {
  margin: 0 0 1.3rem;
  color: #172334;
  font-size: clamp(2.5rem, 7vw, 5.4rem);
  font-weight: 500;
}
.parchment p {
  max-width: 580px;
  margin: .8rem auto;
  line-height: 1.65;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
}
.invitation {
  font-style: italic;
  font-size: 1.25rem !important;
}
.enter {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: var(--night);
  color: var(--ivory);
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.enter:hover { background: var(--night-soft); }

.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(202,164,93,.22);
  border-top: 1px solid rgba(202,164,93,.35);
  border-bottom: 1px solid rgba(202,164,93,.35);
}
.principles article {
  min-height: 230px;
  padding: 2.3rem;
  background: var(--night);
}
.principles span { color: var(--gold); font-size: .8rem; }
.principles h2 {
  margin: .7rem 0;
  color: var(--ivory);
  font-weight: 500;
}
.principles p { color: #cbbf9f; line-height: 1.65; }

.first-stone {
  padding: 6rem 1rem;
  text-align: center;
  background: #efe5ce;
  color: var(--ink);
}
.first-stone > p {
  color: #77603b;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
}
blockquote {
  max-width: 900px;
  margin: 1.5rem auto 0;
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  line-height: 1.35;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 4vw;
  color: #bcae8b;
  font-size: .9rem;
}

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  nav { display: none; }
  .principles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .principles { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}


/* Construction 002 : porte vers tous les écrits existants */
.works-gateway{max-width:920px;margin:0 auto 4rem;padding:3rem 2rem;text-align:center;background:rgba(244,234,210,.92);border:1px solid rgba(112,83,40,.25);box-shadow:0 18px 55px rgba(9,20,33,.16)}
.works-gateway h2{margin:.35rem 0 1rem;font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,3rem);color:#14253a}
.works-gateway p{max-width:720px;margin:0 auto 1.7rem;line-height:1.75;color:#3a342d}
.works-gateway .enter{display:inline-block}