/* purpose1.css — Calculatiks Purpose widget · v1.3
   Surcharge spécifique Purpose. Chargé APRÈS chatbot.css.
   Réutilise : --gold, --blue-deep, --surface, --border, --text-* */

/* ═══ HERO override (éviter double margin-top avec chatbot.css) ═══ */
.page-purpose .hero{
  min-height: auto;
  margin-top: 0;
  margin-bottom: 0;
  padding: 60px 0 40px;
}
.page-purpose .hero-description strong{
  color: var(--gold);
}

/* ═══ CYBER-BAR — sticky sous le header fixed ═══ */
.cyber-bar{
  position: sticky;
  top: 80px;
  z-index: 49;
  margin-bottom: -80px; /* clears footer */
  background: rgba(10, 25, 41, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 2px solid rgba(0, 229, 255, 0.25);
  border-top: 1px solid rgba(0, 229, 255, 0.15);
  padding: .85rem 1.5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: #e0f7fa;
}
.cyber-bar-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.cyber-item{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cyber-led{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cyber-led-green{
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  animation: cyber-pulse 2s ease-in-out infinite;
}
.cyber-led-orange{
  background: #ffb300;
  box-shadow: 0 0 8px #ffb300;
}
.cyber-led-red{
  background: #ff3b30;
  box-shadow: 0 0 8px #ff3b30;
}
.cyber-led-grey{
  background: #6b6f7c;
  box-shadow: 0 0 8px #6b6f7c;
}
@keyframes cyber-pulse{
  0%, 100%{ opacity: 1; }
  50%    { opacity: .4; }
}
.cyber-label{
  color: #00e5ff;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .65rem;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.35);
}
.cyber-value{
  color: #fff;
  font-weight: 700;
}
.cyber-bar-mini{
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-left: .3rem;
}
.cyber-bar-mini span{
  display: block;
  height: 100%;
  background: #00e5ff;
  border-radius: 2px;
  transition: width .3s;
}

/* ═══ SECTIONS PURPOSE ═══ */
.section-purpose,
.section-construct{
  padding: 3rem 0;
  position: relative;
  z-index: 10;
}

/* ═══ FORM ═══ */
.purpose-form{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  align-items: end;
  background: rgba(15, 15, 19, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.ctrl-group{
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.ctrl-group label{
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  font-family: var(--font-mono);
}
.ctrl-group select,
.ctrl-group input{
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ctrl-group select:hover,
.ctrl-group input:hover{
  border-color: var(--gold);
}
.ctrl-group select:focus,
.ctrl-group input:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15);
}
.ctrl-group select:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.ctrl-group .hint{
  font-size: .72rem;
  color: var(--text-tertiary);
  font-style: italic;
}

.purpose-actions{
  grid-column: 1/-1;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.purpose-actions .btn{
  cursor: pointer;
  font-family: var(--font-sans);
}

/* ═══ MATCH RESULT ═══ */
.match-result{
  margin-top: 2rem;
}
.match-summary{
  margin-bottom: 1.5rem;
}
.match-summary h2{
  font-size: 1.4rem;
  color: var(--text-primary);
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
  font-weight: 700;
}
.match-formula-note{
  font-size: .8rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  background: rgba(15, 15, 19, 0.7);
  padding: .7rem 1rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  margin: 0;
  line-height: 1.6;
}
.match-formula-note code{
  color: var(--gold);
  font-weight: 700;
}
.match-empty{
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(15, 15, 19, 0.7);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--border);
}
.match-empty h3{
  color: var(--gold);
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
}
.match-empty p{
  color: var(--text-secondary);
  margin: 0;
}

/* ═══ PROPOSAL STAGE — header + timer + progress ═══ */
.proposal-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: linear-gradient(135deg, rgba(0, 82, 255, 0.15), rgba(255, 215, 0, 0.08));
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  font-family: var(--font-mono);
  color: var(--text-primary);
  flex-wrap: wrap;
}
.proposal-counter{
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-weight: 700;
}
.proposal-counter .pc-num{
  font-size: 1.8rem;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}
.proposal-counter .pc-sep{
  font-size: 1rem;
  color: var(--text-tertiary);
}
.proposal-counter .pc-total{
  font-size: 1rem;
  color: var(--text-secondary);
}
.proposal-timer{
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.proposal-timer .pt-label{
  color: var(--text-tertiary);
}
.proposal-timer .pt-value{
  color: #00e5ff;
  font-weight: 700;
  font-size: 1rem;
  min-width: 2.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.proposal-progress{
  height: 4px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border-left: 1px solid rgba(255, 215, 0, 0.25);
  border-right: 1px solid rgba(255, 215, 0, 0.25);
}
.proposal-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #00e5ff, #ffd700);
  width: 0%;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}
@keyframes proposalProgress{
  0%   { width: 0%; }
  100% { width: 100%; }
}

.proposal-stage{
  margin-top: 0;
  position: relative;
}

/* ═══ SLIDE ═══ */
@keyframes proposalFadeIn{
  from{ opacity: 0; transform: translateY(12px) scale(0.98); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}
.purpose-slide{
  display: block;
  background: var(--surface);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: 2rem;
  transition: all .2s;
  animation: proposalFadeIn .5s ease;
  position: relative;
}
.purpose-slide.is-exact{
  border-left: 4px solid var(--gold);
}
.purpose-slide.is-alternative{
  border-left: 4px solid var(--text-tertiary);
}

.ps-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.ps-rank{
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  padding: .35rem .8rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.purpose-slide.is-exact .ps-rank{
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #000;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}
.purpose-slide.is-alternative .ps-rank{
  background: rgba(107, 111, 124, 0.3);
  color: var(--text-secondary);
  border: 1px solid var(--text-tertiary);
}

.ch-badge{
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  letter-spacing: .02em;
  white-space: nowrap;
}

.price-tier{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 6px;
  letter-spacing: .04em;
}
.price-tier.price-green{
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid #10b981;
}
.price-tier.price-orange{
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid #f59e0b;
}
.price-tier.price-red{
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid #ef4444;
}

.ps-title{
  font-size: 1.35rem;
  color: var(--gold);
  margin: 0 0 1rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: -.01em;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}

.ps-why{
  background: rgba(16, 185, 129, 0.08);
  border-left: 3px solid #10b981;
  padding: .7rem 1rem;
  border-radius: 0 6px 6px 0;
  font-size: .85rem;
  color: #10b981;
  margin-bottom: 1rem;
}
.purpose-slide.is-alternative .ps-why{
  background: rgba(107, 111, 124, 0.08);
  border-left-color: var(--text-tertiary);
  color: var(--text-secondary);
}
.ps-why strong{
  color: inherit;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: .4rem;
}

.ps-produces,
.ps-anchor,
.ps-check{
  font-size: .85rem;
  color: var(--text-secondary);
  margin-bottom: .7rem;
  line-height: 1.55;
}
.ps-produces strong,
.ps-anchor strong,
.ps-check strong{
  color: var(--gold);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  display: block;
  margin-bottom: .25rem;
  font-family: var(--font-mono);
}
.ps-anchor a{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  text-decoration: none;
}
.ps-anchor code{
  font-family: var(--font-mono);
  font-size: .78rem;
  background: rgba(0, 0, 0, 0.4);
  padding: .2rem .55rem;
  border-radius: 4px;
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.3);
  transition: all .2s;
}
.ps-anchor a:hover code{
  background: #00e5ff;
  color: #000;
  border-color: #00e5ff;
}

/* ═══ CYBERNETIC TELEMETRY ═══ */
.ps-cyber{
  background: linear-gradient(135deg, rgba(10, 25, 41, 0.95), rgba(15, 15, 19, 0.95));
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  color: #e0f7fa;
  font-family: var(--font-mono);
  font-size: .72rem;
  box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.05);
}
.ps-cyber-title{
  color: #00e5ff;
  font-weight: 700;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: .7rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}
.ps-cyber-title::before{
  content: '◉';
  color: #00e5ff;
  animation: cyber-pulse 2s ease-in-out infinite;
}
.ps-cyber-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .8rem;
}
.ps-cyber-item{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.ck{
  color: #00e5ff;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .8;
}
.cv{
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
}
.cv-ok{ color: #00ff88; }
.cv-warn{ color: #ffb300; }
.cv-bad{ color: #ff3b30; }
.ps-cyber-bar{
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: .3rem;
}
.ps-cyber-bar span{
  display: block;
  height: 100%;
  background: #00e5ff;
  border-radius: 2px;
  transition: width .3s;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

/* ═══ VARIANTS ═══ */
.ps-variants{
  background: rgba(30, 58, 95, 0.25);
  border: 1px solid rgba(93, 169, 221, 0.25);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
}
.ps-variants-title{
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #5da9dd;
  font-weight: 700;
  margin-bottom: .7rem;
}
.ps-variant-row{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .6rem;
}
.ps-variant-row:last-child{ margin-bottom: 0; }
.ps-variant-label{
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  font-weight: 700;
}
.ps-variant-pills{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.ps-pill{
  font-family: var(--font-mono);
  font-size: .68rem;
  padding: .25rem .6rem;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(93, 169, 221, 0.3);
  color: #5da9dd;
  font-weight: 600;
}

.ps-divider{
  border-top: 1px dashed var(--border);
  margin: 1.2rem 0;
}
.ps-actions{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* ═══ PAYLOAD ═══ */
.ps-result{
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--border);
}
.ps-result[hidden]{ display: none; }
.banner-success{
  background: rgba(16, 185, 129, 0.1);
  border-left: 3px solid #10b981;
  padding: .85rem 1rem;
  border-radius: 0 6px 6px 0;
  font-size: .85rem;
  color: #10b981;
  margin-bottom: 1rem;
}
.payload-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1rem;
}
.payload-jobid,
.payload-live-hash,
.payload-stability{
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .65rem 1rem;
}
.payload-live-hash[hidden]{ display: none; }
.pm-label{
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-tertiary);
  font-weight: 700;
}
.payload-jobid code{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--gold);
  font-weight: 700;
}
.payload-live-hash code.ps-live-hash{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: #00e5ff;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.5);
  padding: .15rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.3);
}
.btn-mini{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: .3rem .65rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.btn-mini:hover{
  border-color: var(--gold);
  color: var(--gold);
}
.stability-result{
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
}
.stability-result.is-stable{ color: #10b981; }
.stability-result.is-unstable{ color: #ef4444; }

.payload-preview{
  background: #0d1117;
  color: #e6edf3;
  padding: 1.2rem;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.55;
  overflow-x: auto;
  max-height: 500px;
  margin: 0 0 1rem;
  border: 1px solid var(--border);
}
.payload-actions{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ═══ FEEDBACK ═══ */
.ps-feedback{
  background: linear-gradient(135deg, rgba(10, 25, 41, 0.95), rgba(15, 15, 19, 0.95));
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: #e0f7fa;
}
.ps-feedback-label{
  color: #00e5ff;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .65rem;
}
.ps-feedback-buttons{ display: flex; gap: .4rem; }
.ps-fb{
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.25);
  color: #e0f7fa;
  padding: .4rem .8rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.ps-fb:hover,
.ps-fb.is-selected{
  background: #00e5ff;
  color: #0a1929;
  border-color: #00e5ff;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}
.ps-feedback-result{ color: #10b981; font-size: .72rem; }

/* ═══ CONSTRUCT PANEL ═══ */
.construct-panel{
  background: rgba(15, 15, 19, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.construct-status{
  background: rgba(0, 0, 0, 0.35);
  padding: 1.2rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--gold);
  margin-bottom: 1.5rem;
}
.construct-status p{
  margin: .4rem 0;
  font-size: .85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.construct-status strong{ color: var(--text-primary); }
.construct-status code{
  font-family: var(--font-mono);
  font-size: .78rem;
  background: rgba(0, 0, 0, 0.5);
  padding: .2rem .5rem;
  border-radius: 4px;
  color: var(--gold);
}
.construct-handoff{ margin-bottom: 1.5rem; }
.construct-handoff h3{
  font-size: 1rem;
  color: var(--gold);
  margin: 0 0 1rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.handoff-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem;
}
.handoff-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
}
.handoff-card h4{
  margin: 0 0 .4rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.handoff-feats{
  font-size: .75rem;
  color: var(--text-tertiary);
  margin: 0 0 .4rem;
  font-style: italic;
}
.handoff-format{
  font-size: .75rem;
  color: var(--text-secondary);
  margin: 0 0 .5rem;
}
.handoff-format code{
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.4);
  padding: .15rem .4rem;
  border-radius: 3px;
  color: #00e5ff;
  font-size: .7rem;
}
.handoff-note{
  font-size: .78rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.construct-lifecycle{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  margin-top: 1.5rem;
}
.construct-lifecycle h3{
  font-size: 1rem;
  color: var(--gold);
  margin: 0 0 1rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.construct-lifecycle ol{
  padding-left: 1.5rem;
  margin: 0 0 1rem;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.9;
}
.construct-lifecycle strong{
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.construct-lifecycle code{
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.4);
  padding: .15rem .4rem;
  border-radius: 3px;
  color: #00e5ff;
  font-size: .78rem;
}

.disclaimer{
  font-size: .78rem;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: .7rem 1rem;
  border-radius: 0 6px 6px 0;
  border-left: 3px solid #f59e0b;
  margin: 0;
  font-style: italic;
  line-height: 1.55;
}
.construct-actions{
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* ═══ ACP CLIENT ═══ */
#construct-actions-area{ margin-top: 1.5rem; }

.job-create-panel{
  background: var(--surface);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.job-create-panel h3{
  color: var(--gold);
  font-size: 1.1rem;
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
}
.job-create-hint{
  font-size: .82rem;
  color: var(--text-tertiary);
  margin: 0 0 1rem;
  font-style: italic;
}
.job-create-controls{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.job-create-actions{
  display: flex;
  justify-content: flex-end;
  gap: .8rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

.job-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.job-card-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.job-id-badge{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.4);
  padding: .25rem .55rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.status-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  padding: .4rem .9rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.status-badge.pending,
.status-badge.created{
  background: rgba(93, 169, 221, 0.15);
  color: #5da9dd;
  border: 1px solid #5da9dd;
}
.status-badge.simulated{
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid #f59e0b;
}
.status-badge.funded{
  background: rgba(255, 215, 0, 0.15);
  color: var(--gold);
  border: 1px solid var(--gold);
}
.status-badge.completed{
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid #10b981;
}
.status-badge.rejected{
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid #ef4444;
}

.job-meta{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}
.job-meta > div{
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.job-meta .k{
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  font-weight: 700;
}
.job-meta .v{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text-primary);
  font-weight: 600;
  word-break: break-all;
}
.job-meta .v.mono{
  color: #00e5ff;
  background: rgba(0, 0, 0, 0.4);
  padding: .2rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.25);
}

.job-requirements,
.job-calldata{ margin-bottom: 1rem; }
.job-requirements .k,
.job-calldata .k{
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  font-weight: 700;
  margin-bottom: .4rem;
}
.job-requirements pre,
.job-calldata pre{
  background: #0d1117;
  color: #e6edf3;
  padding: 1rem;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.55;
  overflow-x: auto;
  max-height: 300px;
  margin: 0 0 .5rem;
  border: 1px solid var(--border);
}
.job-calldata{
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
}

.job-actions{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.job-completed-note{
  color: #10b981;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
}
.job-rejected-note{
  color: #ef4444;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px){
  .cyber-bar{
    top: 68px;
    margin-top: 68px;
    padding: .7rem 1rem;
  }
  .cyber-bar-inner{
    gap: 1rem;
    font-size: .65rem;
  }
}

@media (max-width: 700px){
  .page-purpose .hero{
    padding: 40px 0 20px;
  }
  .purpose-form{
    padding: 1.4rem;
    grid-template-columns: 1fr;
  }
  .proposal-header{
    padding: .8rem 1rem;
  }
  .proposal-counter .pc-num{
    font-size: 1.4rem;
  }
  .proposal-counter .pc-total{
    font-size: .85rem;
  }
  .proposal-timer .pt-value{
    font-size: .85rem;
  }
  .purpose-slide{
    padding: 1.3rem;
  }
  .ps-title{
    font-size: 1.1rem;
  }
  .construct-panel{
    padding: 1.3rem;
  }
  .payload-preview{
    font-size: .65rem;
    padding: .9rem;
  }
  .construct-lifecycle ol{
    padding-left: 1.2rem;
    font-size: .82rem;
  }
  .job-create-controls{
    grid-template-columns: 1fr;
  }
  .job-meta{
    grid-template-columns: 1fr 1fr;
  }
  .job-card{
    padding: 1rem;
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce){
  .cyber-led-green,
  .ps-cyber-title::before{
    animation: none !important;
  }
  .proposal-progress-fill{
    animation: none !important;
    width: 100%;
    opacity: .35;
  }
  .purpose-slide{
    animation: none !important;
  }
  .btn-primary:hover:not(:disabled),
  .btn-gold:hover:not(:disabled),
  .btn-outline:hover:not(:disabled){
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Boutons internes aux cards
   purpose-app2.js .btn-primary / .btn-secondary
   chatbot (gold + outline)
═══════════════════════════════════════════════════════════ */

.btn-primary{
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #000;
  border: none;
  padding: .8rem 1.8rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}
.btn-primary:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
}
.btn-primary:disabled{
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-secondary{
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: .8rem 1.5rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
}
.btn-secondary:hover{
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 2px 10px 3px rgba(255, 215, 0, 0.2);
}
#cctiks-widget-root, #cp {
  display:none !important;
}
.hero-stat-value {
  text-align: center;
}

.purpose-footer {
  text-align: center; padding: 0 0 1rem 0rem;
}
.purpose-badge {
  display: inline-block; padding: 4px 12px; background: rgba(0,240,255,0.1); border: 1px solid #00f0ff; color: #00f0ff; border-radius: 4px; font-family: monospace; font-size: 0.8rem;
}