/* Les bonnes pratiques (modules-pages/bonnes-pratiques.mjs) — préfixe bnp-. Couleurs de la charte seulement. */
.bnp-titre { margin: .4rem 0 0; max-width: 20ch; text-wrap: balance; }
.bnp-section .bnp-quiz, .bnp-section .bnp-grille { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .bnp-section .bnp-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bnp-section .bnp-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bnp-section .bnp-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bnp-section .bnp-sous-titre { margin: 3.4rem 0 0; font: 650 clamp(1.3rem, 2.4vw, 1.7rem) var(--police-display); color: #120D16; }
.bnp-carte a { display: grid; height: 100%; border-radius: 1.4rem; overflow: hidden; background: #fff; color: #120D16; text-decoration: none; box-shadow: inset 0 0 0 1px var(--filet), 0 14px 30px -22px rgba(25, 25, 112, .5); transition: transform .2s ease, box-shadow .2s ease; }
.bnp-carte a:hover, .bnp-carte a:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 2px #001CA8, 0 18px 34px -20px rgba(25, 25, 112, .55); }
.bnp-visuel { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; background: #191970; overflow: hidden; }
.bnp-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bnp-carte a:hover .bnp-visuel img { transform: scale(1.04); }
.bnp-type { position: absolute; left: .9rem; top: .9rem; padding: .25rem .7rem; border-radius: 999px; background: #fff; color: #001CA8; font: 600 .72rem var(--police-instru); letter-spacing: .1em; text-transform: uppercase; }
.bnp-carte-quiz .bnp-type { background: #F32837; color: #fff; }
.bnp-texte { display: grid; gap: .45rem; align-content: start; padding: 1.2rem 1.3rem 1.4rem; }
.bnp-texte small { font: .7rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: #950714; }
.bnp-texte b { font: 650 1.15rem/1.3 var(--police-display); }
.bnp-texte span { line-height: 1.5; font-size: .95rem; color: var(--encre-2, #3a3540); }
.bnp-texte i { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-style: normal; font-weight: 600; color: #001CA8; }
/* Le quiz : une carte en largeur, image à gauche */
@media (min-width: 800px) {
  .bnp-carte-quiz a { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .bnp-carte-quiz .bnp-visuel { aspect-ratio: auto; min-height: 15rem; }
  .bnp-carte-quiz .bnp-texte { align-content: center; padding: 2rem; }
  .bnp-carte-quiz .bnp-texte b { font-size: 1.6rem; }
}
.bnp-liens { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: 2.4rem 0 0; }

/* Cartes des dossiers plus petites (remarque n° 113) : quatre par ligne, image plus basse, résumé sur trois lignes. */
.bnp-section .bnp-grille { gap: 1rem; }
.bnp-grille .bnp-carte a { border-radius: 1.1rem; }
.bnp-grille .bnp-visuel { aspect-ratio: 16 / 10; }
.bnp-grille .bnp-type { left: .7rem; top: .7rem; padding: .18rem .55rem; font-size: .62rem; }
.bnp-grille .bnp-texte { gap: .35rem; padding: .85rem .95rem 1rem; }
.bnp-grille .bnp-texte small { font-size: .62rem; }
.bnp-grille .bnp-texte b { font-size: .98rem; }
.bnp-grille .bnp-texte span { font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.bnp-grille .bnp-texte i { font-size: .86rem; }
@media (min-width: 800px) {
  .bnp-carte-quiz .bnp-visuel { min-height: 11rem; }
  .bnp-carte-quiz .bnp-texte { padding: 1.4rem 1.6rem; }
  .bnp-carte-quiz .bnp-texte b { font-size: 1.35rem; }
  .bnp-section .bnp-quiz { max-width: 56rem; }
}