/* ═══════════════════════════════════════════════════════════════════════════
   HARMONIZE.CSS — pazent.fr
   Override spécifique pour toutes les sous-pages
   Assure la cohérence de la DA sur tout le site
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Variables globales cohérentes ─── */
:root {
  --purple: var(--accent, #10b981) !important;
  --purple-light: var(--accent, #10b981) !important;
  --gradient-purple: linear-gradient(135deg, var(--accent, #10b981), var(--blue, #3b82f6)) !important;
  --bg-primary: var(--bg, #0a0a0b) !important;
  --bg-secondary: var(--bg-1, #111113) !important;
  --bg-card: rgba(17,17,19,0.8) !important;
  --glass-bg: rgba(255,255,255,0.03) !important;
  --glass-border: var(--border, rgba(255,255,255,0.07)) !important;
}

/* ─── Page-level backgrounds ─── */
.page-hero,
.hero-section,
[class*="hero"] { background: var(--bg) !important; }

/* ─── Toutes les cards sur les sous-pages ─── */
.card, .content-card, .project-detail__card,
.resume__section, .stats__card,
.uses__item, .now__section,
.veille__card, .ctf__card,
.engineering__card, .infrastructure__card,
.blog__card, .publication__card,
.security__card, .lab__card {
  background: var(--bg-1, #111113) !important;
  border: 1px solid var(--border, rgba(255,255,255,0.07)) !important;
  border-radius: 10px !important;
}

/* ─── Headings sur sous-pages ─── */
h1, h2, h3, h4 {
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
  color: #fafafa !important;
}
h1 { font-size: clamp(1.8rem, 4vw, 3rem) !important; line-height: 1.1 !important; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem) !important; }
h3 { font-size: 1.1rem !important; }

/* ─── Body text ─── */
p, li, td, th {
  color: rgba(250,250,250,0.52) !important;
  line-height: 1.72 !important;
  font-size: 0.93rem !important;
}
strong, b { color: rgba(250,250,250,0.82) !important; font-weight: 600 !important; }

/* ─── Links ─── */
a:not(.btn):not(.navbar__link):not(.navbar__logo):not(.back-btn) {
  color: rgba(250,250,250,0.55) !important;
  transition: color 0.15s !important;
}
a:not(.btn):not(.navbar__link):not(.navbar__logo):hover {
  color: #fafafa !important;
}

/* ─── Tags & Badges ─── */
.tag, .badge, .chip, .label,
[class*="tag"], [class*="badge"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(250,250,250,0.45) !important;
  border-radius: 100px !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  padding: 2px 9px !important;
}

/* ─── Accent color overrides pour tous les éléments colorés ─── */
.text-purple, .text-accent,
[class*="purple"], [class*="accent"] {
  color: #10b981 !important;
}

/* ─── Code blocks ─── */
code, pre, .code-block, [class*="code"] {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.85em !important;
  color: rgba(250,250,250,0.72) !important;
}

/* ─── Dividers ─── */
hr, .divider, [class*="divider"] {
  border-color: rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* ─── Tables ─── */
table { border-collapse: collapse !important; width: 100% !important; }
thead { background: rgba(255,255,255,0.03) !important; }
th, td { 
  border: 1px solid rgba(255,255,255,0.07) !important;
  padding: 10px 14px !important;
  font-size: 0.87rem !important;
}
th { color: rgba(250,250,250,0.6) !important; font-weight: 600 !important; }
tr:hover { background: rgba(255,255,255,0.02) !important; }

/* ─── Back button / navigation ─── */
.back-btn, .back-link, [class*="back"] {
  color: rgba(250,250,250,0.45) !important;
  font-size: 0.82rem !important;
  transition: color 0.15s !important;
}
.back-btn:hover, .back-link:hover { color: #fafafa !important; }

/* ─── Page header ─── */
.page-header, .page-hero, [class*="page-header"] {
  background: var(--bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding-top: 100px !important;
}

/* ─── Section titles sur sous-pages ─── */
.section-title, .page-title, [class*="section-title"] {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: #fafafa !important;
}

/* ─── Breadcrumbs ─── */
.breadcrumb, [class*="breadcrumb"] {
  font-size: 0.75rem !important;
  color: rgba(250,250,250,0.3) !important;
}
.breadcrumb a { color: rgba(250,250,250,0.3) !important; }
.breadcrumb span { color: rgba(250,250,250,0.55) !important; }

/* ─── Project detail pages ─── */
.project-detail__title,
.project-detail__name { font-size: clamp(2rem, 5vw, 3.5rem) !important; letter-spacing: -0.04em !important; }
.project-detail__desc { color: rgba(250,250,250,0.5) !important; font-size: 1rem !important; line-height: 1.72 !important; }
.project-detail__tech span {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(250,250,250,0.5) !important;
  border-radius: 100px !important;
  font-size: 0.72rem !important;
  padding: 2px 10px !important;
}

/* ─── Blog ─── */
.blog-post__title { font-size: clamp(1.5rem, 4vw, 2.8rem) !important; letter-spacing: -0.04em !important; }
.blog-post__content p { color: rgba(250,250,250,0.55) !important; }
.blog-post__date { font-size: 0.75rem !important; color: rgba(250,250,250,0.3) !important; font-family: 'JetBrains Mono', monospace !important; }

/* ─── Stats page ─── */
.stat-card, .stats__item {
  background: var(--bg-1, #111113) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
}
.stat-number, .stats__value {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
  color: #fafafa !important;
}

/* ─── Now page ─── */
.now__title { color: rgba(250,250,250,0.3) !important; font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; }

/* ─── Uses page ─── */
.uses__category { color: rgba(250,250,250,0.3) !important; font-size: 0.68rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 600 !important; }
.uses__item-name { color: rgba(250,250,250,0.85) !important; font-weight: 600 !important; font-size: 0.9rem !important; }
.uses__item-desc { color: rgba(250,250,250,0.42) !important; font-size: 0.83rem !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT PAGES — Fix spacings & titles
   ═══════════════════════════════════════════════════════════════════════════ */

.project-hero {
  background: var(--bg, #0a0a0b) !important;
  padding: 100px 0 60px !important;
  min-height: auto !important;
}
.project-hero__back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.82rem !important;
  color: rgba(250,250,250,0.35) !important;
  text-decoration: none !important;
  margin-bottom: 28px !important;
  transition: color 0.2s !important;
}
.project-hero__back:hover { color: rgba(250,250,250,0.75) !important; }

.project-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  border: 1px solid !important;
}
.project-hero__badge--done {
  background: rgba(16,185,129,0.07) !important;
  border-color: rgba(16,185,129,0.18) !important;
  color: #34d399 !important;
}
.project-hero__badge--progress {
  background: rgba(59,130,246,0.07) !important;
  border-color: rgba(59,130,246,0.18) !important;
  color: #93c5fd !important;
}
.project-hero__badge-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important; background: currentColor !important;
}

.project-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.95 !important;
  color: #fafafa !important;
  margin-bottom: 20px !important;
  display: block !important;
}
.project-hero__description {
  font-size: 1rem !important;
  color: rgba(250,250,250,0.48) !important;
  line-height: 1.72 !important;
  max-width: 600px !important;
  margin-bottom: 28px !important;
}
.project-hero__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  margin-bottom: 28px !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.project-hero__meta-label {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(250,250,250,0.28) !important;
  display: block !important;
  margin-bottom: 3px !important;
}
.project-hero__meta-value {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: rgba(250,250,250,0.75) !important;
}

/* Project sections */
.project-section {
  padding: 60px 0 !important;
  background: var(--bg, #0a0a0b) !important;
}
.project-section:nth-child(even) {
  background: var(--bg-1, #111113) !important;
}
.project-section__tag {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #10b981 !important;
  display: block !important;
  margin-bottom: 6px !important;
}
.project-section__title {
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: #fafafa !important;
  margin-bottom: 24px !important;
}

/* Stack cards */
.stack-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 12px !important;
}
.stack-card {
  background: var(--bg-1, #111113) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  transition: border-color 0.2s !important;
}
.stack-card:hover { border-color: rgba(255,255,255,0.12) !important; }
.stack-card__name {
  font-size: 0.87rem !important;
  font-weight: 600 !important;
  color: rgba(250,250,250,0.85) !important;
  margin-top: 8px !important;
}
.stack-card__desc {
  font-size: 0.75rem !important;
  color: rgba(250,250,250,0.35) !important;
  margin-top: 3px !important;
}

/* Breadcrumb */
.breadcrumb {
  padding: 80px 0 0 !important;
  margin-bottom: 0 !important;
}
.breadcrumb__list {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 16px 24px !important;
}
.breadcrumb__item a,
.breadcrumb__separator {
  font-size: 0.75rem !important;
  color: rgba(250,250,250,0.28) !important;
  text-decoration: none !important;
}
.breadcrumb__item--current {
  font-size: 0.75rem !important;
  color: rgba(250,250,250,0.55) !important;
}
.breadcrumb__item a:hover { color: rgba(250,250,250,0.6) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESUME PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.resume__header { padding: 100px 0 40px !important; background: var(--bg) !important; }
.resume__title {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: #fafafa !important;
}
.resume__section-title,
.resume__block-title {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #10b981 !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.resume__item-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: rgba(250,250,250,0.88) !important;
  letter-spacing: -0.02em !important;
}
.resume__item-company {
  font-size: 0.8rem !important;
  color: #10b981 !important;
  font-weight: 500 !important;
}
.resume__item-date {
  font-size: 0.72rem !important;
  color: rgba(250,250,250,0.28) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG PAGES
   ═══════════════════════════════════════════════════════════════════════════ */
.blog__header { padding: 100px 0 40px !important; }
.blog__title {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: #fafafa !important;
}
.blog-card {
  background: var(--bg-1, #111113) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  transition: border-color 0.2s, transform 0.2s !important;
}
.blog-card:hover {
  border-color: rgba(255,255,255,0.12) !important;
  transform: translateY(-2px) !important;
}
.blog-card__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: rgba(250,250,250,0.88) !important;
}
.blog-card__excerpt {
  font-size: 0.87rem !important;
  color: rgba(250,250,250,0.42) !important;
  line-height: 1.65 !important;
}
.blog-card__date {
  font-size: 0.72rem !important;
  color: rgba(250,250,250,0.28) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECURITY LAB / CTF / ENGINEERING
   ═══════════════════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--bg) !important;
  padding: 100px 0 60px !important;
}
.page-hero__title,
.lab__title,
.ctf__title,
.engineering__title {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: #fafafa !important;
}
.page-hero__desc,
.lab__desc,
.ctf__desc {
  font-size: 1rem !important;
  color: rgba(250,250,250,0.45) !important;
  line-height: 1.72 !important;
  max-width: 560px !important;
}

/* Fixes généraux sur tous les h1 des sous-pages */
main > section:first-of-type h1,
.container > h1,
.page-header h1 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: #fafafa !important;
  line-height: 1.05 !important;
}