/*
 * Mode Sombre par défaut pour Portfolio Magaye NDIAYE
 * Palette: Charbon #18181b, #09090b + Accent #2c98f0
 */

/* ========== VARIABLES & BASE ========== */
body {
  background-color: #09090b !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

p {
  color: rgba(255, 255, 255, 0.75) !important;
}

a {
  color: #2c98f0 !important;
}

a:hover, a:active, a:focus {
  color: #54aef5 !important;
}

/* ========== SIDEBAR ========== */
#colorlib-aside {
  background: #18181b !important;
  border-right: 1px solid rgba(44, 152, 240, 0.1);
}

body.offcanvas #colorlib-aside {
  background: #18181b !important;
}

#colorlib-aside #colorlib-logo a {
  color: #ffffff !important;
}

#colorlib-aside .position {
  color: #2c98f0 !important;
}

#colorlib-aside #colorlib-main-menu ul li a {
  color: rgba(255, 255, 255, 0.7) !important;
}

#colorlib-aside #colorlib-main-menu ul li a:hover {
  color: #ffffff !important;
}

#colorlib-aside #colorlib-main-menu ul li a:after {
  background-color: #2c98f0 !important;
}

#colorlib-aside #colorlib-main-menu ul li.active a {
  color: #2c98f0 !important;
}

#colorlib-aside .colorlib-footer {
  color: rgba(255, 255, 255, 0.5) !important;
}

#colorlib-aside .colorlib-footer ul li a {
  color: #2c98f0 !important;
}

#colorlib-aside .colorlib-footer ul li a:hover {
  color: #54aef5 !important;
}

/* ========== SECTIONS GÉNÉRALES ========== */
.colorlib-about,
.colorlib-services,
.colorlib-education,
.colorlib-experience,
.colorlib-blog,
.colorlib-contact {
  background-color: #09090b !important;
}

.heading-meta {
  color: rgba(255, 255, 255, 0.5) !important;
}

.colorlib-heading {
  color: #ffffff !important;
}

/* ========== HERO / SLIDER ========== */
#colorlib-hero .overlay {
  background: rgba(9, 9, 11, 0.7) !important;
}

.slider-text h1,
.slider-text h2 {
  color: #ffffff !important;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.btn-primary {
  background: #2c98f0 !important;
  border: 2px solid #2c98f0 !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #54aef5 !important;
  border-color: #54aef5 !important;
}

/* ========== ABOUT / SERVICES BOXES ========== */
.services {
  background: #18181b !important;
  border: 1px solid rgba(44, 152, 240, 0.15);
  transition: all 0.3s ease;
}

.services:hover {
  background: #1f1f23 !important;
  border-color: #2c98f0;
  box-shadow: 0 8px 24px rgba(44, 152, 240, 0.2);
}

.services h3 {
  color: #ffffff !important;
}

.services .icon,
.services .icon2 {
  color: #2c98f0 !important;
}

/* Couleurs spécifiques pour les services */
.services.color-1 {
  border-left: 4px solid #2c98f0;
}

.services.color-2 {
  border-left: 4px solid #7b2ff7;
}

.services.color-3 {
  border-left: 4px solid #0b6623;
}

.services.color-4 {
  border-left: 4px solid #f72585;
}

.services.color-5 {
  border-left: 4px solid #4cc9f0;
}

.services.color-6 {
  border-left: 4px solid #f77f00;
}

/* ========== HIRE ME BOX ========== */
.hire {
  background: #18181b !important;
  border: 1px solid rgba(44, 152, 240, 0.2);
  padding: 40px 30px;
  border-radius: 8px;
}

.hire h2 {
  color: #ffffff !important;
}

