/* ============================================================
   VJR 221 - Design System v2
   "Le Sénégal dans sa diversité"
   ============================================================ */

/* ============================================================
   VJR 221 -- Design System v3 -- Charte "Teranga" unifiee
   Palette Senegal (savane / terre / safran / rouge / sable)
   appliquee a l'ensemble du site, avec support Light + Dark.
   ============================================================ */

/* ---- Polices ----
   Les fontes sont servies localement par vjr-fonts-local.css, chargee par
   functions.php. Aucun @import Google Fonts ne doit bloquer le rendu. */

/* ---- Design Tokens (LIGHT -- valeurs par defaut) ---- */
:root {
  color-scheme: light dark;

  /* Palette Teranga -- couleurs de marque (identiques en light/dark) */
  --vjr-savane:      #123322;
  --vjr-savane-2:    #1E4A32;
  --vjr-terre:       #BE5A21;
  --vjr-terre-l:     #D97A3F;
  --vjr-safran:      #E5A324;
  --vjr-rouge:       #9B2C33;
  --vjr-sable:       #F4E9D6;
  --vjr-sable-deep:  #EADCC0;
  --vjr-ombre:       #1B1610;
  --vjr-creme:       #FBF5E8;
  --vjr-text-on-dark: #FBF5E8; /* fixe, ne bascule jamais en dark : texte sur fonds sombres/photos fixes */

  /* Alias historiques (utilises dans ~200 regles existantes du theme) --
     mappes sur la charte Teranga pour une coherence totale sans avoir
     a reecrire chaque selecteur. */
  --vjr-vert:        var(--vjr-savane);
  --vjr-vert-light:  var(--vjr-savane-2);
  --vjr-vert-pale:   #E3EFE7;
  --vjr-or:          var(--vjr-safran);
  --vjr-or-light:    var(--vjr-terre-l);
  --vjr-or-pale:     #FBEFD2;
  --vjr-nuit:        var(--vjr-ombre);
  --vjr-nuit-light:  #2A2117;
  --vjr-corail:      var(--vjr-rouge);
  --vjr-corail-dark: #7A232B;

  /* Surfaces (fond de page / cards) -- LIGHT */
  --bg:            var(--vjr-sable);
  --bg-alt:        var(--vjr-creme);
  --card-bg:       #FFFFFF;
  --text:          #1F2937;
  --text-secondary:#475569;
  --border-color:  var(--vjr-sable-deep);

  /* Neutres (utilises pour bordures, textes secondaires, fonds clairs) */
  --n-50:   var(--vjr-creme);
  --n-100:  var(--vjr-sable);
  --n-200:  var(--vjr-sable-deep);
  --n-300:  #D9C7A3;
  --n-400:  #A89678;
  --n-500:  #8A7860;
  --n-600:  #6B5A45;
  --n-700:  #4A3D2E;
  --n-800:  #2E251A;
  --n-900:  var(--vjr-ombre);

  /* Typography -- charte Teranga */
  --font-display:      'Unbounded', 'Inter', sans-serif;
  --font-body:         'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-editorial:    'Lora', serif;
  --font-mono:         'IBM Plex Mono', 'Courier New', monospace;
  /* Alias utilises par front-page.php / vjr-teranga.css */
  --vjr-font-display:  var(--font-display);
  --vjr-font-body:     var(--font-body);
  --vjr-font-editorial:var(--font-editorial);

  /* Type Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-color: 13,27,42;
  --shadow-sm:  0 1px 2px rgba(var(--shadow-color),0.04), 0 1px 4px rgba(var(--shadow-color),0.04);
  --shadow-md:  0 2px 8px rgba(var(--shadow-color),0.06), 0 4px 16px rgba(var(--shadow-color),0.06);
  --shadow-lg:  0 4px 16px rgba(var(--shadow-color),0.08), 0 8px 32px rgba(var(--shadow-color),0.08);
  --shadow-xl:  0 8px 32px rgba(var(--shadow-color),0.12), 0 16px 48px rgba(var(--shadow-color),0.08);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s ease;

  /* Header height (aligne sur .site-header .wrap = 96px, cf. vjr-menu.css) */
  --header-h: 96px;
}

/* Le header passe a 64px sous 480px (cf. .vjr-nav-chrome .site-header .wrap et #mobile-nav dans vjr-menu.css) */
@media (max-width: 480px){
  :root{ --header-h: 64px; }
}

html { color-scheme: light dark; }

/* ---- Design Tokens (DARK) -- pilote par html.dark, pose par le
   script anti-FOUC (header.php) + bouton #vjr-theme-toggle, avec
   defaut sur la preference systeme au premier chargement. ---- */
html.dark {
  /* Surfaces */
  --bg:             #0F172A;
  --bg-alt:         #16233d;
  --card-bg:        #1E2937;
  --text:           #F1F5F9;
  --text-secondary: #CBD5E1;
  --border-color:   #2E3B52;

  /* Alias historiques repointes vers les surfaces sombres */
  --vjr-sable:      #0F172A;
  --vjr-sable-deep: #16233d;
  --vjr-creme:      #1E2937;
  --vjr-ombre:      #F1F5F9;

  /* Couleurs de marque -- eclaircies pour rester lisibles (7:1) sur fond sombre */
  --vjr-vert:        #4CA37A;
  --vjr-vert-light:  #6BBF95;
  --vjr-vert-pale:   #16332A;
  --vjr-or:          #F2C14E;
  --vjr-or-light:    #F7D67A;
  --vjr-or-pale:     #3A2E12;
  --vjr-nuit:        #F1F5F9;
  --vjr-nuit-light:  #CBD5E1;
  --vjr-corail:      #E2727C;
  --vjr-corail-dark: #C85560;

  --vjr-terre:       #E0904F;
  --vjr-terre-l:     #F0AE79;
  --vjr-safran:      #F2C14E;
  --vjr-rouge:       #E2727C;

  /* Neutres inverses */
  --n-50:   #16233d;
  --n-100:  #1E2937;
  --n-200:  #2E3B52;
  --n-300:  #3C4A63;
  --n-400:  #64748B;
  --n-500:  #94A3B8;
  --n-600:  #B7C2D0;
  --n-700:  #CBD5E1;
  --n-800:  #E2E8F0;
  --n-900:  #F1F5F9;

  --shadow-color: 0,0,0;
}

html.dark img:not(.no-dark-dim) { filter: brightness(.92) contrast(1.03); }
html { transition: background-color .3s ease, color .3s ease; }

/* Bordures / fonds blancs codes en dur -- neutralises en dark via --card-bg */

/* Listes de faits (ex-titres H3 convertis en puces semantiques) */
.vjr-fact-list {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:.5rem .75rem;
  margin:0 0 var(--sp-5);
  padding-left:0;
  list-style:none;
}
.vjr-fact-list li {
  display:flex;
  align-items:flex-start;
  gap:.4rem;
  padding:.55rem .9rem;
  background:var(--vjr-vert-pale, #E8F5E9);
  color:var(--vjr-vert, #1B5E20);
  border:1px solid rgba(27,94,32,.15);
  border-radius:10px;
  font-size:.88rem;
  font-weight:500;
  line-height:1.4;
  margin-bottom:0;
}
.vjr-fact-list li::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--vjr-or, #C8A84B);
  flex-shrink:0;
}
@media (max-width:640px){
  .vjr-fact-list { grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); }
}
.vjr-fact-list li { margin-bottom: .35rem; }

/* Item "Plus" — repli des rubriques qui ne tiennent pas dans la largeur disponible */
.nav-item--more { flex-shrink: 0; }
.mega-panel--more {
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  width: max-content;
  min-width: 200px;
  max-height: none;
  border-top: 3px solid var(--vjr-vert);
}
.mega-panel__inner--more {
  max-width: none;
  margin: 0;
  padding: var(--sp-2);
  column-count: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-panel__inner--more .mega-link {
  white-space: nowrap;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--n-800);
  background: var(--n-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.admin-bar {
  padding-top: 32px;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ---- Layout Utilities ---- */
.vjr-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.container--narrow {
  max-width: var(--container-md);
}

.container--wide {
  max-width: var(--container-2xl);
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 9999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--vjr-vert);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--sp-4);
}

/* ============================================================
   HEADER
   ============================================================
   NOTE (juillet 2026) : l'ancien bloc .site-header / .header-inner de cette
   refonte (v1, pre top-bar) a ete retire d'ici -- ces classes ne sont plus
   emises par header.php (verifie : aucun gabarit PHP du theme ne produit
   .header-inner, .nav-primary, .site-logo ou .btn-explore). Il entrait en
   conflit silencieux avec la vraie regle sticky (background, z-index,
   min-height differents), gagnee jusque-la par specificite CSS mais source
   de confusion et de bugs futurs. La regle sticky active et unique vit
   desormais dans assets/css/vjr-menu.css (".vjr-nav-chrome .site-header"),
   chargee sur toutes les pages. */

/* Logo — l'image contient deja le nom "VJR 221" et l'accroche, donc aucun texte HTML n'est ajoute a cote */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-logo__img {
  height: 60px;
  width: auto;
  display: block;
}

.site-logo__fallback {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--vjr-vert);
}

@media (max-width: 480px) {
  .site-logo__img { height: 46px; }
}

/* Primary Navigation — alignee a gauche juste apres le logo, defile
   horizontalement si l'espace vient a manquer (10 rubriques) plutot
   que de deborder ou d'ecraser le CTA/la recherche */
/* Nav primary — laisse mesurer sa largeur reelle, gere par le JS de repli "Plus" */
.nav-primary {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  gap: 2px;
  flex: 0 1 auto;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.nav-primary a {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--n-600);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.nav-primary a:hover,
.nav-primary a:focus-visible {
  color: var(--vjr-vert);
  background: var(--vjr-vert-pale);
}

.nav-primary a.current-menu-item,
.nav-primary a.current-menu-ancestor {
  color: var(--vjr-vert);
  background: var(--vjr-vert-pale);
  font-weight: 600;
}

/* Nav emoji icon */
.nav-primary a .nav-icon {
  font-size: 14px;
  line-height: 1;
}

/* Header Actions — poussees a droite, colle collent au menu quand la nav est courte */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--sp-4);
}

@media (max-width: 1300px) and (min-width: 769px) {
  .nav-primary a { padding: var(--sp-2) 6px; font-size: 12.5px; }
  .nav-primary a .nav-icon { display: none; }
  .btn-explore span, .btn-explore { padding: var(--sp-2) var(--sp-4); }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .btn-explore { display: none; }
}

.header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--n-600);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.header-search-btn:hover {
  color: var(--vjr-vert);
  background: var(--vjr-vert-pale);
}

.header-search-btn svg {
  width: 18px;
  height: 18px;
}

.btn-explore {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--vjr-vert);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn-explore:hover {
  background: var(--vjr-vert-light);
  transform: translateY(-1px);
}

/* Burger */
.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-md);
}

.burger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--n-700);
  border-radius: 2px;
  transition: all var(--transition-base);
  transform-origin: center;
}

.burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer
   Pas de display:none pilote par media query : le panneau reste
   position:fixed + translateX(100%) + visibility:hidden en
   permanence, ce qui suffit a le rendre invisible et non interactif
   hors etat .open. (Avant : display:none n'etait leve qu'a 768px
   alors que le burger apparait des 960px -- entre les deux le
   bouton etait visible mais le panneau ne s'ouvrait jamais. Corrige
   juillet 2026.) */
.mobile-nav {
  display: block;
  position: fixed;
  top: var(--header-h);
  right: 0;
  left: auto;
  bottom: 0;
  width: min(400px, 88vw);
  max-width: 100vw;
  z-index: 999;
  background: var(--card-bg, #fff);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-6);
  box-shadow: -8px 0 30px rgba(0,0,0,.15);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
}

.mobile-nav.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transition-base), visibility 0s linear 0s;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--n-700);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-nav a:hover {
  background: var(--vjr-vert-pale);
  color: var(--vjr-vert);
}

/* Search overlay */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(13, 27, 42, 0.7);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.search-overlay.open {
  display: flex;
}

.search-overlay__box {
  width: 100%;
  max-width: 600px;
  background: var(--card-bg, #fff);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
  margin-inline: var(--sp-4);
}

.search-overlay__form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.search-overlay__form input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  color: var(--n-800);
  background: transparent;
}

.search-overlay__form input::placeholder {
  color: var(--n-400);
}

.search-overlay__close {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--n-500);
  font-size: var(--text-xl);
  line-height: 1;
  padding: var(--sp-2);
}

/* Suggestions de recherche en direct (overlay) */
.search-overlay__suggestions {
  display: none;
  margin-top: var(--sp-4);
  max-height: 360px;
  overflow-y: auto;
  border-top: 1px solid var(--n-200);
  padding-top: var(--sp-2);
}

.search-overlay__suggestions.is-open {
  display: block;
}

.search-overlay__suggestion {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--n-800);
  transition: background var(--transition-fast);
}

.search-overlay__suggestion:hover,
.search-overlay__suggestion:focus {
  background: var(--vjr-or-pale);
}

.search-overlay__suggestion img,
.search-overlay__suggestion-noimg {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--n-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
}

.search-overlay__suggestion-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-overlay__suggestion-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--n-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-overlay__suggestion-type {
  font-size: var(--text-xs);
  color: var(--vjr-vert);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.search-overlay__suggestions-empty {
  padding: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--n-500);
}

/* ============================================================
   URGENCY BAR
   ============================================================ */
.top-bar {
  background: var(--vjr-vert);
  color: rgba(255,255,255,.92);
  padding: var(--sp-2) 0;
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 28px;
}

.top-bar__contact {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
}

.top-bar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.top-bar__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.top-bar__link:hover {
  color: var(--vjr-or-light);
}

.top-bar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}

.top-bar__sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.25);
}

/* Urgences dropdown */
.top-bar__urgences {
  position: relative;
}

.top-bar__urgences-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: none;
  border: none;
  color: rgba(255,255,255,.92);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: var(--sp-1) 0;
}

.top-bar__urgences-btn svg {
  width: 10px;
  height: 10px;
  transition: transform var(--transition-fast);
}

.top-bar__urgences:hover .top-bar__urgences-btn svg {
  transform: rotate(180deg);
}

.top-bar__urgences-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--sp-2);
  background: var(--card-bg, #fff);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-3);
  min-width: 220px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 600;
}

.top-bar__urgences:hover .top-bar__urgences-panel,
.top-bar__urgences:focus-within .top-bar__urgences-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.urgence-item {
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.urgence-item:hover { background: var(--vjr-vert-pale); }

.urgence-item strong {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--vjr-nuit);
}

.urgence-item span {
  font-size: var(--text-xs);
  color: var(--n-500);
}

.top-bar__urgences-all {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--n-200);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--vjr-vert);
  text-decoration: none;
}

.top-bar__urgences-all svg { width: 12px; height: 12px; }

/* Socials */
.top-bar__socials {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.top-bar__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.12);
  color: #fff;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.top-bar__social svg { width: 18px; height: 18px; }

.top-bar__weather { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: rgba(255,255,255,.85); }
.top-bar__weather .tb-weather-icon { width: 14px; height: 14px; }
.top-bar__weather .tb-weather-temp { font-weight: 600; color: #fff; margin-left: 2px; }
@media (max-width: 680px) { .top-bar__weather { display: none; } }

.top-bar__social:hover {
  background: rgba(255,255,255,.25);
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .top-bar__link--email,
  .top-bar__sep { display: none; }
}

@media (max-width: 640px) {
  .top-bar { display: none; }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--n-200);
  background: var(--card-bg, #fff);
}

.breadcrumb .container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
}

