/* =============================================================
   VJR221 -- Charte "Teranga" (refonte homepage)
   Variables, textures et utilitaires issus du prototype validé.
   Scope : page d'accueil uniquement (charge conditionnelle in functions.php)
   ============================================================= */
:root{
  --vjr-sable:#F4E9D6;
  --vjr-sable-deep:#EADCC0;
  --vjr-savane:#123322;
  --vjr-savane-2:#1E4A32;
  --vjr-terre:#BE5A21;
  --vjr-terre-l:#D97A3F;
  --vjr-safran:#E5A324;
  --vjr-rouge:#9B2C33;
  --vjr-ombre:#1B1610;
  --vjr-creme:#FBF5E8;
  --vjr-font-display:'Unbounded', ui-sans-serif, sans-serif;
  --vjr-font-body:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --vjr-font-editorial:'Lora', serif;
}

body.home{
  background:var(--vjr-sable);
  color:var(--vjr-ombre);
  font-family:var(--vjr-font-body);
}
body.home .font-display{ font-family:var(--vjr-font-display); }
body.home .font-editorial{ font-family:var(--vjr-font-editorial); }

/* Texture grain (overlay subtil sur toute la page) */
body.home.grain{ position:relative; }
body.home.grain::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Motif Bogolan -- signature culturelle en filigrane */
.pattern-bogolan{
  background-image:
    repeating-linear-gradient(45deg, rgba(27,22,16,0.05) 0px, rgba(27,22,16,0.05) 1px, transparent 1px, transparent 14px),
    repeating-linear-gradient(-45deg, rgba(27,22,16,0.05) 0px, rgba(27,22,16,0.05) 1px, transparent 1px, transparent 14px);
}

/* Séparateur wax tissé */
.divider-wax{
  height:10px;
  background-image: repeating-linear-gradient(135deg, var(--vjr-terre) 0 10px, var(--vjr-safran) 10px 20px, var(--vjr-rouge) 20px 30px, var(--vjr-savane) 30px 40px);
  opacity:.9;
}

/* Effet de survol "élévation" pour cartes */
.card-lift{ transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
.card-lift:hover{ transform:translateY(-8px); box-shadow:0 24px 48px -18px rgba(18,51,34,.35); }

/* Bouton avec reflet lumineux discret au survol */
.btn-glow{ position:relative; overflow:hidden; }
.btn-glow::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg);transition:left .8s ease;
}
.btn-glow:hover::after{ left:140%; }

/* Apparition douce au scroll (piloté par IntersectionObserver en JS) */
.fade-up{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.fade-up.in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .fade-up{ transition:none; opacity:1; transform:none; }
}
/* Header de la page d'accueil -- aligne sur le comportement du reste du site :
   sticky, opaque, texte sombre lisible en permanence (l'ancienne version
   transparente-sur-le-hero necessitait un toggle JS au scroll qui n'existait
   pas, ce qui rendait le texte du menu illisible des qu'on quittait le hero). */
.vjr-home .top-bar{ position:relative; z-index:51; }
/* =============================================================
   VJR221 -- Charte "Teranga" -- COMPOSANTS HOMEPAGE (complement)
   Ajoute le 2026-07-18 : toutes les classes .tg-* utilisees dans
   front-page.php n'avaient jusque-la aucune regle CSS associee
   (seules les variables/textures/utilitaires partages existaient
   plus haut dans ce fichier). Ce bloc les implemente entierement,
   d'apres le prototype Tailwind valide par l'equipe.
   ============================================================= */

.tg-page{ background:var(--vjr-sable); overflow-x:hidden; }
.tg-page.grain{ position:relative; }
.tg-page.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tg-wrap{ max-width:1400px; margin:0 auto; padding:0 20px; position:relative; }
@media (min-width:768px){ .tg-wrap{ padding:0 32px; } }

.tg-section{ padding:88px 0; background:var(--vjr-sable); }
.tg-section.tg-alt{ background:var(--vjr-creme); }
@media (min-width:768px){ .tg-section{ padding:120px 0; } }

