/* ===================================================
   🌙 Mode sombre global (activé via .dark-mode)
=================================================== */
.dark-mode body {
  background-color: #121212;
  color: #e0e0e0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.dark-mode .section-contained,
.dark-mode .section-full {
  background-color: #181818;
}

.dark-mode .card {
  background-color: #1e1e1e;
  border-color: #2c2c2c;
  color: #f1f1f1;
}

/* ===================================================
   🖼️ Logos conditionnels
=================================================== */
.logo-light,
.logo-dark {
  display: none;
  max-height: 60px;
  height: auto;
  vertical-align: middle;
}

.dark-mode .logo-light {
  display: none !important;
}

.dark-mode .logo-dark {
  display: inline-block !important;
}

/* ===================================================
   🔗 Navigation & bandeau promo
=================================================== */
.dark-mode .top-banner {
  background: linear-gradient(270deg, #1a73e8, #1669c1, #0d47a1);
  color: #fff;
}

.dark-mode .navbar,
.dark-mode footer {
  background-color: #1a1a1a !important;
  color: #ccc !important;
}

.dark-mode .navbar .menu-btn,
.dark-mode footer .menu-btn,
.dark-mode footer a {
  color: #ccc !important;
}

.dark-mode .navbar .menu-btn:hover,
.dark-mode footer .menu-btn:hover,
.dark-mode footer a:hover {
  color: #fff !important;
}

/* ===================================================
   🎨 Boutons
=================================================== */
.dark-mode .btn-main {
  background-color: #1a73e8;
  color: #fff;
  border: none;
}

.dark-mode .btn-main:hover {
  background-color: #1669c1;
}

.dark-mode .btn-outline-main {
  border: 1px solid #1a73e8;
  color: #1a73e8;
  background-color: transparent;
}

.dark-mode .btn-outline-main:hover {
  background-color: #1a73e8;
  color: #fff;
}

/* ===================================================
   🏞️ Hero Banner
=================================================== */
.dark-mode .hero-banner {
  background: linear-gradient(to bottom, #1a1a1a, #121212);
  color: #fff;
}

.dark-mode .hero-banner p {
  color: #ccc;
}

.dark-mode .hero-banner .btn-main {
  background-color: #1a73e8;
  color: #fff;
}

.dark-mode .hero-banner .btn-main:hover {
  background-color: #1669c1;
}

/* ===================================================
   🔚 Footer nettoyage
=================================================== */
.dark-mode footer {
  border-top: none !important;
}

.dark-mode footer .section-contained,
.dark-mode footer .row {
  background-color: transparent !important;
  border: none !important;
}

.dark-mode footer::before,
.dark-mode footer::after {
  display: none !important;
}

.dark-mode footer {
  background-color: #121212 !important;
  color: #ccc !important;
  border-top: none !important;
  box-shadow: none !important;
}

.dark-mode footer::before,
.dark-mode footer::after,
.dark-mode footer .section-contained::before,
.dark-mode footer .section-contained::after {
  display: none !important;
  content: none !important;
}

.dark-mode footer .btn-main {
  background-color: #1a73e8;
  color: #fff;
}

.dark-mode footer .btn-main:hover {
  background-color: #1669c1;
}