.hero-px {
  font-family: var(--cf-font-family--silkscreen), cursive;
  color: var(--light-bleu);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 0 3rem rgba(62, 207, 255, 0.18);
}

.label-pixel {
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dark-light);
}

.label-live {
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--greener);
  display: flex;
  align-items: center;
  gap: 3px;
}

.mono-text {
  font-family: var(--cf-font-family--jetbrains-mono), monospace;
  font-size: var(--text-s);
  font-weight: 600;
}

.logo-t {
  font-family: var(--cf-font-family--silkscreen);
  font-size: var(--text-s);
  letter-spacing: 0.03em;
}


/* ── TITRES ──────────────────────────────────────────── */

.hero-h1 {
  font-family: var(--cf-font-family--bricolage-grotesque);
  font-size: var(--text-6xl);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.sec-heading {
  font-family: var(--cf-font-family--bricolage-grotesque);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.tech-h2 {
  font-family: var(--cf-font-family--bricolage-grotesque);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.cta-h2 {
  font-family: var(--cf-font-family--bricolage-grotesque);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-xs);
}


/* ── TEXTES ──────────────────────────────────────────── */

.hero-sub {
  font-size: var(--text-l);
  color: var(--dark-white);
  margin-top: var(--space-s);
}
.hero-sub strong {
  color: var(--light);
  font-weight: 650;
}

.sec-p {
  margin-top: var(--space-xs);
  color: var(--dark-white);
  font-size: var(--text-m);
  line-height: 1.7;
}
.sec-p strong {
  color: var(--light);
  font-weight: 650;
}

.cta-p {
  font-size: var(--text-m);
  color: var(--dark-white);
  line-height: 1.7;
  text-align: center;
  max-width: 48rem;
  margin: 0 auto var(--space-m);
}
.cta-p strong {
  color: var(--light);
  font-weight: 650;
}


/* ── BOUTONS ─────────────────────────────────────────── */

.btn-cyan {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--light-bleu);
  color: var(--dark);
  border: 2px solid var(--light-bleu);
  box-shadow: 3px 3px 0 rgba(62, 207, 255, 0.18);
  font-size: var(--text-s);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-global);
}
.btn-cyan:hover {
  background: #5ad8ff;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(62, 207, 255, 0.18);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: transparent;
  color: var(--dark-white);
  border: 2px solid var(--border-primary);
  box-shadow: 3px 3px 0 #252f48;
  font-size: var(--text-s);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-global);
}
.btn-outline:hover {
  border-color: var(--dark-light);
  color: var(--light);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #252f48;
}


/* ── TAGLINE ─────────────────────────────────────────── */

.tagline {
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dark-light);
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--border-secondary);
}


/* ── HERO ────────────────────────────────────────────── */

.hero-btns {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

.hero-grid {
  grid-template-columns: 1fr 1.05fr;
}


/* ── PANEL (terminal de scan) ────────────────────────── */

.panel {
  background: var(--bg-alt);
  border: 2px solid var(--border-primary);
  box-shadow: 6px 6px 0 #252f48;
  overflow: hidden;
}

.panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs);
  background: var(--dark-med);
  border-bottom: 1px solid var(--border-secondary);
}

.panel-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.panel-dots {
  display: flex;
  gap: 4px;
}

.panel-body {
  padding: var(--space-s);
}

.panel-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs);
  border-top: 1px solid var(--border-secondary);
  background: var(--dark-med);
  font-family: var(--cf-font-family--jetbrains-mono), monospace;
  font-size: var(--text-2xs);
  color: var(--dark-light);
}

.panel-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-s);
  border-bottom: 1px solid var(--border-secondary);
}

.tab-item {
  padding: var(--space-xs);
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dark-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition-global);
}
.tab-item.active {
  color: var(--light-bleu);
  border-bottom-color: var(--light-bleu);
}

.panel-site {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-secondary);
}

.panel-info {
  flex: 1;
}

.panel-meta {
  font-size: var(--text-xs);
  color: var(--dark-light);
  margin-top: 1px;
}

.panel-score-wrap {
  text-align: right;
}

.panel-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.site-ico {
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-900);
  border: 1px solid var(--border-primary);
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-2xs);
  color: var(--light-bleu);
}


/* ── SCAN ROWS ───────────────────────────────────────── */

.scan-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--slate-900);
  font-size: var(--text-xs);
  transition: background 0.12s;
}
.scan-row:hover {
  background: var(--slate-800);
}

.check-label {
  font-weight: 650;
  min-width: 11.5rem;
}

.check-value {
  font-size: var(--text-xs);
  color: var(--dark-light);
}


/* ── COULEURS STATUS ─────────────────────────────────── */

