/* =====================================================================
   HealthPolicy.be — Vitrine baromètres (repositionnée « voie prise »)
   Rendue par [hp_vitrine_barometres]. Chargée uniquement sur la page qui
   contient ce shortcode.

   Portée : tout est scopé sous .hp-vitrine (ne touche pas Divi).
   Réutilise les tokens --hp-* de assets/hp-premium.css. Navy + turquoise ;
   ni or ni violet (aligné sur les baromètres clairs).
   ===================================================================== */

.hp-vitrine{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--hp-ink); line-height:1.55; -webkit-font-smoothing:antialiased;
}
.hp-vitrine, .hp-vitrine *{ box-sizing:border-box; }
.hp-vitrine .serif{ font-family:Georgia,"Times New Roman",serif; }
.hp-vitrine .vwrap{ max-width:1000px; margin:0 auto; padding:0 40px; }
@media(max-width:640px){ .hp-vitrine .vwrap{ padding:0 22px; } }

/* ---- Boutons ---- */
.hp-vitrine .vbtn{ display:inline-block; font-weight:700; font-size:14.5px; border-radius:11px; padding:12px 22px; cursor:pointer; border:none; text-decoration:none; transition:transform .12s ease, background .15s ease, box-shadow .15s ease; }
.hp-vitrine .vbtn-accent{ background:var(--hp-accent); color:#06333a; box-shadow:0 4px 14px rgba(21,181,196,.28); }
.hp-vitrine .vbtn-accent:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(21,181,196,.36); }
.hp-vitrine .vbtn-navy{ background:var(--hp-navy); color:#fff; box-shadow:0 4px 14px rgba(20,58,102,.20); }
.hp-vitrine .vbtn-navy:hover{ background:var(--hp-navy-d); transform:translateY(-1px); color:#fff; }
.hp-vitrine .vbtn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.hp-vitrine .vbtn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }

/* ---- Hero (navy) ---- */
.hp-vitrine .vhero{ background:linear-gradient(160deg,var(--hp-navy) 0%,var(--hp-navy-d) 100%); color:#fff; border-radius:var(--hp-radius); overflow:hidden; margin-top:8px; }
.hp-vitrine .vhero .in{ max-width:1000px; margin:0 auto; padding:58px 46px 52px; }
.hp-vitrine .vhero .kick{ font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--hp-accent); }
.hp-vitrine .vhero h1{ font-family:Georgia,serif; font-size:48px; line-height:1.08; font-weight:700; letter-spacing:-1px; margin:14px 0 16px; max-width:15ch; color:#fff; }
.hp-vitrine .vhero h1 em{ font-style:normal; color:var(--hp-accent); }
.hp-vitrine .vhero .lead{ font-size:19px; color:#cddaeb; max-width:58ch; line-height:1.5; }
.hp-vitrine .vhero .cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.hp-vitrine .vhero .trust{ margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16); display:flex; gap:34px; flex-wrap:wrap; font-size:13px; color:#9fb3cd; }
.hp-vitrine .vhero .trust b{ display:block; color:#fff; font-size:20px; font-family:Georgia,serif; }
@media(max-width:640px){ .hp-vitrine .vhero .in{ padding:40px 24px; } .hp-vitrine .vhero h1{ font-size:33px; } .hp-vitrine .vhero .lead{ font-size:17px; } }

/* ---- Sections ---- */
.hp-vitrine .vsec{ padding:54px 0 6px; }
.hp-vitrine .veyebrow{ font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--hp-accent); }
.hp-vitrine .vh2{ font-family:Georgia,serif; font-size:32px; font-weight:700; margin:6px 0 8px; letter-spacing:-.4px; color:var(--hp-navy); }
.hp-vitrine .vsub{ font-size:16px; color:var(--hp-muted); max-width:66ch; margin-bottom:24px; line-height:1.5; }
.hp-vitrine .vsub b{ color:var(--hp-ink); }

/* ---- Bandeau indépendance ---- */
.hp-vitrine .vindep{ background:#fff; border:1px solid var(--hp-line); border-left:4px solid var(--hp-accent); border-radius:var(--hp-radius); padding:26px 30px; box-shadow:var(--hp-shadow); margin-top:8px; }
.hp-vitrine .vindep p{ margin:0; font-size:15.5px; color:var(--hp-muted); max-width:74ch; }
.hp-vitrine .vindep p b{ color:var(--hp-navy); }
.hp-vitrine .vindep p + p{ margin-top:10px; }

/* ---- Pyramide de valeur (3 niveaux) ---- */
.hp-vitrine .vpyr{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:820px){ .hp-vitrine .vpyr{ grid-template-columns:1fr; } }
.hp-vitrine .vlvl{ background:#fff; border:1px solid var(--hp-line); border-radius:16px; padding:22px 22px 24px; box-shadow:var(--hp-shadow); display:flex; flex-direction:column; }
.hp-vitrine .vlvl .step{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--hp-muted); }
.hp-vitrine .vlvl .tag{ display:inline-block; align-self:flex-start; margin:10px 0 12px; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; }
.hp-vitrine .vlvl.free .tag{ background:rgba(21,181,196,.12); color:#0d7a86; }
.hp-vitrine .vlvl.paid .tag{ background:rgba(20,58,102,.10); color:var(--hp-navy); }
.hp-vitrine .vlvl.prem .tag{ background:var(--hp-navy); color:#fff; }
.hp-vitrine .vlvl h3{ font-family:Georgia,serif; font-size:20px; color:var(--hp-navy); margin:0 0 8px; }
.hp-vitrine .vlvl p{ font-size:14px; color:var(--hp-muted); margin:0 0 12px; }
.hp-vitrine .vlvl ul{ list-style:none; margin:0; padding:0; }
.hp-vitrine .vlvl li{ font-size:13.5px; color:var(--hp-ink); padding:5px 0 5px 22px; position:relative; }
.hp-vitrine .vlvl li::before{ content:"✓"; position:absolute; left:0; color:var(--hp-accent); font-weight:800; }
.hp-vitrine .vlvl.prem{ border-color:rgba(20,58,102,.25); }

/* ---- Bande CTA (sans prix) ---- */
.hp-vitrine .vband{ margin-top:30px; background:var(--hp-bg); border:1px solid var(--hp-line); border-radius:16px; padding:30px 32px; text-align:center; }
.hp-vitrine .vband h3{ font-family:Georgia,serif; font-size:23px; color:var(--hp-navy); margin:0 0 6px; }
.hp-vitrine .vband p{ font-size:14.5px; color:var(--hp-muted); margin:0 0 18px; }
.hp-vitrine .vband .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- Bandeau de bascule des baromètres ---- */
.hp-vitrine .vbaro-intro{ margin-top:6px; }
.hp-vitrine .vtoggle{ display:inline-flex; background:var(--hp-bg); border:1px solid var(--hp-line); border-radius:12px; padding:4px; margin-top:4px; }
.hp-vitrine .vtoggle button{ border:none; background:transparent; font-weight:700; font-size:14px; color:var(--hp-muted); padding:9px 20px; border-radius:9px; cursor:pointer; transition:background .15s ease,color .15s ease; }
.hp-vitrine .vtoggle button.on{ background:#fff; color:var(--hp-navy); box-shadow:0 1px 4px rgba(16,42,77,.12); }
.hp-vitrine .vnote{ font-size:12.5px; color:var(--hp-muted); margin-top:12px; }

/* Transitions douces des conteneurs baromètre pilotés par le toggle */
.hp-baro-embed.vhidden{ display:none; }