.tg-section-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:44px; }
.tg-kicker{ color:var(--vjr-terre); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.tg-section-head h2{ font-family:var(--vjr-font-display); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.9rem); color:var(--vjr-savane); margin-top:8px; line-height:1.1; }
.tg-section-sub{ max-width:380px; color:rgba(27,22,16,.6); font-style:italic; }
.tg-see-all{ font-size:.9rem; font-weight:600; color:var(--vjr-terre); white-space:nowrap; transition:color .2s ease; }
.tg-see-all:hover{ color:var(--vjr-rouge); }
.tg-empty{ color:rgba(27,22,16,.5); font-style:italic; }

/* ---------- HERO ---------- */
.tg-hero{ position:relative; z-index:0; min-height:100svh; display:flex; align-items:center; overflow:hidden; background-color:var(--vjr-savane); }
.tg-hero-bg-layer{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; opacity:0; transition:opacity 1.8s ease; }
.tg-hero-bg-layer.active{ opacity:1; }
.tg-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,51,34,.55), rgba(12,36,23,.88)), radial-gradient(120% 90% at 15% 10%,#1E4A32 0%,#123322 45%,#0C2417 100%); opacity:.75; z-index:0; }
.tg-hero-pattern{ position:absolute; inset:0; opacity:.25; z-index:0; }
.tg-hero-inner{ position:relative; z-index:1; padding-top:64px; padding-bottom:100px; width:100%; }
.tg-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:rgba(229,163,36,.15); border:1px solid rgba(229,163,36,.4); color:var(--vjr-safran); font-size:.72rem; font-weight:600; padding:7px 15px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:26px; }
.tg-dot{ width:6px; height:6px; border-radius:50%; background:var(--vjr-safran); display:inline-block; }
.tg-h1{ font-weight:800; font-size:clamp(2.3rem,6.8vw,5rem); line-height:1.03; color:var(--vjr-text-on-dark); max-width:900px; }
.tg-h1 span{ color:var(--vjr-safran); }
.tg-lead{ margin-top:22px; max-width:640px; font-size:clamp(1.05rem,1.4vw,1.25rem); color:rgba(251,245,232,.82); }
.tg-search{ margin-top:36px; max-width:640px; display:flex; align-items:center; gap:8px; background:var(--vjr-creme); border-radius:999px; padding:8px; box-shadow:0 24px 48px -18px rgba(0,0,0,.4); }
.tg-search i{ color:var(--vjr-terre); font-size:1.05rem; margin-left:14px; }
.tg-search input{ flex:1; min-width:0; background:transparent; border:0; padding:14px 4px; font-size:1rem; color:var(--vjr-ombre); }
.tg-search input::placeholder{ color:rgba(27,22,16,.45); }
.tg-search .btn-glow{ background:var(--vjr-terre); color:#fff; border:0; padding:14px 24px; border-radius:999px; font-weight:600; font-size:.88rem; cursor:pointer; transition:background .2s ease; white-space:nowrap; }
.tg-search .btn-glow:hover{ background:var(--vjr-rouge); }
.tg-chips{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.8rem; }
.tg-chips span{ color:rgba(251,245,232,.5); }
.tg-chips a{ color:rgba(251,245,232,.82); border:1px solid rgba(251,245,232,.25); padding:5px 14px; border-radius:999px; transition:color .2s ease,border-color .2s ease; }
.tg-chips a:hover{ color:var(--vjr-safran); border-color:rgba(229,163,36,.55); }
.tg-ctas{ margin-top:34px; display:flex; flex-wrap:wrap; gap:16px; }
.tg-btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:999px; font-weight:700; font-size:.92rem; transition:all .2s ease; }
.tg-btn-primary{ background:var(--vjr-safran); color:var(--vjr-ombre); box-shadow:0 10px 24px -8px rgba(0,0,0,.3); }
.tg-btn-primary:hover{ filter:brightness(1.06); }
.tg-btn-ghost{ border:2px solid rgba(251,245,232,.4); color:var(--vjr-text-on-dark); }
.tg-btn-ghost:hover{ background:rgba(251,245,232,.1); border-color:var(--vjr-text-on-dark); }
.tg-btn-ghost-dark{ border:2px solid rgba(18,51,34,.3); color:var(--vjr-savane); }
.tg-btn-ghost-dark:hover{ background:rgba(18,51,34,.08); }
.tg-scroll-cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(251,245,232,.55); font-size:.68rem; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1; text-decoration:none; cursor:pointer; transition:color .2s ease; animation:tg-bounce 2.2s ease-in-out infinite; }\n.tg-scroll-cue:hover{ color:var(--vjr-safran); }\n@keyframes tg-bounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }
.tg-scroll-cue span{ letter-spacing:.15em; text-transform:uppercase; }

