/* Page styles moved out of the inline <style> block (T-139, CSP style-src-elem 'self'). */
body {
  background: #0a0a0a;
  color: #e0e0e0;
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
}
/* Hero Section with AI-inspired background */
.hero {
  position: relative;
  background: #05080d url('../assets/images/hero-bg.svg') no-repeat center center/cover;
  padding: 120px 20px;
  text-align: center;
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.75);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 3.5rem;
  color: #0ff;
  margin-bottom: 20px;
  text-shadow: 0 0 15px #0ff;
}
.hero p {
  font-size: 1.3rem;
  margin-bottom: 20px;
}
.profile-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ff4081;
  margin-bottom: 20px;
  transition: transform 0.5s;
}
.profile-img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px #ff4081;
}
.social-icons a {
  color: #0ff;
  font-size: 1.5rem;
  margin: 0 10px;
  transition: all 0.3s;
}
.social-icons a:hover {
  color: #ff4081;
  transform: translateY(-5px);
}
/* Section styling with accent colors */
.section {
  padding: 60px 20px;
  background: linear-gradient(135deg, #1f1f1f, #2c2c2c);
  border-top: 4px solid #ff4081;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}
.section.appear {
  opacity: 1;
  transform: translateY(0);
}
.section h2 {
  font-family: 'Orbitron', sans-serif;
  color: #ff4081;
  margin-bottom: 30px;
  text-shadow: 0 0 10px #ff4081;
  position: relative;
}
.section h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 3px;
  background: #0ff;
  transition: width 1s ease;
}
.section.appear h2::after {
  width: 100px;
}
/* Center aligned headings with centered underline */
.text-center h2::after {
  left: 50%;
  transform: translateX(-50%);
}
.text-center.appear h2::after {
  width: 100px;
  left: 50%;
  transform: translateX(-50%);
}
.footer {
  background: #111;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  border-top: 2px solid #ff4081;
}

/* Skill bars */
.skill-bar {
  width: 100%;
  background: #333;
  height: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}
.skill-level {
  height: 100%;
  background: linear-gradient(90deg, #0ff, #ff4081);
  border-radius: 5px;
  width: 0;
  transition: width 1.5s ease-out;
}

/* Animated nav tabs */
.nav-tabs .nav-link {
  color: #e0e0e0;
  border: none;
  position: relative;
  transition: all 0.3s;
}
.nav-tabs .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #ff4081;
  transition: all 0.3s;
}
.nav-tabs .nav-link:hover::after,
.nav-tabs .nav-link.active::after {
  width: 100%;
  left: 0;
}
.nav-tabs .nav-link.active {
  background: transparent;
  color: #0ff;
}

/* Typing cursor effect */
.typing-effect::after {
  content: '|';
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Floating animation */
.floating {
  animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Particle background */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Skill pills styling */
.skill-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -5px;
}
.skill-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0ff, #0088cc);
  color: #111;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.skill-pill:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ff4081, #d81b60);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
/* Better responsive behavior */
@media (max-width: 767px) {
  .col-md-6:last-child {
    margin-top: 20px;
  }
}

/* Experience Tabs - Two Row Layout */
.experience-tabs-container {
  margin: 30px 0;
}

.experience-tabs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  border-bottom: none !important;
}

.experience-tabs-row:last-child {
  margin-bottom: 0;
}

.experience-tabs-row .nav-item {
  flex: 0 0 auto;
}

.experience-tabs-row .nav-link {
  color: #e0e0e0 !important;
  border: 2px solid rgba(0, 255, 255, 0.3) !important;
  background: rgba(15, 15, 15, 0.8) !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
  position: relative;
  font-size: 0.95rem;
  white-space: nowrap;
  margin-bottom: 0 !important;
}

.experience-tabs-row .nav-link:hover {
  color: #0ff !important;
  border-color: #0ff !important;
  background: rgba(0, 255, 255, 0.1) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  transform: translateY(-2px);
}

.experience-tabs-row .nav-link.active {
  color: #ff4081 !important;
  border-color: #ff4081 !important;
  background: rgba(255, 64, 129, 0.15) !important;
  box-shadow: 0 0 20px rgba(255, 64, 129, 0.5);
  font-weight: 600;
}

.experience-tabs-row .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff4081, transparent);
}

