:root {
  --site-night: #020814;
  --site-night-mid: #031022;
  --site-night-deep: #010611;
  --card-night-top: #071a32;
  --card-night-bottom: #030d20;
  --card-night-border: rgba(54, 142, 205, 0.2);
  --card-night-glow: rgba(17, 153, 238, 0.09);
}

/* Un seul fond continu sur toute la page, inspiré de la palette de la carte. */
body.index-page {
  background-color: var(--site-night) !important;
  background-image:
    radial-gradient(circle at 72% 8%, rgba(8, 62, 111, 0.28), transparent 34%),
    radial-gradient(circle at 12% 58%, rgba(4, 40, 78, 0.18), transparent 32%),
    linear-gradient(135deg, var(--site-night) 0%, var(--site-night-mid) 58%, var(--site-night-deep) 100%) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.index-page .main,
.index-page .main > .section,
.index-page .main > .light-background,
.index-page #hero,
.index-page #about,
.index-page #services,
.index-page #steps,
.index-page #portfolio,
.index-page #team,
.index-page #faq,
.index-page #contact {
  background-color: transparent !important;
  background-image: none !important;
}

/* Cartes bleu nuit plus profondes, sans reproduire l'aspect d'une carte de visite. */
.index-page .feature-item,
.index-page .testimonial-item,
.index-page .service-card,
.index-page .step-item,
.index-page .portfolio-entry,
.index-page .team-member,
.index-page .team-modal-content,
.index-page .faq-item,
.index-page .contact-info-box,
.index-page .contact-form-wrapper {
  background:
    radial-gradient(circle at 92% 6%, var(--card-night-glow), transparent 38%),
    linear-gradient(145deg, rgba(7, 26, 50, 0.98) 0%, rgba(3, 13, 32, 0.99) 100%) !important;
  border: 1px solid var(--card-night-border) !important;
  box-shadow:
    0 18px 42px rgba(0, 2, 10, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.index-page .step-item {
  border-top: 4px solid #1199ee !important;
}

/* Les blocs éditoriaux secondaires suivent exactement la même famille de surfaces. */
.index-page .service-header,
.index-page .team > .container.mb-5 .col-lg-10,
.index-page .hero .description p {
  background:
    linear-gradient(145deg, rgba(7, 26, 50, 0.76), rgba(3, 13, 32, 0.84)) !important;
  border-color: rgba(54, 142, 205, 0.18) !important;
}

.index-page .portfolio-filters li:not(.filter-active),
.index-page .input-with-icon .form-control {
  background: linear-gradient(145deg, rgba(7, 26, 50, 0.9), rgba(3, 13, 32, 0.94)) !important;
  border-color: rgba(54, 142, 205, 0.18) !important;
}

.index-page .footer {
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 991px) {
  body.index-page {
    background-image:
      radial-gradient(circle at 84% 5%, rgba(8, 62, 111, 0.24), transparent 25%),
      linear-gradient(155deg, var(--site-night) 0%, var(--site-night-mid) 55%, var(--site-night-deep) 100%) !important;
  }

  .index-page .feature-item,
  .index-page .testimonial-item,
  .index-page .service-card,
  .index-page .step-item,
  .index-page .portfolio-entry,
  .index-page .team-member,
  .index-page .faq-item,
  .index-page .contact-info-box,
  .index-page .contact-form-wrapper {
    background:
      radial-gradient(circle at 96% 4%, rgba(17, 153, 238, 0.075), transparent 34%),
      linear-gradient(150deg, rgba(7, 25, 48, 0.99), rgba(3, 12, 29, 0.99)) !important;
    box-shadow:
      0 14px 30px rgba(0, 2, 10, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
  }
}