.breadcrumb__item a {
  color: var(--vjr-vert);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__item a:hover {
  color: var(--vjr-vert-light);
  text-decoration: underline;
}

.breadcrumb__item.current {
  color: var(--n-500);
  font-weight: 400;
}

.breadcrumb__sep {
  color: var(--n-300);
  font-size: var(--text-xs);
}

/* ============================================================
   SINGLE POST — Layout
   ============================================================ */
.single-post-layout {
  display: grid;
  grid-template-columns: 1fr min(680px, 100%) 1fr;
  gap: 0;
}

.single-post-layout > * {
  grid-column: 2;
}

.single-post-layout .full-bleed {
  grid-column: 1 / -1;
}

/* Post Header */
.post-hero {
  background: var(--vjr-savane);
  color: #fff;
  padding: var(--sp-16) 0 var(--sp-12);
  position: relative;
  overflow: hidden;
}

.post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,94,32,0.6) 0%, rgba(13,27,42,0.9) 60%);
  z-index: 1;
}

.post-hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.4;
}

.post-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.post-hero__category {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4);
  background: rgba(200,168,75,0.2);
  border: 1px solid rgba(200,168,75,0.4);
  color: var(--vjr-or-light);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-6);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.post-hero__category:hover {
  background: rgba(200,168,75,0.35);
}

.post-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-6);
  max-width: 16ch;
}

.post-hero__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--sp-8);
  max-width: 40ch;
}

.post-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.post-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
}

.post-meta-item svg {
  width: 15px;
  height: 15px;
  color: var(--vjr-or);
  flex-shrink: 0;
}

.post-meta-item strong {
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

/* Post featured image */
.post-featured-img {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: 0 var(--sp-6);
  margin-top: calc(-1 * var(--sp-12));
  position: relative;
  z-index: 10;
}

.post-featured-img img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

/* Post Body Layout */
.post-body {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--sp-12) var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-12);
  align-items: start;
}

.post-body.no-sidebar {
  grid-template-columns: 1fr;
  max-width: var(--container-md);
}

/* ============================================================
   POST CONTENT — Typography
   ============================================================ */
.post-content {
  min-width: 0;
}

.post-content p {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--n-700);
  margin-bottom: var(--sp-6);
}

.post-content p:first-child {
  font-size: var(--text-xl);
  color: var(--n-800);
  font-weight: 400;
}

.post-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--vjr-nuit);
  line-height: 1.2;
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-5);
  letter-spacing: -0.01em;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--vjr-or);
}

.post-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--vjr-nuit);
  line-height: 1.3;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.01em;
}

.post-content h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--n-700);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.post-content ul,
.post-content ol {
  margin-bottom: var(--sp-6);
  padding-left: var(--sp-6);
}

.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }

.post-content li {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--n-700);
  margin-bottom: var(--sp-2);
}

.post-content a {
  color: var(--vjr-vert);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.post-content a:hover {
  color: var(--vjr-vert-light);
}

/* Fix : les boutons WordPress natifs (blocs Buttons) heritaient de la
   couleur de lien generique ci-dessus, ce qui rendait leur texte (vert fonce)
   quasi invisible sur le fond gris fonce par defaut du bouton. On restaure
   le contraste WordPress d'origine (texte blanc, sans soulignement). */
.post-content a.wp-block-button__link:not(.has-text-color),
.post-content .wp-block-button__link:not(.has-text-color) {
  color: #fff;
  text-decoration: none;
}
.post-content a.wp-block-button__link.is-style-outline:not(.has-text-color),
.post-content .wp-block-button__link.is-style-outline:not(.has-text-color) {
  color: var(--vjr-vert);
}
.post-content a.wp-block-button__link:hover {
  text-decoration: none;
}

/* Fix majeur (07/08/2026) : la feuille de style coeur de WordPress
   (wp-block-library) n'est pas chargee sur le front-end du site (optimisation
   cache/performance qui la juge "non utilisee"), ce qui prive TOUS les
   boutons Gutenberg natifs (bloc "Boutons") de leur apparence de base : fond,
   padding, bordure, arrondi. Le correctif ci-dessus ne reparait que la
   couleur du texte -- sans fond ni cadre, les boutons pleins devenaient donc
   du texte blanc invisible sur fond blanc, et les boutons "outline" un simple
   texte sans bordure ni contraste. On rend ici tout bouton Gutenberg
   totalement autonome vis-a-vis de la CSS coeur, ou qu'il apparaisse sur le
   site (pages, articles, widgets, blocs group). */
.wp-block-button__link {
  display: inline-block;
  padding: 0.667em 1.333em;
  border-radius: 9999px;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none !important;
  cursor: pointer;
}
.wp-block-button__link:not(.has-text-color):not(.is-style-outline) {
  background-color: var(--vjr-vert);
  color: #fff;
}
.wp-block-button__link:not(.has-text-color):not(.is-style-outline):hover {
  background-color: var(--vjr-vert-light, var(--vjr-vert));
  color: #fff;
}
.wp-block-button__link.is-style-outline:not(.has-text-color) {
  background-color: transparent;
  border: 2px solid var(--vjr-vert);
  color: var(--vjr-vert);
}
.wp-block-button__link.is-style-outline:not(.has-text-color):hover {
  background-color: var(--vjr-vert-pale, rgba(18,59,79,.08));
}
html.dark .wp-block-button__link.is-style-outline:not(.has-text-color) {
  border-color: var(--vjr-or);
}

.post-content blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-6) var(--sp-8);
  background: var(--vjr-or-pale);
  border-left: 4px solid var(--vjr-or);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.post-content blockquote p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--vjr-nuit);
  margin-bottom: 0;
}

.post-content img {
  border-radius: var(--radius-lg);
  margin: var(--sp-8) 0;
  box-shadow: var(--shadow-md);
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-8) 0;
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.post-content table thead tr {
  background: var(--vjr-vert);
  color: #fff;
}

.post-content table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.post-content table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--n-200);
  color: var(--n-700);
}

.post-content table tbody tr:nth-child(even) {
  background: var(--n-50);
}

/* Fix responsivite mobile : les tableaux (ex. page Annoncez sur VJR 221)
   debordaient horizontalement sur mobile car aucun conteneur de defilement
   n'etait prevu. On rend le tableau scrollable horizontalement au lieu de
   le laisser ecraser ou deborder de la mise en page. */
.entry-content .wp-block-table,
.vjr-page-body .wp-block-table {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
.entry-content .wp-block-table table,
.vjr-page-body .wp-block-table table {
  width:100%;
}
@media (max-width:640px) {
  .entry-content .wp-block-table table,
  .vjr-page-body .wp-block-table table {
    min-width:520px;
  }
}

.post-content table tbody tr:hover {
  background: var(--vjr-vert-pale);
}

/* Infobox */
.infobox {
  background: var(--vjr-sable);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  margin: var(--sp-8) 0;
}

.infobox__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--vjr-vert);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--n-200);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.infobox__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.infobox__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.infobox__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.infobox__value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--n-800);
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Fiches annuaire / infobox : sur mobile, 2 colonnes serrent les numeros de
   telephone, emails et adresses longues et cassent l'affichage. On repasse
   en 1 colonne en dessous de 640px, comme les autres grilles du site. */
@media (max-width: 640px) {
  .infobox {
    padding: var(--sp-4);
  }
  .infobox__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .infobox__value a {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Fiches annuaire : section Coordonnees mise en avant avec un fond plus
   vif que le sable neutre des autres infobox, pour etre bien visible en
   haut de fiche. */
.infobox--coordonnees {
  background: var(--vjr-vert-pale);
  border: 1px solid var(--vjr-vert);
  border-left: 4px solid var(--vjr-vert);
}

.infobox--coordonnees .infobox__title {
  border-bottom-color: var(--vjr-vert-light);
}

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
.toc {
  background: var(--card-bg, #fff);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.toc__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--n-700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.toc__list li {
  counter-increment: toc;
}

.toc__list a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--n-600);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--vjr-or);
  font-weight: 600;
  min-width: 20px;
  flex-shrink: 0;
}

.toc__list a:hover {
  color: var(--vjr-vert);
  background: var(--vjr-vert-pale);
}

.toc__list a.active {
  color: var(--vjr-vert);
  background: var(--vjr-vert-pale);
  font-weight: 500;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.post-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.sidebar-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}
.sidebar-card:hover { box-shadow: var(--shadow-md); }

.sidebar-card__header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--n-100);
  background: var(--n-50);
}

.sidebar-card__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--vjr-vert);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sidebar-card__body {
  padding: var(--sp-5);
}

/* Related posts in sidebar */
.related-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--n-100);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.related-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.related-item__img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--n-100);
}

.related-item__text {
  flex: 1;
  min-width: 0;
}

.related-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--n-800);
  line-height: 1.4;
  margin-bottom: var(--sp-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

.related-item:hover .related-item__title {
  color: var(--vjr-vert);
}

.related-item__cat {
  font-size: var(--text-xs);
  color: var(--n-500);
  font-weight: 500;
}

/* Urgency sidebar card */
.urgency-sidebar {
  background: var(--vjr-savane);
  color: #fff;
}

.urgency-sidebar .sidebar-card__header {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

.urgency-sidebar .sidebar-card__title {
  color: var(--vjr-or);
}

.urgency-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.urgency-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.urgency-sidebar-icon {
  font-size: 20px;
}

.urgency-sidebar-label {
  flex: 1;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
}

.urgency-sidebar-num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #fff;
}

/* ============================================================
   POST NAVIGATION (prev/next)
   ============================================================ */
.post-nav {
  border-top: 1px solid var(--n-200);
  padding: var(--sp-12) 0;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.post-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--card-bg, #fff);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all var(--transition-base);
}

.post-nav-link:hover {
  border-color: var(--vjr-vert);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.post-nav-link--next {
  text-align: right;
}

.post-nav-link__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--vjr-or);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.post-nav-link--next .post-nav-link__label {
  justify-content: flex-end;
}

.post-nav-link__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--vjr-nuit);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-nav-link__cat {
  font-size: var(--text-xs);
  color: var(--n-500);
}

/* ============================================================
   ARCHIVE PAGE
   ============================================================ */
.archive-hero {
  background: var(--vjr-savane);
  padding: var(--sp-16) 0 var(--sp-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.archive-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--n-50);
  clip-path: ellipse(60% 100% at 50% 100%);
}

.archive-hero__emoji {
  font-size: var(--text-5xl);
  margin-bottom: var(--sp-4);
  display: block;
}

.archive-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}

.archive-hero__desc {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.65);
  max-width: 45ch;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}

.archive-hero__count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: rgba(200,168,75,0.2);
  border: 1px solid rgba(200,168,75,0.4);
  border-radius: var(--radius-full);
  color: var(--vjr-or-light);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Archive grid */
.archive-grid-wrap {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--sp-12) var(--sp-6);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-6);
}

/* Post Card */
.post-card {
  background: var(--card-bg, #fff);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--n-200);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.post-card:hover {
  border-color: var(--vjr-vert);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.post-card__img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--vjr-vert-pale);
  position: relative;
}

.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.post-card:hover .post-card__img {
  transform: scale(1.05);
}

.post-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-4xl);
  background: linear-gradient(135deg, var(--vjr-vert-pale), var(--vjr-or-pale));
}

.post-card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.post-card__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--vjr-vert);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--vjr-nuit);
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--n-600);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--n-100);
}

.post-card__date {
  font-size: var(--text-xs);
  color: var(--n-500);
}

.post-card__read-time {
  font-size: var(--text-xs);
  color: var(--n-400);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--n-600);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.page-numbers:hover {
  border-color: var(--vjr-vert);
  color: var(--vjr-vert);
  background: var(--vjr-vert-pale);
}

.page-numbers.current {
  background: var(--vjr-vert);
  border-color: var(--vjr-vert);
  color: #fff;
}

.page-numbers.dots {
  border-color: transparent;
  background: none;
  pointer-events: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--vjr-savane);
  color: rgba(255,255,255,0.85);
}

/* ================================================================
   CTA "Participez a l'aventure VJR 221" (footer.php, site-entier)
   Corrige (audit v3.9.4) : la carte etait collee directement au
   footer avec exactement le meme fond vert (--ocean = --vjr-savane
   = #123322), donc aucune separation visuelle entre les deux blocs.
   Egalement absente de style sur les pages hors accueil (etait
   definie uniquement dans vjr-home-page.css, charge sur la home
   seulement). Desormais : carte a part entiere, fond chaleureux
   terre/safran distinct du footer, coins arrondis, ombre, marges
   qui la detachent nettement du footer au-dessus et en dessous.
   ================================================================ */
.footer-cta {
  background: linear-gradient(135deg, var(--vjr-terre), var(--vjr-rouge));
  color: #FBF5E8;
  padding: 64px var(--sp-6, 24px);
  margin: var(--sp-16, 64px) auto;
  max-width: 1100px;
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 20px 45px rgba(0,0,0,.22);
}
.footer-cta .wrap { max-width: 640px; margin: 0 auto; }
.footer-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem,2.2vw,1.9rem);
  color: #FBF5E8;
  margin: 0 0 14px;
}
.footer-cta p {
  color: rgba(251,245,232,.82);
  margin: 0 0 26px;
}
.footer-cta .btn-primary {
  background: #FBF5E8;
  color: var(--vjr-terre);
  border: 0;
  font-weight: 700;
}
.footer-cta .btn-primary:hover {
  background: #fff;
  color: var(--vjr-rouge);
}
html.dark .footer-cta {
  box-shadow: 0 20px 45px rgba(0,0,0,.45);
}

.footer-top {
  padding: var(--sp-24) 0 var(--sp-10);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-grid {
  display: grid;
  /* minmax(0, ...) au lieu de simples fractions : sans ca, les colonnes refusent de
     retrecir sous la largeur naturelle de leur contenu (liens longs type "Ajouter mon
     etablissement"), la grille deborde a droite du conteneur de 1280px, et le
     debordement se fait rogner par l'overflow-x:hidden du body -- d'ou l'impression
     que le footer est tasse a gauche au lieu d'etre centre. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-10);
}

/* Footer brand */
.footer-brand {}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  text-decoration: none;
}

.footer-logo__img {
  height: 72px;
  width: auto;
}

/* .footer-logo__name retire le 06/08/2026 -- le HTML ne l'emet plus (logo texte blanc
   redondant avec le logo image, retire a la demande) ; regle laissee en commentaire
   volontairement vide pour ne rien casser si la classe est ajoutee ailleurs plus tard. */

.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--sp-6);
  line-height: 1.6;
}

/* Social links */
.social-links {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.social-link:hover {
  background: var(--vjr-vert);
  color: #fff;
  transform: translateY(-2px);
}

.social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Footer nav columns */
.footer-col {}

.footer-col__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Correctif (27/07/2026) : wp_nav_menu() enveloppe chaque item dans un <li>
   meme quand items_wrap retire le <ul> englobant (colonnes Decouvrir,
   Infos pratiques, Participer -- des lors qu'un menu reel est assigne a
   l'emplacement). Le reset "ul, ol{list-style:none}" plus haut ne cible
   que les conteneurs ul/ol, pas ces <li> orphelins (sans parent ul), qui
   heritaient donc de la puce disc par defaut du navigateur + un decalage
   -- exactement le symptome "icones mal placees, texte decale" en bas de
   page. On neutralise le <li> lui-meme pour qu'il n'affiche plus qu'un
   simple item flex, identique au rendu de la colonne "Vie publique" (qui
   n'a pas de <li>, faute de menu assigne a cet emplacement). */
.footer-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--vjr-or);
}

.footer-nav a .nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vjr-or);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.footer-nav a:hover .nav-dot {
  opacity: 1;
}

/* App badges */
.app-badges {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.app-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: #fff;
  transition: background var(--transition-fast);
}

.app-badge:hover {
  background: rgba(255,255,255,0.12);
}

.app-badge__icon {
  font-size: var(--text-2xl);
  line-height: 1;
}

.app-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.app-badge__sub {
  font-size: 0.625rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.app-badge__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
}

/* Footer bottom bar */
.footer-bottom {
  padding: var(--sp-5) 0;
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
}

.footer-copyright span {
  color: var(--vjr-or);
}