/* ---------- STATS ---------- */
.tg-stats{ background:var(--vjr-creme); border-bottom:1px solid rgba(18,51,34,.1); }
.tg-stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; padding-top:52px; padding-bottom:52px; }
@media (min-width:768px){ .tg-stats-grid{ grid-template-columns:repeat(4,1fr); } }
.tg-stat i{ font-size:1.4rem; color:var(--vjr-terre); margin-bottom:10px; display:block; }
.tg-stat-num{ font-family:var(--vjr-font-display); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.8rem); color:var(--vjr-savane); }
.tg-stat-label{ font-size:.88rem; color:rgba(27,22,16,.6); font-weight:500; margin-top:4px; }

/* ---------- AUJOURD'HUI ---------- */
.tg-today{ background:var(--vjr-savane); position:relative; overflow:hidden; padding:56px 0; }
.tg-today-card{ position:relative; z-index:1; }
.tg-today-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.tg-today-updated{ font-size:.78rem; color:rgba(251,245,232,.5); }
.tg-today-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (min-width:768px){ .tg-today-grid{ grid-template-columns:repeat(4,1fr); } }
.tg-today-grid div{ display:flex; flex-direction:column; gap:4px; }
.tg-today-grid strong{ font-family:var(--vjr-font-display); font-size:1.7rem; color:var(--vjr-safran); }
.tg-today-grid span{ font-size:.8rem; color:rgba(251,245,232,.65); }

/* ---------- EXPLORER GRID ---------- */
.tg-explorer-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:768px){ .tg-explorer-grid{ grid-template-columns:repeat(4,1fr); gap:18px; } }
.tg-explore-hero,.tg-explore-card{ position:relative; border-radius:22px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; color:var(--vjr-text-on-dark); background-size:cover; background-position:center; }
.tg-explore-hero { grid-column:span 2; grid-row:span 2; min-height:270px; padding:30px; }
@media (min-width:768px){ .tg-explore-hero{ min-height:400px; padding:38px; } }
.tg-explore-card{ min-height:170px; padding:20px; }
.tg-explore-hero i,.tg-explore-card i{ position:relative; z-index:1; font-size:1.5rem; color:var(--vjr-safran); margin-bottom:10px; }
.tg-explore-hero h3{ position:relative; z-index:1; font-size:1.6rem; }
.tg-explore-card h3{ position:relative; z-index:1; font-size:1.15rem; }
.tg-explore-hero p{ position:relative; z-index:1; font-size:.88rem; color:rgba(251,245,232,.75); margin-top:8px; max-width:280px; }

.tg-badge{ display:inline-block; position:relative; z-index:1; width:fit-content; font-size:.68rem; font-weight:700; background:var(--vjr-safran); color:var(--vjr-ombre); padding:5px 14px; border-radius:999px; margin-bottom:12px; }
.tg-badge-sm{ font-size:.62rem; padding:4px 10px; }
.tg-arrow-link{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:var(--vjr-safran); margin-top:12px; }
.tg-overlay,.tg-overlay-soft{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.tg-overlay{ opacity:.22; }
.tg-overlay-soft{ opacity:.1; }

/* ---------- REGIONS ---------- */
.tg-region-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.tg-filter-btn{ padding:8px 18px; border-radius:999px; border:2px solid rgba(18,51,34,.2); background:transparent; color:var(--vjr-savane); font-weight:600; font-size:.84rem; cursor:pointer; transition:all .2s ease; }
.tg-filter-btn.active,.tg-filter-btn:hover{ background:var(--vjr-savane); border-color:var(--vjr-savane); color:var(--vjr-text-on-dark); }
.tg-regions-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:768px){ .tg-regions-grid{ grid-template-columns:repeat(3,1fr); } }
.tg-region-card{ position:relative; border-radius:22px; overflow:hidden; padding:26px; min-height:210px; display:flex; flex-direction:column; justify-content:flex-end; color:var(--vjr-text-on-dark); }
.tg-region-card i{ position:relative; z-index:1; font-size:1.2rem; color:var(--vjr-safran); margin-bottom:10px; }
.tg-region-card h3{ position:relative; z-index:1; font-size:1.3rem; }
.tg-region-card p{ position:relative; z-index:1; font-size:.84rem; color:rgba(251,245,232,.7); margin-top:6px; }
.tg-region-meta{ position:relative; z-index:1; margin-top:14px; font-size:.76rem; color:rgba(251,245,232,.6); }
.tg-weather-badge{ position:absolute; top:18px; right:18px; z-index:1; background:rgba(0,0,0,.32); backdrop-filter:blur(6px); padding:5px 12px; border-radius:999px; font-size:.76rem; color:var(--vjr-text-on-dark); }