.btn-hire {
  background: #2c98f0 !important;
  color: #fff !important;
  border: 2px solid #2c98f0;
  padding: 12px 40px;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-hire:hover {
  background: transparent !important;
  color: #2c98f0 !important;
  border-color: #2c98f0;
}

/* ========== PROGRESS BARS ========== */
.progress-wrap h3 {
  color: rgba(255, 255, 255, 0.85) !important;
}

.progress {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50px;
}

.progress-bar {
  background: #2c98f0 !important;
  box-shadow: 0 0 10px rgba(44, 152, 240, 0.5);
}

.progress-bar.color-1 {
  background: #2c98f0 !important;
}

.progress-bar.color-2 {
  background: #7b2ff7 !important;
}

.progress-bar.color-3 {
  background: #0b6623 !important;
}

.progress-bar.color-4 {
  background: #f72585 !important;
}

.progress-bar.color-5 {
  background: #4cc9f0 !important;
}

.progress-bar.color-6 {
  background: #f77f00 !important;
}

.progress-bar span {
  color: #ffffff !important;
}

/* ========== EDUCATION / ACCORDION ========== */
.panel-default {
  background: #18181b !important;
  border: 1px solid rgba(44, 152, 240, 0.15) !important;
  margin-bottom: 15px;
  border-radius: 8px;
}

.panel-heading {
  background: #1f1f23 !important;
  border-bottom: 1px solid rgba(44, 152, 240, 0.1) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 15px 20px !important;
}

.panel-title a {
  text-decoration: none;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 5px 0;
}

.panel-title a:hover {
  text-decoration: none;
}

.panel-title a strong {
  font-size: 16px;
  color: #ffffff !important;
}

.panel-title a.collapsed strong {
  color: rgba(255, 255, 255, 0.9) !important;
}

.education-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 13px;
  font-weight: 400;
}

.education-meta span {
  color: rgba(255, 255, 255, 0.9) !important;
}

.education-date {
  color: #2c98f0 !important;
  font-weight: 500;
}

.education-university {
  color: #ffffff !important;
  font-weight: 500;
}

.education-location {
  color: rgba(255, 255, 255, 0.85) !important;
}

.education-university::before {
  content: "🎓 ";
  opacity: 0.7;
}

.education-location::before {
  content: "📍 ";
  opacity: 0.7;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .education-meta {
    flex-direction: column;
    gap: 5px;
  }
}

.panel-body {
  background: #18181b !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 0 0 8px 8px;
}

.panel-body p {
  color: rgba(255, 255, 255, 0.75) !important;
}

.panel-body strong {
  color: #2c98f0 !important;
}

.panel-body ul li {
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 8px;
}

/* ========== TIMELINE (EXPERIENCE) ========== */
.timeline-centered {
  position: relative;
}

.timeline-centered:before {
  background: rgba(44, 152, 240, 0.3) !important;
}