.footer-visitor-counter {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 0.5rem);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
}

.footer-visitor-counter svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.footer-visitor-counter span {
  color: var(--vjr-or);
  font-weight: 600;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.footer-legal a {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.search-hero {
  background: var(--vjr-vert);
  padding: var(--sp-16) 0;
  text-align: center;
}

.search-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-6);
}

.search-hero__form {
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  background: var(--card-bg, #fff);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.search-hero__input {
  flex: 1;
  border: none;
  outline: none;
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-lg);
  color: var(--n-800);
}

.search-hero__submit {
  padding: var(--sp-3) var(--sp-6);
  background: var(--vjr-vert);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 600;
  transition: background var(--transition-fast);
}

.search-hero__submit:hover {
  background: var(--vjr-savane);
}

/* ============================================================
   404 PAGE
   ============================================================ */
.error-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-20) var(--sp-6);
}

.error-404__code {
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 700;
  color: var(--vjr-vert-pale);
  line-height: 1;
  margin-bottom: var(--sp-4);
}

.error-404__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--vjr-nuit);
  margin-bottom: var(--sp-4);
}

.error-404__desc {
  font-size: var(--text-lg);
  color: var(--n-500);
  margin-bottom: var(--sp-8);
  max-width: 40ch;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--vjr-vert);
  color: #fff;
}

.btn-primary:hover {
  background: var(--vjr-vert-light);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--vjr-vert);
  border: 2px solid var(--vjr-vert);
}

.btn-secondary:hover {
  background: var(--vjr-vert-pale);
}

.btn-gold {
  background: var(--vjr-or);
  color: var(--vjr-nuit);
}

.btn-gold:hover {
  background: var(--vjr-or-light);
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-6);
  z-index: 500;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--vjr-vert);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: all var(--transition-base);
  pointer-events: none;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.back-to-top:hover {
  background: var(--vjr-savane);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--sp-6);
  }

  .post-body {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav-primary {
    display: none;
  }

  .burger-btn {
    display: flex;
  }

  .btn-explore {
    display: none;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .post-nav__inner {
    grid-template-columns: 1fr;
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }

  .post-featured-img img {
    height: 240px;
  }

  .post-sidebar {
    grid-template-columns: 1fr;
  }

  .infobox__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .post-hero {
    padding: var(--sp-12) 0 var(--sp-8);
  }

  .post-hero__title {
    font-size: var(--text-3xl);
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .post-sidebar,
  .post-nav,
  .back-to-top,
  .top-bar {
    display: none !important;
  }

  .post-body {
    grid-template-columns: 1fr;
  }

  .post-hero {
    background: none;
    color: black;
    padding: var(--sp-8) 0;
  }

  .post-hero::before {
    display: none;
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--vjr-vert);
  outline-offset: 3px;
}


/* ============================================================
   VJR 221 - HOMEPAGE v2.1 additions
   ============================================================ */

/* ---- Hero ---- */
.vjr-hero {
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  background: linear-gradient(135deg, #0F2818 0%, #123322 60%, #1E4A32 100%);
  overflow:hidden;
}
.vjr-hero__bg {
  position:absolute;inset:0;
}
.vjr-hero__img {
  width:100%;height:100%;object-fit:cover;opacity:.35;
}
.vjr-hero__overlay {
  position:absolute;inset:0;
  background:linear-gradient(to right, rgba(10,41,38,.88) 50%, rgba(10,41,38,.35) 100%);
}
.vjr-hero__grid {
  position:relative;z-index:1;
  max-width:var(--container-xl);margin-inline:auto;
  padding:var(--sp-16) var(--sp-6);
  display:grid;
  grid-template-columns:1fr 0.82fr;
  gap:var(--sp-10);
  align-items:center;
}
.vjr-hero__content {
  color:#fff;
}
.vjr-hero__cover {
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(160deg, rgba(21,79,73,.55), rgba(10,41,38,.75));
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);
  padding:var(--sp-6);
  aspect-ratio:4/3.6;
  backdrop-filter:blur(6px);
  position:relative;overflow:hidden;
  text-decoration:none;
  transition:transform var(--transition-base), border-color var(--transition-base);
}
.vjr-hero__cover:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.35); }
.vjr-hero__cover::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 75% 15%, rgba(242,183,5,.22), transparent 55%);
}
.vjr-hero__cover-tag {
  position:relative;font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--vjr-or-light);text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:var(--sp-2);display:block;
}
.vjr-hero__cover-title {
  position:relative;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-xl);color:#fff;
}
.vjr-hero__cover-desc {
  position:relative;font-size:var(--text-sm);color:rgba(255,255,255,.7);
  margin-top:var(--sp-2);line-height:1.5;
}
.vjr-hero__cover-link {
  position:relative;display:inline-block;margin-top:var(--sp-4);
  font-size:var(--text-sm);font-weight:600;color:var(--vjr-or-light);
}
@media (max-width:900px) {
  .vjr-hero__grid { grid-template-columns:1fr; }
  .vjr-hero__cover { display:none; }
}
.vjr-hero__title {
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.75rem);
  font-weight:700;line-height:1.1;
  margin:var(--sp-4) 0 var(--sp-5);
}
.vjr-hero__subtitle {
  font-size:var(--text-lg);opacity:.88;
  max-width:520px;line-height:1.6;
  margin-bottom:var(--sp-8);
}
.vjr-hero__actions {
  display:flex;gap:var(--sp-4);flex-wrap:wrap;
}

