:root {
  --card-light-blue: #1199ee;
  --card-hover-orange: #f8b12e;
  --card-deep-ink: #07182d;
}

/* Titres et libellés qui étaient orange : bleu clair au repos. */
.index-page .hero h1 .highlight,
.index-page .description-title,
.index-page .about-content .lead,
.index-page .service-card h3 span,
.index-page .entry-meta,
.index-page .phrase-couleur-orange,
.index-page .team-member span,
.index-page .modal-role,
.index-page .copyright strong,
.index-page .header .brand-creative,
.index-page .header .brand-services span {
  color: var(--card-light-blue) !important;
  -webkit-text-fill-color: var(--card-light-blue) !important;
  transition: color 0.25s ease, -webkit-text-fill-color 0.25s ease !important;
}

/* Icônes qui étaient orange : bleu clair au repos. */
.index-page .feature-item i,
.index-page .testimonial-item .rating i,
.index-page .service-icon i,
.index-page .step-icon,
.index-page .faq-active .faq-toggle,
.index-page .contact-info-box .icon-box {
  color: var(--card-light-blue) !important;
  transition: color 0.25s ease, background-color 0.25s ease !important;
}

.index-page .contact-info-box .icon-box {
  background: rgba(17, 153, 238, 0.12) !important;
}

/* Boutons qui étaient orange : bleu clair au repos. */
.index-page .cta-button .btn,
.index-page .btn-submit,
.index-page .slider-next,
.index-page .slider-prev,
.index-page .scroll-top,
.index-page .header .nav-list li:last-child .nav-link,
.index-page .portfolio-filters li.filter-active {
  color: #ffffff !important;
  background: var(--card-light-blue) !important;
  border-color: var(--card-light-blue) !important;
  box-shadow: 0 9px 22px rgba(17, 153, 238, 0.22) !important;
}

.index-page .btn-custom-outline {
  color: var(--card-light-blue) !important;
  background: transparent !important;
  border-color: var(--card-light-blue) !important;
}

/* Survol orange, comme sur la carte de visite. */
.index-page .hero h1:hover .highlight,
.index-page .section-title:hover .description-title,
.index-page .about-content:hover .lead,
.index-page .service-card:hover h3 span,
.index-page .portfolio-entry:hover .entry-meta,
.index-page .phrase-couleur-orange:hover,
.index-page .team-member:hover span,
.index-page .header .brand-logo:hover .brand-creative,
.index-page .header .brand-logo:hover .brand-services span,
.index-page .feature-item:hover i,
.index-page .testimonial-item:hover .rating i,
.index-page .service-card:hover .service-icon i,
.index-page .step-item:hover .step-icon,
.index-page .faq-item:hover .faq-toggle,
.index-page .contact-info-box:hover .icon-box {
  color: var(--card-hover-orange) !important;
  -webkit-text-fill-color: var(--card-hover-orange) !important;
}

.index-page .contact-info-box:hover .icon-box {
  background: rgba(248, 177, 46, 0.12) !important;
}

.index-page .cta-button .btn:hover,
.index-page .btn-submit:hover,
.index-page .slider-next:hover,
.index-page .slider-prev:hover,
.index-page .scroll-top:hover,
.index-page .header .nav-list li:last-child .nav-link:hover,
.index-page .portfolio-filters li:hover,
.index-page .btn-custom-outline:hover {
  color: #ffffff !important;
  background: var(--card-hover-orange) !important;
  border-color: var(--card-hover-orange) !important;
  box-shadow: 0 10px 24px rgba(248, 177, 46, 0.25) !important;
}

@media (max-width: 1199px) {
  .index-page .mobile-nav-toggle,
  .index-page .mobile-nav-toggle[aria-expanded="true"] {
    color: #ffffff !important;
    background: var(--card-light-blue) !important;
    border-color: var(--card-light-blue) !important;
  }

  .index-page .mobile-nav-toggle:hover,
  .index-page .mobile-nav-toggle[aria-expanded="true"]:hover {
    color: #ffffff !important;
    background: var(--card-hover-orange) !important;
    border-color: var(--card-hover-orange) !important;
  }
}