.check-ok { color: var(--greener); }
.check-warn { color: var(--warning); }
.check-crit { color: var(--error); }


/* ── SCORES ──────────────────────────────────────────── */

.score-num {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
}

.score-green { color: var(--greener); }
.score-orange { color: var(--warning); }

.score-label {
  display: block;
  margin-top: 1px;
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dark-light);
}

.demo-note {
  font-size: var(--text-xs);
  color: var(--dark-light);
  margin-top: var(--space-xs);
  text-align: center;
  font-style: italic;
}


/* ── DOTS ────────────────────────────────────────────── */

.dot-5 {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
}

.dot-8 {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.dot-bg-green { background: var(--greener); }
.dot-bg-orange { background: var(--warning); }
.dot-bg-red { background: var(--error); }

.dot-live {
  width: 5px;
  height: 5px;
  background: var(--greener);
  box-shadow: 0 0 6px #48d6a0;
  animation: blk 1.2s step-end infinite;
  flex-shrink: 0;
}

@keyframes blk {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


/* ── SECTIONS ────────────────────────────────────────── */

.sec-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--light-bleu);
  margin-bottom: var(--space-xs);
}
.sec-label::before {
  content: '';
  width: 1.4rem;
  height: 2px;
  background: var(--light-bleu);
  opacity: 0.35;
}

.sec-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-s);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--light-bleu);
  text-decoration: none;
  transition: gap 0.15s;
}
.sec-link:hover {
  gap: 1.2rem;
}

.logo-bar-label {
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dark-light);
  text-align: center;
  margin-bottom: var(--space-s);
}


/* ── PILIERS (use cases) ─────────────────────────────── */

.pillars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pillar-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-s);
  align-items: start;
  padding: var(--space-s);
  background: var(--slate-900);
  border: 1px solid var(--border-secondary);
  box-shadow: 3px 3px 0 #252f48;
  transition: var(--transition-global);
}
.pillar-card:hover {
  border-color: var(--border-primary);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #252f48;
}

.pillar-ico {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-l);
  background: var(--dark-med);
  border: 1px solid var(--border-secondary);
}

.pillar-h3 {
  font-size: var(--text-m);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.pillar-p {
  font-size: var(--text-s);
  color: var(--dark-white);
  line-height: 1.55;
}


/* ── PILLS / BADGES ──────────────────────────────────── */

.pill-sec {
  display: inline-block;
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--light-bleu);
  padding: 2px var(--space-xs);
  border: 1px solid var(--light-bleu);
  background: var(--cyan-soft);
  vertical-align: middle;
  margin-left: var(--space-xs);
}

.pill-seo {
  display: inline-block;
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--seo);
  padding: 2px var(--space-xs);
  border: 1px solid var(--seo);
  background: var(--seo-soft);
  vertical-align: middle;
  margin-left: var(--space-xs);
}

.pill-perf {
  display: inline-block;
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warning);
  padding: 2px var(--space-xs);
  border: 1px solid var(--warning);
  background: var(--warning-soft);
  vertical-align: middle;
  margin-left: var(--space-xs);
}

.badge-cf {
  font-family: var(--cf-font-family--silkscreen), cursive;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dark-light);
  padding: 3px var(--space-xs);
  border: 1px solid var(--border-secondary);
  background: var(--slate-900);
}


/* ── CASE STUDY ──────────────────────────────────────── */

.cs-quote {
  margin-top: var(--space-s);
  padding-left: var(--space-s);
  border-left: 3px solid var(--light-bleu);
  font-size: var(--text-m);
  color: var(--dark-white);
  line-height: 1.7;
  font-style: italic;
}
.cs-quote strong {
  color: var(--light);
  font-style: normal;
  font-weight: 650;
}

.cs-strong-cyan {
  color: var(--light-bleu);
}

.cs-author {
  margin-top: var(--space-s);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.cs-name {
  font-weight: 700;
  font-size: var(--text-s);
}

.cs-role {
  font-size: var(--text-xs);
  color: var(--dark-light);
}

.cs-url {
  font-family: var(--cf-font-family--jetbrains-mono), monospace;
  font-size: var(--text-xs);
  color: var(--dark-light);
  font-weight: 400;
}


/* ── STEPS ───────────────────────────────────────────── */

.steps-col {
  display: flex;
  flex-direction: column;
}

.step-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--border-secondary);
  align-items: start;
}
.step-item:last-child {
  border-bottom: none;
}

.step-num {
  font-family: 'silkscreen',cursive;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--light-bleu);
  text-shadow: 0 0 16px rgba(62, 207, 255, 0.18);
  width: 4rem;
  text-align: center;
  padding-top: 2px;
}