/* ---------- A LA UNE (actus) ---------- */
.tg-une-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px){ .tg-une-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; } }
.tg-une-card{ position:relative; border-radius:20px; overflow:hidden; background-size:cover; background-position:center; padding:22px; display:flex; flex-direction:column; justify-content:flex-end; color:var(--vjr-text-on-dark); min-height:190px; }
@media (min-width:768px){
  .tg-une-card.tg-une-large{ grid-column:span 2; grid-row:span 2; }
  .tg-une-card.tg-une-medium{ grid-row:span 2; }
}
.tg-une-card h3{ position:relative; z-index:1; font-size:1.05rem; line-height:1.3; }
.tg-une-card.tg-une-large h3{ font-size:1.55rem; }
.tg-une-card p{ position:relative; z-index:1; font-size:.84rem; color:rgba(251,245,232,.75); margin-top:8px; }
.tg-une-date{ position:relative; z-index:1; font-size:.74rem; color:rgba(251,245,232,.55); margin-top:10px; display:block; }

/* ---------- COUP DE PROJECTEUR ---------- */
.tg-spotlight{ background:var(--vjr-savane); position:relative; overflow:hidden; }
.tg-spotlight-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:768px){ .tg-spotlight-grid{ grid-template-columns:repeat(3,1fr); } }
.tg-spotlight-card{ background:rgba(251,245,232,.06); border:1px solid rgba(251,245,232,.12); border-radius:20px; padding:26px; color:var(--vjr-text-on-dark); }
.tg-sp-kicker{ color:var(--vjr-safran); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.tg-spotlight-card h3{ margin-top:10px; font-size:1.25rem; font-family:var(--vjr-font-display); }
.tg-spotlight-card p{ margin-top:10px; font-size:.88rem; color:rgba(251,245,232,.7); }

/* ---------- VITRINE : COUP DE COEUR / SAVIEZ-VOUS / CITATION / PHOTO DU JOUR ---------- */
.tg-vitrine-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:768px){ .tg-vitrine-grid{ grid-template-columns:2fr 1fr; } }
.tg-vitrine-coupdecoeur{ position:relative; border-radius:22px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; color:var(--vjr-text-on-dark); background-size:cover; background-position:center; min-height:340px; padding:32px; }
@media (min-width:768px){ .tg-vitrine-coupdecoeur{ min-height:100%; padding:38px; } }
.tg-vitrine-coupdecoeur h3{ position:relative; z-index:1; font-size:1.7rem; max-width:420px; }
.tg-vitrine-coupdecoeur p{ position:relative; z-index:1; font-size:.92rem; color:rgba(251,245,232,.78); margin-top:10px; max-width:420px; }
.tg-vitrine-stack{ display:flex; flex-direction:column; gap:18px; }
.tg-vitrine-stack .tg-fact-card,.tg-vitrine-stack .tg-quote-card{ flex:1; }
.tg-photo-jour{ position:relative; margin-top:18px; border-radius:22px; overflow:hidden; min-height:280px; display:flex; align-items:flex-end; padding:32px; background-size:cover; background-position:center; }
@media (min-width:768px){ .tg-photo-jour{ min-height:340px; padding:38px; } }
.tg-photo-jour-body{ position:relative; z-index:1; color:var(--vjr-text-on-dark); }
.tg-photo-jour-body h3{ font-size:1.6rem; margin-top:10px; }

