/* Variables CSS pour le mode sombre uniquement */
[data-theme="dark"],
body.dark-mode-active {
  --dm-bg-primary: #1a1a1a;
  --dm-bg-secondary: #2d2d2d;
  --dm-bg-soft: #2a2a2a;
  --dm-bg-light: #2d2d2d;
  --dm-bg-gradient-primary: linear-gradient(180deg, #1e3a1e 0%, #2d2d2d 100%);
  --dm-bg-gradient-reverse-primary: linear-gradient(0deg, #1e3a1e 0%, #2d2d2d 100%);
  --dm-text-primary: #ffffff;
  --dm-text-secondary: #b8b8b8;
  --dm-text-muted: #888888;
  --dm-border-color: #404040;
  --dm-navbar-bg: #2d2d2d;
  --dm-card-bg: #2d2d2d;
  --dm-shadow: rgba(0, 0, 0, 0.3);
}

/* ========================================
   STYLES APPLIQUÉS UNIQUEMENT EN MODE SOMBRE
   ======================================== */

[data-theme="dark"] body,
body.dark-mode-active {
  background-color: var(--dm-bg-primary) !important;
  color: var(--dm-text-primary) !important;
}

/* Wrappers et sections */
[data-theme="dark"] .wrapper.bg-light,
body.dark-mode-active .wrapper.bg-light {
  background-color: var(--dm-bg-light) !important;
}

[data-theme="dark"] .wrapper.bg-soft,
body.dark-mode-active .wrapper.bg-soft,
[data-theme="dark"] .wrapper.bg-soft-primary,
body.dark-mode-active .wrapper.bg-soft-primary,
[data-theme="dark"] .bg-soft-primary,
body.dark-mode-active .bg-soft-primary {
  background-color: var(--dm-bg-soft) !important;
}

[data-theme="dark"] .wrapper.bg-gradient-primary,
body.dark-mode-active .wrapper.bg-gradient-primary {
  background: var(--dm-bg-gradient-primary) !important;
}

[data-theme="dark"] .wrapper.bg-gradient-reverse-primary,
body.dark-mode-active .wrapper.bg-gradient-reverse-primary {
  background: var(--dm-bg-gradient-reverse-primary) !important;
}

[data-theme="dark"] .wrapper.bg-white,
body.dark-mode-active .wrapper.bg-white,
[data-theme="dark"] .bg-white,
body.dark-mode-active .bg-white,
[data-theme="dark"] section.wrapper.bg-white,
body.dark-mode-active section.wrapper.bg-white {
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
}

/* Couleurs de fond spécifiques */
[data-theme="dark"] .bg-pale-yellow,
body.dark-mode-active .bg-pale-yellow,
[data-theme="dark"] .bg-pale-red,
body.dark-mode-active .bg-pale-red,
[data-theme="dark"] .bg-pale-leaf,
body.dark-mode-active .bg-pale-leaf,
[data-theme="dark"] .bg-pale-primary,
body.dark-mode-active .bg-pale-primary {
  background-color: var(--dm-bg-secondary) !important;
}

/* Navbar */
[data-theme="dark"] .navbar,
body.dark-mode-active .navbar {
  background-color: var(--dm-navbar-bg) !important;
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
body.dark-mode-active .navbar-light .navbar-nav .nav-link {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus,
body.dark-mode-active .navbar-light .navbar-nav .nav-link:hover,
body.dark-mode-active .navbar-light .navbar-nav .nav-link:focus {
  color: #5ea659 !important;
}

/* Cards */
[data-theme="dark"] .card,
body.dark-mode-active .card {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border-color) !important;
}

[data-theme="dark"] .card-body,
body.dark-mode-active .card-body {
  background-color: var(--dm-card-bg) !important;
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .card-footer,
body.dark-mode-active .card-footer {
  background-color: var(--dm-bg-secondary) !important;
  border-top-color: var(--dm-border-color) !important;
}

[data-theme="dark"] .card.plain,
body.dark-mode-active .card.plain {
  background-color: transparent !important;
}

/* Dropdown */
[data-theme="dark"] .dropdown-menu,
body.dark-mode-active .dropdown-menu {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border-color) !important;
}

[data-theme="dark"] .dropdown-item,
body.dark-mode-active .dropdown-item {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
body.dark-mode-active .dropdown-item:hover,
body.dark-mode-active .dropdown-item:focus {
  background-color: var(--dm-bg-secondary) !important;
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .dropdown-header,
body.dark-mode-active .dropdown-header {
  color: var(--dm-text-secondary) !important;
}

/* Textes */
[data-theme="dark"] .text-muted,
body.dark-mode-active .text-muted {
  color: var(--dm-text-muted) !important;
}

[data-theme="dark"] .text-dark,
body.dark-mode-active .text-dark,
[data-theme="dark"] .text-reset,
body.dark-mode-active .text-reset {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .text-secondary,
body.dark-mode-active .text-secondary {
  color: var(--dm-text-secondary) !important;
}

[data-theme="dark"] .lead,
body.dark-mode-active .lead {
  color: var(--dm-text-secondary) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
body.dark-mode-active h1, body.dark-mode-active h2, body.dark-mode-active h3,
body.dark-mode-active h4, body.dark-mode-active h5, body.dark-mode-active h6 {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .display-1, [data-theme="dark"] .display-2, [data-theme="dark"] .display-3,
[data-theme="dark"] .display-4, [data-theme="dark"] .display-5, [data-theme="dark"] .display-6,
body.dark-mode-active .display-1, body.dark-mode-active .display-2, body.dark-mode-active .display-3,
body.dark-mode-active .display-4, body.dark-mode-active .display-5, body.dark-mode-active .display-6 {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] p,
body.dark-mode-active p {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .fs-15, [data-theme="dark"] .fs-16,
body.dark-mode-active .fs-15, body.dark-mode-active .fs-16 {
  color: var(--dm-text-secondary) !important;
}

/* Links */
[data-theme="dark"] .link-dark,
body.dark-mode-active .link-dark {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .link-dark:hover,
[data-theme="dark"] .link-dark:focus,
body.dark-mode-active .link-dark:hover,
body.dark-mode-active .link-dark:focus {
  color: #5ea659 !important;
}

/* Accordions */
[data-theme="dark"] .accordion-wrapper .card,
body.dark-mode-active .accordion-wrapper .card {
  background-color: var(--dm-card-bg) !important;
}

[data-theme="dark"] .accordion-wrapper .card-header,
body.dark-mode-active .accordion-wrapper .card-header {
  background-color: var(--dm-bg-secondary) !important;
}

[data-theme="dark"] .accordion-wrapper .card-header button,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .accordion-button.collapsed,
body.dark-mode-active .accordion-wrapper .card-header button,
body.dark-mode-active .accordion-button,
body.dark-mode-active .accordion-button.collapsed {
  color: var(--dm-text-primary) !important;
  background-color: var(--dm-card-bg) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed),
body.dark-mode-active .accordion-button:not(.collapsed) {
  color: #5ea659 !important;
  background-color: var(--dm-bg-secondary) !important;
}

[data-theme="dark"] .accordion-button::after,
body.dark-mode-active .accordion-button::after {
  filter: invert(1) brightness(2);
}

[data-theme="dark"] .accordion-item,
body.dark-mode-active .accordion-item {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border-color) !important;
}

[data-theme="dark"] .card.plain .card-header,
body.dark-mode-active .card.plain .card-header {
  background-color: transparent !important;
}

[data-theme="dark"] .card.plain .accordion-button,
[data-theme="dark"] .card.plain .accordion-button.collapsed,
body.dark-mode-active .card.plain .accordion-button,
body.dark-mode-active .card.plain .accordion-button.collapsed {
  background-color: transparent !important;
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .card.plain .accordion-button:not(.collapsed),
body.dark-mode-active .card.plain .accordion-button:not(.collapsed) {
  color: #5ea659 !important;
}

/* Forms */
[data-theme="dark"] .form-control,
body.dark-mode-active .form-control {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .form-control:focus,
body.dark-mode-active .form-control:focus {
  background-color: var(--dm-bg-secondary) !important;
  border-color: #5ea659 !important;
  color: var(--dm-text-primary) !important;
}

/* Shadows */
[data-theme="dark"] .shadow-sm,
body.dark-mode-active .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem var(--dm-shadow) !important;
}

[data-theme="dark"] .shadow,
body.dark-mode-active .shadow {
  box-shadow: 0 0.5rem 1rem var(--dm-shadow) !important;
}

[data-theme="dark"] .shadow-lg,
body.dark-mode-active .shadow-lg {
  box-shadow: 0 1rem 3rem var(--dm-shadow) !important;
}

/* Borders */
[data-theme="dark"] .border,
body.dark-mode-active .border {
  border-color: var(--dm-border-color) !important;
}

/* Offcanvas */
[data-theme="dark"] .offcanvas,
body.dark-mode-active .offcanvas {
  background-color: var(--dm-navbar-bg) !important;
}

[data-theme="dark"] .offcanvas .nav-link,
body.dark-mode-active .offcanvas .nav-link {
  color: var(--dm-text-primary) !important;
}

/* Modals */
[data-theme="dark"] .modal-content,
body.dark-mode-active .modal-content {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border-color) !important;
}

[data-theme="dark"] .modal-header,
body.dark-mode-active .modal-header {
  border-bottom-color: var(--dm-border-color) !important;
}

[data-theme="dark"] .modal-footer,
body.dark-mode-active .modal-footer {
  border-top-color: var(--dm-border-color) !important;
}

/* Blog */
[data-theme="dark"] .blog .post .card,
body.dark-mode-active .blog .post .card {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border-color) !important;
}

[data-theme="dark"] .post-title a,
body.dark-mode-active .post-title a {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .post-title a:hover,
body.dark-mode-active .post-title a:hover {
  color: #5ea659 !important;
}

[data-theme="dark"] .post-meta,
body.dark-mode-active .post-meta,
[data-theme="dark"] .post-meta a,
body.dark-mode-active .post-meta a {
  color: var(--dm-text-secondary) !important;
}

[data-theme="dark"] .post-meta a:hover,
body.dark-mode-active .post-meta a:hover {
  color: #5ea659 !important;
}

[data-theme="dark"] .post-content p,
body.dark-mode-active .post-content p {
  color: var(--dm-text-primary) !important;
}

/* Projects / Actions */
[data-theme="dark"] .project .card,
body.dark-mode-active .project .card,
[data-theme="dark"] .projects-overflow .card,
body.dark-mode-active .projects-overflow .card,
[data-theme="dark"] .project-details .card,
body.dark-mode-active .project-details .card {
  background-color: var(--dm-card-bg) !important;
  border: 2px solid #5ea659 !important;
}

[data-theme="dark"] .project .card:hover,
body.dark-mode-active .project .card:hover {
  border-color: #4a9649 !important;
}

/* Dividers - UNIQUEMENT en mode sombre */
[data-theme="dark"] .divider.text-light,
body.dark-mode-active .divider.text-light {
  color: #2d2d2d !important;
}

[data-theme="dark"] .divider.text-light svg path,
body.dark-mode-active .divider.text-light svg path {
  fill: #2d2d2d !important;
}

[data-theme="dark"] .divider.text-soft-primary,
body.dark-mode-active .divider.text-soft-primary {
  color: #1e3a1e !important;
}

[data-theme="dark"] .divider.text-soft-primary svg path,
body.dark-mode-active .divider.text-soft-primary svg path {
  fill: #1e3a1e !important;
}

/* Tables */
[data-theme="dark"] .table,
body.dark-mode-active .table {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
body.dark-mode-active .table th,
body.dark-mode-active .table td {
  border-color: var(--dm-border-color) !important;
}

/* List groups */
[data-theme="dark"] .list-group-item,
body.dark-mode-active .list-group-item {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-primary) !important;
}

/* Progress */
[data-theme="dark"] .progress-wrap,
body.dark-mode-active .progress-wrap {
  background-color: var(--dm-card-bg) !important;
  border-color: var(--dm-border-color) !important;
}

[data-theme="dark"] .progress-list li,
body.dark-mode-active .progress-list li {
  color: var(--dm-text-primary) !important;
}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb,
body.dark-mode-active .breadcrumb {
  background-color: var(--dm-bg-secondary) !important;
}

[data-theme="dark"] .breadcrumb-item a,
body.dark-mode-active .breadcrumb-item a {
  color: var(--dm-text-secondary) !important;
}

/* Buttons soft */
[data-theme="dark"] .btn-soft-primary,
body.dark-mode-active .btn-soft-primary {
  background-color: var(--dm-bg-secondary) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border-color) !important;
}

[data-theme="dark"] .btn-soft-primary:hover,
body.dark-mode-active .btn-soft-primary:hover {
  background-color: #5ea659 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .icon.btn-soft-primary,
body.dark-mode-active .icon.btn-soft-primary {
  background-color: var(--dm-bg-secondary) !important;
  color: #5ea659 !important;
}

/* List unstyled */
[data-theme="dark"] .list-unstyled li h5,
body.dark-mode-active .list-unstyled li h5 {
  color: var(--dm-text-primary) !important;
}

[data-theme="dark"] .list-unstyled li p,
body.dark-mode-active .list-unstyled li p {
  color: var(--dm-text-secondary) !important;
}

/* ========================================
   TOGGLE BUTTON (s'applique dans les deux modes)
   ======================================== */

.dark-mode-toggle {
  background: transparent;
  border: 1px solid #dee2e6;
  border-radius: 50px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 10px;
}

[data-theme="dark"] .dark-mode-toggle,
body.dark-mode-active .dark-mode-toggle {
  border-color: #404040;
}

.dark-mode-toggle:hover {
  transform: scale(1.05);
}

[data-theme="dark"] .dark-mode-toggle:hover,
body.dark-mode-active .dark-mode-toggle:hover {
  background: #2d2d2d;
}

.dark-mode-toggle i {
  font-size: 18px;
  color: #343a40;
  transition: color 0.3s ease;
}

[data-theme="dark"] .dark-mode-toggle i,
body.dark-mode-active .dark-mode-toggle i {
  color: #ffffff;
}

[data-theme="dark"] .dark-mode-toggle i.sun-icon,
body.dark-mode-active .dark-mode-toggle i.sun-icon {
  display: inline;
}

[data-theme="dark"] .dark-mode-toggle i.moon-icon,
body.dark-mode-active .dark-mode-toggle i.moon-icon {
  display: none;
}

.dark-mode-toggle i.sun-icon {
  display: none;
}

.dark-mode-toggle i.moon-icon {
  display: inline;
}

/* ========================================
   MEDIA QUERIES
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-color: #1a1a1a;
    color: #ffffff;
  }
}

@media (max-width: 768px) {
  .dark-mode-toggle {
    padding: 6px 10px;
    margin-left: 5px;
  }
  
  .dark-mode-toggle i {
    font-size: 16px;
  }
}

/* ========================================
   LOGOS LIGHT/DARK MODE
   ======================================== */

.logo-light-mode {
  display: block;
}

.logo-dark-mode {
  display: none;
}

[data-theme="dark"] .logo-light-mode,
body.dark-mode-active .logo-light-mode {
  display: none !important;
}

[data-theme="dark"] .logo-dark-mode,
body.dark-mode-active .logo-dark-mode {
  display: block !important;
}

/* Navbar logo icon arrondie */
.navbar-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar-logo-icon img {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  display: block;
}

/* Badge "nouveau" avec dégradé multicolore */
.badge-nouveau {
  display: inline-block;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 4px;
  border-radius: 8px;
  background: linear-gradient(90deg, #5ea659, #3498db, #9b59b6, #e74c3c, #f39c12, #5ea659);
  background-size: 200% 100%;
  color: #ffffff;
  margin-left: 4px;
  vertical-align: middle;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}