/* ============================================================
   Custom CSS — Ma Documentation DevSecOps
   ============================================================ */

/* ── Hero banner sur la homepage ─────────────────────────── */
.hero-banner {
  background: linear-gradient(135deg, var(--md-primary-fg-color) 0%, #0d47a1 100%);
  color: var(--md-primary-bg-color);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin: 1.5rem 0;
  font-size: 1rem;
  line-height: 1.7;
}

.hero-banner strong {
  color: #90caf9;
}

/* ── Cards grid améliorées ────────────────────────────────── */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 2px 12px rgba(63, 81, 181, 0.15);
}

/* ── Code blocks — JetBrains Mono ────────────────────────── */
.md-typeset code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.85em;
}

/* ── Admonitions custom ───────────────────────────────────── */
.md-typeset .admonition.devsecops,
.md-typeset details.devsecops {
  border-color: #7c4dff;
}
.md-typeset .devsecops > .admonition-title,
.md-typeset .devsecops > summary {
  background-color: rgba(124, 77, 255, 0.1);
}
.md-typeset .devsecops > .admonition-title::before,
.md-typeset .devsecops > summary::before {
  background-color: #7c4dff;
  -webkit-mask-image: var(--md-admonition-icon--tip);
          mask-image: var(--md-admonition-icon--tip);
}

/* ── Navigation tabs ─────────────────────────────────────── */
.md-tabs {
  background-color: var(--md-primary-fg-color--dark);
}

/* ── Sidebar — section titles plus visibles ──────────────── */
.md-nav__title {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

/* ── Table of contents — ligne active colorée ────────────── */
.md-nav__link--active {
  color: var(--md-accent-fg-color) !important;
  font-weight: 600;
}

/* ── Fil d'Ariane ────────────────────────────────────────── */
.md-header__topic + .md-header__topic {
  opacity: 0.7;
}

/* ── Footer ──────────────────────────────────────────────── */
.md-footer-meta {
  background-color: var(--md-primary-fg-color--dark);
}

/* ── Responsive — mobile ─────────────────────────────────── */
@media screen and (max-width: 76.1875em) {
  .hero-banner {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
  }
}