/* ---- Hero search ---- */
.vjr-hero__search {
  display:flex;
  align-items:center;
  gap:.5rem;
  background:var(--card-bg, #fff);
  border-radius:var(--radius-full);
  padding-block:.4rem;
  padding-inline-start:1.2rem;
  padding-inline-end:.4rem;
  max-width:560px;
  margin:var(--sp-6) 0;
  box-shadow:var(--shadow-xl);
}
.vjr-hero__search-icon { display:flex; opacity:.6; flex-shrink:0; color:var(--vjr-nuit); }
.vjr-hero__search-icon svg { width:18px; height:18px; }
.vjr-hero__search-input {
  flex:1;
  border:none;
  outline:none;
  font-size:var(--text-sm);
  font-family:var(--font-body);
  color:var(--vjr-nuit);
  background:transparent;
  min-width:0;
}
.vjr-hero__search-input::placeholder { color:var(--n-500); }
.vjr-hero__search-btn {
  flex-shrink:0;
  border:none;
  cursor:pointer;
  padding:.65rem 1.4rem;
  border-radius:var(--radius-full);
  background:var(--vjr-corail);
  color:#fff;
  font-size:var(--text-sm);
  font-weight:600;
  transition:background var(--transition-fast);
}
.vjr-hero__search-btn:hover { background:var(--vjr-corail-dark); }
@media (max-width:640px){
  .vjr-hero__search { padding-left:1rem; }
  .vjr-hero__search-btn { padding:.6rem 1rem; font-size:.8rem; }
}

/* ---- Acces rapides ---- */
.vjr-quickaccess { padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
.vjr-quickaccess-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:var(--sp-3);
}
.vjr-quickaccess-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:var(--sp-4) var(--sp-2);
  background:var(--card-bg, #fff);
  border:1px solid var(--n-200);
  border-radius:var(--radius-lg);
  text-decoration:none;
  color:var(--vjr-nuit);
  font-size:var(--text-sm);
  font-weight:600;
  text-align:center;
  transition:all var(--transition-base);
}
.vjr-quickaccess-card:hover {
  border-color:var(--vjr-or);
  box-shadow:var(--shadow-md, 0 4px 12px rgba(0,0,0,.08));
  transform:translateY(-2px);
}
.vjr-quickaccess-icon { font-size:1.6rem; }
.vjr-quickaccess-label { line-height:1.2; }

/* ---- Badges ---- */
.vjr-badge {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem 1rem;
  border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:600;letter-spacing:.02em;
}
.vjr-badge--light {
  background:rgba(242,183,5,.16);
  border:1px solid rgba(242,183,5,.35);
  color:var(--vjr-or-light);
}

/* ---- Buttons ---- */
.vjr-btn {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.65rem 1.5rem;
  border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:600;
  cursor:pointer;border:none;text-decoration:none;
  transition:all var(--transition-base);
  white-space:nowrap;
}
.vjr-btn--primary {
  background:var(--vjr-corail);color:#fff;
}
.vjr-btn--primary:hover {
  background:var(--vjr-corail-dark);transform:translateY(-1px);
}
.vjr-btn--outline {
  background:transparent;
  border:2px solid rgba(255,255,255,.5);
  color:#fff;
}
.vjr-btn--outline:hover {
  background:rgba(255,255,255,.1);
}
.vjr-btn--red {
  background:var(--vjr-rouge);color:#fff;
}
.vjr-btn--red:hover { background:var(--vjr-corail-dark, #7A232B); }

/* Fix contraste dark mode : en dark, --vjr-corail et --vjr-rouge s'eclaircissent
   (#E2727C) pour rester visibles sur fond sombre, mais le texte blanc fixe des
   boutons primary/red tombe alors a ~3:1 sur ce fond clair (< 4.5:1 requis).
   Texte fixe fonce en dark, meme logique que --vjr-btn--gold ci-dessus. */
html.dark .vjr-btn--primary,
html.dark .vjr-btn--red {
  color:#1B1610;
}

/* Meme logique pour les boutons outline des blocs Buttons WordPress dans le
   contenu : fond transparent + texte vert fonce (--vjr-vert), illisible sur
   le fond sombre du dark mode. On bascule sur l'or de marque, deja utilise
   comme accent dark mode ailleurs sur le site. */
html.dark .post-content a.wp-block-button__link.is-style-outline:not(.has-text-color),
html.dark .post-content .wp-block-button__link.is-style-outline:not(.has-text-color),
html.dark .vjr-page-body a.wp-block-button__link.is-style-outline:not(.has-text-color),
html.dark .vjr-page-body .wp-block-button__link.is-style-outline:not(.has-text-color) {
  color: var(--vjr-or);
}
.vjr-btn--gold {
  /* Texte fixe fonce : --vjr-nuit s'eclaircit en dark mode et devient illisible sur fond or */
  background:var(--vjr-or);color:#1B1610;font-weight:700;
}
.vjr-btn--gold:hover { background:var(--vjr-or-light); color:#1B1610; }
.vjr-btn--sm { padding:.45rem 1.1rem;font-size:.8rem; }

/* Fix responsivite mobile : les boutons a texte long (CTA annuaire, dons, etc.)
   utilisaient white-space:nowrap ce qui les faisait deborder hors de l'ecran
   sur mobile (annuaire, page Soutenir VJR 221, etc.). On autorise le retour
   a la ligne et on centre le texte en dessous de 640px. */
@media (max-width:640px) {
  .vjr-btn {
    white-space:normal;
    text-align:center;
    line-height:1.35;
    max-width:100%;
  }
}

/* ---- Stats Bar ---- */
.vjr-stats-bar {
  background:var(--card-bg, #fff);
  box-shadow:0 4px 24px rgba(0,0,0,.07);
  position:relative;z-index:2;
  border-bottom:1px solid var(--n-200);
}
.vjr-stats-grid {
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:0;
}
.vjr-stat-item {
  display:flex;flex-direction:column;align-items:center;
  padding:var(--sp-5) var(--sp-8);
  border-right:1px solid var(--n-200);
  min-width:120px;
}
.vjr-stat-item:last-child { border-right:none; }
.vjr-stat-icon { font-size:1.5rem;margin-bottom:.2rem; }
.vjr-stat-num {
  font-family:var(--font-display);
  font-size:var(--text-3xl);font-weight:700;
  color:var(--vjr-vert);
  line-height:1.1;
}
.vjr-stat-num:nth-child(1) { color:var(--vjr-or); }
.vjr-stat-item:nth-child(3) .vjr-stat-num { color:var(--vjr-or); }
.vjr-stat-label {
  font-size:var(--text-sm);color:var(--n-500);
  margin-top:.15rem;
}

/* ---- Urgences Bar ---- */
.vjr-urgences-bar {
  background:#fff4f0;
  border-bottom:1px solid rgba(198,40,40,.1);
  padding:var(--sp-3) 0;
}
.vjr-urgences-inner {
  display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;
}
.vjr-urgences-left {
  display:flex;align-items:center;gap:var(--sp-3);
  flex:1;
}
.vjr-urg-badge {
  background:var(--vjr-rouge);color:#fff;
  padding:.2rem .7rem;
  border-radius:var(--radius-sm);
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}
.vjr-urg-hint { font-size:var(--text-sm);color:var(--n-600); }
.vjr-urgences-nums {
  display:flex;gap:var(--sp-6);align-items:center;
}
.vjr-urg-num {
  display:flex;align-items:center;gap:.35rem;
  font-size:var(--text-sm);
  color:var(--n-700);
}
.vjr-urg-num strong { font-size:1.1rem;color:var(--vjr-rouge); }
.vjr-urg-num:hover { color:var(--vjr-rouge); }

/* ---- Sections ---- */
.vjr-section { padding:var(--sp-16) 0; }
.vjr-section--grey { background:var(--n-100); }
.vjr-section--nuit {
  background:var(--vjr-savane);
  color:#fff;
}
.vjr-section-header { margin-bottom:var(--sp-10); }
.vjr-section-header--center { text-align:center; }
.vjr-section-header--light .vjr-section-title,
.vjr-section-header--light .vjr-section-desc { color:#fff; }
.vjr-eyebrow {
  font-size:var(--text-sm);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--vjr-vert);
  margin-bottom:var(--sp-2);
}
.vjr-eyebrow--gold { color:var(--vjr-or) !important; }
.vjr-section-title {
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:700;color:var(--vjr-nuit);
  line-height:1.15;margin-bottom:var(--sp-3);
}
.vjr-section-desc {
  color:var(--n-600);max-width:560px;
  margin-inline:auto;line-height:1.7;
}

/* ---- Rubriques Grid ---- */
.vjr-rubriques-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-4);
}
.vjr-rubrique-card {
  display:flex;flex-direction:column;align-items:center;
  padding:var(--sp-6) var(--sp-4);
  background:var(--card-bg, #fff);
  border:1px solid var(--n-200);
  border-radius:var(--radius-lg);
  text-align:center;
  text-decoration:none;
  transition:all var(--transition-base);
  color:inherit;
}
.vjr-rubrique-card:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
  border-color:var(--vjr-vert);
}
.vjr-rubrique-icon { font-size:2rem;margin-bottom:var(--sp-3); }
.vjr-rubrique-title {
  font-family:var(--font-display);
  font-size:var(--text-lg);font-weight:600;
  color:var(--vjr-nuit);margin-bottom:var(--sp-2);
}
.vjr-rubrique-desc {
  font-size:var(--text-sm);color:var(--n-500);
  line-height:1.5;flex:1;
}
.vjr-rubrique-link {
  margin-top:var(--sp-3);
  font-size:.75rem;font-weight:700;letter-spacing:.08em;
  color:var(--vjr-vert);
}

/* ---- Split Section ---- */
.vjr-split {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:var(--sp-12);
  align-items:start;
}
.vjr-split__text {
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.vjr-split__text h2 {
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:700;color:var(--vjr-nuit);
  line-height:1.15;
}
.vjr-split__text p { color:var(--n-600);line-height:1.6; }
.vjr-split__cards {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-3);
}

/* ---- Destination Cards ---- */
.vjr-dest-card {
  position:relative;border-radius:var(--radius-lg);
  overflow:hidden;display:block;
  aspect-ratio:4/3;
  text-decoration:none;
  transition:transform var(--transition-base);
}
.vjr-dest-card:hover { transform:scale(1.02); }
.vjr-dest-card__img {
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.vjr-dest-card__img--ph,
.vjr-dest-card__img--placeholder {
  background:linear-gradient(135deg,var(--vjr-vert) 0%,var(--vjr-vert-light) 50%,var(--vjr-or) 100%);
  width:100%;height:100%;
}
.vjr-dest-card__overlay {
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(10,41,38,.88) 0%,transparent 100%);
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  color:#fff;
}
.vjr-dest-card__badge {
  display:inline-block;
  background:rgba(200,168,75,.9);
  color:var(--vjr-nuit);
  font-size:.65rem;font-weight:700;
  padding:.15rem .5rem;
  border-radius:var(--radius-sm);
  margin-bottom:.4rem;
  text-transform:uppercase;letter-spacing:.06em;
}
.vjr-dest-card__title {
  font-family:var(--font-display);
  font-size:var(--text-lg);font-weight:600;
  margin-bottom:.2rem;
}
.vjr-dest-card__sub { font-size:var(--text-sm);opacity:.8; }

/* ---- Personnalites Cards ---- */
.vjr-perso-cards {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-3);
}
.vjr-perso-card {
  background:var(--card-bg, #fff);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-base);
  text-decoration:none;color:inherit;
}
.vjr-perso-card:hover { box-shadow:var(--shadow-md); }
.vjr-perso-card__img {
  width:100%;aspect-ratio:4/3;object-fit:cover;
}
.vjr-perso-card__img--ph,
.vjr-perso-card__img--placeholder {
  background:linear-gradient(135deg,var(--vjr-savane) 0%,var(--vjr-vert-light) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;
  width:100%;aspect-ratio:4/3;
}
.vjr-perso-card__body { padding:var(--sp-4); }
.vjr-perso-card__name {
  font-family:var(--font-display);
  font-size:var(--text-base);font-weight:600;
  color:var(--vjr-nuit);margin-bottom:.4rem;
}
.vjr-perso-card__desc { font-size:var(--text-sm);color:var(--n-600);line-height:1.5; }

/* ---- Annuaire Grid ---- */
.vjr-annuaire-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--sp-4);
}
.vjr-annuaire-card {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-4);
  text-align:center;
  text-decoration:none;color:#fff;
  transition:all var(--transition-base);
  display:block;
}
.vjr-annuaire-card:hover {
  background:rgba(255,255,255,.14);
  border-color:var(--vjr-or);
  transform:translateY(-2px);
}
.vjr-annuaire-icon { font-size:2rem;display:block;margin-bottom:var(--sp-3); }
.vjr-annuaire-title {
  font-size:var(--text-base);font-weight:600;
  margin-bottom:.3rem;
}
.vjr-annuaire-desc { font-size:var(--text-sm);opacity:.65; }

/* ---- Newsletter ---- */
.vjr-newsletter {
  background:var(--vjr-vert);
  padding:var(--sp-12) 0;
}
.vjr-newsletter__inner {
  max-width:var(--container-xl);margin-inline:auto;
  padding-inline:var(--sp-6);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-8);flex-wrap:wrap;
}
.vjr-newsletter__text h2 {
  font-family:var(--font-display);
  font-size:var(--text-2xl);color:#fff;font-weight:700;
  margin-bottom:.3rem;
}
.vjr-newsletter__text p { color:rgba(255,255,255,.8);font-size:var(--text-base); }
.vjr-newsletter__form {
  display:flex;gap:var(--sp-3);flex-wrap:wrap;
  min-width:320px;
}
.vjr-input {
  flex:1;padding:.65rem 1.2rem;
  border-radius:var(--radius-full);
  border:none;outline:none;
  font-size:var(--text-sm);
  min-width:200px;
  background:var(--card-bg, #fff);
}

/* ---- Responsive ---- */
@media (max-width:768px) {
  .vjr-split { grid-template-columns:1fr; }
  .vjr-split__cards { grid-template-columns:1fr; }
  .vjr-perso-cards { grid-template-columns:1fr; }
  .vjr-stats-grid { gap:0; }
  .vjr-stat-item { padding:var(--sp-4) var(--sp-5);min-width:90px; }
  .vjr-stat-num { font-size:var(--text-2xl); }
  .vjr-urgences-nums { flex-direction:column;gap:var(--sp-2); }
  .vjr-newsletter__form { min-width:auto;width:100%; }
  .vjr-rubriques-grid { grid-template-columns:repeat(2,1fr); }
  .vjr-hero__title { font-size:2rem; }
  .vjr-hero__content { padding:var(--sp-12) var(--sp-4); }
  .vjr-annuaire-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .vjr-stats-grid { grid-template-columns:repeat(2,1fr); }
  .vjr-rubriques-grid { grid-template-columns:1fr; }
  .vjr-annuaire-grid { grid-template-columns:1fr; }
}


/* ============================================================
   VJR 221 - Carte Interactive & Articles Grid
   ============================================================ */

.vjr-carte-wrapper {
  background:var(--card-bg, #fff);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:var(--sp-8);
  margin:var(--sp-8) 0;
}
.vjr-carte-header {
  text-align:center;
  margin-bottom:var(--sp-6);
}
.vjr-carte-title {
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  color:var(--vjr-nuit);
  margin-bottom:var(--sp-1);
}
.vjr-carte-subtitle {
  color:var(--n-500);
  font-size:var(--text-sm);
}
.vjr-carte-container {
  position:relative;
  display:flex;
  gap:var(--sp-6);
  align-items:flex-start;
  flex-wrap:wrap;
}
.vjr-carte-svg {
  width:100%;
  max-width:680px;
  height:auto;
  cursor:pointer;
  flex:1 1 380px;
}
.vjr-region {
  transition:all .2s ease;
  cursor:pointer;
}
.vjr-region:hover,
.vjr-region.active {
  filter:brightness(1.12) drop-shadow(0 2px 8px rgba(0,0,0,.22));
  stroke:var(--vjr-vert);
  stroke-width:2.5;
}
.vjr-region-label {
  font-size:7.5px;
  font-weight:600;
  fill:var(--vjr-ombre);
  text-anchor:middle;
  pointer-events:none;
  font-family:var(--font-body);
}
.vjr-ocean-label {
  font-size:8px;
  fill:#64B5F6;
  opacity:.6;
  font-style:italic;
}
.vjr-gambie-label {
  font-size:7px;
  fill:#E65100;
  text-anchor:middle;
  font-weight:600;
}
.vjr-neighbor-label {
  font-size:8px;
  fill:#9E9E9E;
  text-anchor:middle;
  font-style:italic;
}
.vjr-carte-tooltip {
  display:none;
  background:var(--vjr-savane);
  color:#fff;
  border-radius:var(--radius-xl);
  padding:var(--sp-5) var(--sp-6);
  min-width:200px;
  max-width:260px;
  box-shadow:var(--shadow-xl);
  border:1px solid rgba(200,168,75,.25);
  flex:1 1 220px;
  align-self:center;
}
.vjr-carte-tooltip.visible {
  display:block;
}
.vjr-tooltip-name {
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:700;
  color:var(--vjr-or-light);
  margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.vjr-tooltip-info {
  font-size:var(--text-sm);
  color:rgba(255,255,255,.7);
  margin-bottom:var(--sp-2);
  display:flex;
  gap:var(--sp-2);
}
.vjr-tooltip-info span:first-child {
  opacity:.55;
  flex-shrink:0;
}
.vjr-tooltip-link {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  margin-top:var(--sp-4);
  padding:.4rem 1rem;
  background:var(--vjr-vert);
  color:#fff;
  border-radius:var(--radius-full);
  font-size:.8rem;
  font-weight:600;
  text-decoration:none;
  transition:background var(--transition-fast);
}
.vjr-tooltip-link:hover {
  background:var(--vjr-vert-light);
}

/* ---- Articles Grid ---- */
.vjr-articles-grid {
  display:grid;
  gap:var(--sp-5);
}
.vjr-articles-grid--3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.vjr-articles-grid--2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.vjr-article-card {
  background:var(--card-bg, #fff);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-base),transform var(--transition-base);
  display:flex;
  flex-direction:column;
}
.vjr-article-card:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.vjr-article-card__img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.vjr-article-card__img--ph {
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--vjr-vert),var(--vjr-or));
}
.vjr-article-card__body {
  padding:var(--sp-4) var(--sp-5);
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.vjr-article-card__cat {
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--vjr-vert);
}
.vjr-article-card__title {
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:600;
  line-height:1.25;
  color:var(--vjr-nuit);
}
.vjr-article-card__title a {
  text-decoration:none;
  color:inherit;
}
.vjr-article-card__title a:hover { color:var(--vjr-vert); }
.vjr-article-card__excerpt {
  font-size:var(--text-sm);
  color:var(--n-600);
  line-height:1.6;
  flex:1;
}

/* ---- Contact Info Block ---- */
.vjr-contact-info {
  display:flex;
  gap:var(--sp-6);
  flex-wrap:wrap;
  padding:var(--sp-5);
  background:var(--vjr-vert-pale);
  border-radius:var(--radius-lg);
  margin-bottom:var(--sp-6);
  border-left:4px solid var(--vjr-vert);
}
.vjr-contact-info p {
  margin:0;
  font-size:var(--text-sm);
  color:var(--n-700);
}


/* ============================================================
   VJR 221 - Page Layout & Sidebar
   ============================================================ */

.vjr-page-main {
  padding:var(--sp-10) 0 var(--sp-16);
  background:var(--n-50);
  min-height:60vh;
}
.vjr-page-layout {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:var(--sp-10);
  align-items:start;
}
/* Fix critique mobile (juillet 2026) : .vjr-page-content est un enfant de grille
   sans min-width:0, donc sa taille minimale par defaut (min-width:auto) est
   celle de son contenu le plus large (tableaux, grille de stats). Resultat :
   la grille refusait de retrecir sous cette largeur et TOUTE la colonne de
   contenu (titre, paragraphes, tableaux) debordait a droite sur mobile
   ("grid blowout"). min-width:0 autorise la grille a suivre le viewport ;
   chaque enfant large (tableaux, stats) gere ensuite son propre debordement
   via overflow-x:auto / flex-wrap. */
.vjr-page-content {
  min-width: 0;
}
.vjr-page-layout > * {
  min-width: 0;
}
.vjr-page-layout--full {
  grid-template-columns: 1fr;
}
.vjr-carte-liens {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--n-200);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.vjr-carte-liens__label {
  font-weight: 600;
  color: var(--n-600);
  font-size: var(--text-sm);
  margin-right: var(--sp-1);
}
.vjr-carte-liens a {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--vjr-vert);
  text-decoration: none;
  padding: .45rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--vjr-vert);
  transition: all var(--transition-base);
  white-space: nowrap;
}
.vjr-carte-liens a:hover {
  background: var(--vjr-vert);
  color: #fff;
  transform: translateY(-1px);
}
.vjr-page-header {
  margin-bottom:var(--sp-6);
}
.vjr-page-title {
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:700;
  color:var(--vjr-nuit);
  line-height:1.15;
  margin-bottom:var(--sp-4);
}
.vjr-page-hero-img {
  border-radius:var(--radius-xl);
  overflow:hidden;
  margin-bottom:var(--sp-6);
}
.vjr-page-img {
  width:100%;
  height:auto;
  display:block;
}
.vjr-page-body {
  font-size:var(--text-base);
  line-height:1.8;
  color:var(--n-700);
}
.vjr-page-body h2 {
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:700;
  color:var(--vjr-nuit);
  margin:var(--sp-8) 0 var(--sp-4);
  padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--vjr-or);
}
.vjr-page-body h3 {
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:600;
  color:var(--vjr-vert);
  margin:var(--sp-6) 0 var(--sp-3);
}
.vjr-page-body ul, .vjr-page-body ol {
  margin:var(--sp-4) 0;
  padding-left:var(--sp-6);
  list-style:disc;
}
.vjr-page-body li { margin-bottom:var(--sp-2); }
.vjr-page-body strong { color:var(--vjr-nuit); }
.vjr-page-body a { color:var(--vjr-vert); text-decoration:underline; }

/* Fix : memes boutons natifs, meme probleme de contraste que .post-content ci-dessus */
.vjr-page-body a.wp-block-button__link:not(.has-text-color),
.vjr-page-body .wp-block-button__link:not(.has-text-color) {
  color: #fff;
  text-decoration: none;
}
.vjr-page-body a.wp-block-button__link.is-style-outline:not(.has-text-color),
.vjr-page-body .wp-block-button__link.is-style-outline:not(.has-text-color) {
  color: var(--vjr-vert);
}
.vjr-page-body a.wp-block-button__link:hover {
  text-decoration: none;
}

