@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --bg:#0d0d0d;
  --bg-alt:#161513;
  --bg-card:#1a1917;
  --line:#2a2824;
  --gold:#c8a24d;
  --gold-light:#e8cd8a;
  --text:#f2ede4;
  --text-dim:#9a958a;
  --burgundy:#8a3a3a;
  --green:#5f8a5a;
  --radius:2px;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Work Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:0.04em;
  font-weight:400;
  color:var(--text);
}

.mono{
  font-family:'JetBrains Mono', monospace;
}

a{color:var(--gold-light);}

/* -- Motif "fade": bandes dégradées façon dégradé de coupe -- */
.fade-divider{
  height:10px;
  width:100%;
  background:repeating-linear-gradient(
    90deg,
    var(--gold) 0px, var(--gold) 3px,
    #8a6d2e 3px, #8a6d2e 6px,
    #4d3d1c 6px, #4d3d1c 9px,
    transparent 9px, transparent 14px
  );
  opacity:0.85;
}

.fade-bg{
  background:linear-gradient(180deg, #050505 0%, #0d0d0d 40%, #1a1611 100%);
}

header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,13,13,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1100px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Bebas Neue', sans-serif;
  font-size:28px; letter-spacing:0.08em;
  color:var(--gold-light);
}
.logo span{color:var(--text);}
.nav-cta{
  background:var(--gold); color:#0d0d0d; font-weight:700;
  padding:10px 18px; border-radius:var(--radius);
  text-decoration:none; font-size:14px;
}

.hero{
  max-width:1100px; margin:0 auto; padding:70px 20px 40px;
  text-align:center;
}
.hero .eyebrow{
  color:var(--text-dim); text-transform:uppercase; letter-spacing:0.25em; font-size:12px; margin-bottom:18px;
}
.hero h1{
  font-size:clamp(48px, 10vw, 96px);
  line-height:0.95;
}
.hero h1 .accent{color:var(--gold-light);}
.hero p{
  max-width:520px; margin:22px auto 0; color:var(--text-dim); font-size:16px;
}
.hero .cta{
  display:inline-block; margin-top:34px; background:var(--gold); color:#0d0d0d;
  font-weight:700; padding:16px 30px; border-radius:var(--radius); text-decoration:none;
  font-size:15px; letter-spacing:0.02em;
}

section{padding:60px 20px;}
.section-inner{max-width:1100px; margin:0 auto;}
.section-title{font-size:38px; margin-bottom:8px;}
.section-sub{color:var(--text-dim); margin-bottom:32px; font-size:15px;}

/* Cards de service */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));}
.card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; cursor:pointer; transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--gold);}
.card.selected{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset;}
.card h3{font-size:22px; margin-bottom:6px;}
.card .price{color:var(--gold-light); font-family:'JetBrains Mono', monospace; font-size:18px; margin-top:10px;}
.card .duration{color:var(--text-dim); font-size:13px;}

/* Booking flow */
.booking-box{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:28px;
}
.step-label{
  color:var(--gold-light); font-size:12px; text-transform:uppercase; letter-spacing:0.15em; margin-bottom:14px;
}
.employee-list, .slot-list{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
.pill{
  border:1px solid var(--line); background:var(--bg-card); padding:10px 16px; border-radius:var(--radius);
  cursor:pointer; font-size:14px; color:var(--text);
}
.pill:hover{border-color:var(--gold);}
.pill.selected{background:var(--gold); color:#0d0d0d; border-color:var(--gold); font-weight:600;}

input[type="date"], input[type="text"], input[type="tel"], input[type="email"]{
  width:100%; background:var(--bg-card); border:1px solid var(--line); color:var(--text);
  padding:12px 14px; border-radius:var(--radius); font-size:15px; margin-bottom:14px; font-family:inherit;
}
label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px;}

.deposit-note{
  background:#1c1712; border:1px solid #3a2e1a; padding:14px 16px; border-radius:var(--radius);
  font-size:13px; color:var(--gold-light); margin:18px 0;
}

.btn-primary{
  background:var(--gold); color:#0d0d0d; border:none; font-weight:700; padding:15px 22px;
  border-radius:var(--radius); font-size:15px; cursor:pointer; width:100%;
}
.btn-primary:disabled{opacity:0.4; cursor:not-allowed;}
.btn-primary:hover:not(:disabled){background:var(--gold-light);}

.error-msg{color:#e08a8a; font-size:13px; margin-top:10px;}

footer{
  border-top:1px solid var(--line); padding:34px 20px; text-align:center; color:var(--text-dim); font-size:13px;
}
footer .credits{margin-top:12px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
footer .credits a{color:var(--text-dim); text-decoration:none;}
footer .credits a:hover{color:var(--gold-light);}

@media (max-width:600px){
  .hero{padding:50px 16px 30px;}
  section{padding:44px 16px;}
}