html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.portfolio-card {
  background: #fff;
  transition: box-shadow 0.3s;
  overflow: hidden;
  position: relative;
}
.portfolio-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.image-container {
  position: relative;
  overflow: hidden;
}
.image-container img {
  transition: transform 0.3s;
}
.portfolio-card:hover .image-container img {
  transform: scale(1.07);
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 34, 40, 0.75);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}
.portfolio-card:hover .overlay {
  opacity: 1;
}
.overlay-content {
  gap: 1.5rem;
}
.overlay-content a {
  color: #fff;
  font-size: 1.7rem;
  transition: color 0.2s;
}
.overlay-content a:hover {
  color: #0d6efd;
}
.category-btn {
  background: #fff;
  border: 1.5px solid #dee2e6;
  color: #343a40;
  padding: 0.45rem 1.1rem;
  border-radius: 1.5rem;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.18s;
  cursor: pointer;
  margin-bottom: 0.5rem;
  box-shadow: none;
}

.category-btn:hover,
.category-btn:focus {
  background: #f4f8ff;
  color: #0d6efd;
  border-color: #b6d4fe;
  outline: none;
}

.category-btn.filter-active {
  background: #e7f1ff;
  color: #0d6efd;
  border-color: #0d6efd;
  box-shadow: 0 2px 8px rgba(13,110,253,0.08);
}

.empty-category-alert {
  max-width: 420px;
  background: #f8fafc;
  border: 1.5px dashed #b6d4fe;
  color: #0d6efd;
  padding: 2rem 1rem;
  border-radius: 1.5rem;
  box-shadow: 0 2px 12px rgba(13,110,253,0.05);
  font-size: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.empty-category-alert i {
  font-size: 2.2rem;
  color: #b6d4fe;
  margin-bottom: 0.5rem;
}

/* Dark mode variables */
:root {
  /* Arrière-plans */
  --dark-background-color: #0e1116;  /* fond principal bleu-noir profond */
  --dark-surface-color: #1b1f27;     /* surface neutre légèrement teintée */
  --dark-surface-light: #252b36;     /* surface claire avec teinte bleue douce */

  /* Texte */
  --dark-default-color: #ffffff;     /* gris clair chaud pour confort */
  --dark-heading-color: #f9fafb;     /* blanc doux pour les titres */
  --dark-muted-text: #a5adba;        /* gris bleuté pour le texte secondaire */

  /* Accent (turquoise électrique pour un style moderne) */
  --dark-accent-color: #00d4b4;      /* vert-turquoise lumineux */
  --dark-accent-hover: #5fffe0;      /* version plus claire au survol */

  /* Bordures et séparateurs */
  --dark-border-color: #2d3340;      /* gris-bleu doux */

  /* Ombres */
  --dark-shadow-color: rgba(0, 0, 0, 0.5); /* ombres plus profondes */
}


/* Dark mode styles */
body.dark-mode {
  background-color: var(--dark-background-color) !important;
  color: var(--dark-default-color) !important;
}

body.dark-mode a {
  color: var(--dark-accent-color) !important;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
  color: var(--dark-accent-hover) !important;
}

body.dark-mode .section,
body.dark-mode .container,
body.dark-mode .form-input {
  background-color: var(--dark-surface-color) !important;
  color: var(--dark-default-color) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-mode .portfolio-card {
  background-color: var(--dark-surface-color) !important;
  box-shadow: 0 4px 12px var(--dark-shadow-color);
  color: var(--dark-default-color);
  border: 1px solid var(--dark-border-color);
}

body.dark-mode .portfolio-card:hover {
  box-shadow: 0 8px 24px var(--dark-shadow-color);
  border-color: var(--dark-accent-color);
}

body.dark-mode .portfolio-card .overlay {
  background: rgba(20, 20, 20, 0.9);
}

body.dark-mode .category-btn {
  background-color: var(--dark-surface-color) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-default-color) !important;
  box-shadow: none !important;
}

body.dark-mode .category-btn:hover,
body.dark-mode .category-btn:focus {
  background-color: var(--dark-surface-light) !important;
  color: var(--dark-accent-color) !important;
  border-color: var(--dark-accent-color) !important;
  box-shadow: 0 0 8px var(--dark-accent-color);
}

body.dark-mode .category-btn.filter-active {
  background-color: var(--dark-accent-color) !important;
  color: var(--dark-background-color) !important;
  border-color: var(--dark-accent-color) !important;
  box-shadow: 0 0 12px var(--dark-accent-color);
}

body.dark-mode .empty-category-alert {
  background-color: var(--dark-surface-color) !important;
  border-color: var(--dark-accent-color) !important;
  color: var(--dark-accent-color) !important;
  box-shadow: 0 0 12px var(--dark-accent-color);
}

body.dark-mode .empty-category-alert i {
  color: var(--dark-accent-color) !important;
}

/* Scroll top button */
body.dark-mode .scroll-top {
  background-color: var(--dark-accent-color) !important;
}

body.dark-mode .scroll-top i {
  color: var(--dark-background-color) !important;
}

/* Footer */
body.dark-mode .footer {
  background-color: var(--dark-surface-color) !important;
  color: var(--dark-default-color) !important;
  box-shadow: 0 4px 12px var(--dark-shadow-color);
}

body.dark-mode .footer .social-links a {
  border-color: var(--dark-border-color) !important;
  color: var(--dark-default-color) !important;
}

body.dark-mode .footer .social-links a:hover {
  color: var(--dark-accent-color) !important;
  border-color: var(--dark-accent-color) !important;
}

/* Buttons */
body.dark-mode .btn-ghost {
  border-color: var(--dark-border-color) !important;
  color: var(--dark-default-color) !important;
  background-color: var(--dark-surface-color) !important;
}

body.dark-mode .btn-ghost:hover,
body.dark-mode .btn-ghost:focus {
  border-color: var(--dark-accent-color) !important;
  color: var(--dark-accent-color) !important;
  box-shadow: 0 0 12px var(--dark-accent-color);
  background-color: var(--dark-surface-color) !important;
}

/* Inputs and form fields */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--dark-surface-color) !important;
  color: var(--dark-default-color) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode select::placeholder {
  color: color-mix(in srgb, var(--dark-default-color), transparent 60%) !important;
}

