/* ============================================================
   VJR 221 — Modernisation présentation fiches & rubriques (15/08/2026)
   Additif pur (aucune règle existante retirée) : progression de lecture,
   sommaire actif, lede éditorial, cartes annuaire/encyclopédie, héros de
   rubrique. S'appuie sur les tokens Teranga déjà en place (vjr221.css).
   ============================================================ */

/* ---------------------------------------------------------------
   1) Barre de progression de lecture (fiches encyclopédiques longues)
   --------------------------------------------------------------- */
.vjr-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--vjr-savane), var(--vjr-safran));
  z-index: 9999;
  transition: width .12s linear;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   2) Bouton "retour en haut"
   --------------------------------------------------------------- */
.vjr-back-to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--vjr-savane);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.18));
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
  z-index: 999;
}
.vjr-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.vjr-back-to-top:hover { background: var(--vjr-savane-2); }
.vjr-back-to-top i { font-size: 1.1rem; line-height: 1; }
@media (max-width: 640px) {
  .vjr-back-to-top { right: var(--sp-4); bottom: calc(var(--sp-4) + 56px); width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------
   3) Sommaire (TOC) — repolissage + mode actif (scrollspy) + mobile
   --------------------------------------------------------------- */
.vjr-toc-box {
  position: relative;
  background: linear-gradient(180deg, var(--n-50), var(--card-bg, #fff));
  border: 1px solid var(--n-200);
  border-left: 3px solid var(--vjr-savane);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin: 0 0 var(--sp-8);
  box-shadow: var(--shadow-sm);
}
.vjr-toc-box__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--vjr-nuit);
  margin: 0 0 var(--sp-3);
  cursor: pointer;
  user-select: none;
}
.vjr-toc-box__title::after {
  content: "\2013";
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--n-500);
  transition: transform .25s ease;
}
.vjr-toc-box.is-collapsed .vjr-toc-box__title::after { content: "+"; }
.vjr-toc-box__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: .92rem;
  line-height: 1.6;
  display: grid;
  gap: .35rem;
  max-height: 600px;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, margin .25s ease;
}
.vjr-toc-box.is-collapsed .vjr-toc-box__list { max-height: 0; opacity: 0; margin: 0; }
.vjr-toc-box__list li { counter-increment: vjr-toc; }
.vjr-toc-box__list { counter-reset: vjr-toc; }
.vjr-toc-box__list a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  color: var(--n-700);
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  transition: background .2s ease, color .2s ease;
}
.vjr-toc-box__list a::before {
  content: counter(vjr-toc);
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--vjr-vert-pale);
  color: var(--vjr-savane);
}
.vjr-toc-box__list a:hover { background: var(--vjr-vert-pale); color: var(--vjr-savane); }
.vjr-toc-box__list a.is-active { color: var(--vjr-savane); font-weight: 600; background: var(--vjr-vert-pale); }
.vjr-toc-box__list a.is-active::before { background: var(--vjr-savane); color: #fff; }

/* ---------------------------------------------------------------
   4) Lede éditorial (premier paragraphe des fiches encyclopédiques,
      exclu des fiches annuaire qui affichent la barre de contact
      rapide, et des pages de recherche/carte)
   --------------------------------------------------------------- */
.vjr-single-article:not(:has(.vjr-premium-bar)) .vjr-page-body p:first-of-type {
  font-family: var(--font-editorial);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.65;
  color: var(--n-800);
  font-weight: 400;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--vjr-safran);
  margin: 0 0 var(--sp-8);
}

/* ---------------------------------------------------------------
   5) Cartes fiches (annuaire ET encyclopédie) — repolissage
   --------------------------------------------------------------- */
.vjr-article-card__cat {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .28rem .65rem;
  background: var(--vjr-vert-pale);
  border-radius: var(--radius-full);
  letter-spacing: .04em;
}
.vjr-article-card__img-link { position: relative; display: block; overflow: hidden; }
.vjr-article-card__img-link .vjr-default-thumb,
.vjr-article-card__img-link img {
  transition: transform .45s cubic-bezier(.25,.8,.25,1);
}
.vjr-article-card:hover .vjr-article-card__img-link .vjr-default-thumb,
.vjr-article-card:hover .vjr-article-card__img-link img {
  transform: scale(1.045);
}
.vjr-default-thumb { position: relative; overflow: hidden; }
.vjr-default-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size: 16px 16px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.vjr-article-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--n-100);
}
.vjr-article-card__more {
  font-size: .82rem;
  font-weight: 700;
  color: var(--vjr-savane);
  text-decoration: none;
}
.vjr-article-card__more:hover { text-decoration: underline; }
.vjr-article-card__call {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--vjr-savane);
  color: #fff !important;
  padding: .38rem .8rem;
  border-radius: var(--radius-full);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.vjr-article-card__call:hover { background: var(--vjr-terre); transform: translateY(-1px); }