.tab-content {
  margin-top: 30px;
}

.position-item {
  margin-bottom: 30px;
}

.position-item:last-child {
  margin-bottom: 0;
}

.position-item h3 {
  color: #ff4081;
  font-size: 1.3rem;
  margin-bottom: 10px;
  font-family: 'Orbitron', sans-serif;
}

.position-item p {
  color: #999;
  margin-bottom: 15px;
}

.position-item ul {
  list-style: none;
  padding-left: 0;
}

.position-item ul li {
  color: #e0e0e0;
  padding: 8px 0;
  padding-left: 25px;
  position: relative;
  line-height: 1.6;
}

.position-item ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #0ff;
  font-weight: bold;
}

/* Responsive Tabs */
@media (max-width: 992px) {
  .experience-tabs-row {
    gap: 6px;
  }

  .experience-tabs-row .nav-link {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 767px) {
  .experience-tabs-row {
    gap: 5px;
    margin-bottom: 5px;
  }

  .experience-tabs-row .nav-link {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .position-item h3 {
    font-size: 1.1rem;
  }
}

/* Navigation Menu Styling */
#nav-menu {
  background: rgba(15, 15, 15, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  padding: 5px 0;
  transition: all 0.3s;
  z-index: 1000;
}
#nav-menu .navbar-nav {
  width: 100%;
  justify-content: center;
}
#nav-menu .nav-link {
  color: #e0e0e0;
  margin: 0 15px;
  position: relative;
  font-size: 0.9rem;
  transition: all 0.3s;
  padding: 10px 5px;
  white-space: nowrap; /* never wrap a label onto two lines ("À propos", T-208) */
}
/* Expanded desktop nav (>= 992px): 11 links + language switcher must fit on
   one row in EN and FR. Widen the container and scale spacing with the
   viewport instead of the fixed 15px margins that forced FR labels to wrap. */
@media (min-width: 992px) {
  #nav-menu > .container {
    max-width: min(100%, 1400px);
  }
  #nav-menu .navbar-nav {
    flex-wrap: nowrap;
  }
  #nav-menu .nav-link {
    margin: 0 clamp(2px, 0.45vw, 12px);
    padding: 10px clamp(3px, 0.3vw, 6px);
    font-size: clamp(0.78rem, 0.62rem + 0.25vw, 0.9rem);
    letter-spacing: 0;
  }
  #nav-menu #lang-switcher {
    margin-left: clamp(4px, 0.8vw, 16px) !important;
    flex-shrink: 0;
  }
}
#nav-menu .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #0ff;
  transition: all 0.3s;
}
#nav-menu .nav-link:hover,
#nav-menu .nav-link.active {
  color: #0ff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}
#nav-menu .nav-link:hover::after,
#nav-menu .nav-link.active::after {
  width: 100%;
  left: 0;
}
.navbar-toggler {
  border-color: rgba(0, 255, 255, 0.5);
  background: rgba(0, 255, 255, 0.1);
}
.navbar-toggler .fa-bars {
  color: #0ff;
}
/* Make scrolling smooth */
html {
  scroll-behavior: smooth;
}
/* Add padding to section anchors for fixed header */
section {
  scroll-margin-top: 60px;
}

/* Professional Summary Banner styling */
.summary-banner {
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.95), rgba(35, 35, 35, 0.95));
  border-top: 1px solid rgba(0, 255, 255, 0.3);
  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
  padding: 30px 0;
  margin-bottom: 30px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.summary-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 255, 255, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 255, 255, 0.03) 50%, rgba(0, 255, 255, 0.03) 75%, transparent 75%);
  background-size: 20px 20px;
  z-index: 1;
}
.summary-content {
  display: flex;
  align-items: center;
  gap: 25px;
  position: relative;
  z-index: 2;
}
.summary-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4081, #0ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}
.summary-icon i {
  font-size: 28px;
  color: #000;
}
.summary-text {
  flex-grow: 1;
}
.summary-text p {
  color: #e0e0e0;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
  .summary-content {
    flex-direction: column;
    text-align: center;
  }
  .summary-icon {
    margin-bottom: 15px;
  }
}

