/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #1e1e28;
  color: #c8cdd8;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1e1e28; }
::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }

/* ── Links ── */
a { color: #9CCE76; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navigation fixe ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(19,20,31,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-nav__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-nav__logo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: #9CCE76;
  letter-spacing: .04em;
  white-space: nowrap;
}
.site-nav__links {
  display: flex;
  gap: 20px;
  list-style: none;
  flex-wrap: nowrap;
}
.site-nav__links a {
  font-size: 12px;
  color: #5a6070;
  text-decoration: none;
  letter-spacing: .01em;
  transition: color .15s;
  white-space: nowrap;
}
.site-nav__links a:hover { color: #c8cdd8; }

/* ── Page wrapper ── */
.page-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.projet-wrapper {
  max-width: 920px;
  margin: 0 auto;
  padding: 44px 24px 88px;
}

/* ── Retour lien ── */
.retour {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #5a6070;
  text-decoration: none;
  margin-bottom: 36px;
  transition: color .15s;
  letter-spacing: .01em;
}
.retour:hover { color: #c8cdd8; text-decoration: none; }
.retour::before { content: '←'; font-size: 14px; }

/* ── Titres ── */
h1 {
  font-size: 28px;
  font-weight: 700;
  color: #f0f2f8;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
h1 sup { font-size: 16px; }

.meta {
  font-size: 12px;
  color: #5a6070;
  margin-bottom: 22px;
  line-height: 1.6;
}

/* ── Badges blocs ── */
.badges-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #c8cdd8;
  letter-spacing: .02em;
}
.badge-b1 { border-color: rgba(156,206,118,.35); color: #9CCE76; background: rgba(156,206,118,.08); }
.badge-b2 { border-color: rgba(255,124,74,.35); color: #ff7c4a; background: rgba(255,124,74,.08); }
.badge-b3 { border-color: rgba(74,255,149,.35); color: #4aff95; background: rgba(74,255,149,.08); }
.badge-b4 { border-color: rgba(255,208,74,.35); color: #ffd04a; background: rgba(255,208,74,.08); }
.badge-b5 { border-color: rgba(196,74,255,.35); color: #c44aff; background: rgba(196,74,255,.08); }
.badge-b6 { border-color: rgba(255,74,138,.35); color: #ff4a8a; background: rgba(255,74,138,.08); }

/* ── Sections ── */
.section { margin-bottom: 40px; }
.section h2 {
  font-size: 15px;
  font-weight: 600;
  color: #f0f2f8;
  border-left: 3px solid #9CCE76;
  padding-left: 13px;
  margin-bottom: 16px;
  letter-spacing: -.01em;
}
.section p { font-size: 14px; line-height: 1.8; color: #a8b0c0; margin-bottom: 10px; }
.section ul { padding-left: 20px; }
.section li { font-size: 14px; line-height: 1.8; color: #a8b0c0; margin-bottom: 4px; }
.section strong { color: #d8dde8; font-weight: 600; }
.section code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: rgba(255,255,255,0.07);
  padding: 1px 6px;
  border-radius: 3px;
  color: #4aff95;
}

/* ── Tech tags ── */
.tech-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(156,206,118,.07);
  border: 1px solid rgba(156,206,118,.2);
  border-radius: 4px;
  color: #9CCE76;
  margin: 3px 3px 3px 0;
  letter-spacing: .01em;
}

/* ── Tables ── */
table.bilan { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
table.bilan th {
  text-align: left;
  padding: 9px 13px;
  background: rgba(255,255,255,0.05);
  color: #f0f2f8;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .03em;
}
table.bilan td {
  padding: 9px 13px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #a8b0c0;
  vertical-align: top;
  line-height: 1.6;
}
table.bilan tr:last-child td { border-bottom: none; }
table.bilan tr:hover td { background: rgba(255,255,255,0.02); }
.check { color: #4aff95; font-weight: 700; }

table.vlan { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0 16px; }
table.vlan th {
  text-align: left; padding: 9px 13px;
  background: rgba(255,255,255,.05); color: #f0f2f8; font-weight: 600; font-size: 12px;
}
table.vlan td {
  padding: 9px 13px; border-bottom: 1px solid rgba(255,255,255,.05); color: #a8b0c0;
}
table.vlan tr:last-child td { border-bottom: none; }

table.adressage { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
table.adressage th {
  text-align: left; padding: 8px 11px;
  background: rgba(255,255,255,.05); color: #f0f2f8; font-weight: 600;
}
table.adressage td {
  padding: 8px 11px; border-bottom: 1px solid rgba(255,255,255,.04);
  color: #a0a8b8; font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
}
table.adressage td:first-child { font-family: 'Inter', sans-serif; color: #c8cdd8; font-size: 12px; }
table.adressage tr:last-child td { border-bottom: none; }
table.adressage tr:hover td { background: rgba(255,255,255,.02); }

/* ── Info box ── */
.info-box {
  background: rgba(156,206,118,.06);
  border: 1px solid rgba(156,206,118,.18);
  border-left: 3px solid #9CCE76;
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 13px;
  color: #a8c4e8;
  line-height: 1.8;
}
.info-box strong { color: #c8ddf8; }

/* ── Image placeholder ── */
.img-placeholder {
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 36px;
  text-align: center;
  color: #5a6060;
  font-size: 13px;
  margin: 18px 0;
}

/* ── Doc link ── */
.doc-link { color: #9CCE76; text-decoration: none; }
.doc-link:hover { text-decoration: underline; }

/* ── Veille specific ── */
.intro {
  font-size: 14px;
  line-height: 1.9;
  color: #a8b0c0;
  margin-bottom: 34px;
  padding: 18px 20px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  border-left: 3px solid #9CCE76;
}
.key-point {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 12px 0;
}
.key-point strong {
  color: #f0f2f8;
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
}
.key-point p { margin: 0; font-size: 13px; color: #8a9098; }
.source {
  font-size: 12px;
  color: #5a6060;
  margin-top: 28px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 18px;
  line-height: 1.7;
}
.source a { color: #9CCE76; }

/* ── Séparateur ── */
hr.sep {
  border: none;
  border-top: 1px solid rgba(255,255,255,.06);
  margin: 44px 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  h1 { font-size: 22px; }
  .page-wrap, .projet-wrapper { padding: 28px 16px 64px; }
  .site-nav__links { display: none; }
}