/* ===== Sous-pages portfolio V3 — esthétique pellicule ===== */
:root{
  --bg:#0d0a08; --bg2:#100f0d; --ink:#f0ead8; --ink-soft:rgba(240,234,216,.7);
  --ink-faint:rgba(240,234,216,.45); --accent:#de693e; --line:rgba(240,234,216,.13);
  --clair:#f0ead8; --fonce:#0d0a08; --font-display:'Newsreader',serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Space Mono',monospace; overflow-x:hidden; line-height:1.6;
}
::selection{ background:var(--accent); color:#0d0a08; }
a{ color:inherit; }

/* film grain overlay */
body::after{
  content:""; position:fixed; inset:0; z-index:300; pointer-events:none;
  opacity:.4; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.08) .5px, transparent .6px),
                   radial-gradient(rgba(0,0,0,.07) .5px, transparent .6px);
  background-size:3px 3px, 4px 4px; background-position:0 0, 1px 2px;
  animation:ap_grain 1.1s steps(3) infinite;
}
@keyframes ap_grain{ 0%{transform:translate(0,0)} 100%{transform:translate(-6%,5%)} }

/* header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 30px; mix-blend-mode:difference;
}
.logo{ font-family:'Anton',sans-serif; font-size:16px; letter-spacing:.06em; color:#fff; text-decoration:none; }
.nav-links{
  list-style:none; display:flex; gap:22px; margin:0; padding:0;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff; align-items:center;
}
.nav-links a{ color:inherit; text-decoration:none; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }
.lang-switch a{ opacity:.55; text-decoration:none; }
.lang-switch a.active{ opacity:1; color:var(--accent); }

/* main */
main{ max-width:760px; margin:0 auto; padding:140px 30px 40px; }
.back-link{ display:inline-block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); text-decoration:none; margin-bottom:28px; }
.back-link:hover{ color:var(--accent); }
.kicker{ font-size:12px; letter-spacing:.22em; color:var(--accent); margin-bottom:18px; text-transform:uppercase; }
h1{ font-family:'Anton',sans-serif; font-size:clamp(34px,6vw,68px); line-height:.94; letter-spacing:.01em; margin:0 0 18px; text-shadow:0 0 40px rgba(222,105,62,.3); }
.lead{ font-family:'Newsreader',serif; font-style:italic; font-size:clamp(17px,2.4vw,23px); color:var(--accent); margin:0 0 40px; }
.section{ margin:0 0 34px; }
h2{ font-family:'Anton',sans-serif; font-size:clamp(20px,3vw,28px); letter-spacing:.02em; margin:0 0 12px; color:var(--ink); }
.section p{ font-family:'Newsreader',serif; font-size:clamp(16px,2vw,18px); color:var(--ink-soft); margin:0 0 14px; }
.section p strong{ color:var(--ink); font-weight:600; }

/* FAQ */
.faq{ border-top:1px solid var(--line); margin-top:46px; padding-top:30px; }
.faq h2{ margin-bottom:20px; }
.faq-item{ border-bottom:1px solid var(--line); padding:16px 0; }
.faq-item h3{ font-family:'DM Mono',monospace; font-size:14px; letter-spacing:.02em; color:var(--accent); margin:0 0 8px; }
.faq-item p{ font-family:'Newsreader',serif; font-size:16px; color:var(--ink-soft); margin:0; }

/* CTA */
.cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  border:1px solid var(--accent); color:var(--accent); padding:13px 28px;
  border-radius:999px; font-size:13px; letter-spacing:.1em; text-decoration:none;
  transition:background .3s ease, color .3s ease;
}
.cta:hover{ background:var(--accent); color:#0d0a08; }

.contact-lines{ font-family:'DM Mono',monospace; font-size:15px; line-height:2.1; margin-top:8px; }
.contact-lines a{ color:var(--accent); text-decoration:none; }

/* blog */
.post-list{ list-style:none; padding:0; margin:0; }
.post-list li{ border-bottom:1px solid var(--line); padding:22px 0; }
.post-meta{ font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.post-list li a{ font-family:'Anton',sans-serif; font-size:clamp(20px,3vw,26px); color:var(--ink); text-decoration:none; line-height:1.05; display:block; margin-bottom:8px; }
.post-list li a:hover{ color:var(--accent); }
.excerpt{ font-family:'Newsreader',serif; font-size:16px; color:var(--ink-soft); margin:0; }
main > p{ font-family:'Newsreader',serif; font-size:clamp(16px,2vw,18px); color:var(--ink-soft); margin:0 0 18px; }
main > p a, .section p a{ color:var(--accent); }
.post-image{ margin:26px 0; }
.post-image img{ width:100%; height:auto; display:block; filter:grayscale(20%) contrast(1.04); border:1px solid var(--line); }
.post-image figcaption{ font-family:'DM Mono',monospace; font-size:11px; color:var(--ink-faint); margin-top:8px; }

/* footer */
.site-footer{
  background:var(--bg); border-top:1px solid rgba(240,234,216,.1);
  text-align:center; padding:34px 20px; font-size:11px; letter-spacing:.06em; color:var(--ink-faint);
}
.site-footer p{ margin:0 0 10px; }
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer a:hover{ color:var(--accent); }
.site-footer .links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

@media (max-width:640px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:58px; right:20px; flex-direction:column; gap:16px;
    background:#100f0d; padding:20px 24px; border:1px solid var(--line);
    mix-blend-mode:normal; display:none;
  }
  .nav-links.open{ display:flex; }
}