.step-h4 {
  font-size: var(--text-m);
  font-weight: 700;
  margin-bottom: 2px;
}

.step-p {
  font-size: var(--text-s);
  color: var(--dark-white);
  line-height: 1.55;
}


/* ── NUMBERS ─────────────────────────────────────────── */

.big-num {
  font-family: var(--cf-font-family--bricolage-grotesque);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--light-bleu);
  letter-spacing: -0.03em;
  line-height: 1;
}

.num-item {
  text-align: center;
}

.num-label {
  font-size: var(--text-s);
  color: var(--dark-white);
  margin-top: var(--space-xs);
  line-height: 1.4;
}


/* ── CTA ─────────────────────────────────────────────── */

.cta-btns {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
}

.badges {
  display: flex;
  gap: var(--space-s);
  justify-content: center;
  margin-top: var(--space-m);
}


/* ── FOOTER ──────────────────────────────────────────── */

.foot-desc {
  font-size: var(--text-xs);
  color: var(--dark-light);
  margin-top: var(--space-xs);
  line-height: 1.5;
  max-width: 22rem;
}

.foot-links {
  display: flex;
  gap: var(--space-s);
}


/* ── TAB CONTENT TOGGLE ──────────────────────────────── */

.ptab-content {
  display: none;
}
.ptab-content.active {
  display: block;
}


/* ── HERO SCANNER ────────────────────────────────────── */

.hero-scanner {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-3xl) 0 var(--space-xl);
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero-scanner::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 120%;
  background: radial-gradient(ellipse at 50% 30%, rgba(62, 207, 255, .06) 0%, transparent 60%);
  pointer-events: none;
}

.hero-inner {
  max-width: 72rem;
  margin: 0 auto;
}


/* ── SCAN INPUT ──────────────────────────────────────── */

.scan-input-wrap {
  margin-top: var(--space-m);
  display: flex;
  gap: var(--space-xs);
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.scan-input {
  flex: 1;
  padding: var(--space-xs) var(--space-s);
  background: var(--slate-900);
  border: 2px solid var(--border-primary);
  color: var(--light);
  font-family: var(--cf-font-family--jetbrains-mono), monospace;
  font-size: var(--text-s);
  outline: none;
  transition: var(--transition-global);
}
.scan-input::placeholder {
  color: var(--dark-light);
}
.scan-input:focus {
  border-color: var(--light-bleu);
  box-shadow: 0 0 0 3px rgba(62, 207, 255, 0.08);
}

.scan-badges {
  display: flex;
  gap: var(--space-s);
  justify-content: center;
  margin-top: var(--space-s);
}


/* ── STATS ────────────────────────────────────────────── */

.stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin-top: var(--space-l);
}

.stat-card {
  background: var(--dark-med);
  border: 1px solid var(--border-secondary);
  box-shadow: 3px 3px 0 #252f48;
  padding: var(--space-m) var(--space-l);
  text-align: center;
  min-width: 16rem;
  transition: var(--transition-global);
}
.stat-card:hover {
  border-color: var(--border-primary);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #252f48;
}


/* ── RAISONS ─────────────────────────────────────────── */

.reason-card {
  background: var(--slate-900);
  border: 1px solid var(--border-secondary);
  box-shadow: 3px 3px 0 #252f48;
  padding: var(--space-m);
  transition: var(--transition-global);
}
.reason-card:hover {
  border-color: var(--border-primary);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #252f48;
}

.reason-h3 {
  font-family: var(--cf-font-family--bricolage-grotesque);
  font-size: var(--text-l);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.reason-p {
  font-size: var(--text-s);
  color: var(--dark-white);
  line-height: 1.6;
}


/* ── FAQ ──────────────────────────────────────────────── */

.faq-item {
  border-bottom: 1px solid var(--border-secondary);
  overflow: hidden;
}
.faq-item:last-child {
  border-bottom: none;
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-s) 0;
  cursor: pointer;
  transition: var(--transition-global);
}
.faq-q:hover {
  color: var(--light-bleu);
}
.faq-q h5 {
  font-size: var(--text-m);
  font-weight: 600;
  flex: 1;
}

}


.faq-item.open .faq-a {
  max-height: 40rem;
  padding-bottom: var(--space-s);
}
.faq-a p {
  font-size: var(--text-s);
  color: var(--dark-white);
  line-height: 1.7;
}
.faq-a code {
  font-family: var(--cf-font-family--jetbrains-mono), monospace;
  font-size: var(--text-xs);
  color: var(--light-bleu);
  background: var(--slate-900);
  padding: 1px var(--space-xs);
  border: 1px solid var(--border-secondary);
}