/* VJR 221 -- Bascule vue grille/liste (annuaire) + utilitaire "fact-box"
 * (synthese design 29/08/2026). Additif pur : charte Teranga (tokens de
 * assets/css/vjr221.css), n'ecrase aucune regle existante.
 */

/* --- Bascule vue grille / liste --- */
.vjr-directory-resultsbar{flex-wrap:wrap;row-gap:var(--sp-3)}
.vjr-directory-resultsbar__info{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}

.vjr-view-toggle{display:inline-flex;align-items:center;gap:2px;background:var(--n-100);border:1px solid var(--n-300);border-radius:var(--radius-md);padding:3px;margin-left:auto}
.vjr-view-toggle__btn{display:inline-flex;align-items:center;gap:.4rem;border:none;background:transparent;color:var(--text-secondary);font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;padding:.4rem .7rem;border-radius:var(--radius-sm);cursor:pointer;line-height:1;transition:background var(--transition-fast),color var(--transition-fast)}
.vjr-view-toggle__btn svg{width:16px;height:16px;flex-shrink:0;display:block}
.vjr-view-toggle__btn:hover{color:var(--vjr-savane)}
.vjr-view-toggle__btn.is-active{background:#fff;color:var(--vjr-savane);box-shadow:var(--shadow-sm)}
.vjr-view-toggle__btn span{white-space:nowrap}
@media (max-width:480px){
  .vjr-view-toggle__btn span{display:none}
}

/* Vue liste : cartes en ligne (photo + contenu cote a cote) */
.vjr-articles-grid--list{display:flex;flex-direction:column;gap:var(--sp-4)}
.vjr-articles-grid--list .vjr-article-card{display:flex;flex-direction:row;align-items:stretch}
.vjr-articles-grid--list .vjr-article-card:hover{transform:none}
.vjr-articles-grid--list .vjr-article-card__img-link{width:220px;flex-shrink:0}
.vjr-articles-grid--list .vjr-article-card__img-link img,
.vjr-articles-grid--list .vjr-article-card__img{width:100%;height:100%;min-height:150px;object-fit:cover}
.vjr-articles-grid--list .vjr-article-card__body{flex:1;padding:var(--sp-5)}
@media (max-width:640px){
  .vjr-articles-grid--list .vjr-article-card{flex-direction:column}
  .vjr-articles-grid--list .vjr-article-card__img-link{width:100%;height:160px}
}

/* --- Utilitaire "Le saviez-vous ?" pour les fiches encyclopedie --- */
.vjr-fact-box{background:var(--vjr-sable);border-left:4px solid var(--vjr-safran);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--sp-4) var(--sp-5);margin:var(--sp-6) 0;font-family:var(--font-body);font-size:var(--text-base);line-height:1.7;color:var(--text)}
.vjr-fact-box__label{font-family:var(--font-display);color:var(--vjr-terre);display:block;margin-bottom:.3rem;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em;font-weight:700}