/* ---- Sidebar ---- */
.vjr-page-sidebar {
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  position:sticky;
  top:calc(var(--header-h) + var(--sp-4));
}
@media (min-width: 901px) {
  .vjr-page-sidebar {
    max-height: calc(100vh - var(--header-h) - (var(--sp-4) * 2));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
.vjr-sidebar-box {
  background:var(--card-bg, #fff);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  box-shadow:var(--shadow-sm);
  border-top:3px solid var(--vjr-or);
}
.vjr-sidebar-box--vert {
  background:var(--vjr-vert);
  border-top-color:var(--vjr-or);
}
.vjr-sidebar-box--vert .vjr-sidebar-title { color:#fff; }
.vjr-sidebar-title {
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:700;
  color:var(--vjr-nuit);
  margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--n-200);
}
.vjr-sidebar-box--vert .vjr-sidebar-title {
  border-bottom-color:rgba(255,255,255,.2);
}
.vjr-sidebar-nav {
  list-style:none;
  margin:0;
  padding:0;
}
.vjr-sidebar-nav li {
  border-bottom:1px solid var(--n-100);
}
.vjr-sidebar-nav li:last-child { border:none; }
.vjr-sidebar-nav a {
  display:block;
  padding:var(--sp-2) 0;
  color:var(--n-700);
  font-size:var(--text-sm);
  text-decoration:none;
  transition:color var(--transition-fast);
}
.vjr-sidebar-nav a:hover { color:var(--vjr-vert); padding-left:var(--sp-2); }
.vjr-sidebar-nav--icons a {
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}
.vjr-sidebar-nav--icons a:hover { padding-left:0; }
.vjr-sidebar-nav__icon {
  display:inline-flex;
  flex-shrink:0;
  color:var(--vjr-vert);
}
.vjr-sidebar-nav__icon svg {
  width:16px;
  height:16px;
}


@media (max-width:900px) {
  .vjr-page-layout { grid-template-columns:1fr; }
  .vjr-page-sidebar { position:static; }
}


/* ============================================================
   VJR 221 - Archive / Category Pages
   ============================================================ */

.vjr-archive-main { padding-bottom:var(--sp-16); }
.vjr-archive-header {
  background:linear-gradient(135deg, var(--vjr-savane) 0%, var(--vjr-vert) 100%);
  padding:var(--sp-10) 0;
  margin-bottom:var(--sp-10);
  color:#fff;
}
.vjr-archive-title {
  font-family:var(--font-display);
  font-size:clamp(1.75rem,4vw,3rem);
  font-weight:700;
  color:#fff;
  margin-bottom:var(--sp-3);
}
.vjr-archive-desc {
  color:rgba(255,255,255,.8);
  font-size:var(--text-lg);
  max-width:600px;
  line-height:1.6;
  margin-bottom:var(--sp-3);
}
.vjr-archive-count {
  display:inline-block;
  background:rgba(200,168,75,.25);
  border:1px solid rgba(200,168,75,.4);
  color:var(--vjr-or-light);
  font-size:.8rem;
  font-weight:600;
  padding:.25rem .75rem;
  border-radius:var(--radius-full);
}
.vjr-archive-layout {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:var(--sp-10);
  align-items:start;
}
.vjr-article-card__footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:var(--sp-3);
  border-top:1px solid var(--n-100);
}
.vjr-article-card__date { font-size:.75rem; color:var(--n-400); }
.vjr-article-card__more {
  font-size:.8rem;
  font-weight:600;
  color:var(--vjr-vert);
  text-decoration:none;
}
.vjr-article-card__more:hover { text-decoration:underline; }
.vjr-empty-state {
  text-align:center;
  padding:var(--sp-16);
  color:var(--n-500);
}
.vjr-empty-icon { font-size:3rem; display:block; margin-bottom:var(--sp-4); }
.vjr-empty-state h2 { font-family:var(--font-display); color:var(--vjr-nuit); margin-bottom:var(--sp-2); }
.vjr-empty-state p { margin-bottom:var(--sp-6); }

@media (max-width:900px) {
  .vjr-archive-layout { grid-template-columns:1fr; }
}


/* ============================================================
   VJR 221 - Single Article
   ============================================================ */

.vjr-single-main { padding:var(--sp-10) 0 var(--sp-16); }
.vjr-single-header { margin-bottom:var(--sp-6); }
.vjr-single-cats { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.vjr-single-meta {
  display:flex; gap:var(--sp-5); flex-wrap:wrap;
  font-size:var(--text-sm); color:var(--n-500);
  margin-top:var(--sp-3);
}
.vjr-single-thumbnail {
  border-radius:var(--radius-xl); overflow:hidden;
  margin-bottom:var(--sp-8);
}
.vjr-single-img { width:100%; height:auto; display:block; max-height:480px; object-fit:cover; }
.vjr-single-thumbnail .vjr-default-thumb.vjr-single-img { height:320px; min-height:320px; }
.vjr-single-footer {
  margin-top:var(--sp-10);
  padding-top:var(--sp-6);
  border-top:2px solid var(--n-100);
}
.vjr-single-share {
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font-size:var(--text-sm); font-weight:600; color:var(--n-600);
}
.vjr-share-btn {
  padding:.35rem .9rem;
  border-radius:var(--radius-full);
  font-size:.8rem; font-weight:600;
  text-decoration:none; color:#fff;
}
.vjr-share-btn--fb { background:#1877F2; }
.vjr-share-btn--tw { background:#1DA1F2; }
.vjr-share-btn--wa { background:#25D366; }
.vjr-related-section { margin-top:var(--sp-10); }
.vjr-related-title {
  font-family:var(--font-display);
  font-size:var(--text-2xl); font-weight:700;
  color:var(--vjr-nuit); margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--vjr-or);
}


/* ============================================================
   VJR 221 - CTA Blocks (Call to Action)
   ============================================================ */

.vjr-cta-block {
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-6) var(--sp-8);
  border-radius:var(--radius-xl);
  margin:var(--sp-10) 0;
  flex-wrap:wrap;
  box-shadow:var(--shadow-md);
}
.vjr-cta-icon {
  font-size:2.5rem;
  flex-shrink:0;
  line-height:1;
}
.vjr-cta-body {
  flex:1;
  min-width:200px;
}
.vjr-cta-title {
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:700;
  margin-bottom:.35rem;
  line-height:1.2;
}
.vjr-cta-text {
  font-size:var(--text-sm);
  opacity:.88;
  line-height:1.5;
  margin:0;
}
.vjr-cta-btn {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.65rem 1.5rem;
  border-radius:var(--radius-full);
  font-weight:700;
  font-size:.875rem;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.vjr-cta-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
@media (max-width:640px) {
  .vjr-cta-block { flex-direction:column; text-align:center; padding:var(--sp-6); }
  .vjr-cta-btn { width:100%; justify-content:center; }
}

/* Nav dot footer */
.footer-nav a { display:flex; align-items:center; gap:.5rem; }
.nav-dot {
  width:4px; height:4px;
  background:var(--vjr-or);
  border-radius:50%;
  flex-shrink:0;
  opacity:.6;
}


/* ============================================================
   VJR 221 - Navigation arrows & TOC icons fix
   ============================================================ */
/* vjr-nav-arrow-fix */

/* Fleches navigation articles */
.post-navigation .nav-previous a::before,
.post-navigation .nav-next a::after,
.nav-links .nav-previous::before,
.nav-links .nav-next::after,
.vjr-nav-arrow {
  font-size:.85rem !important;
  width:1.5rem; height:1.5rem;
}

/* Sommaire / TOC */
.wp-block-table-of-contents,
.wp-block-table-of-contents a,
.ez-toc-container,
.table-of-contents {
  font-size:.85rem !important;
}
.ez-toc-container .ez-toc-title { font-size:1rem !important; }
.ez-toc-list li { font-size:.8rem !important; line-height:1.5; }

/* Post navigation amelioree */
.post-navigation {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-4);
  margin:var(--sp-10) 0;
  padding:var(--sp-6) 0;
  border-top:1px solid var(--n-200);
}
.post-navigation a {
  display:flex;
  flex-direction:column;
  padding:var(--sp-4) var(--sp-5);
  background:var(--card-bg, #fff);
  border:1px solid var(--n-200);
  border-radius:var(--radius-lg);
  text-decoration:none;
  transition:all var(--transition-base);
}
.post-navigation a:hover { border-color:var(--vjr-vert); box-shadow:var(--shadow-sm); }
.post-navigation .nav-subtitle {
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--n-400);
  margin-bottom:.3rem;
}
.post-navigation .nav-title {
  font-size:.875rem;
  font-weight:600;
  color:var(--vjr-nuit);
  line-height:1.3;
}
.nav-next a { text-align:right; }


/* ============================================================
   CTA À PROPOS DE VJR 221
   ============================================================ */
.vjr-cta-apropos { background: linear-gradient(135deg, var(--vjr-savane) 0%, var(--vjr-vert) 100%); color: #fff; }
.vjr-cta-apropos__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 3rem; align-items: center; }
.vjr-cta-apropos__deco { font-size: 4rem; opacity: .4; }
.vjr-cta-apropos__title { font-family: var(--font-serif); font-size: clamp(1.6rem,3vw,2.2rem); color: #fff; margin: .5rem 0 1rem; }
.vjr-cta-apropos__desc { color: rgba(255,255,255,.85); line-height: 1.7; max-width: 62ch; margin-bottom: 1.5rem; }
.vjr-cta-apropos__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.vjr-cta-apropos__stats { display: flex; flex-direction: column; gap: 1.2rem; }
.vjr-cta-stat { text-align: center; }
.vjr-cta-stat__num { display: block; font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; color: var(--vjr-or); }
.vjr-cta-stat__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); }
@media (max-width: 768px) {
  .vjr-cta-apropos__inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .vjr-cta-apropos__deco { display: none; }
  .vjr-cta-apropos__actions { justify-content: center; }
  .vjr-cta-apropos__stats { flex-direction: row; justify-content: center; gap: 2rem; }
}

/* ============================================================
   ZONE PUBLICITAIRE
   ============================================================ */
.vjr-pub-zone { background: var(--n-50,#f8f8f6); padding: 2rem 0; }
.vjr-pub-header { text-align: center; margin-bottom: 1.5rem; }
.vjr-pub-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .15em; color: var(--n-400); border: 1px solid var(--n-200); padding: .25rem .8rem; border-radius: 999px; }
.vjr-pub-grid { display: flex; flex-direction: column; gap: 1.2rem; }
.vjr-pub-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.vjr-pub-banner { border: 2px dashed var(--n-200); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .3s; }
.vjr-pub-banner:hover { border-color: var(--vjr-or); }
.vjr-pub-banner--lg .vjr-pub-banner__inner { min-height: 90px; display: flex; align-items: center; justify-content: center; padding: 1.5rem 2rem; }
.vjr-pub-banner--md .vjr-pub-banner__inner { min-height: 140px; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.vjr-pub-banner__inner { background: linear-gradient(135deg, #fafaf8 60%, #f0ede0 100%); position: relative; }
.vjr-pub-banner__tag { position: absolute; top: .5rem; left: .75rem; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; color: var(--n-400); }
.vjr-pub-banner__content { text-align: center; }
.vjr-pub-banner__placeholder { font-family: var(--font-serif); font-size: 1.1rem; color: var(--n-500); margin: 0 0 .3rem; }
.vjr-pub-banner__sub { font-size: .72rem; color: var(--n-400); margin: 0 0 1rem; }
.vjr-btn--outline-dark { background: transparent; border: 1.5px solid var(--vjr-nuit); color: var(--vjr-nuit); }
.vjr-btn--outline-dark:hover { background: var(--vjr-savane); color: #fff; }
@media (max-width: 640px) { .vjr-pub-sub-grid { grid-template-columns: 1fr; } }

/* ============================================================
   BANNIERES VJR_AD_BANNER (dispersees sur tout le site)
   ============================================================ */
.vjr-ad-slot { margin: 1.75rem 0; }

/* Banniere pub du footer (site-entier) : centree, format leaderboard,
   nettement decollee du footer qui suit. */
.vjr-footer-ad-slot {
  max-width: 760px;
  margin: 1.5rem auto 3.5rem;
}
.vjr-footer-ad-slot .vjr-pub-banner {
  width: 100%;
}
.vjr-pub-banner--rectangle .vjr-pub-banner__inner { min-height: 130px; display:flex; align-items:center; justify-content:center; padding: 1.25rem; }
.vjr-pub-banner--leaderboard .vjr-pub-banner__inner { min-height: 80px; display:flex; align-items:center; justify-content:center; padding: 1rem 1.5rem; }
.vjr-pub-banner--native .vjr-pub-banner__inner { min-height: 100px; display:flex; align-items:center; justify-content:center; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, #f4f7f2 60%, #eef2e6 100%); }
.vjr-sidebar-box .vjr-ad-slot { margin: 0; }
.vjr-sidebar-box .vjr-pub-banner__placeholder { font-size: .95rem; }
.vjr-annuaire-banner { margin: 1.5rem 0 2rem; }

/* ============================================================
   DOUBLE CTA SOUTIEN + PARTENARIAT
   ============================================================ */
.vjr-cta-double { background: var(--card-bg, #fff); }
.vjr-cta-double__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.vjr-cta-card { border: 1px solid var(--n-100); border-radius: var(--radius-xl); padding: 2.5rem 2rem; text-align: center; transition: box-shadow .3s, transform .2s; }
.vjr-cta-card:hover { box-shadow: 0 8px 32px rgba(27,94,32,.12); transform: translateY(-3px); }
.vjr-cta-card--soutien { border-top: 4px solid var(--vjr-or); }
.vjr-cta-card--partenaire { border-top: 4px solid var(--vjr-vert); }
.vjr-cta-card__icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.vjr-cta-card__title { font-family: var(--font-serif); font-size: 1.4rem; color: var(--vjr-nuit); margin: 0 0 .75rem; }
.vjr-cta-card__desc { color: var(--n-500); line-height: 1.65; margin-bottom: 1.5rem; font-size: .9rem; }
@media (max-width: 640px) { .vjr-cta-double__grid { grid-template-columns: 1fr; } }

/* ============================================================
   MEGA MENU — ouverture au survol (desktop)
   ============================================================ */
.nav-item {
  display: flex;
  align-items: stretch;
  position: relative;
}

.nav-chev {
  width: 10px;
  height: 10px;
  margin-left: 2px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.nav-item--has-mega:hover .nav-chev {
  transform: rotate(180deg);
}

.mega-panel {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100vw;
  background: var(--card-bg, #fff);
  border-top: 3px solid var(--vjr-vert);
  border-bottom: 1px solid var(--n-200);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 500;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  pointer-events: none;
}

.nav-item--has-mega:hover .mega-panel,
.nav-item--has-mega:focus-within .mega-panel,
.nav-item--has-mega.is-open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Pont invisible qui prolonge la zone de survol du lien jusqu'au panneau,
   pour eviter la perte de hover en mouvement diagonal de la souris. */
.nav-item--has-mega::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100vw;
  height: 14px;
  transform: translateX(-50%);
  pointer-events: none;
}

.nav-item--has-mega:hover::after,
.nav-item--has-mega.is-open::after {
  pointer-events: auto;
}

.mega-panel__inner {
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  column-count: 3;
  column-gap: var(--sp-10);
}

@media (max-width: 1100px) {
  .mega-panel__inner { column-count: 2; }
}

.mega-panel .mega-section-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--vjr-vert);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: var(--sp-5) 0 var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--n-200);
  break-inside: avoid;
}

.mega-panel .mega-panel__inner > .mega-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.mega-panel .mega-link {
  display: block;
  padding: var(--sp-2) var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--n-700);
  border-radius: var(--radius-sm);
  break-inside: avoid;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.mega-panel .mega-link:hover,
.mega-panel .mega-link:focus-visible {
  color: var(--vjr-vert);
  background: var(--vjr-vert-pale);
}

.mega-panel .mega-link.current-menu-item {
  color: var(--vjr-vert);
  font-weight: 600;
}

@media (max-width: 980px) {
  .mega-panel { display: none !important; }
}
/* ---- FacetWP integration ---- */
.vjr-facets-bar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin-bottom:var(--sp-6);
  padding:var(--sp-4) var(--sp-5);
  background:var(--card-bg, #fff);
  border:1px solid var(--n-200);
  border-radius:var(--radius-lg);
}
.vjr-facets-label {
  font-weight:600;
  font-size:var(--text-sm);
  color:var(--vjr-nuit);
  flex-shrink:0;
}
.vjr-facets-inline .facetwp-facet { display:flex; flex-wrap:wrap; gap:.5rem; }
.vjr-facets-inline .facetwp-checkbox {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .8rem;
  border:1px solid var(--n-200);
  border-radius:var(--radius-full);
  font-size:.85rem;
  cursor:pointer;
  transition:all var(--transition-fast);
}
.vjr-facets-inline .facetwp-checkbox:hover { border-color:var(--vjr-vert); }
.vjr-facets-inline .facetwp-checkbox.checked {
  background:var(--vjr-vert);
  border-color:var(--vjr-vert);
  color:#fff;
}
.vjr-facets-inline .facetwp-counter { opacity:.6; font-size:.75rem; margin-left:.2rem; }
.vjr-facetwp-pager { margin-top:var(--sp-4); text-align:center; }
.vjr-facetwp-pager .facetwp-pager a, .vjr-facetwp-pager .facetwp-pager span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.2rem;
  height:2.2rem;
  margin:0 .2rem;
  border-radius:var(--radius-full);
  color:var(--vjr-nuit);
  text-decoration:none;
  font-size:.85rem;
}
.vjr-facetwp-pager .facetwp-pager .facetwp-page.active {
  background:var(--vjr-vert);
  color:#fff;
}

/* ============================================================
   MOBILE NAV — v2 : categories phares uniquement, style app
   ============================================================ */
.mobile-nav__search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* bg-alt plutot que n-100 : en dark, n-100 == card-bg (meme teinte
     que le fond du drawer), rendant la barre de recherche invisible.
     bg-alt garde un contraste net dans les deux modes. */
  background: var(--bg-alt);
  border: 1px solid var(--n-200);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.mobile-nav__search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-base);
  color: var(--n-700);
  outline: none;
}
.mobile-nav__search input::placeholder { color: var(--n-400); }
.mobile-nav__search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vjr-or);
  color: var(--vjr-nuit);
  border: none;
  flex-shrink: 0;
  cursor: pointer;
}
.mobile-nav__search button svg { width: 18px; height: 18px; }

.mobile-nav__pills {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.mobile-nav__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-5);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-base);
  border: 1.5px solid var(--n-300);
  color: var(--n-700);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-nav__pill:hover { background: var(--bg-alt); }
.mobile-nav__pill--accent {
  background: var(--vjr-or);
  border-color: var(--vjr-or);
  color: var(--vjr-nuit);
}
.mobile-nav__pill--accent:hover { background: var(--vjr-or-light); }

.mobile-nav__section {
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--n-200);
}
.mobile-nav__section:last-of-type { border-bottom: none; }
.mobile-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--vjr-nuit);
  margin: 0 0 var(--sp-3);
}
.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.mobile-nav__list a {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--text-base);
  color: var(--n-700);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-nav__list a:hover {
  background: var(--vjr-vert-pale);
  color: var(--vjr-vert);
}

