/* AdoptIA · Design system commun aux démos
 * Préfix .demo-* pour éviter tout conflit avec le CSS principal de l'audit.
 * Palette identique à l'audit (--signal vert, dark mode). */

.demo-shell{
  background:var(--surface, #0E131C);
  color:var(--photon, #E8EEF5);
  border:1px solid var(--graphite, #1C2330);
  border-radius:8px;
  padding:32px;
  font-family:'Manrope', sans-serif;
  font-size:15px;
  line-height:1.55;
}
.demo-shell *{box-sizing:border-box}

.demo-eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--signal, #00D68A);
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid var(--graphite, #1C2330);
  display:inline-block;
}

.demo-title{
  font-family:'Manrope', sans-serif;
  font-size:22px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin:14px 0 18px;
  color:var(--photon, #E8EEF5);
}

.demo-body{
  font-size:15px;
  line-height:1.65;
  color:var(--photon, #E8EEF5);
}

.demo-body p{margin-bottom:14px}
.demo-body p:last-child{margin-bottom:0}

.demo-meta{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--graphite, #1C2330);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--mute, #7A8699);
  letter-spacing:0.05em;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

.demo-kicker{
  color:var(--signal, #00D68A);
  font-weight:600;
}

.demo-divider{
  height:1px;
  background:var(--graphite, #1C2330);
  margin:20px 0;
  border:none;
}

.demo-tag{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--mute, #7A8699);
  padding:4px 10px;
  border:1px solid var(--graphite, #1C2330);
  border-radius:3px;
  margin-right:6px;
}

/* Variantes spécifiques par type de démo */

.demo-linkedin{
  background:var(--bg, #0A0E14);
  border-color:var(--graphite-2, #2A3242);
}
.demo-linkedin .demo-body{font-size:16px}

.demo-landing{
  text-align:left;
}
.demo-landing h2{
  font-size:28px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.025em;
  margin-bottom:14px;
}
.demo-landing h2 .accent{color:var(--signal, #00D68A)}

.demo-landing-cta{
  display:inline-block;
  background:var(--signal, #00D68A);
  color:#0A0E14;
  padding:14px 24px;
  font-family:'Manrope', sans-serif;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border-radius:4px;
  margin-top:16px;
}

.demo-sav-block{
  background:var(--bg, #0A0E14);
  border:1px solid var(--graphite, #1C2330);
  border-radius:4px;
  padding:18px;
  margin-bottom:14px;
}
.demo-sav-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  color:var(--signal, #00D68A);
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:10px;
  display:block;
}
.demo-sav-text{
  font-size:14px;
  line-height:1.6;
  color:var(--photon, #E8EEF5);
}

.demo-calc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0;
}
.demo-calc-input label{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  color:var(--mute, #7A8699);
  letter-spacing:0.15em;
  text-transform:uppercase;
  display:block;
  margin-bottom:6px;
}
.demo-calc-input input{
  width:100%;
  background:var(--bg, #0A0E14);
  border:1px solid var(--graphite, #1C2330);
  color:var(--photon, #E8EEF5);
  padding:10px 12px;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  border-radius:4px;
}
.demo-calc-result{
  background:var(--bg, #0A0E14);
  border:1px solid var(--signal, #00D68A);
  border-radius:4px;
  padding:18px;
  margin-top:18px;
  text-align:center;
}
.demo-calc-result-label{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--mute, #7A8699);
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.demo-calc-result-value{
  font-family:'JetBrains Mono', monospace;
  font-size:36px;
  font-weight:500;
  color:var(--signal, #00D68A);
  letter-spacing:-0.02em;
}

/* Responsive */
@media (max-width: 680px){
  .demo-shell{padding:20px}
  .demo-title{font-size:18px}
  .demo-calc-grid{grid-template-columns:1fr}
}