html[data-theme="light"] {
    --pst-color-primary: rgb(87, 154, 202);
    --pst-color-secondary: rgb(202, 135, 87);
}

html[data-theme="dark"] {
    --pst-color-primary: rgb(87, 154, 202);
    --pst-color-secondary: rgb(202, 135, 87);
}

.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgb(87 154 202 / 30%) !important;
}



/* adaptation des polices de titre dans les pages md et dans les menus */
h1 {
  font-size: 1.2rem; /* par défaut souvent 2.5rem ou plus */
}
h2 {
  font-size: 1.0rem;
}
h3 {
  font-size: 0.8rem;
}
h4 {
  font-size: 0.7rem;
}

/* Taille des éléments dans l'arborescence (menu + sommaire) */
.VPSidebar .group .title,
.VPSidebar .menu .item .text,
.VPDocOutline .outline-link {
  font-size: 0.9rem !important;
  line-height: 1.4;
}

/* Facultatif : un peu plus petit pour les sous-niveaux */
.VPDocOutline .outline-link.nested {
  font-size: 0.85rem !important;
}







/* test boites */

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.card-container > .card {
  flex: 0 0 30%;        /* 3 cartes sur grand écran */
  box-sizing: border-box;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background: #fff;
  overflow: hidden;
}

.card-header {
  padding: 0.75rem 1rem;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px solid #dee2e6;
}

.card-link {
  color: inherit;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

.card-body {
  padding: 1rem;
  text-align: center;
}

.card-footer-link {
  margin-top: 0.5rem;
  font-weight: 500;
  color: #0d6efd; /* bleu lien */
}

.img-responsive {
  width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem auto;
}

@media (max-width: 900px) {
  .card-container > .card { flex: 0 0 45%; }
}

@media (max-width: 600px) {
  .card-container > .card { flex: 0 0 100%; }
}





/*
.card-container {
  display: flex;
  flex-wrap: wrap;        /* les cartes passent à la ligne si l'écran est petit 
  gap: 1rem;              /* espace entre les cartes 
  justify-content: center; /* centrer horizontalement 
}

.card-container > .card {
  flex: 0 0 30%;          /* 3 cartes sur grand écran 
  box-sizing: border-box;
  padding: 0.5rem;
}

@media (max-width: 900px) {
  .card-container > .card {
    flex: 0 0 45%;        /* 2 cartes sur tablette 
  }
}

@media (max-width: 600px) {
  .card-container > .card {
    flex: 0 0 100%;       /* 1 carte sur smartphone 
  }
}

.img-responsive {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
*/