/* ---------- LE SAVIEZ-VOUS / CITATION ---------- */
.tg-fact-quote{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:768px){ .tg-fact-quote{ grid-template-columns:1fr 1fr; } }
.tg-fact-card{ background:var(--vjr-savane); color:var(--vjr-text-on-dark); border-radius:22px; padding:30px; position:relative; overflow:hidden; min-height:170px; }
.tg-fc-kicker{ position:relative; z-index:1; display:flex; align-items:center; gap:8px; color:var(--vjr-safran); font-weight:700; font-size:.84rem; margin-bottom:12px; }
.tg-fact-card p{ position:relative; z-index:1; font-size:1.05rem; line-height:1.5; }
.tg-quote-card{ background:var(--vjr-creme); border:1px solid rgba(18,51,34,.12); border-radius:22px; padding:30px; position:relative; min-height:170px; }
.tg-quote-card i{ color:rgba(190,90,33,.3); font-size:1.7rem; }
.tg-quote-card p{ font-size:1.05rem; line-height:1.5; color:rgba(27,22,16,.85); margin-top:10px; }
.tg-quote-card span{ display:block; margin-top:12px; font-weight:600; color:var(--vjr-terre); }

/* ---------- PERSONNALITES ---------- */
.tg-people-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:640px){ .tg-people-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px){ .tg-people-grid{ grid-template-columns:repeat(4,1fr); } }
.tg-people-photo{ height:190px; background-size:cover; background-position:center; background-color:var(--vjr-savane); border-radius:18px 18px 0 0; }
.tg-people-body{ background:var(--vjr-creme); border:1px solid rgba(18,51,34,.1); border-top:0; border-radius:0 0 18px 18px; padding:18px; }
.tg-people-body span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--vjr-terre); font-weight:700; }
.tg-people-body h3{ margin-top:6px; font-size:1.05rem; color:var(--vjr-savane); font-family:var(--vjr-font-display); }
.tg-people-body p{ margin-top:8px; font-size:.84rem; color:rgba(27,22,16,.65); }

/* ---------- HISTOIRE / TIMELINE ---------- */
.tg-histoire{ background:var(--vjr-savane); color:var(--vjr-text-on-dark); position:relative; overflow:hidden; }
.tg-timeline-track{ position:relative; z-index:1; display:flex; gap:22px; overflow-x:auto; padding-bottom:16px; scrollbar-width:thin; }
.tg-timeline-item{ min-width:230px; flex-shrink:0; border-left:2px solid var(--vjr-safran); padding-left:18px; }
.tg-timeline-year{ color:var(--vjr-safran); font-weight:700; font-size:1.15rem; }
.tg-timeline-item h4{ margin-top:8px; font-size:1.02rem; }
.tg-timeline-item p{ margin-top:8px; font-size:.84rem; color:rgba(251,245,232,.7); }

/* ---------- CARTE ---------- */
.tg-map-frame{ position:relative; border-radius:22px; overflow:hidden; background:var(--vjr-sable-deep); border:1px solid rgba(18,51,34,.1); min-height:420px; }
.tg-map-canvas{ width:100%; height:100%; min-height:420px; z-index:1; }
.tg-map-hint{ position:absolute; bottom:16px; left:16px; background:rgba(255,255,255,.92); padding:6px 14px; border-radius:999px; font-size:.78rem; color:var(--vjr-savane); z-index:400; box-shadow:0 4px 12px rgba(0,0,0,.15); }

/* ---------- MARQUEE ---------- */
.tg-marquee-section{ background:var(--vjr-sable); padding:40px 0; overflow:hidden; }
.tg-marquee-label{ text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(27,22,16,.45); margin-bottom:20px; }
.tg-marquee-mask{ overflow:hidden; }
.tg-marquee-track{ display:flex; gap:52px; white-space:nowrap; animation:tg-marquee 34s linear infinite; width:max-content; }
.tg-marquee-track span{ font-family:var(--vjr-font-display); font-weight:700; font-size:1.3rem; color:rgba(18,51,34,.3); }
@keyframes tg-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- ANNUAIRE ---------- */
.tg-annuaire-cats{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:32px; }
@media (min-width:768px){ .tg-annuaire-cats{ grid-template-columns:repeat(6,1fr); } }
.tg-acat{ background:var(--vjr-creme); border:1px solid rgba(18,51,34,.1); border-radius:16px; padding:20px; text-align:center; transition:border-color .2s ease; }
.tg-acat:hover{ border-color:var(--vjr-terre); }
.tg-acat span{ font-size:1.5rem; }
.tg-acat h4{ margin-top:8px; font-size:.92rem; color:var(--vjr-savane); font-family:var(--vjr-font-display); }
.tg-acat p{ margin-top:4px; font-size:.74rem; color:rgba(27,22,16,.55); }
.tg-annuaire-featured{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; background:var(--vjr-savane); border-radius:22px; padding:30px; color:var(--vjr-text-on-dark); }
.tg-af-kicker{ color:var(--vjr-safran); font-weight:700; font-size:.78rem; text-transform:uppercase; }
.tg-af-list{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; }
.tg-af-item{ background:rgba(251,245,232,.08); border-radius:12px; padding:10px 16px; transition:background .2s ease; }
.tg-af-item:hover{ background:rgba(251,245,232,.16); }
.tg-af-item span{ font-size:.68rem; color:var(--vjr-safran); text-transform:uppercase; font-weight:700; }
.tg-af-item h5{ margin-top:2px; font-size:.88rem; }

