/*
Theme Name: RetroHier
Author: SEOO 500 France
Description: Theme WordPress 
Version: 1.0
*/
:root {
  --bg: #0b0e1e;
  --card: #0f131a;
  --text: #e0e0e0;
  --muted: #aeb6c0;
  --accent-neon: #ff3b3b;
  --accent-cyan: #66f0f0;
}

/* Base */
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* Container parent used to align navbar + hero */
.page-container {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* NAVBAR */
.navbar {
  background: transparent;
  padding-top: .6rem;
  padding-bottom: .6rem;
  transition: background .3s ease, box-shadow .3s ease;
  z-index: 999;
}

/* Navbar sticky + background néon au scroll */
.navbar.scrolled {
  background: rgba(11,14,30,0.95);
  box-shadow: 0 0 12px rgba(102,240,240,0.15);
  backdrop-filter: blur(4px);
}

/* Retro menu typography */
.navbar .navbar-nav,
.navbar .nav-link,
.navbar .navbar-brand {
  font-family: 'VT323', monospace;
  letter-spacing: 1.4px;
}

/* Taille du texte du menu */
.navbar .nav-link {
  font-size: 1.35rem;
  color: var(--text) !important;
  padding: .45rem .8rem;
  transition: color .18s ease, text-shadow .18s ease;
}

/* Desktop : encore un peu plus gros */
@media (min-width: 992px) {
  .navbar .nav-link {
    font-size: 1.45rem;
  }
}

/* Dropdown items */
.dropdown-item {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  color: var(--text);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--accent-cyan) !important;
  text-shadow: 0 0 8px rgba(102,240,240,0.18);
}

.navbar .navbar-brand img {
  height: 42px;
  display: inline-block;
  vertical-align: middle;
}
.navbar .navbar-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text) !important;
  margin-right: .75rem;
}

/* Dropdown menu */
.dropdown-menu {
  background: linear-gradient(180deg, rgba(11,14,30,0.95), rgba(6,8,15,0.95));
  border: 1px solid rgba(102,240,240,0.12);
  padding:.35rem 0;
  min-width: 10rem;
}
.dropdown-item:hover {
  background: var(--accent-cyan);
  color: #071018 !important;
}

/* Navbar Toggler Néon Rouge */
.navbar-toggler {
  border: 2px solid var(--accent-neon) !important;
  box-shadow: 0 0 10px var(--accent-neon), 0 0 20px rgba(255, 59, 59, 0.6);
}

/* Icône du toggler */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,59,59)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px var(--accent-neon));
}

/* HERO */
.hero {
  background-image: url('images/bg.png'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 3.25rem 2rem;
  border-radius: 14px;
  margin: 0;
  width: 100%;
  position: relative;
  overflow: visible;
  z-index: 0;
}

/* Neon rounded border + animated glow */
.hero::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255,59,59,0.12), rgba(102,240,240,0.06));
  z-index: -2;
  filter: blur(12px);
  opacity: 0.9;
  animation: neonPulse 3s ease-in-out infinite;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(90deg, rgba(255,59,59,0.22), rgba(255,59,59,0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

@keyframes neonPulse {
  0% { transform: scale(1); opacity: .85; filter: blur(8px); }
  50% { transform: scale(1.02); opacity: 1; filter: blur(14px); }
  100% { transform: scale(1); opacity: .85; filter: blur(8px); }
}

.hero h1 {
  color: var(--accent-cyan);
  font-weight:700;
  font-size:2.6rem;
  margin:0 0 .5rem 0;
}
.hero p {
  color: var(--muted);
  font-size:1.05rem;
  max-width:56ch;
  margin:0;
}

/* Buttons */
.btn-custom {
  background: linear-gradient(90deg, var(--accent-cyan), #a5fbff);
  color: #071018;
  font-weight:700;
  border-radius: 8px;
  padding:.55rem 1.05rem;
  border: none;
  box-shadow: 0 6px 18px rgba(102,240,240,0.06);
}
.btn-custom-outline {
  background: transparent;
  color: var(--accent-cyan);
  border: 1px solid rgba(102,240,240,0.35);
  border-radius: 8px;
  padding:.45rem .9rem;
  font-weight:700;
}

/* Blog & cards */
.blog-section { padding: 3rem 1rem; }
.blog-card img { border-radius:.8rem; transition: transform .28s ease; }
.blog-card img:hover { transform: scale(1.05); }
.blog-card h5 { margin-top:.6rem; color:#fff; font-weight:700; }
.blog-card p { color:var(--muted); font-size:.95rem; }

/* Footer */
footer { background:transparent; color:var(--muted); padding:2.25rem 1rem; text-align:center; margin-top:2.5rem; }

/* Responsive tweaks */
@media (min-width: 992px) {
  .hero { padding:4rem 2.25rem; border-radius:18px; }
  .hero h1 { font-size:3.2rem; }
}

/* Blog title */
h2.retro-title {
  color: var(--accent-cyan);
  font-family: 'VT323', monospace;
  font-size: 2rem;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(102, 240, 240, 0.4);
  margin-bottom: 1.5rem;
}

h1.retro-title {
  color: var(--accent-cyan);
  font-family: 'VT323', monospace;
  font-size: 2.2rem;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(102, 240, 240, 0.4);
  margin-bottom: 1.5rem;
}