/* =============================================
   DARK MODE STYLES - VERSION AMÉLIORÉE
   Meilleure lisibilité et contrastes optimisés
============================================= */

/* =============================================
   BASE DARK THEME - CONTRASTES AMÉLIORÉS
============================================= */
body.dark-theme {
    --primary-color: #60a5fa;
    --secondary-color: #3b82f6;
    --accent-color: #34d399;
    --professional-color: #f8fafc;
    --dark-color: #f8fafc;
    --light-color: #0f172a;
    --gray-light: #1e293b;
    --text-dark: #f1f5f9;
    --text-light: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.4);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.5);
    --gradient-professional: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #2563eb 100%);
    
    background: #0f172a;
    color: #f1f5f9;
}

/* =============================================
   TYPOGRAPHIE DARK MODE
============================================= */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
    color: #f8fafc;
}

body.dark-theme .text-muted {
    color: #94a3b8 !important;
}

/* =============================================
   NAVBAR DARK - MEILLEURE LISIBILITÉ
============================================= */
body.dark-theme .navbar-custom {
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}

body.dark-theme .navbar-brand {
    color: #60a5fa !important;
}

body.dark-theme .brand-text {
    background: linear-gradient(135deg, #60a5fa, #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-theme .nav-link {
    color: #e2e8f0 !important;
    font-weight: 500;
}

body.dark-theme .nav-link:hover {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa !important;
}

body.dark-theme .nav-link.active {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa !important;
}

body.dark-theme .navbar-toggler {
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

body.dark-theme .navbar-toggler-icon {
    filter: invert(1);
}

body.dark-theme .navbar-collapse {
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(51, 65, 85, 0.5);
}

body.dark-theme .theme-toggle button {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(96, 165, 250, 0.3);
    color: #60a5fa;
}

body.dark-theme .theme-toggle button:hover {
    background: #60a5fa;
    color: #0f172a;
}

/* =============================================
   HERO SECTION DARK - CONTRASTE OPTIMISÉ
============================================= */
body.dark-theme .hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #1e40af 100%);
}

body.dark-theme .hero-badge {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(96, 165, 250, 0.4);
    color: #f1f5f9;
}

body.dark-theme .hero-name-highlight {
    background: linear-gradient(135deg, #60a5fa, #34d399, #fbbf24);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-theme .hero-subtitle {
    color: rgba(241, 245, 249, 0.95);
}

body.dark-theme .hero-description {
    color: rgba(226, 232, 240, 0.9);
}

body.dark-theme .btn-outline-professional {
    border-color: rgba(226, 232, 240, 0.8);
    color: #f1f5f9;
}

body.dark-theme .btn-outline-professional:hover {
    background: rgba(226, 232, 240, 0.15);
    border-color: #f1f5f9;
    color: #f8fafc;
}

body.dark-theme .social-icon {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(96, 165, 250, 0.4);
    color: #f1f5f9;
}

body.dark-theme .social-icon:hover {
    background: #60a5fa;
    border-color: #60a5fa;
    color: #0f172a;
}

/* =============================================
   SECTIONS DARK - LISIBILITÉ AMÉLIORÉE
============================================= */
body.dark-theme .section-title {
    color: #f8fafc;
}

body.dark-theme .section-subtitle {
    color: #cbd5e1;
}

body.dark-theme .bg-light {
    background-color: #1e293b !important;
}

/* About Section Dark */
body.dark-theme .about-image-bg {
    background: linear-gradient(135deg, #60a5fa, #34d399);
    opacity: 0.15;
}

body.dark-theme .about-content h3 {
    color: #f8fafc;
}

body.dark-theme .about-content p {
    color: #cbd5e1;
}

body.dark-theme .info-item {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(71, 85, 105, 0.5);
}

body.dark-theme .info-item:hover {
    background: rgba(30, 41, 59, 1);
    border-color: rgba(96, 165, 250, 0.5);
}

body.dark-theme .info-item h6 {
    color: #94a3b8;
}

body.dark-theme .info-item p {
    color: #f1f5f9;
}

body.dark-theme .progress {
    background: rgba(30, 41, 59, 0.6);
}

body.dark-theme .progress-bar {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

/* =============================================
   CARDS DARK - CONTRASTE AMÉLIORÉ
============================================= */
body.dark-theme .skill-card,
body.dark-theme .certificate-card,
body.dark-theme .project-card {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

body.dark-theme .skill-card:hover,
body.dark-theme .certificate-card:hover,
body.dark-theme .project-card:hover {
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    background: #1e293b;
}

body.dark-theme .skill-card h4,
body.dark-theme .certificate-card h4,
body.dark-theme .project-content h4 {
    color: #f8fafc;
}

body.dark-theme .skill-card p,
body.dark-theme .certificate-card p,
body.dark-theme .project-content p {
    color: #cbd5e1;
}

body.dark-theme .skill-icon {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

body.dark-theme .skill-list li {
    color: #cbd5e1;
}

body.dark-theme .skill-list li:before {
    color: #60a5fa;
}

body.dark-theme .certificate-icon {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

body.dark-theme .certificate-icon.aws {
    background: rgba(255, 153, 0, 0.15);
    color: #fbbf24;
}

body.dark-theme .certificate-icon.security {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

/* =============================================
   TIMELINE DARK - MEILLEURE VISIBILITÉ
============================================= */
body.dark-theme .timeline::before {
    background: rgba(71, 85, 105, 0.5);
}

body.dark-theme .timeline-item::before {
    background: #60a5fa;
    border-color: #1e293b;
}

body.dark-theme .timeline-date {
    color: #60a5fa;
}

body.dark-theme .timeline-content h5 {
    color: #f8fafc;
}

body.dark-theme .timeline-content p {
    color: #cbd5e1;
}

body.dark-theme .cv-section-title {
    color: #60a5fa;
}

/* =============================================
   PROJECTS DARK - AMÉLIORATION VISUELLE
============================================= */
body.dark-theme .filter-btn {
    background: #1e293b;
    border-color: rgba(71, 85, 105, 0.6);
    color: #e2e8f0;
}

body.dark-theme .filter-btn:hover {
    border-color: #60a5fa;
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
}

body.dark-theme .filter-btn.active {
    background: #60a5fa;
    border-color: #60a5fa;
    color: #0f172a;
}

body.dark-theme .project-overlay {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.9), rgba(52, 211, 153, 0.9));
}

body.dark-theme .tag {
    background: rgba(51, 65, 85, 0.6);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.5);
}

/* =============================================
   CONTACT SECTION DARK - DESIGN MODERNE
============================================= */
body.dark-theme .contact-section-modern {
    background: linear-gradient(135deg, #1e293b 0%, rgba(30, 41, 59, 0.8) 100%);
}

body.dark-theme .contact-info-card {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.5);
}

body.dark-theme .contact-info-card:hover {
    background: rgba(30, 41, 59, 1);
    border-color: rgba(96, 165, 250, 0.5);
}

body.dark-theme .contact-icon-wrapper {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

body.dark-theme .contact-info-card h4 {
    color: #f8fafc;
}

body.dark-theme .contact-info-card p {
    color: #cbd5e1;
}

body.dark-theme .social-link-modern {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.5);
    color: #cbd5e1;
}

body.dark-theme .social-link-modern:hover {
    background: #60a5fa;
    border-color: #60a5fa;
    color: #0f172a;
}

body.dark-theme .contact-form-modern {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(71, 85, 105, 0.5);
}

body.dark-theme .form-label-modern {
    color: #f1f5f9;
}

body.dark-theme .form-control-modern {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(71, 85, 105, 0.5);
    color: #f1f5f9;
}

body.dark-theme .form-control-modern:focus {
    background: rgba(15, 23, 42, 0.95);
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
    color: #f1f5f9;
}

body.dark-theme .form-control-modern::placeholder {
    color: #64748b;
}

body.dark-theme .form-icon-modern {
    color: #64748b;
}

body.dark-theme .form-control-modern:focus + .form-icon-modern {
    color: #60a5fa;
}

body.dark-theme .btn-contact-modern {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

body.dark-theme .btn-contact-modern:hover {
    box-shadow: 0 10px 30px rgba(96, 165, 250, 0.4);
}

/* =============================================
   BUTTONS DARK - CONTRASTE OPTIMISÉ
============================================= */
body.dark-theme .btn-professional {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

body.dark-theme .btn-professional:hover {
    box-shadow: 0 10px 20px rgba(96, 165, 250, 0.4);
    color: white;
}

body.dark-theme .btn-outline-primary {
    border-color: #60a5fa;
    color: #60a5fa;
}

body.dark-theme .btn-outline-primary:hover {
    background: #60a5fa;
    border-color: #60a5fa;
    color: #0f172a;
}

body.dark-theme .btn-secondary {
    background: #475569;
    border-color: #475569;
    color: #f1f5f9;
}

body.dark-theme .btn-success {
    background: #34d399;
    border-color: #34d399;
    color: #0f172a;
}

/* =============================================
   MODALS DARK
============================================= */
body.dark-theme .modal-content {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.5);
}

body.dark-theme .modal-header {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border-bottom: none;
}

body.dark-theme .modal-footer {
    background: rgba(15, 23, 42, 0.8);
    border-top: 1px solid rgba(71, 85, 105, 0.5);
}

body.dark-theme .btn-close {
    filter: invert(1);
}

/* =============================================
   FOOTER DARK
============================================= */
body.dark-theme .footer {
    background: #0f172a;
    border-top: 1px solid rgba(51, 65, 85, 0.5);
}

body.dark-theme .footer-social a {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(71, 85, 105, 0.5);
}

body.dark-theme .footer-social a:hover {
    background: #60a5fa;
    border-color: #60a5fa;
    color: #0f172a;
}

/* =============================================
   BACK TO TOP DARK
============================================= */
body.dark-theme .back-to-top {
    background: #60a5fa;
    box-shadow: 0 10px 30px rgba(96, 165, 250, 0.3);
}

body.dark-theme .back-to-top:hover {
    background: #3b82f6;
    box-shadow: 0 15px 35px rgba(96, 165, 250, 0.4);
}

/* =============================================
   SCROLLBAR DARK
============================================= */
body.dark-theme::-webkit-scrollbar {
    width: 12px;
    background: #0f172a;
}

body.dark-theme::-webkit-scrollbar-track {
    background: #0f172a;
}

body.dark-theme::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 6px;
    border: 2px solid #0f172a;
}

body.dark-theme::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* =============================================
   SELECTION DARK
============================================= */
body.dark-theme ::selection {
    background: rgba(96, 165, 250, 0.3);
    color: #f8fafc;
}

body.dark-theme ::-moz-selection {
    background: rgba(96, 165, 250, 0.3);
    color: #f8fafc;
}

/* =============================================
   LOADER DARK
============================================= */
body.dark-theme #loader {
    background: #0f172a;
}

body.dark-theme .spinner {
    border-color: rgba(71, 85, 105, 0.3);
    border-top-color: #60a5fa;
}

/* =============================================
   PROGRESS BAR DARK
============================================= */
body.dark-theme .progress-bar-scroll {
    background: linear-gradient(90deg, #60a5fa, #34d399);
}

/* =============================================
   NOTIFICATIONS DARK
============================================= */
body.dark-theme .notification {
    background: #1e293b;
    border: 1px solid rgba(71, 85, 105, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: #f1f5f9;
}

body.dark-theme .notification-success {
    background: #34d399;
    border-color: #34d399;
    color: #0f172a;
}

body.dark-theme .notification-error {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

body.dark-theme .notification-info {
    background: #60a5fa;
    border-color: #60a5fa;
    color: #0f172a;
}

/* =============================================
   CODE BLOCKS DARK
============================================= */
body.dark-theme pre,
body.dark-theme code {
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    border: 1px solid rgba(71, 85, 105, 0.5);
}

/* =============================================
   TABLES DARK
============================================= */
body.dark-theme table {
    background: #1e293b;
    color: #e2e8f0;
}

body.dark-theme th {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(71, 85, 105, 0.5);
    color: #f1f5f9;
}

body.dark-theme td {
    border-color: rgba(71, 85, 105, 0.5);
    color: #cbd5e1;
}

body.dark-theme tr:hover {
    background: rgba(30, 41, 59, 0.5);
}

/* =============================================
   LINKS DARK
============================================= */
body.dark-theme a {
    color: #60a5fa;
}

body.dark-theme a:hover {
    color: #93c5fd;
}

/* =============================================
   BADGES DARK
============================================= */
body.dark-theme .badge {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

/* =============================================
   TEXT EFFECTS DARK
============================================= */
body.dark-theme .text-pop:hover {
    color: #60a5fa;
}

body.dark-theme .ripple::after {
    background: rgba(96, 165, 250, 0.3);
}

/* =============================================
   AMÉLIORATION CONTRASTE TEXTE
============================================= */
body.dark-theme .text-gradient {
    background: linear-gradient(135deg, #60a5fa, #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Assurer une meilleure lisibilité du texte */
body.dark-theme p,
body.dark-theme span,
body.dark-theme li {
    color: #cbd5e1;
}

body.dark-theme strong,
body.dark-theme b {
    color: #f1f5f9;
}