.mobile-nav__socials {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
}
.mobile-nav__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vjr-savane);
  color: #fff;
}
.mobile-nav__socials a svg { width: 20px; height: 20px; }
.mobile-nav__socials a:hover { background: var(--vjr-vert); }


/* ============================================================
   PORTAIL TERRITORIAL - grille des regions (Communes / Departements)
   ============================================================ */
.vjr-region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-6) 0;
}
.vjr-region-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(13,27,42,.08);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  background: var(--card-bg, #fff);
}
.vjr-region-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(13,27,42,.14);
}
.vjr-region-card--empty { opacity: .55; }
.vjr-region-card__img {
  width: 100%;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
}
.vjr-region-card__img--ph {
  background: linear-gradient(135deg,var(--vjr-vert),var(--vjr-or));
}
.vjr-region-card__body {
  padding: var(--sp-4);
}
.vjr-region-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--vjr-nuit);
  margin: 0 0 var(--sp-1);
}
.vjr-region-card__count {
  font-size: var(--text-sm);
  color: var(--n-500);
}
.vjr-filter-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
  font-weight: 600;
  color: var(--vjr-vert);
}


/* ============================================================
   VJR 221 - DESIGN SYSTEM UNIFIÉ DES CARTES (v3)
   ============================================================ */

:root {
  --card-radius:      var(--radius-lg);
  --card-shadow-rest: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-lift:        -4px;
  --card-transition:  all var(--transition-base);

  --vjr-grad-1: linear-gradient(135deg, var(--vjr-vert) 0%, var(--vjr-vert-light) 55%, var(--vjr-or) 100%);
  --vjr-grad-2: linear-gradient(135deg, var(--vjr-savane) 0%, var(--vjr-vert) 100%);
  --vjr-grad-3: linear-gradient(135deg, var(--vjr-or) 0%, var(--vjr-vert-light) 100%);
  --vjr-grad-4: linear-gradient(135deg, var(--vjr-vert-pale) 0%, var(--vjr-or-pale) 100%);
  --vjr-grad-5: linear-gradient(150deg, var(--vjr-savane) 0%, var(--vjr-vert-light) 45%, var(--vjr-or) 100%);
  --vjr-grad-6: linear-gradient(135deg, var(--vjr-vert-light) 0%, var(--vjr-savane) 100%);
}

.vjr-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vjr-grad-1);
  color: rgba(255,255,255,.9);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  position: relative;
  overflow: hidden;
}
.vjr-ph::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12) 0, transparent 45%);
}
.vjr-ph--2 { background: var(--vjr-grad-2); }
.vjr-ph--3 { background: var(--vjr-grad-3); }
.vjr-ph--4 { background: var(--vjr-grad-4); color: var(--vjr-nuit); }
.vjr-ph--5 { background: var(--vjr-grad-5); }
.vjr-ph--6 { background: var(--vjr-grad-6); }

.vjr-cards-grid > :nth-child(6n+2) .vjr-ph,
.vjr-cards-grid > :nth-child(6n+2).vjr-ph { background: var(--vjr-grad-2); }
.vjr-cards-grid > :nth-child(6n+3) .vjr-ph,
.vjr-cards-grid > :nth-child(6n+3).vjr-ph { background: var(--vjr-grad-3); }
.vjr-cards-grid > :nth-child(6n+4) .vjr-ph,
.vjr-cards-grid > :nth-child(6n+4).vjr-ph { background: var(--vjr-grad-4); color: var(--vjr-nuit); }
.vjr-cards-grid > :nth-child(6n+5) .vjr-ph,
.vjr-cards-grid > :nth-child(6n+5).vjr-ph { background: var(--vjr-grad-5); }
.vjr-cards-grid > :nth-child(6n+0) .vjr-ph,
.vjr-cards-grid > :nth-child(6n+0).vjr-ph { background: var(--vjr-grad-6); }

.post-card__img-placeholder,
.vjr-dest-card__img--ph, .vjr-dest-card__img--placeholder,
.vjr-perso-card__img--ph, .vjr-perso-card__img--placeholder,
.vjr-article-card__img--ph,
.vjr-region-card__img--ph {
  background: var(--vjr-grad-1);
  position: relative;
  overflow: hidden;
}
.archive-grid > .post-card:nth-child(6n+2) .post-card__img-placeholder,
.vjr-articles-grid > .vjr-article-card:nth-child(6n+2) .vjr-article-card__img--ph,
.vjr-region-grid > .vjr-region-card:nth-child(6n+2) .vjr-region-card__img--ph { background: var(--vjr-grad-2); }
.archive-grid > .post-card:nth-child(6n+3) .post-card__img-placeholder,
.vjr-articles-grid > .vjr-article-card:nth-child(6n+3) .vjr-article-card__img--ph,
.vjr-region-grid > .vjr-region-card:nth-child(6n+3) .vjr-region-card__img--ph { background: var(--vjr-grad-3); }
.archive-grid > .post-card:nth-child(6n+4) .post-card__img-placeholder,
.vjr-articles-grid > .vjr-article-card:nth-child(6n+4) .vjr-article-card__img--ph,
.vjr-region-grid > .vjr-region-card:nth-child(6n+4) .vjr-region-card__img--ph { background: var(--vjr-grad-4); }
.archive-grid > .post-card:nth-child(6n+5) .post-card__img-placeholder,
.vjr-articles-grid > .vjr-article-card:nth-child(6n+5) .vjr-article-card__img--ph,
.vjr-region-grid > .vjr-region-card:nth-child(6n+5) .vjr-region-card__img--ph { background: var(--vjr-grad-5); }

.post-card:hover,
.vjr-dest-card:hover,
.vjr-perso-card:hover,
.vjr-annuaire-card:hover,
.vjr-article-card:hover,
.vjr-region-card:hover,
.vjr-cta-card:hover,
.vjr-rubrique-card:hover,
.vjr-quickaccess-card:hover,
.vjr-card:hover {
  transform: translateY(var(--card-lift));
  box-shadow: var(--card-shadow-hover);
  transition: var(--card-transition);
}
.post-card, .vjr-dest-card, .vjr-perso-card, .vjr-annuaire-card,
.vjr-article-card, .vjr-region-card, .vjr-cta-card, .vjr-rubrique-card,
.vjr-quickaccess-card, .vjr-card {
  transition: var(--card-transition);
}

.vjr-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--n-200);
  box-shadow: var(--card-shadow-rest);
  text-decoration: none;
  color: inherit;
  position: relative;
  height: 100%;
}
.vjr-card:hover { border-color: var(--vjr-vert); }

.vjr-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: var(--vjr-vert-pale);
}
.vjr-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.vjr-card:hover .vjr-card__media img { transform: scale(1.06); }

.vjr-card__badge {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  background: rgba(200,168,75,.92);
  color: var(--vjr-nuit);
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .2rem .6rem;
  border-radius: var(--radius-sm);
  z-index: 2;
}

.vjr-card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.vjr-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--vjr-vert);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.vjr-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--vjr-nuit);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vjr-card__desc {
  font-size: var(--text-sm);
  color: var(--n-600);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vjr-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--n-100);
  font-size: var(--text-xs);
  color: var(--n-500);
}

.vjr-card--horizontal { flex-direction: row; }
.vjr-card--horizontal .vjr-card__media { aspect-ratio: 1/1; width: 140px; flex-shrink: 0; }
.vjr-card--compact .vjr-card__body { padding: var(--sp-3) var(--sp-4); gap: var(--sp-1); }
.vjr-card--dark { background: var(--vjr-savane); border-color: rgba(255,255,255,.1); color: #fff; }
.vjr-card--dark .vjr-card__title { color: #fff; }
.vjr-card--dark .vjr-card__desc { color: rgba(255,255,255,.65); }
.vjr-card--dark .vjr-card__footer { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }

@media (max-width: 640px) {
  .vjr-card--horizontal { flex-direction: column; }
  .vjr-card--horizontal .vjr-card__media { width: 100%; aspect-ratio: 16/9; }
}

.vjr-cards-grid {
  display: grid;
  gap: var(--sp-6);
}
.vjr-cards-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vjr-cards-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vjr-cards-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 640px) {
  .vjr-cards-grid--3, .vjr-cards-grid--4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

.vjr-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.vjr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Portails de categories : stats + recherche scopee ---- */
.vjr-archive-statsbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--n-200);
}
.vjr-archive-stat {
  font-size: var(--text-sm);
  color: var(--n-600);
}
.vjr-archive-stat strong {
  color: var(--vjr-vert);
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin-right: .3em;
}
.vjr-archive-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--card-bg, #fff);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-5);
}
.vjr-archive-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  background: transparent;
}
@media (max-width: 640px) {
  .vjr-archive-search { flex-wrap: wrap; }
}

/* ---- CTA distinct dans le mega-menu (ex. "Ajouter mon etablissement") ---- */
.mega-link--cta {
  display: inline-flex !important;
  align-items: center;
  gap: .4em;
  background: var(--vjr-vert) !important;
  color: #fff !important;
  font-weight: 700;
  padding: .5rem .9rem;
  border-radius: var(--radius-md);
  margin-top: var(--sp-2);
}
.mega-link--cta:hover {
  background: var(--vjr-vert-light) !important;
}