/* ---------------------------------------------------------------------------
   Homelab + AI & Innovation teaser sections (T-208). Titles are left-aligned
   like every other section; lead copy and CTA follow the same alignment.
   --------------------------------------------------------------------------- */
.section-lead {
  color: #b0b0b0;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 760px;
  margin: 0 0 30px;
}
.teaser-title {
  font-family: 'Orbitron', sans-serif;
  color: #0ff;
  font-size: 1.3rem;
  margin-bottom: 15px;
}
.teaser-text { color: #c8c8c8; line-height: 1.7; }
.teaser-muted { color: #a8a8a8; font-size: 0.95rem; }
.section-cta { margin-top: 1.75rem; }
.lab-highlight {
  height: 100%;
  padding: 18px 20px;
  background: rgba(0, 255, 255, 0.04);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 10px;
  transition: border-color 0.3s, transform 0.3s;
}
.lab-highlight:hover { border-color: rgba(0, 255, 255, 0.45); transform: translateY(-2px); }
.lab-highlight > i { font-size: 1.5rem; color: #0ff; }
.lab-highlight h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  color: #fff;
  margin: 8px 0 6px;
}
.lab-highlight p { color: #bdbdbd; font-size: 0.9rem; line-height: 1.55; margin: 0; }

/* ---------------------------------------------------------------------------
   Skills explorer v2 (T-208): grouped pills with brand icons + detail panel.
   Scoped to #skills so the older .skill-pill rules elsewhere stay inert here.
   --------------------------------------------------------------------------- */
#skills .skill-filters .btn { display: inline-flex; align-items: center; gap: 6px; }
#skills .skill-filters .btn-outline-primary { color: #7ff; border-color: rgba(0, 255, 255, 0.45); }
#skills .skill-filters .btn-outline-primary:hover { color: #0a0a0a; background: #0ff; border-color: #0ff; }
#skills .skill-filters .btn-primary { color: #0a0a0a; background: #0ff; border-color: #0ff; }
#skills .skill-count {
  font-size: 0.72rem;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}
#skills .skills-grid { display: block; margin-bottom: 0; }
#skills .skill-group { margin-bottom: 1.25rem; }
#skills .skill-group-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0ff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
#skills .skill-group-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#skills .skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid rgba(0, 255, 255, 0.28);
  background: rgba(0, 255, 255, 0.06);
  color: #e8e8e8;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.2;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
#skills .skill-pill .skill-name { color: inherit; font-size: inherit; margin: 0; font-weight: 500; }
#skills .skill-pill:hover { background: rgba(0, 255, 255, 0.14); border-color: #0ff; transform: translateY(-1px); }
#skills .skill-pill:focus-visible { outline: 2px solid #ff4081; outline-offset: 2px; }
#skills .skill-pill.active { background: #0ff; border-color: #0ff; color: #0a0a0a; }
#skills .skill-icon { width: 1.05em; height: 1.05em; flex-shrink: 0; display: inline-block; line-height: 1; }
#skills .skill-icon-si {
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
#skills .skill-icon-lg { width: 1.7rem; height: 1.7rem; font-size: 1.7rem; }
#skills .skill-detail-panel { margin-top: 0; padding: 0; border: 0; background: none; }
@media (min-width: 992px) {
  #skills .skill-detail-panel { position: sticky; top: 76px; }
}
#skills .skill-detail-panel .card-header { color: #0a0a0a; }
#skills .skill-detail-panel .card-header h3 { color: #0a0a0a; text-shadow: none; }
#skills .skill-used {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-left: 3px solid #ff4081;
  background: rgba(255, 64, 129, 0.07);
  border-radius: 0 8px 8px 0;
}
#skills .skill-used-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ff79a8;
  margin: 0 0 6px;
}
#skills .resource-links .btn-primary { background: #0ff; border-color: #0ff; color: #0a0a0a; }
#skills .resource-links .btn-primary:hover { background: #ff4081; border-color: #ff4081; color: #fff; }