/* ════════════════════════════════════════════════════════════
   Pentest Child — pentest-style.css
   Identité visuelle : dark professionnel, blanc/gris froid,
   typographie éditoriale, accents acier/cyan discret
════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@300;400;600&family=Lato:wght@300;400;700&display=swap');

/* ── Variables globales ── */
:root {
  --pt-bg:        #0c0f12;
  --pt-surface:   #13171c;
  --pt-surface2:  #191e25;
  --pt-border:    #252c35;
  --pt-border2:   #2e3744;
  --pt-text:      #dce4ef;
  --pt-muted:     #6b7a8d;
  --pt-faint:     #3a4455;

  --pt-white:     #f0f4f8;
  --pt-accent:    #a8c8e8;
  --pt-accent2:   #5b8db8;
  --pt-cyan:      #7dd3d8;

  --pt-critical:  #e05252;
  --pt-high:      #d4813a;
  --pt-medium:    #c9a83c;
  --pt-low:       #4caf7d;
  --pt-info:      #5b8db8;

  --pt-mono:      'JetBrains Mono', monospace;
  --pt-display:   'Syne', sans-serif;
  --pt-body:      'Lato', sans-serif;

  --pt-radius:    8px;
  --pt-radius-sm: 4px;
  --pt-shadow:    0 2px 24px rgba(0,0,0,.45);
  --pt-shadow-lg: 0 8px 48px rgba(0,0,0,.6);
}

/* ══════════════════════════════════════════════════
   RESET GLOBAL — forcer le fond sombre sur tout
══════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; }

html,
body,
#page,
#content,
#primary,
#main,
.site,
.site-content,
.content-area,
.hentry,
.entry-content,
.post-content,
.page-content,
.vlog-content,
div[id*="content"],
div[class*="content"],
div[class*="wrapper"],
.site-wrapper,
.page-wrapper,
.main-wrapper,
main,
main.site-main {
  background: var(--pt-bg) !important;
  color: var(--pt-text) !important;
}

body {
  font-family: var(--pt-body) !important;
  background: var(--pt-bg) !important;
  color: var(--pt-text) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════
   HEADER — thème vlog
══════════════════════════════════════════════════ */
header,
.site-header,
header.site-header,
#masthead,
.vlog-header,
.header-wrapper,
[class*="header"] {
  background: var(--pt-surface) !important;
  border-bottom: 1px solid var(--pt-border) !important;
  box-shadow: none !important;
}

/* Logo / titre du site */
.site-title,
.site-title a,
.site-branding a,
.custom-logo-link,
#site-title,
.blog-name,
.blog-name a {
  color: var(--pt-white) !important;
  font-family: var(--pt-display) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Description du site */
.site-description,
.blog-description {
  color: var(--pt-muted) !important;
  font-size: .8rem !important;
}

/* ══════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════ */
nav,
.main-navigation,
.nav-menu,
.primary-menu,
#site-navigation,
[class*="navigation"],
[class*="nav-"] {
  background: transparent !important;
}

nav a,
.main-navigation a,
.nav-menu a,
.primary-menu a,
#site-navigation a,
.menu-item a {
  color: var(--pt-text) !important;
  font-family: var(--pt-mono) !important;
  font-size: .78rem !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  background: transparent !important;
}

nav a:hover,
.main-navigation a:hover,
.menu-item a:hover,
.menu-item.current-menu-item a {
  color: var(--pt-accent) !important;
  background: transparent !important;
}

/* Icônes header (recherche, etc.) */
.header-icons a,
.header-icons svg,
.search-toggle,
.search-icon {
  color: var(--pt-muted) !important;
  fill: var(--pt-muted) !important;
}

/* ══════════════════════════════════════════════════
   ZONE CONTENU — supprimer tous les fonds blancs
══════════════════════════════════════════════════ */

/* Padding/margin du thème parent autour du contenu */
.entry-header,
.entry-content,
.entry-footer,
article,
.post,
.page,
.hentry {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Conteneurs vlog spécifiques */
.vlog-container,
.container,
.vlog-wrap,
.site-wrap,
[class*="container"] {
  background: transparent !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Breadcrumb */
.breadcrumb,
.breadcrumbs,
[class*="breadcrumb"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
footer,
.site-footer,
footer.site-footer,
#colophon,
[class*="footer"] {
  background: var(--pt-surface) !important;
  border-top: 1px solid var(--pt-border) !important;
  color: var(--pt-muted) !important;
  box-shadow: none !important;
}

footer a,
.site-footer a,
#colophon a {
  color: var(--pt-muted) !important;
  text-decoration: none !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--pt-accent) !important;
}

/* ══════════════════════════════════════════════════
   OVERRIDES SPECIFIQUES vlog-main-inline-css
   (ecrasent les regles du thème parent vlog)
══════════════════════════════════════════════════ */
body,
html {
  background: #0c0f12 !important;
  background-color: #0c0f12 !important;
  color: var(--pt-text) !important;
  font-family: var(--pt-body) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Neutraliser les règles vlog sur body */
body,
#cancel-comment-reply-link,
.vlog-wl-action,
.vlog-button,
.vlog-actions-menu,
.vlog-action-login a {
  color: var(--pt-text) !important;
  font-family: var(--pt-body) !important;
  font-weight: 400 !important;
}

/* Conteneur ObsCyber utilisé dans le template */
.oc-container {
  background: transparent !important;
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Dashboard ObsCyber */
.oc-dashboard {
  background: #0c0f12 !important;
  min-height: 100vh !important;
}

/* Fond derrière le layout 2 colonnes */
.pt-layout {
  background: #0c0f12 !important;
}

/* Zone blanche à droite — forcer full width */
#pt-main-content,
.pt-hero,
.oc-dashboard,
#pt-page {
  width: 100% !important;
  max-width: 100% !important;
  background: #0c0f12 !important;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--pt-bg); }
::-webkit-scrollbar-thumb { background: var(--pt-border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pt-muted); }

/* ══════════════════════════════════════════════════
   SCROLLBAR (optionnel — style dark)
══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0c0f12; }
::-webkit-scrollbar-thumb { background: #252c35; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6b7a8d; }