/* ---------- DESTINATION DU MOIS ---------- */
.tg-destination-card{ position:relative; border-radius:22px; overflow:hidden; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; padding:34px; color:var(--vjr-text-on-dark); background-size:cover; background-position:center; }
.tg-destination-card h3{ position:relative; z-index:1; font-size:1.7rem; font-family:var(--vjr-font-display); }
.tg-destination-card p{ position:relative; z-index:1; margin-top:10px; font-size:.92rem; max-width:480px; color:rgba(251,245,232,.8); }

/* ---------- A PROPOS ---------- */
.tg-about-grid{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
@media (min-width:768px){ .tg-about-grid{ grid-template-columns:1.2fr 1fr; } }
.tg-about-text{ margin-top:16px; color:rgba(27,22,16,.7); font-size:1.02rem; line-height:1.6; }
.tg-about-stats{ display:flex; gap:28px; margin-top:24px; flex-wrap:wrap; }
.tg-about-stats div{ display:flex; flex-direction:column; font-size:.82rem; color:rgba(27,22,16,.6); }
.tg-about-stats strong{ font-size:1.7rem; color:var(--vjr-savane); font-family:var(--vjr-font-display); }
.tg-app-card{ background:var(--vjr-savane); color:var(--vjr-text-on-dark); border-radius:22px; padding:30px; }
.tg-app-card > span{ font-size:.8rem; color:var(--vjr-safran); font-weight:700; }
.tg-app-card h3{ margin-top:10px; font-size:1.35rem; font-family:var(--vjr-font-display); }
.tg-app-card p{ margin-top:10px; font-size:.88rem; color:rgba(251,245,232,.7); }
.tg-app-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.tg-app-badges span{ background:rgba(251,245,232,.1); padding:8px 14px; border-radius:999px; font-size:.76rem; }

/* ---------- TEMOIGNAGES ---------- */
.tg-testimonials-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:768px){ .tg-testimonials-grid{ grid-template-columns:repeat(3,1fr); } }
.tg-testi-card{ background:var(--vjr-creme); border:1px solid rgba(18,51,34,.1); border-radius:20px; padding:26px; position:relative; }
.tg-testi-card .quote-mark{ position:absolute; top:14px; right:20px; font-size:2.3rem; color:rgba(190,90,33,.2); font-family:Georgia,serif; line-height:1; }
.tg-testi-card p{ font-size:.94rem; color:rgba(27,22,16,.75); font-style:italic; line-height:1.55; }
.tg-testi-avatar-row{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.tg-testi-avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; flex-shrink:0; }
.tg-testi-name{ font-size:.85rem; font-weight:700; color:var(--vjr-savane); }
.tg-testi-role{ font-size:.74rem; color:rgba(27,22,16,.5); }

