/* ---------------------------------------------
   Tokens
--------------------------------------------- */
:root{
  --bg: #0c0c0b;
  --bg-panel: #161510;
  --ink: #ece4d0;
  --muted: #a89c82;
  --gold: #c8a24c;
  --line: #3a3527;
  --line-soft: #232016;

  --display: "Fraunces", Georgia, serif;
  --label: "Space Grotesk", "Inter", sans-serif;
  --body: "Inter", "Space Grotesk", sans-serif;

  --max: 1080px;
  --gutter: clamp(20px, 5vw, 64px);
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

a{color:inherit;}
img{max-width:100%; display:block;}
h1,h2,h3{font-family:var(--display); font-weight:500; margin:0 0 .4em;}
p{margin:0 0 1em;}

::selection{background:var(--gold); color:#141208;}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* subtle film grain over the dark ground */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------
   Header / nav
--------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  background:rgba(12,12,11,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft);
}

.logo{
  display:flex; align-items:center; gap:14px;
  text-decoration:none;
}
.logo img{height:88px; width:auto;}
.logo-text{display:flex; flex-direction:column; line-height:1.25;}
.logo-text strong{font-family:var(--display); font-size:1.05rem; letter-spacing:.01em;}
.logo-text em{font-family:var(--label); font-style:normal; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);}

.site-nav{
  display:flex; gap:28px;
  font-family:var(--label);
  font-size:.85rem;
  letter-spacing:.04em;
}
.site-nav a{
  text-decoration:none; color:var(--muted);
  display:flex; align-items:baseline; gap:6px;
  transition:color .2s ease;
}
.site-nav a:hover, .site-nav a:focus-visible{color:var(--ink);}
.site-nav .n{font-size:.7rem; color:var(--gold); font-variant-numeric:tabular-nums;}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line);
  width:42px; height:38px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
}
.nav-toggle span{display:block; width:20px; height:1.5px; background:var(--ink); transition:transform .25s ease, opacity .25s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---------------------------------------------
   Layout helpers
--------------------------------------------- */
main > section, .site-header, .site-footer{
  max-width:var(--max);
  margin-inline:auto;
}
main > section{
  padding:88px var(--gutter);
  border-bottom:1px solid var(--line-soft);
}
.site-header{max-width:none; padding-inline:var(--gutter);}

.eyebrow{
  font-family:var(--label);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .8em;
}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:none;}

.btn{
  display:inline-block;
  font-family:var(--label);
  font-size:.85rem;
  letter-spacing:.03em;
  text-decoration:none;
  padding:13px 26px;
  border:1px solid var(--gold);
  transition:background .2s ease, color .2s ease;
}
.btn-primary{background:var(--gold); color:#161510;}
.btn-primary:hover{background:#dab866;}
.btn-ghost{color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

/* ---------------------------------------------
   Hero
--------------------------------------------- */
.hero{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:56px;
  align-items:center;
  padding-top:64px !important;
}
.hero h1{
  font-size:clamp(2rem, 3.6vw, 3.1rem);
  line-height:1.12;
  font-weight:500;
}
.hero h1 span{color:var(--gold); font-style:italic; font-weight:300;}
.lede{color:var(--muted); font-size:1.05rem; max-width:44ch;}
.hero-actions{display:flex; gap:14px; margin-top:8px; flex-wrap:wrap;}

.hero-plan{border:1px solid var(--line); padding:12px; background:#0a0a09;}
.plan-image{width:100%; height:auto; display:block;}
.plan-caption-real{
  margin:10px 2px 2px; padding-top:10px;
  border-top:1px solid var(--line-soft);
  font-family:var(--label); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}

/* ---------------------------------------------
   Services / legend
--------------------------------------------- */
.legend-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:0;}
.legend-list li{
  display:grid; grid-template-columns:64px 1fr;
  gap:20px; align-items:start;
  padding:22px 0; border-top:1px solid var(--line-soft);
}
.legend-list li:last-child{border-bottom:1px solid var(--line-soft);}
.legend-list .mark{
  font-family:var(--label); color:var(--gold);
  font-size:.85rem; padding-top:.2em;
}
.legend-list h3{font-size:1.15rem; margin-bottom:.25em;}
.legend-list p{color:var(--muted); margin:0; max-width:56ch;}

/* ---------------------------------------------
   Réalisations
--------------------------------------------- */
.section-intro{color:var(--muted); max-width:56ch;}
.plate-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:28px;
}
.plate-tag{
  font-family:var(--label); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); display:block; margin-bottom:10px;
}
.plate-frame{
  aspect-ratio:4/3; border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-family:var(--label); font-size:.8rem;
  background:var(--bg-panel);
}
.plate-frame--photo{
  aspect-ratio:4/3;
  border:1px solid var(--line);
  overflow:hidden;
  background:var(--bg-panel);
}
.plate-frame--photo img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.plate-frame--gallery{position:relative; cursor:pointer;}
.plate-frame--gallery img{
  position:absolute; inset:0;
  opacity:0; transition:opacity .3s ease;
}
.plate-frame--gallery img.is-active{opacity:1; position:relative;}
.photo-badge{
  position:absolute; bottom:10px; right:10px; z-index:2;
  background:rgba(12,12,11,.75); color:var(--gold);
  font-family:var(--label); font-size:.72rem; letter-spacing:.04em;
  padding:4px 9px; border:1px solid var(--line);
  pointer-events:none;
}
.plate-caption{color:var(--muted); font-size:.85rem; margin-top:10px;}
.plate-caption code{font-family:var(--label); color:var(--gold); font-size:.82rem;}

/* ---------------------------------------------
   À propos
--------------------------------------------- */
.apropos-grid p{max-width:68ch; color:var(--muted);}
.apropos-grid p:first-of-type{color:var(--ink);}
.zone-intervention{
  margin-top:1.4em; padding-top:1.2em;
  border-top:1px solid var(--line-soft);
  color:var(--ink); font-size:.95rem;
}
.zone-intervention strong{color:var(--gold); font-weight:500;}

/* ---------------------------------------------
   Contact
--------------------------------------------- */
.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px;
}
.contact-item{
  display:block; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); padding:22px;
  transition:border-color .2s ease;
}
a.contact-item:hover{border-color:var(--gold); color:var(--gold);}
.contact-item .mark{
  display:block; font-family:var(--label); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
a.contact-item:hover .mark{color:inherit;}

/* ---------------------------------------------
   Footer
--------------------------------------------- */
.site-footer{
  padding:32px var(--gutter) 48px;
  color:var(--muted);
  font-family:var(--label);
  font-size:.78rem;
  letter-spacing:.03em;
}

/* ---------------------------------------------
   Responsive
--------------------------------------------- */
@media (max-width: 860px){
  .hero{grid-template-columns:1fr; padding-top:40px !important;}
  .hero-plan{order:-1; max-width:320px;}
  .contact-grid{grid-template-columns:1fr;}
  .plate-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 560px){
  .plate-grid{grid-template-columns:1fr;}
}

@media (max-width: 720px){
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--line-soft);
    flex-direction:column; gap:0;
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .site-nav.is-open{max-height:280px;}
  .site-nav a{padding:16px var(--gutter); border-top:1px solid var(--line-soft);}
  .nav-toggle{display:flex;}
  main > section{padding:64px var(--gutter);}
  .legend-list li{grid-template-columns:40px 1fr;}
  .site-header{padding-top:12px; padding-bottom:12px;}
  .logo img{height:52px;}
  .logo-text strong{font-size:.95rem;}
}