/* === GLOBAL BACKGROUND === */
body {
  background: linear-gradient(135deg, #0b1a1f, #0f2a2e, #1a2f2b);
  color: #e6f1ef;
  font-family: "Inter", sans-serif;
}

/* Ajout d’un overlay style lumière diffuse */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255, 180, 80, 0.08), transparent 40%),
              radial-gradient(circle at 80% 70%, rgba(80, 255, 180, 0.08), transparent 40%);
  pointer-events: none;
}

/* === CARDS === */
.card {
  background: rgba(20, 35, 38, 0.55);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(120, 200, 180, 0.15);
  box-shadow: 0 0 20px rgba(0, 255, 170, 0.05);
  transition: all 0.25s ease;
}

/* Hover effet glow lantern */
.card:hover {
  transform: translateY(-3px);
  border: 1px solid rgba(255, 180, 80, 0.35);
  box-shadow: 0 0 25px rgba(255, 170, 90, 0.15),
              0 0 10px rgba(0, 255, 170, 0.1);
}

/* === HEADERS === */
h1, h2, h3 {
  color: #dffaf5;
  letter-spacing: 0.5px;
}

/* === LINKS / SERVICES === */
a {
  color: #7fffd4;
  transition: all 0.2s ease;
}

a:hover {
  color: #ffb870;
  text-shadow: 0 0 6px rgba(255, 180, 100, 0.5);
}

/* === SERVICE ROWS === */
.service {
  background: rgba(10, 20, 22, 0.4);
  border-radius: 10px;
  padding: 8px;
  transition: all 0.2s ease;
}

.service:hover {
  background: rgba(255, 180, 80, 0.08);
}

/* === STATUS / BADGES === */
.badge {
  background: rgba(0, 255, 170, 0.15);
  color: #7fffd4;
  border-radius: 8px;
}

/* === TOP BAR === */
.header {
  background: rgba(10, 20, 22, 0.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(120, 200, 180, 0.15);
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0b1a1f;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#2f6f66, #ffb870);
  border-radius: 10px;
}

/* === ICONS === */
svg {
  filter: drop-shadow(0 0 4px rgba(0, 255, 170, 0.3));
}

/* === OPTIONAL: glow animation === */
@keyframes glowPulse {
  0% { box-shadow: 0 0 10px rgba(255, 180, 80, 0.1); }
  50% { box-shadow: 0 0 20px rgba(255, 180, 80, 0.2); }
  100% { box-shadow: 0 0 10px rgba(255, 180, 80, 0.1); }
}

.card:nth-child(odd):hover {
  animation: glowPulse 2s infinite;
}

/* Cache complètement les boutons en bas */
footer,
.footer,
#footer {
  display: none !important;
}