.timeline-entry .timeline-label {
  background: #18181b !important;
  border: 1px solid rgba(44, 152, 240, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 25px;
}

.timeline-entry .timeline-label h2 {
  color: #ffffff !important;
  margin-bottom: 10px;
}

.timeline-entry .timeline-label h2 a {
  color: #2c98f0 !important;
}

.timeline-entry .timeline-label h2 span {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 14px;
}

.timeline-entry .timeline-label p {
  color: rgba(255, 255, 255, 0.75) !important;
}

.timeline-icon {
  background: #2c98f0 !important;
  border: 4px solid #09090b;
}

.timeline-icon.color-1 {
  background: #2c98f0 !important;
}

.timeline-icon.color-2 {
  background: #7b2ff7 !important;
}

.timeline-icon.color-3 {
  background: #0b6623 !important;
}

.timeline-icon.color-4 {
  background: #f72585 !important;
}

.timeline-icon.color-5 {
  background: #4cc9f0 !important;
}

.timeline-icon.color-6 {
  background: #f77f00 !important;
}

.timeline-icon i {
  color: #ffffff !important;
}

/* ========== BLOG / PROJETS ========== */
.blog-entry {
  background: #18181b !important;
  border: 1px solid rgba(44, 152, 240, 0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.blog-entry:hover {
  border-color: #2c98f0;
  box-shadow: 0 8px 24px rgba(44, 152, 240, 0.25);
  transform: translateY(-5px);
}

.blog-entry .blog-img {
  display: block;
  text-align: center;
  overflow: hidden;
  background: #18181b !important;
}

.blog-entry .blog-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.blog-entry .desc {
  background: #18181b !important;
  padding: 20px;
}

.blog-entry .desc span {
  color: #2c98f0 !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-entry .desc h3 {
  color: #ffffff !important;
  margin: 10px 0;
}

.blog-entry .desc h3 a {
  color: #ffffff !important;
}

.blog-entry .desc h3 a:hover {
  color: #2c98f0 !important;
}

.blog-entry .desc p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ========== CONTACT ========== */
.colorlib-feature {
  background: #18181b !important;
  border: 1px solid rgba(44, 152, 240, 0.15);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center !important;
  gap: 15px;
}

.colorlib-feature:hover {
  border-color: #2c98f0;
  box-shadow: 0 4px 16px rgba(44, 152, 240, 0.2);
}

.colorlib-feature .colorlib-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.colorlib-feature .colorlib-icon i {
  color: #2c98f0 !important;
}

.colorlib-feature .colorlib-text {
  flex: 1;
  min-width: 0;
}

.colorlib-feature .colorlib-text p,
.colorlib-feature .colorlib-text a {
  color: rgba(255, 255, 255, 0.85) !important;
  word-break: break-word;
  overflow-wrap: break-word;
  margin: 0;
}

/* ========== FORMULAIRE ========== */
.form-control {
  background: #18181b !important;
  border: 1px solid rgba(44, 152, 240, 0.2) !important;
  color: #ffffff !important;
  border-radius: 8px;
  padding: 12px 20px;
  transition: all 0.3s ease;
}

.form-control:focus {
  background: #1f1f23 !important;
  border-color: #2c98f0 !important;
  box-shadow: 0 0 12px rgba(44, 152, 240, 0.3) !important;
  color: #ffffff !important;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.btn-send-message {
  background: #2c98f0 !important;
  border: 2px solid #2c98f0 !important;
  color: #ffffff !important;
  padding: 12px 40px;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-send-message:hover {
  background: transparent !important;
  color: #2c98f0 !important;
  border-color: #2c98f0 !important;
}

/* ========== MOBILE NAV TOGGLE ========== */
.js-colorlib-nav-toggle {
  background: #18181b !important;
  border: 1px solid rgba(44, 152, 240, 0.3);
}

.js-colorlib-nav-toggle:hover {
  background: #2c98f0 !important;
  border-color: #2c98f0;
}

.js-colorlib-nav-toggle i {
  background: #2c98f0 !important;
}

.js-colorlib-nav-toggle i::before,
.js-colorlib-nav-toggle i::after {
  background: #2c98f0 !important;
}

.js-colorlib-nav-toggle:hover i,
.js-colorlib-nav-toggle:hover i::before,
.js-colorlib-nav-toggle:hover i::after {
  background: #ffffff !important;
}

/* ========== SCROLLBAR PERSONNALISÉE ========== */
::-webkit-scrollbar {
  width: 10px;
  background: #09090b;
}

::-webkit-scrollbar-track {
  background: #18181b;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #2c98f0;
  border-radius: 10px;
  border: 2px solid #18181b;
}

::-webkit-scrollbar-thumb:hover {
  background: #54aef5;
}

/* ========== SELECTION ========== */
::-webkit-selection {
  color: #fff !important;
  background: #2c98f0 !important;
}

::-moz-selection {
  color: #fff !important;
  background: #2c98f0 !important;
}

::selection {
  color: #fff !important;
  background: #2c98f0 !important;
}

/* ========== RESPONSIVE FIXES ========== */
@media screen and (max-width: 768px) {
  #colorlib-aside {
    background: #18181b !important;
  }

  .offcanvas #colorlib-aside {
    background: #18181b !important;
  }
}

/* ========== ANIMATIONS & EFFECTS ========== */
.animate-box {
  transition: all 0.5s ease;
}

/* Glow effect sur les éléments interactifs */
.services:hover,
.blog-entry:hover,
.timeline-entry:hover .timeline-label {
  box-shadow: 0 0 30px rgba(44, 152, 240, 0.3);
}

/* ========== IMAGES ========== */
img {
  border-radius: 8px;
}

.blog-img img {
  transition: all 0.3s ease;
  filter: brightness(0.9);
}

.blog-img:hover img {
  filter: brightness(1.1);
  transform: scale(1.05);
}

/* ========== REMPLACEMENT COULEUR #f2f3f7 ========== */
.panel-heading a.collapsed {
  background: #18181b !important;
  border: 1px solid rgba(44, 152, 240, 0.15) !important;
}

.timeline-centered:before {
  background: rgba(44, 152, 240, 0.3) !important;
}

.timeline-icon {
  box-shadow: 0 0 0 5px #09090b !important;
  -moz-box-shadow: 0 0 0 5px #09090b !important;
  -webkit-box-shadow: 0 0 0 5px #09090b !important;
}

.timeline-label:after,
.timeline-label:before {
  border-color: transparent #18181b transparent transparent !important;
}

.progress {
  background: rgba(255, 255, 255, 0.1) !important;
}

.services,
.colorlib-feature {
  background: #18181b !important;
}