.jb-articles { --jb-articles-vert: #0F5446; --jb-articles-mauve: #803492; --jb-articles-beige: #F5F0E4; --jb-articles-police: 'Atkinson Hyperlegible', sans-serif; --jb-articles-ecart: 26px; --jb-articles-rayon: 28px; display: grid; grid-template-columns: repeat(var(--jb-articles-colonnes, 3), minmax(0, 1fr)); gap: var(--jb-articles-ecart); }
.jb-articles *, .jb-articles *::before, .jb-articles *::after { box-sizing: border-box; }

/* Couleur de la pastille selon la grande catégorie (slug de la version française).
   Les sous-catégories prennent la couleur de leur grande catégorie. */
.jb-articles-carte { --jb-articles-pastille: var(--jb-articles-vert); }
.jb-articles-cat--relocalisation { --jb-articles-pastille: var(--jb-articles-vert); }
.jb-articles-cat--immigration { --jb-articles-pastille: var(--jb-articles-mauve); }

.jb-articles-carte { display: flex; flex-direction: column; align-items: flex-start; padding: 39px 28px 44px 21px; background: var(--jb-articles-beige); border-radius: var(--jb-articles-rayon); color: var(--jb-articles-vert); font-family: var(--jb-articles-police); }
.jb-articles .jb-articles-pastille { margin: 0 0 17px; padding: 4px 15px; background: var(--jb-articles-pastille); border-radius: 999px; color: var(--jb-articles-beige); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 15px; }
.jb-articles .jb-articles-titre { margin: 0; padding: 0; font-family: inherit; font-size: 25px; font-weight: 700; line-height: 1.02; color: inherit; }
.jb-articles .jb-articles-titre a { color: inherit; text-decoration: none; }
.jb-articles .jb-articles-date { margin: 13px 0 0; padding: 0; font-family: inherit; font-size: 14.5px; font-style: italic; line-height: 1.2; color: inherit; }
.jb-articles .jb-articles-extrait { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--jb-articles-lignes, 3); overflow: hidden; margin: 17px 0 37px; padding: 0; font-family: inherit; font-size: 16px; line-height: 20px; color: inherit; }
.jb-articles .jb-articles-lien { margin-top: auto; font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.2; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; }
.jb-articles a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.jb-articles-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mêmes points de rupture que Divi : tablette 768-980 px, mobile sous 768 px. */
@media (max-width: 980px) { .jb-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tablette : une carte qui resterait seule sur sa rangée est cachée (3 articles → 2). */
@media (min-width: 768px) and (max-width: 980px) { .jb-articles-carte:last-child:nth-child(odd) { display: none; } }
@media (max-width: 767px) { .jb-articles { grid-template-columns: minmax(0, 1fr); } }