.vjr-article-card__location {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  color: var(--n-600);
}

/* ---------------------------------------------------------------
   6) Héros de rubrique — différenciation visuelle éditorial / annuaire
   (les rubriques annuaire gardent déjà leur héros de recherche dédié
   .vjr-directory-hero ; les rubriques éditoriales reçoivent ici une
   bande de couverture aux couleurs Teranga pour mieux signaler
   qu'on quitte le registre "répertoire" et qu'on entre dans un
   contenu encyclopédique)
   --------------------------------------------------------------- */
.vjr-archive-header:not(:has(.vjr-annuaire-slogan)) {
  position: relative;
  padding: calc(var(--sp-10) + var(--sp-4)) 0 var(--sp-10);
  margin: calc(-1 * var(--sp-10)) 0 var(--sp-8);
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.10), transparent 45%),
    linear-gradient(135deg, var(--vjr-savane) 0%, var(--vjr-savane-2) 55%, var(--vjr-terre) 145%);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  overflow: hidden;
}
.vjr-archive-header:not(:has(.vjr-annuaire-slogan)) .vjr-archive-title,
.vjr-archive-header:not(:has(.vjr-annuaire-slogan)) .vjr-archive-desc {
  color: var(--vjr-text-on-dark, #FBF5E8);
}
.vjr-archive-header:not(:has(.vjr-annuaire-slogan)) .vjr-archive-desc { opacity: .92; max-width: 62ch; }
.vjr-archive-header:not(:has(.vjr-annuaire-slogan)) .vjr-archive-count {
  color: var(--vjr-text-on-dark, #FBF5E8);
  opacity: .85;
}
.vjr-archive-header:not(:has(.vjr-annuaire-slogan)) .vjr-archive-meta a {
  color: var(--vjr-nuit);
}

/* ---------------------------------------------------------------
   7) Petites finitions transverses
   --------------------------------------------------------------- */
.vjr-single-status-badges:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .vjr-back-to-top,
  .vjr-article-card__img-link .vjr-default-thumb,
  .vjr-article-card__img-link img,
  .vjr-toc-box__list {
    transition: none !important;
  }
}


/* ==== Correctif 19/08/2026 : chevauchement case a cocher FacetWP ====
   .vjr-facets-inline .facetwp-checkbox (vjr221.css) reduit le padding-left
   a 0.8rem (12.8px), inferieur a la largeur de l'icone checkbox.png (14px)
   fournie par FacetWP (qui prevoit nativement 20px). Corrige en redonnant
   assez d'espace a gauche sans toucher au style de pilule existant. */
.vjr-facets-inline .facetwp-checkbox {
  padding-left: 1.6rem;
}

/* ---------------------------------------------------------------
 * Compat : sommaire brut herite (<nav class="vjr-toc"><strong>Sommaire</strong><ol>...)
 * present sur certaines fiches territoriales (contenu injecte directement dans
 * post_content par un ancien processus, hors module vjr221-encyclopedia-toc.php).
 * On reprend exactement l'habillage .vjr-toc-box pour que ce sommaire herite
 * beneficie du meme design (audit 19/08/2026), sans toucher au contenu des fiches.
 * ------------------------------------------------------------- */
.vjr-toc {
  position: relative;
  display: block;
  background: linear-gradient(180deg, var(--n-50), var(--card-bg, #fff));
  border: 1px solid var(--n-200);
  border-left: 3px solid var(--vjr-savane);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin: 0 0 var(--sp-8);
  box-shadow: var(--shadow-sm);
}
.vjr-toc > strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--vjr-nuit);
  margin: 0 0 var(--sp-3);
}
.vjr-toc > strong::before { content: "\1F4CB  "; }
.vjr-toc ol {
  counter-reset: vjr-toc-legacy;
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: .92rem;
  line-height: 1.6;
  display: grid;
  gap: .35rem;
}
.vjr-toc ol li { counter-increment: vjr-toc-legacy; }
.vjr-toc ol a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  color: var(--n-700);
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  transition: background .2s ease, color .2s ease;
}
.vjr-toc ol a::before {
  content: counter(vjr-toc-legacy);
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--vjr-vert-pale);
  color: var(--vjr-savane);
}
.vjr-toc ol a:hover { background: var(--vjr-vert-pale); color: var(--vjr-savane); }

/* Libelles mini pour les facettes booleennes ambigues (Premium / Tel verifie) - audit 19/08/2026 */
.vjr-facet-mini-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--n-600, #666);
  align-self: center;
  margin-left: .4rem;
}
.vjr-facet-mini-label:first-of-type { margin-left: .8rem; }