/* ==========================================================
   ValorisIT — style.css
   Charte graphique & surcharges Bootstrap 5.3
   ========================================================== */

/* Variables */
:root {
  --vit-primary : #1A5CFF;
  --vit-dark    : #0D1B2A;
  --vit-accent  : #C9A84C;
  --vit-bg-alt  : #F0F4FF;
  --vit-text-muted: #6C757D;
  --vit-radius  : 12px;
  --vit-shadow  : 0 4px 20px rgba(26,92,255,0.08);
  font-family   : 'Inter', sans-serif;
}

/* Typographie globale */
body { font-family: 'Inter', sans-serif; color: #212529; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; }

/* Navbar */
#mainNavbar { transition: background-color 0.3s ease, box-shadow 0.3s ease; }
#mainNavbar .nav-link {
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s;
}
#mainNavbar.bg-transparent .nav-link { color: rgba(255,255,255,0.85); }
#mainNavbar.bg-transparent .nav-link:hover { color: #fff; }
#mainNavbar.bg-dark .nav-link { color: rgba(255,255,255,0.75); }
#mainNavbar.bg-dark .nav-link:hover { color: #fff; }

/* Logo — rendu lisible sur fond sombre */
.navbar-brand img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}
#mainNavbar.bg-transparent .navbar-brand img {
  filter: brightness(0) invert(1);
}
footer .logo-footer {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* Hero */
.hero-section {
  background: linear-gradient(135deg, #0D1B2A 0%, #0A2456 60%, #1A3A7A 100%);
  padding-top: 100px;
}

/* Sections alternées */
.bg-alt { background-color: var(--vit-bg-alt); }

/* Cards services */
.card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(26,92,255,0.12) !important;
}

/* Icône rond */
.icon-box {
  width: 72px;
  height: 72px;
  transition: background-color 0.2s;
}

/* Séparateur accent */
.separator-accent {
  border: none;
  height: 4px;
  width: 60px;
  background: var(--vit-primary);
  border-radius: 2px;
  margin: 0 auto 2rem;
}

/* Formulaire contact (sur fond sombre) */
.contact-section .form-control,
.contact-section .form-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  transition: border-color 0.2s, background 0.2s;
}
.contact-section .form-control:focus,
.contact-section .form-select:focus {
  background: rgba(255,255,255,0.12);
  border-color: var(--vit-primary);
  box-shadow: 0 0 0 0.2rem rgba(26,92,255,0.25);
  color: #fff;
}
.contact-section .form-control::placeholder { color: rgba(255,255,255,0.4); }
.contact-section select option { background: #0D1B2A; color: #fff; }
.contact-section label { color: rgba(255,255,255,0.6); font-size: 0.85rem; }

/* Footer liens */
footer a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
footer a:hover { color: #fff; }

/* Responsive */
@media (max-width: 768px) {
  .hero-section h1 { font-size: 2rem; }
  .hero-section .lead { font-size: 1rem; }
  .hero-section .btn { width: 100%; margin-bottom: 0.75rem; }
}