/* Overlays */
body.dark-mode .overlay {
  background: rgba(20, 20, 20, 0.9) !important;
}

/* Navigation */
body.dark-mode .header {
  background-color: var(--dark-surface-color) !important;
  color: var(--dark-default-color) !important;
}

body.dark-mode .navmenu {
  background-color: var(--dark-surface-color) !important;
}

body.dark-mode .navmenu a {
  color: var(--dark-default-color) !important;
}

body.dark-mode .navmenu a:hover,
body.dark-mode .navmenu a.active {
  color: var(--dark-accent-color) !important;
}

/* Hero section */
body.dark-mode .hero {
  background-color: var(--dark-background-color) !important;
}

body.dark-mode .hero .intro .lead {
  color: color-mix(in srgb, var(--dark-default-color), transparent 20%) !important;
}

/* Services */
body.dark-mode .services .service-item {
  background-color: var(--dark-surface-color) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-mode .services .service-item .service-icon {
  background-color: var(--dark-surface-light) !important;
}

body.dark-mode .services .service-item .service-icon i {
  color: var(--dark-accent-color) !important;
}

/* Skills */
body.dark-mode .skills .skill-block {
  background-color: var(--dark-surface-color) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-mode .skills .soft-card {
  background-color: var(--dark-surface-color) !important;
  border-color: var(--dark-border-color) !important;
}

/* Resume */
body.dark-mode .resume .resume-navigation {
  border-color: var(--dark-border-color) !important;
}

body.dark-mode .resume .resume-navigation .nav-item .nav-link {
  color: var(--dark-default-color) !important;
}

body.dark-mode .resume .resume-navigation .nav-item .nav-link:hover,
body.dark-mode .resume .resume-navigation .nav-item .nav-link.active {
  color: var(--dark-accent-color) !important;
}

body.dark-mode .resume .experience-grid .experience-item {
  border-color: var(--dark-border-color) !important;
}

body.dark-mode .resume .education-list .education-entry {
  border-color: var(--dark-border-color) !important;
}

body.dark-mode .resume .skills-categories .skill-category .skill-tags .skill-tag {
  background-color: var(--dark-surface-color) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-default-color) !important;
}

body.dark-mode .resume .skills-categories .skill-category .skill-tags .skill-tag:hover {
  border-color: var(--dark-accent-color) !important;
  color: var(--dark-accent-color) !important;
}

/* Portfolio */
body.dark-mode .portfolio .portfolio-filters::after {
  background: var(--dark-border-color) !important;
}

body.dark-mode .portfolio .portfolio-filters li {
  color: color-mix(in srgb, var(--dark-default-color), transparent 40%) !important;
}

body.dark-mode .portfolio .portfolio-filters li:hover {
  color: var(--dark-default-color) !important;
}

body.dark-mode .portfolio .portfolio-filters li.filter-active {
  color: var(--dark-default-color) !important;
}

body.dark-mode .portfolio .portfolio-filters li.filter-active::after {
  background: var(--dark-accent-color) !important;
}

body.dark-mode .portfolio .portfolio-card {
  background-color: var(--dark-surface-color) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-mode .portfolio .portfolio-card .content h3 {
  color: var(--dark-heading-color) !important;
}

body.dark-mode .portfolio .portfolio-card .content p {
  color: color-mix(in srgb, var(--dark-default-color), transparent 40%) !important;
}

/* FAQ */
body.dark-mode .faq .faq-item {
  border-color: var(--dark-border-color) !important;
}

body.dark-mode .faq .faq-item .faq-header .faq-number {
  color: color-mix(in srgb, var(--dark-default-color), transparent 50%) !important;
}

body.dark-mode .faq .faq-item .faq-header h4 {
  color: var(--dark-heading-color) !important;
}

body.dark-mode .faq .faq-item .faq-header .faq-toggle {
  color: color-mix(in srgb, var(--dark-default-color), transparent 40%) !important;
}

body.dark-mode .faq .faq-item .faq-content .content-inner p {
  color: color-mix(in srgb, var(--dark-default-color), transparent 25%) !important;
}

/* Contact */
body.dark-mode .contact .contact-form-container .contact-form .form-field .form-input {
  background-color: transparent !important;

/* Pour éviter le chevauchement sur petits écrans */
@media (max-width: 991px) {
  #navmenu ul {
    flex-direction: column;
    align-items: flex-start;
  }
  .gap-2 { gap: 0.5rem !important; }
}

.header-actions {
  order: 3;
}
#navmenu {
  order: 2;
}
.logo {
  order: 1;
}
@media (max-width: 991px) {
  .header-actions {
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0.5rem;
    gap: 0.25rem !important;
  }
}