/* ==============
   Thème Club 1870
   ============== */
:root{
  --or:#C8A046;
  --or-2:#E0C16B;
  --noir:#0B0B0B;
  --gris:#1C1C1C;
  --gris-2:#2A2A2A;
  --blanc:#F5F3ED;
  --grain: rgba(255,255,255,.03);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height:1.6;
  color:var(--blanc);
  background: var(--noir);
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1120px, 92%); margin-inline:auto}
.section{padding:72px 0}
.section-alt{padding:72px 0; background: linear-gradient(180deg, var(--noir), var(--gris));}
h1,h2,h3{margin:0 0 12px 0; line-height:1.2}
h1{font-size: clamp(2rem, 3.5vw, 3rem); color: var(--or)}
h2{font-size: clamp(1.6rem, 2.6vw, 2.3rem); color: var(--or)}
h3{font-size: 1.25rem; color: var(--or-2)}
p{margin:0 0 12px 0}
a{color:var(--or-2); text-decoration:none}
.muted{opacity:.8}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background: linear-gradient(180deg, rgba(11,11,11,.95), rgba(11,11,11,.6));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(200,160,70,.18);
}
.header-inner{display:flex;align-items:center;gap:16px;padding:10px 0}
.logo{filter: drop-shadow(0 2px 12px rgba(200,160,70,.2));}
.nav{margin-left:auto;display:flex;gap:18px;align-items:center}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(200,160,70,.08)}
.nav-toggle{display:none;margin-left:8px;background:transparent;border:1px solid rgba(200,160,70,.4);color:var(--or);border-radius:10px;padding:6px 10px}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid var(--or);transition:.2s;cursor:pointer}
.btn-primary{background:var(--or); color: #1a1203; border-color: var(--or)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{background:transparent; color: var(--or)}
.btn-outline:hover{background:rgba(200,160,70,.1)}
.btn-ghost{border-color:rgba(200,160,70,.35); color:var(--or-2)}
.btn-ghost:hover{border-color:var(--or-2)}
.block{display:block;text-align:center}

/* Hero */
.hero{
  background: radial-gradient(1200px 800px at 10% -10%, rgba(200,160,70,.25), transparent 60%), var(--noir);
  position:relative; overflow:hidden;
}
.texture{
  position:absolute; inset:0;
  background-image: url('../img/paper-grain.svg');
  opacity:.35; mix-blend:overlay; pointer-events:none;
}
.hero-inner{display:grid;grid-template-columns: 1.1fr 0.9fr; align-items:center; gap:24px; padding:56px 0}
.baseline{font-variant: small-caps; letter-spacing:.06em; color:var(--or-2)}
.lead{font-size:1.1rem;opacity:.95}
.ballon{filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); transform: rotate(-12deg)}

/* Cards */
.card{
  background: linear-gradient(180deg, var(--gris), var(--gris-2));
  border:1px solid rgba(200,160,70,.18);
  border-radius: var(--radius);
  padding:18px 18px 6px 18px;
  box-shadow: var(--shadow);
}
.card-title{margin-bottom:8px}
.grid-2{display:grid;grid-template-columns: 1fr 1fr; gap:24px}

/* Checklist */
.checklist{list-style:none;padding:0;margin:12px 0 0 0;display:grid;gap:8px}
.checklist li{position:relative;padding-left:28px}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--or-2)
}

/* Benefits */
.benefits{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:12px}
.benefit{background:linear-gradient(180deg, var(--gris), var(--gris-2)); border:1px solid rgba(200,160,70,.18); border-radius: var(--radius); padding:18px}
.icon{opacity:.9}

/* Logos row */
.logos{display:flex; gap:28px; align-items:center; justify-content:center; flex-wrap:wrap; padding-top:12px}

/* Pricing */
.pricing{display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:12px}
.price-card{background:linear-gradient(180deg, var(--gris), var(--gris-2)); border:1px solid rgba(200,160,70,.18); border-radius: var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px}
.price{font-size:2rem; color:var(--or); margin:2px 0}
.price span{font-size:.9rem; color:var(--or-2)}
.price-card ul{margin:0; padding-left:18px}
.price-card.highlight{outline:2px solid var(--or)}

/* Form */
.form label{display:grid; gap:6px; margin:8px 0}
input, textarea{
  background: #111; color: var(--blanc);
  border:1px solid rgba(200,160,70,.18); border-radius: 12px; padding:10px
}
input:focus, textarea:focus{outline:2px solid var(--or); border-color: var(--or)}

/* Footer */
.site-footer{border-top:1px solid rgba(200,160,70,.18); background: #0a0a0a; padding:26px 0}
.footer-inner{display:grid; grid-template-columns: 1fr auto auto; gap:16px; align-items:center}
.foot-nav{display:flex; gap:16px}
.legal{opacity:.8}

/* Responsive */
@media (max-width: 940px){
  .grid-2{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .nav{display:none}
  .nav-toggle{display:block}
  .logo{width:140px;height:auto}
}