:root{
  --bg:#000000;
  --text:#ffffff;
  --gold:#d4af37;
  --muted:rgba(255,255,255,0.7);
  --maxw:1100px;
  --radius:8px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{max-width:var(--maxw);margin:0 auto;padding:60px 20px}
.narrow{max-width:720px}

.site-header{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.85));
  backdrop-filter: blur(4px);
  padding:18px 20px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
}

.logo{
  color:var(--gold);
  font-weight:700;
  font-size:20px;
  letter-spacing:0.6px;
}

.nav{margin-top:8px;display:flex;gap:16px}
.nav a{color:var(--muted);text-decoration:none;font-size:14px}
.nav a:hover{color:var(--gold)}

.hero{padding:80px 0 40px;text-align:center}
.hero h1{font-size:28px;margin:0 0 12px;font-weight:600}
.tagline{color:var(--gold);font-weight:600;margin-bottom:12px}
.lead{color:var(--muted);max-width:760px;margin:0 auto 18px}

.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:6px;text-decoration:none;font-weight:600}
.btn-primary{background:var(--gold);color:#000}
.btn-outline{border:1px solid rgba(255,255,255,0.08);color:var(--text);background:transparent}

.section{padding:60px 0}
.services .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:24px}
.card{background:rgba(255,255,255,0.03);padding:20px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.card h3{margin-top:0;color:var(--gold)}
.card p{color:var(--muted);margin-bottom:0}

/* work */
.work .work-cta{margin-top:18px;display:flex;gap:12px;justify-content:center}

/* contact brief */
.contact-brief{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));text-align:center;border-top:1px solid rgba(255,255,255,0.03)}

/* footer */
.site-footer{padding:28px 20px;text-align:center;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted);font-size:13px}

/* contact page */
.contact-page .contact-form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.contact-form input,.contact-form textarea{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:12px;border-radius:6px}
.contact-form label{font-size:13px;color:var(--muted)}
.small{color:var(--muted);font-size:13px;margin-top:12px}

/* reveal animation */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}/* Styles spécifiques pour la page À propos */
.about-section {
  padding: 100px 20px;
  background-color: #000;
  color: #fff;
  text-align: left;
}

.about-section h1 {
  color: #d4af37; /* doré */
  font-size: 2.2rem;
  margin-bottom: 20px;
  text-align: center;
}

.about-section h2 {
  color: #d4af37;
  margin-top: 30px;
  margin-bottom: 10px;
}

.about-section p {
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto 20px auto;
}

.cta-container {
  text-align: center;
  margin-top: 40px;
}

/* responsive */
@media (max-width:720px){
  .container{padding:36px 18px}
  .hero h1{font-size:20px}
  .nav{flex-wrap:wrap;gap:8px}
}
/* PAGE SERVICES */
.services-page {
  background-color: #000;
  color: #fff;
}

.services-section {
  padding: 100px 20px;
  text-align: center;
}

.services-section h1 {
  color: #d4af37;
  margin-bottom: 60px;
}

.service-block {
  max-width: 900px;
  margin: 0 auto 50px auto;
}

.service-block h2 {
  color: #d4af37;
  margin-bottom: 15px;
}

.service-block p {
  color: #ddd;
  line-height: 1.7;
  font-size: 16px;
}