/* ---------- NEWSLETTER ---------- */
.tg-newsletter{ padding-bottom:90px; }
.tg-newsletter-card{ position:relative; border-radius:28px; padding:52px 30px; text-align:center; overflow:hidden; }
.tg-newsletter-card h2{ position:relative; z-index:1; font-size:clamp(1.5rem,3vw,2.4rem); color:var(--vjr-text-on-dark); max-width:640px; margin:0 auto; font-family:var(--vjr-font-display); }
.tg-newsletter-card > p{ position:relative; z-index:1; color:rgba(251,245,232,.7); margin-top:14px; max-width:460px; margin-left:auto; margin-right:auto; }
.tg-newsletter-form{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px; max-width:440px; margin:26px auto 0; }
.tg-newsletter-form input{ flex:1; min-width:200px; background:var(--vjr-creme); border:0; border-radius:999px; padding:14px 20px; font-size:.9rem; color:var(--vjr-ombre); }
.tg-newsletter-form .btn-glow{ background:var(--vjr-safran); color:var(--vjr-ombre); border:0; padding:14px 24px; border-radius:999px; font-weight:700; cursor:pointer; }
.tg-newsletter-msg{ position:relative; z-index:1; margin-top:14px; font-size:.85rem; display:none; }

/* ================================================================
   CORRECTIF TITRES ILLISIBLES SUR CARDS A FOND PHOTO/COULEUR (v3.9.4)
   Bug racine : regle globale h1,h2,h3{color:var(--text)} (vjr221.css)
   s'applique DIRECTEMENT aux <h3>, ce qui gagne toujours face a la
   couleur crème heritee du conteneur parent (color:var(--vjr-text-on-dark)),
   qu'importe la specificite -- un style hérité perd toujours face a une
   regle qui cible l'element directement. Resultat : titres bleu-gris fonce
   (#1F2937) illisibles sur les cards a fond photo/couleur. Corrige en
   forcant color:inherit (+ ombre portee pour la lisibilite sur photo).
   ================================================================ */
.tg-explore-hero h3,
.tg-explore-card h3,
.tg-region-card h3,
.tg-une-card h3,
.tg-spotlight-card h3,
.tg-fact-card h3,
.tg-app-card h3,
.tg-annuaire-featured h3,
.tg-destination-card h3 {
  color: inherit;
  text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 12px rgba(0,0,0,.25);
}

/* ================================================================
   CORRECTIF CONTRASTE DARK MODE -- FOND var(--vjr-savane) (v3.9.4)
   html.dark redefinit --vjr-savane en #4CA37A (vert clair) pour rester
   lisible quand la variable sert de TEXTE ailleurs. Mais plusieurs
   sections l'utilisent aussi comme FOND avec un texte crème fixe
   (color:var(--vjr-text-on-dark)) -- en dark mode ca donne du texte
   clair sur un fond devenu clair = illisible (dont "Memoire"). On fixe
   ces fonds a la couleur de marque foncee, independamment de la
   variable, pour que le texte crème reste toujours lisible.
   ================================================================ */
html.dark .tg-hero,
html.dark .tg-today,
html.dark .tg-spotlight,
html.dark .tg-fact-card,
html.dark .tg-histoire,
html.dark .tg-annuaire-featured,
html.dark .tg-app-card {
  background: #123322;
}

/* ---------- RESPONSIVE : mobile fine-tuning ---------- */
@media (max-width:480px){
  .tg-search{ flex-wrap:wrap; border-radius:20px; }
  .tg-search .btn-glow{ width:100%; margin-top:6px; }
  .tg-ctas{ flex-direction:column; }
  .tg-ctas .tg-btn{ justify-content:center; }
}

/* ---------- MODE SOMBRE ----------
   Variables de surface heritees du design system global (vjr221.css .dark),
   deja coherentes site-entier -- pas de redefinition locale ici pour eviter
   toute divergence entre la home et le reste du site. */