.vjr-region-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.vjr-region-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--card-bg, #fff); border:1px solid var(--n-200,rgba(21,36,32,.14)); border-radius:30px; padding:10px 18px; font-weight:600; font-size:.9rem; color:var(--vjr-nuit); transition:border-color .15s ease, transform .15s ease; }
.vjr-region-chip:hover{ border-color:var(--vjr-corail); transform:translateY(-1px); }
.vjr-region-chip__dot{ width:8px;height:8px;border-radius:50%; flex-shrink:0; }
.vjr-region-chip__dept{ font-family:var(--font-mono); font-size:.72rem; color:var(--n-500,#6b7a75); }

/* SIDEBAR ENRICHI: recherche, articles populaires, reseaux */
.vjr-sidebar-search-form input.vjr-input{margin-bottom:.5rem}
.vjr-sidebar-popular-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.vjr-sidebar-popular-item+.vjr-sidebar-popular-item{border-top:1px solid var(--n-200);padding-top:.75rem}
.vjr-sidebar-popular-link{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.vjr-sidebar-popular-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--n-100);font-size:1.25rem}
.vjr-sidebar-popular-thumb img{width:100%;height:100%;object-fit:cover}
.vjr-sidebar-popular-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.vjr-sidebar-popular-title{font-size:.875rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vjr-sidebar-popular-views{font-size:.75rem;color:var(--text-secondary)}
.vjr-sidebar-social-links{display:flex;flex-wrap:wrap;gap:.5rem}
/* Corrige (audit v3.9.4) : .vjr-share-btn a color:#fff mais AUCUN fond dans ce contexte
   (les modificateurs --fb/--tw/--wa ne sont pas utilises par vjr_sidebar_social_widget()) --
   texte blanc sur fond transparent = boutons invisibles. Fond de marque ajoute ci-dessous. */
.vjr-sidebar-social-links .vjr-share-btn{font-size:.8125rem;background:var(--vjr-vert);color:#fff;border:1px solid transparent;transition:background var(--transition-smooth,.2s ease),transform var(--transition-smooth,.2s ease)}
.vjr-sidebar-social-links .vjr-share-btn:hover{background:var(--vjr-terre);transform:translateY(-1px)}


/* ============================================================
   UTILITAIRES GENERIQUES -- Charte Teranga (Light + Dark)
   Classes reutilisables demandees pour la coherence sitewide.
   ============================================================ */
body {
  color-scheme: light dark;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--text, var(--n-900));
}
h1 { letter-spacing: -0.01em; }
p, li, .font-body { line-height: 1.7; }
.font-editorial { font-family: var(--font-editorial); line-height: 1.75; }

a { color: var(--vjr-vert); transition: color var(--transition-smooth), opacity var(--transition-smooth); }
a:hover { color: var(--vjr-terre); }

.section {
  background: var(--bg);
  color: var(--text, var(--n-900));
  padding: var(--sp-16) 0;
}
.section--alt { background: var(--bg-alt); }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--text, var(--n-900));
  padding: var(--sp-6);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  padding: .75rem 1.5rem;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth);
  text-decoration: none;
}
.btn-primary {
  background: var(--vjr-vert);
  color: #fff;
}
.btn-primary:hover { background: var(--vjr-vert-light); color: #fff; transform: translateY(-2px); }

.btn-secondary {
  background: transparent;
  color: var(--vjr-vert);
  border-color: var(--vjr-vert);
}
.btn-secondary:hover { background: var(--vjr-vert); color: #fff; transform: translateY(-2px); }

.text-accent  { color: var(--vjr-terre); }
.text-highlight { color: var(--vjr-safran); }
.text-alert   { color: var(--vjr-rouge); }

/* ============================================================
   FIX CENTRAGE MOBILE (juillet 2026)
   Garde-fous anti-overflow horizontal : empeche tout element
   plus large que le viewport de decentrer la mise en page sur mobile
   (formulaires WPForms, listes deroulantes, group blocks Gutenberg).
   ============================================================ */
html {
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior-x: none;
}
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
}
.vjr-page-body,
.vjr-page-body .wp-block-group,
.vjr-page-body > * {
  max-width: 100%;
}
.vjr-page-body .wpforms-container,
.vjr-page-body form,
.vjr-page-body .wpforms-field,
.vjr-page-body .wpforms-field input,
.vjr-page-body .wpforms-field select,
.vjr-page-body .wpforms-field textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.vjr-page-body .wpforms-field-row {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .vjr-page-body .wpforms-field-row .wpforms-field-row-block {
    width: 100% !important;
    margin-right: 0 !important;
  }
}
/* Garde-fous supplementaires (juillet 2026) : titres/paragraphes/listes
   peuvent contenir des mots longs ou des liens qui debordent sur tres
   petits ecrans ; on force la coupure de mot si necessaire. Les tableaux
   Gutenberg (wp-block-table) et la grille de stats [vjr_stats] ne doivent
   jamais imposer de largeur minimale a leur conteneur de grille parent. */
.vjr-page-body h1, .vjr-page-body h2, .vjr-page-body h3,
.vjr-page-body p, .vjr-page-body li {
  overflow-wrap: break-word;
  word-break: break-word;
}
.vjr-page-body .wp-block-table {
  min-width: 0;
}
/* Correctif (juillet 2026) : le garde-fou ci-dessus casse les mots au milieu
   (ex. "Histoire" -> "Hi/st/oir/e") quand un <li> vit dans un flex/grid etroit
   comme .vjr-fact-list (grille de puces, colonnes minmax(180px,1fr)). En
   autorisant overflow-wrap/word-break, le navigateur supprime le plancher de
   largeur naturel du texte (min-content = mot le plus long) et laisse la
   carte se retrecir bien en-dessous de ce qu'un mot peut occuper, forcant
   une coupure lettre par lettre pour tenir dans l'espace restant. On restaure
   un retour a la ligne normal (aux espaces) pour ce composant : le texte,
   plus court, n'a jamais besoin d'etre coupe au milieu d'un mot.  */
.vjr-page-body .vjr-fact-list li {
  overflow-wrap: normal;
  word-break: normal;
}
.vjr-stats-grid {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 480px) {
  .vjr-stats-grid { justify-content: center; }
  .vjr-stat-item { min-width: 45%; flex: 1 1 45%; }
}

/* ================= Fiches Annuaire Premium : barre d'action immediate ================= */
.vjr-premium-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin:14px 0 20px; padding:14px 18px;
  background:linear-gradient(135deg, rgba(212,168,83,.14), rgba(212,168,83,.04));
  border:1px solid rgba(212,168,83,.45);
  border-left:4px solid var(--vjr-or, #d4a853);
  border-radius:10px;
}
.vjr-premium-bar__badge{
  font-family:var(--mono, monospace); font-size:.72rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:#8a6a1f; white-space:nowrap;
}
.vjr-premium-bar__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.vjr-premium-bar__btn{
  display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600;
  padding:8px 14px; border-radius:999px; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease;
  color:#fff !important;
}
.vjr-premium-bar__btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(0,0,0,.35); }
.vjr-premium-bar__btn--call{ background:#0e3b37; }
.vjr-premium-bar__btn--wa{ background:#25d366; color:#04331f !important; }
.vjr-premium-bar__btn--site{ background:#1f6f8b; }
@media (max-width:640px){
  .vjr-premium-bar{ flex-direction:column; align-items:flex-start; }
  .vjr-premium-bar__actions{ width:100%; }
  .vjr-premium-bar__btn{ flex:1 1 auto; justify-content:center; }
}

/* Barre d'actions rapides - variante standard (fiches non-Premium) */
.vjr-premium-bar--standard{
  background:linear-gradient(135deg, rgba(18,59,79,.10), rgba(28,85,112,.03));
  border:1px solid rgba(18,59,79,.30);
  border-left:4px solid var(--vjr-vert, #123B4F);
}
.vjr-premium-bar--standard .vjr-premium-bar__badge{ color:#123B4F; }
.vjr-premium-bar__btn--maps{ background:#123B4F; }
.vjr-premium-bar__btn--share{
  background:transparent; color:#123B4F !important; border:1.5px solid #123B4F; cursor:pointer;
  font-family:inherit;
}
.vjr-premium-bar__btn--share:hover{ background:#123B4F; color:#fff !important; }

/* Cartes Annuaire (archive.php) : ville/region + bouton Appeler */
.vjr-article-card__location{
  font-size:.85rem; color:var(--n-600,#5b6660); margin:.15rem 0 .6rem; display:flex; align-items:center; gap:.3rem;
}
.vjr-article-card__footer{ flex-wrap:wrap; gap:.5rem; }
.vjr-article-card__call{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:700;
  padding:.35rem .8rem; border-radius:999px; background:#123B4F; color:#fff !important; white-space:nowrap;
  transition:transform .15s ease;
}
.vjr-article-card__call:hover{ transform:translateY(-1px); color:#fff !important; }

/* Mini-widget meteo sidebar Region */
.vjr-sidebar-weather__body{
  display:flex; align-items:center; gap:.6rem; margin:.5rem 0 .75rem;
}
.vjr-sidebar-weather__icon{ width:28px; height:28px; color:var(--vjr-or,#d4a853); flex-shrink:0; }
.vjr-sidebar-weather__temp{ font-size:1.6rem; font-weight:800; color:var(--vjr-nuit,#123B4F); line-height:1; }
.vjr-sidebar-weather__na{ font-size:.85rem; color:var(--n-600,#5b6660); }
.vjr-sidebar-weather__link{ font-size:.82rem; font-weight:600; color:var(--vjr-vert,#123B4F); }
.vjr-sidebar-weather__link:hover{ text-decoration:underline; }

/* Style des images fallback VJR 221 */
.vjr-fallback-image {
    object-fit: cover;
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.card:hover .vjr-fallback-image {
    transform: scale(1.02);
}
/* ============================================================
   VJR 221 -- Vignette par defaut par categorie (charte Teranga)
   Degrade + icone filigrane (Tabler Icons) + monogramme "VJR 221"
   Affichee automatiquement quand un contenu n'a pas de photo a la une.
   Voir functions.php :: vjr221_default_thumb()
   ============================================================ */
.vjr-default-thumb {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.vjr-default-thumb i.ti {
  font-size: 44px;
  line-height: 1;
  color: #fff;
  opacity: 0.92;
}
.vjr-default-thumb__wm {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 11px;
  color: #fff;
  opacity: 0.16;
  font-family: var(--font-display, 'Unbounded', sans-serif);
  font-weight: 800;
  letter-spacing: 0.5px;
  pointer-events: none;
}
.vjr-default-thumb__label {
  position: absolute;
  left: 12px;
  bottom: 9px;
  right: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Variante compacte pour les petites cartes (listes de fiches liees, .vjr-card__media) */
.vjr-default-thumb--compact i.ti {
  font-size: 30px;
}
.vjr-default-thumb--compact .vjr-default-thumb__label {
  display: none;
}
.vjr-default-thumb--compact .vjr-default-thumb__wm {
  font-size: 9px;
}

/* Les conteneurs placeholder existants passent en position:relative pour
   que la vignette (qui remplit 100%/100%) s'y positionne correctement,
   et abandonnent leur ancien degrade plat au profit de celui de la vignette. */
.vjr-region-card__img--ph,
.vjr-article-card__img--ph {
  position: relative;
  background: var(--vjr-nuit, #1B1610);
}

.vjr-badge-verifie-inline{ display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .6rem; background:#1E4A32; color:#fff; border-radius:50px; font-size:.72rem; font-weight:700; letter-spacing:.02em; margin-bottom:.4rem; margin-left:.4rem; }
.vjr-badge-verifie-inline i{ font-size:.7rem; }

/* Bouton Compte / Connexion (header desktop + panneau mobile) - ajoute 2026-08-04 */
.header-account-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--vjr-border,#e2e2e2);color:inherit;text-decoration:none;font-size:.85rem;font-weight:600;transition:background .15s,border-color .15s;}
.header-account-btn:hover{background:var(--vjr-or,#e0a526);border-color:var(--vjr-or,#e0a526);color:#fff;}
.header-account-btn svg{width:18px;height:18px;flex-shrink:0;}
.header-account-label{white-space:nowrap;}
@media (max-width:900px){ .header-account-label{display:none;} .header-account-btn{padding:8px;} }
.mobile-nav__pill--account{background:transparent;border:1px solid var(--vjr-border,#e2e2e2);}
/* ============================================================
   VJR 221 -- Integration visuelle WooCommerce (boutique, fiches
   produit). Le theme n'avait pas de woocommerce.php avant le
   04/08/2026 : WC utilisait son propre wrapper generique non centre.
   Ce bloc habille les elements WC par-dessus le CSS par defaut du
   plugin, avec la charte Teranga (couleurs, polices, rayons).
   ============================================================ */
.vjr-woo-container { padding-top: var(--sp-6); }
.vjr-woo-container .woocommerce-breadcrumb {
  font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--sp-6);
}
.vjr-woo-container .woocommerce-breadcrumb a { color: var(--vjr-vert); }

.vjr-woo-container div.product {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--sp-10); align-items: start; background: var(--card-bg);
  border: 1px solid var(--border-color); border-radius: var(--radius-xl);
  padding: var(--sp-8); box-shadow: var(--shadow-sm);
}
@media (max-width: 800px) { .vjr-woo-container div.product { grid-template-columns: 1fr; padding: var(--sp-5); gap: var(--sp-6); } }

.vjr-woo-container .woocommerce-product-gallery__image--placeholder,
.vjr-woo-container .woocommerce-product-gallery img {
  border-radius: var(--radius-lg); width: 100%; height: auto; background: var(--bg-alt);
}

.vjr-woo-container .product_title.entry-title {
  font-family: var(--font-display); font-size: var(--text-3xl); color: var(--text);
  margin: 0 0 var(--sp-3); line-height: 1.2;
}
.vjr-woo-container p.price {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700;
  color: var(--vjr-corail); margin: 0 0 var(--sp-4);
}
.vjr-woo-container p.price .subscription-details { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.vjr-woo-container .woocommerce-product-details__short-description { color: var(--text-secondary); margin-bottom: var(--sp-5); }
.vjr-woo-container .woocommerce-product-details__short-description p { margin: 0; }

.vjr-woo-container form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.vjr-woo-container form.cart .quantity input.qty {
  width: 4.5rem; padding: .6rem .75rem; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); background: var(--card-bg); color: var(--text);
}
.vjr-woo-container .single_add_to_cart_button,
.vjr-woo-container a.add_to_cart_button,
.vjr-woo-container a.button.product_type_subscription {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .75rem 1.75rem; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  background: var(--vjr-corail); color: #fff; border: none; cursor: pointer;
  transition: all var(--transition-base);
}
.vjr-woo-container .single_add_to_cart_button:hover,
.vjr-woo-container a.add_to_cart_button:hover { background: var(--vjr-corail-dark); transform: translateY(-1px); }
html.dark .vjr-woo-container .single_add_to_cart_button,
html.dark .vjr-woo-container a.add_to_cart_button,
html.dark .vjr-woo-container a.button.product_type_subscription { color: #1B1610; }

.vjr-woo-container .product_meta { font-size: var(--text-sm); color: var(--text-secondary); padding-top: var(--sp-4); border-top: 1px solid var(--border-color); }
.vjr-woo-container .product_meta > span { display: inline-flex; gap: .3rem; }
.vjr-woo-container .product_meta a { color: var(--vjr-vert); text-decoration: none; }
.vjr-woo-container .product_meta a:hover { text-decoration: underline; }

.vjr-woo-container .woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--sp-8); border-top: 1px solid var(--border-color); padding-top: var(--sp-6); }
.vjr-woo-container ul.tabs.wc-tabs { display: flex; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-5); padding: 0; border-bottom: 1px solid var(--border-color); }
.vjr-woo-container ul.tabs.wc-tabs li { margin: 0; }
.vjr-woo-container ul.tabs.wc-tabs li a {
  display: inline-block; padding: .6rem 1.1rem; font-weight: 600; font-size: var(--text-sm);
  color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent;
}
.vjr-woo-container ul.tabs.wc-tabs li.active a,
.vjr-woo-container ul.tabs.wc-tabs li a:hover { color: var(--vjr-corail); border-bottom-color: var(--vjr-corail); }
.vjr-woo-container .woocommerce-Tabs-panel { color: var(--text); line-height: 1.7; }
.vjr-woo-container .woocommerce-Tabs-panel h2:first-child { font-family: var(--font-display); font-size: var(--text-xl); margin-top: 0; }

.vjr-woo-container section.related.products {
  grid-column: 1 / -1; margin-top: var(--sp-10); border-top: 1px solid var(--border-color); padding-top: var(--sp-8);
}
.vjr-woo-container section.related.products h2 { font-family: var(--font-display); font-size: var(--text-2xl); margin-bottom: var(--sp-5); }
.vjr-woo-container ul.products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--sp-5);
  list-style: none; margin: 0; padding: 0;
}
.vjr-woo-container ul.products li.product {
  background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: var(--sp-4); text-align: center;
}
.vjr-woo-container ul.products li.product img { border-radius: var(--radius-md); margin-bottom: var(--sp-3); }
.vjr-woo-container ul.products li.product .woocommerce-loop-product__title { font-size: var(--text-base); font-weight: 700; color: var(--text); margin: 0 0 var(--sp-2); }
.vjr-woo-container ul.products li.product .price { display: block; color: var(--vjr-corail); font-weight: 700; margin-bottom: var(--sp-3); }
.vjr-woo-container ul.products li.product .button { display: inline-block; padding: .5rem 1.25rem; border-radius: var(--radius-full); background: var(--vjr-corail); color: #fff; font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
html.dark .vjr-woo-container ul.products li.product .button { color: #1B1610; }

.vjr-woo-container .woocommerce-notices-wrapper:empty { display: none; }
/* VJR 221 - maillage éditorial automatique */
.vjr-auto-maillage{margin:2rem 0;padding:1.35rem 1.5rem;background:linear-gradient(135deg,rgba(18,51,34,.06),rgba(252,209,22,.08));border:1px solid rgba(18,51,34,.14);border-radius:12px;}
.vjr-auto-maillage__head{margin-bottom:1rem;}
.vjr-auto-maillage__kicker{display:block;margin-bottom:.25rem;color:var(--vjr-savane);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.vjr-auto-maillage__head h2{margin:0;color:#1A1A1A;font-size:1.35rem;line-height:1.15;}
.vjr-auto-maillage__links{display:flex;flex-wrap:wrap;gap:.55rem;}
.vjr-auto-maillage__link{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border:1px solid rgba(18,51,34,.16);border-radius:8px;background:#fff;color:#123322;text-decoration:none;font-size:.84rem;font-weight:650;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.vjr-auto-maillage__link:hover{transform:translateY(-2px);border-color:var(--vjr-savane);box-shadow:0 6px 18px rgba(18,51,34,.08);}
.vjr-auto-maillage__link--annuaire{border-color:rgba(252,209,22,.55);}
.vjr-auto-maillage__link--galerie{border-color:rgba(206,17,38,.22);}
@media(max-width:700px){.vjr-auto-maillage{padding:1rem;margin:1.5rem 0}.vjr-auto-maillage__links{display:grid;grid-template-columns:1fr 1fr}.vjr-auto-maillage__link{min-height:44px}.vjr-auto-maillage__head h2{font-size:1.18rem}}
@media(prefers-reduced-motion:reduce){.vjr-auto-maillage__link{transition:none}.vjr-auto-maillage__link:hover{transform:none}}
/* VJR 221 - Galerie : grille éditoriale / masonry */
.vjr-gallery-masonry{margin:1.5rem 0 2.25rem;}
.vjr-gallery-masonry .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0!important;}
.vjr-gallery-masonry .gallery-item{width:auto!important;margin:0!important;float:none!important;position:relative;overflow:hidden;border-radius:14px;background:#eef2ef;border:1px solid rgba(13,27,42,.08);box-shadow:0 8px 24px rgba(13,27,42,.08);break-inside:avoid;}
.vjr-gallery-masonry .gallery-item img{width:100%;height:260px;object-fit:cover;display:block;transition:transform .35s ease,filter .35s ease;}
.vjr-gallery-masonry .gallery-item:hover img{transform:scale(1.035);filter:saturate(1.05);}
.vjr-gallery-masonry .gallery-caption{position:absolute;left:10px;right:10px;bottom:10px;margin:0!important;padding:8px 10px!important;border-radius:9px;background:rgba(13,27,42,.76);color:#fff!important;font-size:.78rem!important;line-height:1.35!important;text-align:left!important;}
.vjr-gallery-masonry--destinations .gallery-item:nth-child(3n+1) img{height:300px;}
.vjr-gallery-masonry--nature .gallery-item:nth-child(4n+2) img{height:310px;}
.vjr-gallery-masonry--culture .gallery{grid-template-columns:repeat(4,minmax(0,1fr));}
.vjr-gallery-masonry--culture .gallery-item img{height:235px;}
@media(max-width:900px){.vjr-gallery-masonry .gallery,.vjr-gallery-masonry--culture .gallery{grid-template-columns:repeat(2,minmax(0,1fr));}.vjr-gallery-masonry .gallery-item img,.vjr-gallery-masonry--destinations .gallery-item:nth-child(3n+1) img,.vjr-gallery-masonry--nature .gallery-item:nth-child(4n+2) img{height:240px;}}
@media(max-width:560px){.vjr-gallery-masonry .gallery,.vjr-gallery-masonry--culture .gallery{grid-template-columns:1fr;gap:12px;}.vjr-gallery-masonry .gallery-item img,.vjr-gallery-masonry--destinations .gallery-item:nth-child(3n+1) img,.vjr-gallery-masonry--nature .gallery-item:nth-child(4n+2) img{height:260px;}}


/* VJR 221 - Verified owner badge */
.vjr-verified-owner{display:inline-flex;align-items:center;gap:.4rem;margin:.35rem 0 .9rem;padding:.3rem .65rem;border-radius:999px;font-size:.78rem;font-weight:700;line-height:1.2;background:#e9f7ef;color:#146c43;border:1px solid #b7e4c7}.vjr-verified-owner::before{content:"✓";font-weight:800}
\n/* VJR 221 - Espace Pro dashboard */\n.vjr-espace-pro-dashboard{margin:var(--sp-6,1.5rem) 0;padding:var(--sp-6,1.5rem);border:1px solid var(--n-200,#e5e7eb);border-radius:var(--radius-xl,16px);background:var(--card-bg,#fff);box-shadow:var(--shadow-sm,0 8px 30px rgba(0,0,0,.05));border-top:4px solid var(--vjr-savane)}
.vjr-espace-pro-dashboard h2{margin:0 0 var(--sp-4,1rem);font-family:var(--font-display);font-size:var(--text-xl,1.25rem)}
.vjr-espace-pro-list{display:grid;gap:var(--sp-3,.75rem);margin:0;padding:0;list-style:none}
.vjr-espace-pro-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4,1rem);padding:var(--sp-4,1rem);border:1px solid var(--n-200,#e5e7eb);border-left:3px solid var(--n-300);border-radius:var(--radius-lg,12px);background:var(--n-50,#fafafa);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.vjr-espace-pro-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-left-color:var(--vjr-savane)}
.vjr-espace-pro-item:has(.vjr-ep-badge--premium){border-left-color:var(--vjr-safran)}
.vjr-espace-pro-item:has(.vjr-ep-badge--partner){border-left-color:var(--vjr-terre)}
.vjr-espace-pro-item>a:first-child{font-weight:700;text-decoration:none;color:var(--text)}
.vjr-espace-pro-item>a:first-child:hover{text-decoration:underline}
.vjr-espace-pro-edit-link{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .9rem;border-radius:var(--radius-full,9px);background:var(--vjr-savane);color:#fff!important;text-decoration:none;font-weight:700;font-size:.875rem;transition:filter .15s ease}
.vjr-espace-pro-edit-link:hover{filter:brightness(1.12)}
.vjr-espace-pro-empty{margin:var(--sp-6,1.5rem) 0;padding:var(--sp-8,2rem) var(--sp-6,1.5rem);border:1px dashed var(--n-300,#d1d5db);border-radius:var(--radius-xl,16px);text-align:center;background:var(--n-50,#fafafa)}
.vjr-espace-pro-empty p{margin:0 0 var(--sp-4,1rem);color:var(--text-secondary)}
@media(max-width:640px){.vjr-espace-pro-item{align-items:flex-start;flex-direction:column}.vjr-espace-pro-edit-link{width:100%;justify-content:center}}\n\n/* VJR 221 - Espace Pro */\n.vjr-espace-pro-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.vjr-espace-pro-kicker{display:block;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:.2rem}.vjr-espace-pro-upgrade{display:inline-flex;padding:.55rem .85rem;border:1px solid var(--n-200,#e5e7eb);border-radius:10px;text-decoration:none;font-weight:700}.vjr-ep-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}.vjr-ep-badge{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:999px;font-size:.72rem;font-weight:800}.vjr-ep-badge--verified{background:rgba(18,51,34,.10);color:var(--vjr-savane)}.vjr-ep-badge--premium{background:rgba(229,163,36,.18);color:#8a5f10}.vjr-ep-badge--partner{background:rgba(190,90,33,.14);color:var(--vjr-terre)}@media(max-width:640px){.vjr-espace-pro-head{align-items:flex-start;flex-direction:column}.vjr-espace-pro-upgrade{width:100%;justify-content:center}}\n\n.vjr-badge-premium,.vjr-badge-owner-verified,.vjr-badge-partenaire{display:inline-flex;align-items:center;gap:.25rem;padding:.22rem .58rem;border-radius:999px;font-size:.72rem;font-weight:800;line-height:1.2;margin:0 .25rem .35rem 0}.vjr-badge-premium{background:rgba(229,163,36,.18);color:#8a5f10}.vjr-badge-owner-verified{background:rgba(18,51,34,.10);color:var(--vjr-savane)}.vjr-badge-partenaire{background:rgba(190,90,33,.14);color:var(--vjr-terre)}\n\n.vjr-single-status-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 1rem}.vjr-single-status-badges .vjr-badge-premium,.vjr-single-status-badges .vjr-badge-owner-verified,.vjr-single-status-badges .vjr-badge-partenaire{margin:0}\n\n/* VJR 221 - Claim auth card */\n.vjr-claim-auth-card{display:flex;align-items:flex-start;gap:1rem;margin:1.5rem 0;padding:1.25rem 1.35rem;border:1px solid rgba(18,51,34,.16);border-radius:18px;background:linear-gradient(135deg,#f7fbf8,#fff);box-shadow:0 10px 30px rgba(0,0,0,.06)}\n.vjr-claim-auth-card__icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--vjr-savane);color:#fff;font-weight:800;font-size:1.05rem}.vjr-claim-auth-card__content{min-width:0}.vjr-claim-auth-card__eyebrow{display:block;margin-bottom:.25rem;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#087a3d}.vjr-claim-auth-card__title{margin:0 0 .45rem;font-size:1.12rem;line-height:1.3}.vjr-claim-auth-card__text{margin:0;max-width:720px;color:#4b5563;line-height:1.65}.vjr-claim-auth-card__actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}.vjr-claim-auth-card__button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.65rem 1rem;border-radius:10px;font-weight:800;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}.vjr-claim-auth-card__button:hover{transform:translateY(-1px)}.vjr-claim-auth-card__button--primary{background:var(--vjr-savane);color:#fff!important;box-shadow:0 6px 16px rgba(18,51,34,.18)}.vjr-claim-auth-card__button--secondary{border:1px solid #d7e1da;background:#fff;color:#176b3d!important}.vjr-claim-auth-card__button--secondary:hover{box-shadow:0 5px 15px rgba(0,0,0,.07)}@media(max-width:640px){.vjr-claim-auth-card{padding:1rem;gap:.75rem}.vjr-claim-auth-card__actions{flex-direction:column}.vjr-claim-auth-card__button{width:100%}}\n\n/* VJR 221 - Logo footer / mode sombre */\n.site-footer .footer-logo__img{filter:brightness(0) invert(1);opacity:1;}\n@media (prefers-color-scheme:dark){.site-footer .footer-logo__img{filter:brightness(0) invert(1);}}\nhtml.dark-mode .site-footer .footer-logo__img,body.dark-mode .site-footer .footer-logo__img,html[data-theme="dark"] .site-footer .footer-logo__img,body[data-theme="dark"] .site-footer .footer-logo__img{filter:brightness(0) invert(1);}\n
/* VJR 221 - Images éditoriales V2 des catégories */
.vjr-archive-term-image,.vjr-category-visual{margin:1rem 0 0;overflow:hidden;border-radius:1rem;line-height:0;}
.vjr-archive-term-image img,.vjr-category-visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.vjr-category-visual{max-width:100%;}
@media (max-width:767px){.vjr-archive-term-image img,.vjr-category-visual img{aspect-ratio:16/10;}}
\n\n/* VJR 221 - Liens connexes territoriaux : présentation aérée */\n.vjr-personnalites-region-block{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem!important;margin:1rem 0 1.5rem!important;padding:0!important;}\n.vjr-personnalites-region-block a{display:flex;align-items:center;min-height:54px;padding:.8rem 1rem;border:1px solid var(--n-200,#e5e7eb);border-radius:var(--radius-lg,14px);background:var(--card-bg,#fff);color:var(--vjr-nuit,#0D1B2A);font-weight:600;line-height:1.35;text-decoration:none;box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.06));transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}\n.vjr-personnalites-region-block a::before{content:"→";margin-right:.55rem;color:var(--vjr-or,#C8A84B);font-weight:800;}\n.vjr-personnalites-region-block a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 6px 18px rgba(0,0,0,.1));border-color:var(--vjr-or,#C8A84B);color:var(--vjr-vert,#00853F);}\n@media (max-width:900px){.vjr-personnalites-region-block{grid-template-columns:repeat(2,minmax(0,1fr));}}\n@media (max-width:560px){.vjr-personnalites-region-block{grid-template-columns:1fr;gap:.65rem!important;}.vjr-personnalites-region-block a{min-height:48px;padding:.7rem .85rem;font-size:.94rem;}}\n\n\n/* VJR 221 - Cartes des liens connexes longue liste */\n.vjr-personnalites-region-block{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.8rem!important;align-items:stretch!important;margin:1rem 0 1.5rem!important;padding:0!important;line-height:1.4!important;}\n.vjr-personnalites-region-block a{display:flex!important;align-items:center!important;box-sizing:border-box!important;width:auto!important;min-width:0!important;min-height:64px!important;margin:0!important;padding:.85rem 1rem!important;border:1px solid var(--n-200,#e5e7eb)!important;border-radius:var(--radius-lg,14px)!important;background:var(--card-bg,#fff)!important;color:var(--vjr-nuit,#0D1B2A)!important;font-weight:600!important;line-height:1.35!important;text-decoration:none!important;white-space:normal!important;box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.06))!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;}\n.vjr-personnalites-region-block a::before{content:"→";display:inline-block;flex:0 0 auto;margin-right:.6rem;color:var(--vjr-or,#C8A84B);font-weight:800;}\n.vjr-personnalites-region-block a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 6px 18px rgba(0,0,0,.1));border-color:var(--vjr-or,#C8A84B)!important;color:var(--vjr-vert,#00853F)!important;}\n@media (max-width:900px){.vjr-personnalites-region-block{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}\n@media (max-width:560px){.vjr-personnalites-region-block{grid-template-columns:1fr!important;gap:.65rem!important;}.vjr-personnalites-region-block a{min-height:52px!important;padding:.75rem .9rem!important;font-size:.94rem!important;}}\n

/* VJR 221 - Groupes thématiques des liens connexes régionaux */
/* VJR 221 - Groupes thématiques des liens connexes régionaux */
.vjr-region-related-groups{display:flex;flex-direction:column;gap:1.35rem;margin:1rem 0 1.6rem}
.vjr-region-related-group{margin:0;padding:0}
.vjr-region-related-group h3{margin:0 0 .7rem;padding:0 0 .55rem;border-bottom:2px solid var(--n-200,#e5e7eb);font-size:1.05rem;line-height:1.3;color:var(--vjr-nuit,#0D1B2A)}
.vjr-region-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.vjr-region-related-grid a{display:flex;align-items:center;min-height:54px;box-sizing:border-box;margin:0;padding:.72rem .9rem;border:1px solid var(--n-200,#e5e7eb);border-radius:12px;background:var(--card-bg,#fff);color:var(--vjr-nuit,#0D1B2A);font-size:.93rem;font-weight:600;line-height:1.35;text-decoration:none;box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.05));transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease}
.vjr-region-related-grid a::before{content:"→";flex:0 0 auto;margin-right:.5rem;color:var(--vjr-or,#C8A84B);font-weight:800}
.vjr-region-related-grid a:hover{transform:translateY(-2px);border-color:var(--vjr-or,#C8A84B);color:var(--vjr-vert,#00853F);box-shadow:var(--shadow-md,0 6px 18px rgba(0,0,0,.1))}
.vjr-region-related-group--personnalites h3{border-bottom-color:rgba(13,27,42,.25)}
.vjr-region-related-group--patrimoine h3{border-bottom-color:rgba(128,0,0,.25)}
.vjr-region-related-group--tourisme h3{border-bottom-color:rgba(0,133,63,.25)}
.vjr-region-related-group--gastronomie h3{border-bottom-color:rgba(200,168,75,.45)}
@media(max-width:900px){.vjr-region-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.vjr-region-related-groups{gap:1.05rem}.vjr-region-related-grid{grid-template-columns:1fr;gap:.55rem}.vjr-region-related-grid a{min-height:50px;padding:.68rem .8rem;font-size:.92rem}}
/* VJR 221 - Console professionnelle */
.vjr-espace-pro-dashboard{margin:2rem 0;padding:clamp(1.25rem,3vw,2rem);border:1px solid rgba(27,22,16,.10);border-radius:24px;background:var(--card-bg,#FBF5E8);box-shadow:0 14px 40px rgba(27,22,16,.08)}
.vjr-espace-pro-dashboard h2,.vjr-espace-pro-dashboard h3{margin:0;font-family:var(--font-display,'Unbounded',sans-serif);color:var(--text,#1B1610)}
.vjr-espace-pro-dashboard p{color:var(--text-secondary,#5f5549)}
.vjr-espace-pro-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;margin-bottom:1.25rem}
.vjr-espace-pro-head h2{font-size:clamp(1.15rem,2.2vw,1.55rem)}
.vjr-espace-pro-head p{margin:.5rem 0 0;max-width:680px}
.vjr-espace-pro-kicker{display:block;margin-bottom:.35rem;font:700 .72rem/1.2 var(--font-mono,'IBM Plex Mono',monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--vjr-terre,#BE5A21)}
.vjr-espace-pro-upgrade{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1rem;border-radius:999px;background:var(--vjr-terre,#BE5A21);color:#fff!important;text-decoration:none!important;font-weight:800;white-space:nowrap}
.vjr-espace-pro-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1.25rem 0}
.vjr-espace-pro-stat{display:flex;flex-direction:column;gap:.45rem;min-height:112px;padding:1rem;border:1px solid rgba(27,22,16,.09);border-radius:18px;background:var(--surface,#FBF5E8);text-decoration:none!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.vjr-espace-pro-stat:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,22,16,.08);border-color:rgba(190,90,33,.35)}
.vjr-espace-pro-stat span{font-size:.78rem;font-weight:750;color:var(--text-secondary,#5f5549)}
.vjr-espace-pro-stat strong{font:700 1.65rem/1 var(--font-mono,'IBM Plex Mono',monospace);color:var(--text,#1B1610)}
.vjr-espace-pro-stat--claims strong{color:var(--vjr-red,#9B2C33)}
.vjr-espace-pro-stat--subscriptions strong{color:var(--vjr-savane,#123322)}
.vjr-espace-pro-stat--orders strong{color:var(--vjr-safran,#E5A324)}
.vjr-espace-pro-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin:1rem 0 1.75rem}
.vjr-espace-pro-action{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:48px;padding:.75rem 1rem;border:1px solid rgba(27,22,16,.12);border-radius:999px;background:#fff;color:var(--text,#1B1610)!important;text-decoration:none!important;font-weight:800}
.vjr-espace-pro-action--primary{background:var(--vjr-terre,#BE5A21);border-color:var(--vjr-terre,#BE5A21);color:#fff!important}
.vjr-espace-pro-section-head{margin:0 0 .8rem;padding-top:1rem;border-top:1px solid rgba(27,22,16,.10)}
.vjr-espace-pro-section-head h3{font-size:1rem}
.vjr-espace-pro-list{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
.vjr-espace-pro-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid rgba(27,22,16,.10);border-radius:16px;background:#fff}
.vjr-espace-pro-item>div{min-width:0}
.vjr-espace-pro-item>div>a{font-weight:800;color:var(--text,#1B1610);text-decoration:none}
.vjr-espace-pro-edit-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:.55rem .85rem;border-radius:999px;background:var(--vjr-savane,#123322);color:#fff!important;text-decoration:none!important;font-weight:800;white-space:nowrap}
.vjr-ep-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem}
.vjr-ep-badge{display:inline-flex;align-items:center;padding:.25rem .55rem;border-radius:999px;font-size:.72rem;font-weight:800}
.vjr-ep-badge--verified{background:rgba(18,51,34,.10);color:var(--vjr-savane,#123322)}
.vjr-ep-badge--premium{background:rgba(229,163,36,.18);color:#79530b}
.vjr-ep-badge--partner{background:rgba(190,90,33,.14);color:var(--vjr-terre,#BE5A21)}
.vjr-espace-pro-empty{margin-top:1.25rem;padding:1.5rem;border:1px dashed rgba(27,22,16,.20);border-radius:18px;background:rgba(255,255,255,.55);text-align:center}
.vjr-espace-pro-empty h2,.vjr-espace-pro-empty h3{margin-bottom:.5rem}
.vjr-espace-pro-empty p{max-width:700px;margin:.5rem auto 1rem}
@media(max-width:820px){.vjr-espace-pro-stats,.vjr-espace-pro-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.vjr-espace-pro-head{align-items:stretch;flex-direction:column}.vjr-espace-pro-upgrade{width:100%}.vjr-espace-pro-stats,.vjr-espace-pro-actions{grid-template-columns:1fr}.vjr-espace-pro-item{align-items:stretch;flex-direction:column}.vjr-espace-pro-edit-link{width:100%}}