/* ==========================================================================
   dht-blocker.fr — custom.css
   RÈGLE : uniquement des CSS variables Bootstrap et des overrides de
   sélecteurs Bootstrap EXISTANTS. Aucune nouvelle classe custom.
   Le seul ajout autorisé hors override est le @font-face (police locale).
   ========================================================================== */

/* --- Police locale Inter (self-hosted, aucun CDN) ------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

/* --- Palette & tokens (identité clean / santé / naturel) ------------------ */
:root {
  --bs-primary: #1f7a5c;            /* vert forêt = naturel + santé */
  --bs-primary-rgb: 31, 122, 92;
  --bs-secondary: #14425c;          /* bleu-nuit = sérieux / médical */
  --bs-secondary-rgb: 20, 66, 92;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1c2b2b;
  --bs-body-bg: #ffffff;
  --bs-secondary-bg: #f4f7f5;       /* sections alternées légèrement teintées */
  --bs-tertiary-bg: #eef3f0;

  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-border-color: #dfe6e2;

  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: #155a43;
  --bs-link-hover-color-rgb: 21, 90, 67;

  --bs-emphasis-color: var(--bs-secondary);
}

/* Déclinaisons subtiles utilisées par les composants (alerts, badges…) */
:root {
  --bs-primary-bg-subtle: #e4f1eb;
  --bs-primary-border-subtle: #b9dccd;
  --bs-primary-text-emphasis: #145039;
  --bs-secondary-bg-subtle: #e2ecf1;
  --bs-secondary-border-subtle: #b6ccd8;
  --bs-secondary-text-emphasis: #0e2f42;
}

/* --- Base --------------------------------------------------------------- */
body {
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--bs-secondary);
}

.lead {
  color: #3a4b4b;
}

/* --- Liens --------------------------------------------------------------- */
a {
  text-underline-offset: 0.15em;
}

/* --- Navbar -------------------------------------------------------------- */
.navbar {
  background-color: #ffffff;
  box-shadow: 0 1px 0 rgba(20, 66, 92, 0.08);
}
.navbar-brand {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bs-secondary);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.navbar-brand img {
  height: 44px;
  width: auto;
}
@media (min-width: 992px) {
  .navbar-brand img { height: 48px; }
}
.navbar .nav-link {
  font-weight: 500;
  color: #2b3b3b;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--bs-primary);
}
.dropdown-menu {
  border-color: var(--bs-border-color);
  box-shadow: 0 0.75rem 2rem rgba(20, 66, 92, 0.12);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-primary);
}

/* --- Boutons ------------------------------------------------------------- */
.btn {
  font-weight: 600;
}
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #196a4f;
  --bs-btn-hover-border-color: #196a4f;
  --bs-btn-active-bg: #145039;
  --bs-btn-active-border-color: #145039;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: #145039;
}
.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: #0e3348;
  --bs-btn-hover-border-color: #0e3348;
}

/* --- Cartes -------------------------------------------------------------- */
.card {
  border-color: var(--bs-border-color);
  box-shadow: 0 0.25rem 1rem rgba(20, 66, 92, 0.05);
}
.card .card-title {
  color: var(--bs-secondary);
}
.card-img-top {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --- Tableaux ------------------------------------------------------------ */
.table {
  --bs-table-color: var(--bs-body-color);
}
.table > thead {
  background-color: var(--bs-secondary);
  color: #ffffff;
}
.table > thead th {
  border-color: var(--bs-secondary);
  vertical-align: middle;
}

/* --- Badges -------------------------------------------------------------- */
.badge.text-bg-primary {
  background-color: var(--bs-primary) !important;
}
.badge.text-bg-secondary {
  background-color: var(--bs-secondary) !important;
}

/* --- Accordion (FAQ) ----------------------------------------------------- */
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
  --bs-accordion-active-color: var(--bs-primary);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}
.accordion-button {
  font-weight: 600;
}

/* --- Sections teintées (via .bg-body-secondary/.bg-light Bootstrap) ------ */
.bg-body-tertiary {
  background-color: var(--bs-tertiary-bg) !important;
}

/* --- Hero / display ------------------------------------------------------ */
.display-4, .display-5 {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bs-secondary);
}

/* --- Liste ancrée (sommaire) via .list-group ----------------------------- */
.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* --- Focus visible accessible ------------------------------------------- */
:focus-visible {
  outline: 3px solid rgba(var(--bs-primary-rgb), 0.4);
  outline-offset: 2px;
}

/* --- Footer -------------------------------------------------------------- */
footer.bg-dark,
footer.bg-secondary {
  background-color: var(--bs-secondary) !important;
}
footer img {
  height: 52px;
  width: auto;
}
footer a {
  color: #cfe0da;
}
footer a:hover {
  color: #ffffff;
}