html.dark .tg-section.tg-alt{ background:var(--vjr-sable-deep); }
html.dark .tg-stats{ background:var(--vjr-creme); border-color:rgba(244,233,214,.1); }
html.dark .tg-region-card,html.dark .tg-une-card,html.dark .tg-explore-card,html.dark .tg-explore-hero,
html.dark .tg-people-photo,html.dark .tg-destination-card{ background-color:#1E4A32; }
html.dark .tg-people-body,html.dark .tg-acat,html.dark .tg-quote-card,html.dark .tg-testi-card{
  background:var(--vjr-creme); border-color:rgba(244,233,214,.12); color:var(--vjr-ombre);
}
html.dark .tg-section-sub,html.dark .tg-about-text{ color:rgba(244,233,214,.65); }


/* ============================================================
   DARK MODE -- charte Teranga homepage (ajoute pour coherence
   avec le design system global, sans toucher aux regles claires
   existantes ci-dessus).
   ============================================================ */
html.dark {
  /* Surfaces : identiques a vjr221.css .dark (deja globales), redefinies ici
     par securite. --vjr-terre, --vjr-safran, --vjr-rouge sont deja adaptes
     site-entier dans vjr221.css et ne sont plus dupliques ici. */
  --vjr-sable:      #0F172A;
  --vjr-sable-deep: #16233d;
  --vjr-creme:      #1E2937;
  --vjr-ombre:      #F1F5F9;
  /* --vjr-savane reste la couleur de marque fixe partout ailleurs sur le site ;
     sur la home, certaines regles l'utilisent comme texte/accent sur fond
     sombre, d'ou cet eclaircissement local pour rester lisible. */
  --vjr-savane:     #4CA37A;
  --vjr-savane-2:   #6BBF95;
}

html.dark body.home.grain::after { opacity: .08; }

/* Correctif : le footer (fond fixe --vjr-savane) ne doit pas suivre
   l'eclaircissement de --vjr-savane fait plus haut pour la home en
   dark mode (utilise ici comme texte/accent, pas comme fond). Sans
   ce correctif le footer heritait du vert clair du hero. */
html.dark .site-footer { background: #123322; }

/* ===================================================================
   CORRECTIFS CONTRASTE DARK MODE (audit 2026-07-18, tour 2)
   Les titres/valeurs ci-dessous utilisent la couleur de marque fixe
   --vjr-savane (vert fonce, ne bascule jamais) sur des fonds qui EUX
   basculent sombres en dark mode (--vjr-creme, --bg, --card-bg...).
   Resultat sans ce correctif : texte vert fonce sur fond sombre =
   illisible. On garde la couleur de marque en mode clair et on la
   remplace uniquement en dark par une couleur claire lisible.
   =================================================================== */
html.dark .tg-section-head h2,
html.dark .tg-stat-num,
html.dark .tg-people-body h3,
html.dark .tg-testi-name,
html.dark .tg-acat h4,
html.dark .tg-about-stats strong,
html.dark .tg-filter-btn {
  color: var(--text);
}

html.dark .tg-filter-btn.active,
html.dark .tg-filter-btn:hover {
  color: var(--vjr-text-on-dark);
}

html.dark .tg-quote-card p,
html.dark .tg-testi-card p,
html.dark .tg-people-body p,
html.dark .tg-testi-role {
  color: var(--text-secondary);
}

/* ================================================================
   CORRECTIF SPECIFICITE CSS -- TITRES/BOUTONS ILLISIBLES (v3.9.5)
   Bug racine reel : ".vjr-home a{color:inherit}" (vjr-home-page.css)
   a une specificite (0,1,1) SUPERIEURE a celle des couleurs de texte
   propres aux cartes/boutons homepage qui sont elles-memes des <a>
   (ex: ".tg-region-card{color:var(--vjr-text-on-dark)}" n'a que
   une specificite de (0,1,0)). Le style generique "inherit" gagnait
   donc systematiquement, quel que soit l'ordre des fichiers, et ces
   liens heritaient du texte sombre de la page (--vjr-ombre) au lieu
   de leur propre couleur claire -- d'ou les titres de cartes, le
   bouton "Decouvrir ma region" et le lien "Decouvrir" (scroll cue)
   invisibles sur fond sombre/photo. Les regles "color:inherit" deja
   ajoutees sur les h3 (bloc v3.9.4 plus haut) heritaient donc elles
   aussi de la mauvaise valeur. Corrige en fixant la couleur sur le
   lien lui-meme avec une specificite superieure a ".vjr-home a".
   ================================================================ */
.vjr-home a.tg-region-card,
.vjr-home a.tg-une-card,
.vjr-home a.tg-explore-hero,
.vjr-home a.tg-explore-card,
.vjr-home a.tg-destination-card,
.vjr-home a.tg-btn-ghost {
  color: var(--vjr-text-on-dark);
}
.vjr-home a.tg-btn-ghost-dark {
  color: var(--vjr-savane);
}
html.dark .vjr-home a.tg-btn-ghost-dark {
  color: var(--text);
}
.vjr-home a.tg-scroll-cue {
  color: rgba(251,245,232,.55);
}
.vjr-home a.tg-scroll-cue:hover {
  color: var(--vjr-safran);
}