/*
Theme Name:   Astra Child — Editions Vanhook
Template:     astra
Description:  Thème enfant d'Astra. Contient les templates personnalisés (WooCommerce, catégories) pour qu'ils survivent aux mises à jour d'Astra.
Author:       Editions Vanhook
Version:      1.8.0
Text Domain:  astra-child
*/

/* ═══════════════════════════════════════════════════════════
   FICHE PRODUIT (woocommerce/single-product.php) — refonte 2026-10
   Portrait (smartphone, iPad vertical) par défaut,
   paysage (PC, laptop, iPad horizontal) dans @media (orientation: landscape).
   ═══════════════════════════════════════════════════════════ */

.vh-fp {
    --vh-vert: #157f4a; /* 2026-10-16 contraste vert : ancien #1A9E5C */
    --vh-vert-fonce: #126b3e; /* 2026-10-16 contraste vert : ancien #1e8449 */
    --vh-orange: #FF9900;
    --vh-orange-fonce: #e68a00;
    --vh-encre: #1a1a2e;
    --vh-gris-fond: #f4f5f7;
    --vh-gris-bord: #d9dce1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 12px 32px;
    color: var(--vh-encre);
    box-sizing: border-box;
}
.vh-fp *, .vh-fp *::before, .vh-fp *::after { box-sizing: border-box; }
.vh-fp [hidden] { display: none !important; }

/* ── En-tête : fil d'Ariane, titre, sous-titre ── */
.vh-fp-head { text-align: center; margin-bottom: 14px; }
/* Fil d'Ariane caché à l'écran (la version pour Google, en JSON-LD, reste dans la page) */
/* 2026-10-08 (étape 5) : fil d'Ariane rendu visible (avant : display: none) et centré au-dessus du titre. */
.vh-fp-bc { display: block; text-align: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.vh-fp-bc a, .vh-fp nav.vh-fp-bc a { color: #1a5fb4; text-decoration: none; }
.vh-fp-bc a:hover, .vh-fp nav.vh-fp-bc a:hover { text-decoration: underline; }
.vh-fp-h1 { font-size: clamp(1.3rem, 5.5vw, 2rem); font-weight: 800; line-height: 1.2; margin: 0 0 6px; color: var(--vh-encre); }
.vh-fp-sous { font-size: clamp(0.9rem, 4vw, 1.6rem); font-weight: 800; line-height: 1.2; text-transform: uppercase; white-space: nowrap; margin: 0; color: var(--vh-vert); }

/* ── Grande carte d'achat ── */
.vh-fp-card {
    background: var(--vh-gris-fond);
    border: 1px solid var(--vh-gris-bord);
    border-radius: 12px;
    padding: 14px;
    display: grid;
    gap: 12px;
}
.vh-fp-visuel { text-align: center; }
.vh-fp-img { display: inline-block; width: auto; max-width: 100%; max-height: 170px; object-fit: contain; }
.vh-fp-achat { display: flex; flex-direction: column; gap: 10px; text-align: center; }

/* Boutons de format */
.vh-fp-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vh-fp .vh-fp-fmt {
    appearance: none;
    margin: 0;
    padding: 10px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 2px solid var(--vh-encre);
    border-radius: 8px;
    background: #fff;
    color: var(--vh-encre);
    font-family: inherit;
    font-size: clamp(0.58rem, 2.5vw, 0.95rem);
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
}
.vh-fp-fmt-prix { white-space: nowrap; }
.vh-fp .vh-fp-fmt.is-active { background: var(--vh-vert); border-color: var(--vh-vert); color: #fff; }
.vh-fp .vh-fp-fmt:disabled { opacity: 0.45; cursor: default; }
.vh-fp .vh-fp-fmt:focus-visible { outline: 3px solid var(--vh-orange); outline-offset: 2px; }

/* Bloc Détails « VOIR LE SOMMAIRE » */
.vh-fp-sommaire { background: #fff; border: 1px solid var(--vh-gris-bord); border-radius: 8px; text-align: left; }
.vh-fp-sommaire summary { text-align: center; padding: 10px 12px; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; cursor: pointer; color: var(--vh-encre); }
.vh-fp-sommaire-contenu { padding: 0 14px 12px; font-size: 0.9rem; max-height: 60vh; overflow-y: auto; }

/* Contenu du sommaire (description du produit) :
   Titre 2 = LIVRE 1 / LIVRE 2 (bandeau vert) ; Titre 3 = parties (brique) ;
   Paragraphe = chapitres (1er retrait) ; Liste à puces = sous-chapitres (2e retrait, sans puces).
   Titre 1 éventuel affiché comme un Titre 2, par sécurité. */
.vh-fp .vh-fp-sommaire-contenu h1,
.vh-fp .vh-fp-sommaire-contenu h2 {
    margin: 14px 0 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--vh-vert);
    color: #fff;
    font-size: clamp(0.95rem, 4vw, 1.15rem);
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}
.vh-fp .vh-fp-sommaire-contenu > :first-child { margin-top: 4px; }
.vh-fp .vh-fp-sommaire-contenu h3 {
    margin: 12px 0 4px;
    color: #B5532F;
    font-size: clamp(0.9rem, 3.8vw, 1.05rem);
    font-weight: 800;
    line-height: 1.3;
}
.vh-fp .vh-fp-sommaire-contenu p {
    margin: 0 0 4px;
    padding-left: 12px;
    color: #333;
    font-size: 0.82rem;
    line-height: 1.55;
}
.vh-fp .vh-fp-sommaire-contenu ul {
    list-style: none;
    margin: 0 0 4px;
    padding-left: 26px;
}
.vh-fp .vh-fp-sommaire-contenu li {
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 0.82rem;
    line-height: 1.55;
}
.vh-fp .vh-fp-sommaire-contenu li::marker { content: none; }

/* Étoiles + « Lire Avis / Donner Avis » sous l'image */
.vh-fp-note { margin-top: 8px; text-align: center; }
.vh-fp-etoiles { margin: 0; font-size: 0.85rem; color: #555; }
.vh-fp-etoiles-ico { color: #f39c12; font-size: 1.1rem; letter-spacing: 1px; }
.vh-fp-avis-liens { margin: 2px 0 0; font-size: 0.85rem; }
.vh-fp .vh-fp-avis-lien { color: #1a5fb4; font-weight: 700; text-decoration: underline; }

/* Prix */
.vh-fp-public { margin: 0; font-size: 0.85rem; color: #555; }
.vh-fp-public s { color: #888; }
.vh-fp-prix { margin: 0; font-size: clamp(1.25rem, 6vw, 1.8rem); font-weight: 900; line-height: 1.1; color: var(--vh-encre); }

/* Bouton d'achat : vert (panier) ou orange (Amazon, logo dans le bouton) */
.vh-fp .vh-fp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 12px;
    border-radius: 8px;
    background: var(--vh-vert);
    color: #fff;
    font-size: clamp(0.9rem, 4vw, 1.05rem);
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
}
.vh-fp .vh-fp-btn:hover { background: var(--vh-vert-fonce); color: #fff; }
.vh-fp .vh-fp-btn.is-amazon { background: var(--vh-orange); }
.vh-fp .vh-fp-btn.is-amazon:hover { background: var(--vh-orange-fonce); }
.vh-fp .vh-fp-btn.is-off { background: #aaa; cursor: default; }
/* Logo Amazon : sélecteurs renforcés car Astra impose height:auto aux images du contenu */
.vh-fp .vh-fp-btn .vh-fp-btn-amz { display: none; height: 20px !important; width: auto !important; max-width: 70px; margin: 0; }
.vh-fp .vh-fp-btn.is-amazon .vh-fp-btn-amz { display: inline-block; }

.vh-fp-sep { margin: 0 4px; color: #aaa; }
.vh-fp-eco { color: #c0392b; font-weight: 800; }

/* Logos de paiement + « Paiement sécurisé » */
.vh-fp-paiement { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vh-fp-pay-logos { display: flex; justify-content: center; align-items: center; gap: 8px; }
.vh-fp .vh-fp-pay-logos img { height: 25px !important; width: auto !important; margin: 0; display: block; }
.vh-fp-pay-pp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 25px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    overflow: hidden;
}
.vh-fp .vh-fp-pay-pp img { height: 23px !important; }
.vh-fp-pay-txt { margin: 0; font-size: 0.8rem; color: #555; }

/* Badge disponibilité : fond blanc, fine bordure, icône ⚡ (PDF) ou 📦 (broché), une seule ligne */
.vh-fp-dispo {
    align-self: center;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid var(--vh-gris-bord);
    border-radius: 20px;
    background: #fff;
    color: #333;
    font-size: clamp(0.6rem, 2.7vw, 0.85rem);
    font-weight: 700;
    white-space: nowrap;
}

/* ── Cadre « Tu préfères… » ── */
.vh-fp-autres { margin-top: 16px; border: 2px solid var(--vh-encre); border-radius: 12px; padding: 12px; }
.vh-fp-autres-titre {
    margin: 0 0 10px;
    font-size: clamp(0.8rem, 3.6vw, 1.1rem);
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: var(--vh-encre);
}
.vh-fp-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vh-fp-carte { min-width: 0; overflow: hidden; display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--vh-gris-bord); border-radius: 8px; padding: 8px; }
.vh-fp-carte-img { width: 44px; height: auto; flex-shrink: 0; border-radius: 3px; }
.vh-fp-carte-txt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; flex: 1; }
.vh-fp-carte-nom { font-size: clamp(0.6rem, 2.5vw, 0.9rem); font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.vh-fp .vh-fp-voir {
    display: block;
    max-width: 100%;
    padding: 6px 5px;
    border-radius: 6px;
    background: var(--vh-vert);
    color: #fff;
    font-size: clamp(0.55rem, 2.2vw, 0.85rem);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.vh-fp .vh-fp-voir:hover { background: var(--vh-vert-fonce); color: #fff; }

/* Avis : un seul cadre blanc avec 2 lignes en accordéon (« AVIS DES LECTEURS » puis « DONNE TON AVIS »),
   même style que « DÉCOUVRIR LE SOMMAIRE ». Remplace les bandeaux verts du CSS additionnel. */
.vh-fp-avis { margin-top: 16px; background: #fff; border: 1px solid var(--vh-gris-bord); border-radius: 8px; overflow: hidden; }
.vh-fp-avis .vh-fiche-avis-section { margin: 0; border: 0; border-radius: 0; scroll-margin-top: 16px; }
.vh-fp-avis .vh-fp-donner { border-top: 1px solid var(--vh-gris-bord); }
.vh-fp-avis .vh-fiche-avis-band {
    position: relative;
    padding: 12px 36px;
    background: #fff;
    color: var(--vh-encre);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0;
    text-align: center;
    cursor: pointer;
}
.vh-fp-avis .vh-fiche-avis-band::after { content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1rem; }
.vh-fp-avis .is-ferme > .vh-fiche-avis-band::after { content: '▸'; }
.vh-fp-avis .is-ferme > .vh-fiche-avis-content { display: none; }
.vh-fp-avis .vh-fiche-avis-content { padding: 12px 14px; border-top: 1px dashed var(--vh-gris-bord); }
.vh-fp-avis .vh-fiche-avis-form-wrap { margin-top: 0; padding-top: 0; border-top: 0; }
.vh-fp-avis-score { margin-left: 6px; white-space: nowrap; text-transform: none; }
.vh-fp-avis-score-ico { color: #f39c12; letter-spacing: 1px; }
.vh-fp-avis-score-txt { color: #777; font-weight: 700; }

/* Bloc « LIRE LES ARTICLES » (au-dessus de « AVIS DES LECTEURS », même cadre) */
.vh-fp-avis .vh-fp-articles ~ .vh-fiche-avis-section { border-top: 1px solid var(--vh-gris-bord); }
.vh-fp-articles-groupe { margin: 6px 0 4px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--vh-vert); }
.vh-fp .vh-fp-articles-liste { list-style: none; margin: 0 0 8px; padding: 0; }
.vh-fp .vh-fp-articles-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; padding: 6px 0; border-bottom: 1px dashed var(--vh-gris-bord); font-size: 0.85rem; line-height: 1.35; }
.vh-fp .vh-fp-articles-liste li:last-child { border-bottom: 0; }
.vh-fp .vh-fp-articles-liste a { color: var(--vh-encre); font-weight: 700; text-decoration: none; }
.vh-fp .vh-fp-articles-liste a:hover { color: var(--vh-vert); text-decoration: underline; }
.vh-fp-articles-date { flex-shrink: 0; font-size: 0.75rem; color: #888; white-space: nowrap; }

/* ── PAYSAGE : PC, laptop, iPad horizontal ── */
@media (orientation: landscape) {
    .vh-fp { padding: 24px 20px 40px; }
    .vh-fp-card { grid-template-columns: 1fr 1fr; gap: 28px; padding: 24px; align-items: center; }
    .vh-fp-img { max-height: 420px; }
    .vh-fp-carte-img { width: 64px; }
}

/* Smartphone tourné à l'horizontale : écran bas → image moins haute */
@media (orientation: landscape) and (max-height: 500px) {
    .vh-fp-img { max-height: 240px; }
}

/* ═══════════════════════════════════════════════════════════
   EN-TÊTE MOBILE ASTRA (tout le site, mode portrait) :
   logo réduit + « EDITIONS VANHOOK » sur une seule ligne
   ═══════════════════════════════════════════════════════════ */
@media (orientation: portrait) {
    .ast-mobile-header-wrap .site-branding { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
    .ast-mobile-header-wrap .custom-logo-link img,
    .ast-mobile-header-wrap img.custom-logo { width: 44px !important; max-width: 44px !important; height: auto !important; }
    .ast-mobile-header-wrap .site-title { font-size: clamp(1.25rem, 6.2vw, 1.6rem) !important; line-height: 1.2; white-space: nowrap; margin: 0; }
    .ast-mobile-header-wrap .site-title a { font-weight: 800 !important; }
}

/* ═══════════════════════════════════════════════════════════
   PARCOURS Accueil → Axe → Domaine → 9 tomes (shortcode [vh_parcours], 2026-10-07)
   Portrait par défaut, paysage dans @media (orientation: landscape).
   ═══════════════════════════════════════════════════════════ */
.vh-pc {
    --vh-vert: #157f4a; /* 2026-10-16 contraste vert : ancien #1A9E5C */
    --vh-encre: #1a1a2e;
    --vh-gris-fond: #f4f5f7;
    --vh-gris-bord: #d9dce1;
    max-width: 1100px; margin: 0 auto; padding: 16px 16px 40px;
    color: var(--vh-encre); box-sizing: border-box;
}
.vh-pc *, .vh-pc *::before, .vh-pc *::after { box-sizing: border-box; }
.vh-pc-intro { text-align: center; margin: 0 0 22px; }
.vh-pc .vh-pc-titre { font-size: clamp(1.3rem, 6vw, 2.2rem); font-weight: 800; line-height: 1.2; margin: 0 0 8px; color: var(--vh-encre); text-transform: uppercase; }
.vh-pc-phrase { font-size: clamp(1rem, 4.2vw, 1.3rem); font-weight: 700; color: var(--vh-vert); margin: 0 0 8px; line-height: 1.3; }
.vh-pc-texte { font-size: 0.95rem; line-height: 1.5; margin: 0 auto; max-width: 680px; }
/* 2026-10-16 (style 1.5.8) : ACCUEIL seulement : espace sous la phrase verte réduit à 8 px (le thème Astra imposait environ 33 px aux paragraphes,
   plus fort que la règle .vh-pc-phrase ci-dessus ; la règle ci-dessous est plus précise donc elle gagne). Axes et domaines inchangés. */
.vh-pc.vh-pc--accueil .vh-pc-phrase { margin-bottom: 8px; }
/* 2026-10-16 (style 1.7.6, pages d'axe) : « Choisis ton domaine » = vrai titre (minuscules, plus grand que l'introduction, foncé).
   Ancienne règle : .vh-pc-consigne { font-weight: 800; text-transform: uppercase; margin-top: 14px; } */
.vh-pc .vh-pc-consigne { font-weight: 800; text-transform: none; font-size: 1.35rem; line-height: 1.3; color: var(--vh-encre); margin-top: 22px; }
/* 2026-10-14 (4c) : mention en petit sous le texte des pages de domaine (« Ces livres ne remplacent pas un avis médical. ») */
.vh-pc-mention { font-size: 0.8rem; font-style: italic; color: #6b7280; line-height: 1.4; margin: 6px auto 0; max-width: 680px; }
.vh-pc .vh-pc-retour { display: inline-block; margin: 0 0 14px; font-size: 0.9rem; font-weight: 700; color: var(--vh-vert); text-decoration: none; }
.vh-pc .vh-pc-retour:hover { text-decoration: underline; }

/* Cartes AXE / DOMAINE */
.vh-pc-cartes { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vh-pc .vh-pc-carte {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: #fff; border: 2px solid var(--vh-gris-bord); border-radius: 12px;
    /* 2026-10-16 (style 1.6.7) : box-shadow ajouté à la transition (ancien : transition: border-color .15s, transform .15s;) */
    color: var(--vh-encre); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s;
}
/* 2026-10-16 (style 1.6.7) : ombre légère au survol en plus (ancienne règle : border-color + translateY seulement) */
.vh-pc .vh-pc-carte:hover, .vh-pc .vh-pc-carte:focus-visible { border-color: var(--vh-vert); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.vh-pc-ico { flex-shrink: 0; color: var(--vh-vert); }
.vh-pc-carte-txt { display: flex; flex-direction: column; gap: 2px; }
.vh-pc-lettre { font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; color: var(--vh-vert); }
.vh-pc-carte-nom { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.vh-pc-carte-desc { font-size: 0.85rem; line-height: 1.35; color: #555; }

/* Phases et tomes */
.vh-pc-phase { margin: 0 0 22px; }
.vh-pc .vh-pc-phase-titre { font-size: 1rem; font-weight: 800; margin: 0 0 10px; padding: 8px 12px; background: var(--vh-encre); color: #fff; border-radius: 8px; line-height: 1.3; }
.vh-pc-phase-titre span { font-weight: 400; }
.vh-pc-tomes { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* 2026-10-13 : anciennes règles des cartes de tome (avant la refonte), gardées pour mémoire.
.vh-pc .vh-pc-tome {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: var(--vh-gris-fond); border: 1px solid var(--vh-gris-bord); border-radius: 10px;
    color: var(--vh-encre); text-decoration: none;
}
.vh-pc a.vh-pc-tome { background: #fff; border: 2px solid var(--vh-vert); }
.vh-pc a.vh-pc-tome:hover, .vh-pc a.vh-pc-tome:focus-visible { background: #f0faf4; }
(2026-10-07 : .vh-pc-tome--redaction, .vh-pc-tome--vote { opacity: .75; cursor: default; })
.vh-pc-tome--redaction { opacity: .75; cursor: default; }
.vh-pc a.vh-pc-tome--vote { border-color: #5a4fcf; }
.vh-pc a.vh-pc-tome--vote:hover, .vh-pc a.vh-pc-tome--vote:focus-visible { background: #f3f2fd; }
.vh-pc-tome-img { width: 48px; height: auto; flex-shrink: 0; border-radius: 4px; }
.vh-pc-tome-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vh-pc-tome-nom { font-size: 0.95rem; font-weight: 800; line-height: 1.25; }
.vh-pc-tome-question { font-size: 0.82rem; line-height: 1.35; font-style: italic; color: #555; }
.vh-pc-statut { font-size: 0.72rem; font-weight: 800; letter-spacing: .03em; }
.vh-pc-tome--disponible .vh-pc-statut { color: var(--vh-vert); }
.vh-pc-tome--redaction .vh-pc-statut { color: #b35c00; }
.vh-pc-tome--vote .vh-pc-statut { color: #5a4fcf; }
*/

/* 2026-10-13 : refonte des cartes de tome (maquette de Jean-Claude). Carte = lien (disponible) ou bouton (rédaction, vote)
   qui ouvre une fenêtre ; tout est centré ; bandeau de couleur vert / bleu / orange en bas de carte. */
.vh-pc-legende {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px;
    max-width: 760px; margin: 0 auto 18px; padding: 8px 14px;
    background: #eceef1; border: 1px solid var(--vh-gris-bord); border-radius: 10px;
    font-size: 0.82rem; line-height: 1.4; color: var(--vh-encre);
}
.vh-pc-leg { white-space: nowrap; }
.vh-pc-leg b { font-weight: 800; }
.vh-pc-leg--disponible b { color: var(--vh-vert); }
.vh-pc-leg--redaction b { color: #2f6db5; }
.vh-pc-leg-sep { color: #9aa0a6; }
.vh-pc-leg-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--vh-vert); vertical-align: -1px; margin-right: 5px; }
.vh-pc .vh-pc-tome {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    width: 100%; padding: 14px 12px; margin: 0;
    background: #fff; border: 2px solid var(--vh-gris-bord); border-radius: 10px;
    color: var(--vh-encre); text-decoration: none; text-align: center;
    font: inherit; line-height: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.vh-pc .vh-pc-tome:hover, .vh-pc .vh-pc-tome:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.vh-pc .vh-pc-tome--disponible { border-color: var(--vh-vert); }
.vh-pc .vh-pc-tome--disponible:hover, .vh-pc .vh-pc-tome--disponible:focus-visible { background: #f0faf4; }
.vh-pc-tome-img { width: 72px; height: auto; border-radius: 4px; }
.vh-pc-tome-nom { font-size: 0.95rem; font-weight: 800; line-height: 1.25; }
.vh-pc-tome-question { font-size: 0.82rem; line-height: 1.35; font-style: italic; color: #555; }
.vh-pc-tome-ligne { font-size: 0.82rem; font-weight: 700; line-height: 1.3; }
.vh-pc-tome-bandeau {
    display: block; width: 100%; margin-top: auto; padding: 6px 8px; border-radius: 6px;
    color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: .03em; line-height: 1.3;
}
.vh-pc-tome--disponible .vh-pc-tome-bandeau { background: var(--vh-vert); }
.vh-pc-tome--redaction .vh-pc-tome-bandeau { background: #2f6db5; }
.vh-pc-tome--vote .vh-pc-tome-bandeau { background: #c44508; } /* 2026-10-16 contraste 5,0:1 : ancien #e8912a (2,5:1) */
.vh-pc-logique ul { list-style: none; margin: 0; padding: 0; }
.vh-pc-logique li { margin: 0 0 4px; }
.vh-pc-logique li b { font-weight: 800; }
/* Fenêtre (dialog) d'un tome non disponible */
.vh-pc .vh-fen { border: 0; border-radius: 12px; padding: 0; width: calc(100% - 32px); max-width: 520px; box-shadow: 0 10px 40px rgba(0,0,0,.25); color: var(--vh-encre); }
.vh-pc .vh-fen::backdrop { background: rgba(0,0,0,.45); }
.vh-fen-inner { position: relative; padding: 22px 20px; font-size: 0.92rem; line-height: 1.5; text-align: left; }
.vh-pc .vh-fen-fermer { position: absolute; top: 6px; right: 10px; border: 0; background: none; padding: 4px 8px; font-size: 1.6rem; line-height: 1; color: #555; cursor: pointer; }
.vh-fen-inner p { margin: 0 0 6px; }
.vh-fen-inner .vh-fen-nom { font-weight: 800; font-size: 1rem; padding-right: 32px; margin-bottom: 6px; }
.vh-fen-inner .vh-fen-q { font-style: italic; color: #555; margin-bottom: 12px; }
.vh-fen-inner .vh-fen-form { margin: 16px 0 0; padding: 14px; background: var(--vh-gris-fond); border: 1px solid var(--vh-gris-bord); border-radius: 10px; text-align: center; }
.vh-fen-inner .vh-fen-form-t { font-weight: 800; margin: 0 0 2px; }
.vh-fen-inner .vh-fen-form-s { font-size: 0.85rem; margin: 0 0 10px; }
.vh-fen-inner input[type="email"] { width: 100%; padding: 9px 10px; margin: 0 0 8px; border: 1px solid var(--vh-gris-bord); border-radius: 6px; font: inherit; }
/* 2026-10-17 (style 1.7.8, demande de Jean-Claude : un seul style de bouton d'action, noir nulle part) : orange #c44508, survol #a53906.
   Ancienne couleur : background: var(--vh-encre); (pas de survol) */
.vh-fen-inner button[type="submit"]:hover, .vh-fen-inner button[type="submit"]:focus { background: #a53906; }
.vh-fen-inner button[type="submit"] { background: #c44508; color: #fff; border: 0; border-radius: 6px; padding: 9px 20px; font: inherit; font-weight: 800; cursor: pointer; }
.vh-fen-inner button[type="submit"]:disabled { opacity: .6; cursor: wait; }
.vh-fen-inner .vh-fen-msg { margin: 8px 0 0; font-weight: 700; }
.vh-fen-inner .vh-fen-msg.is-ok { color: var(--vh-vert); }
.vh-fen-inner .vh-fen-msg.is-err { color: #c0392b; }
/* 2026-10-13 (soir) : cadre de vote — barre de progression et note sous le bouton */
.vh-fen-inner .vh-fen-barre { height: 10px; margin: 0 0 12px; background: #dfe3e8; border-radius: 5px; overflow: hidden; }
.vh-fen-inner .vh-fen-barre-in { height: 100%; background: var(--vh-vert); border-radius: 5px; transition: width .4s; }
.vh-fen-inner .vh-fen-note { font-size: 0.78rem; line-height: 1.4; color: #555; margin: 8px 0 0; }
/* 2026-10-13 (soir, 2) : alignement des cartes. Cartes non disponibles : nom en haut, question + ligne + bandeau collés en bas.
   Carte disponible : image à gauche sur toute la hauteur, à droite nom en haut puis question + ligne + bandeau en bas.
   Les 3 cartes d'une rangée ayant la même hauteur, question et ligne tombent au même niveau. */
.vh-pc .vh-pc-tome-nom { margin-bottom: auto; }
.vh-pc .vh-pc-tome-bandeau { margin-top: 0; }
.vh-pc .vh-pc-tome--disponible {
    display: grid; grid-template-columns: 72px 1fr; column-gap: 14px; row-gap: 8px;
    grid-template-areas: "img nom" "img vide" "img question" "img ligne" "img bandeau";
    grid-template-rows: auto 1fr auto auto auto; align-items: center; justify-items: center;
}
.vh-pc .vh-pc-tome--disponible .vh-pc-tome-img { grid-area: img; width: 72px; align-self: center; }
.vh-pc .vh-pc-tome--disponible .vh-pc-tome-nom { grid-area: nom; margin: 0; align-self: start; }
.vh-pc .vh-pc-tome--disponible .vh-pc-tome-question { grid-area: question; }
.vh-pc .vh-pc-tome--disponible .vh-pc-tome-ligne { grid-area: ligne; }
.vh-pc .vh-pc-tome--disponible .vh-pc-tome-bandeau { grid-area: bandeau; width: 100%; }
/* 2026-10-13 (soir, 3) : la question occupe toujours 2 lignes, texte centré verticalement → questions, lignes et bandeaux
   au même niveau dans les 3 cartes d'une rangée. La pastille CSS de la légende n'est plus utilisée (icône 🟢 à la place). */
.vh-pc .vh-pc-tome-question { min-height: 2.7em; display: flex; align-items: center; justify-content: center; }

/* Boîte LOGIQUE DE LA MÉTHODE */
.vh-pc-logique { margin: 8px 0 0; padding: 16px 18px; border-left: 4px solid var(--vh-vert); background: var(--vh-gris-fond); border-radius: 0 10px 10px 0; font-size: 0.9rem; line-height: 1.5; }
.vh-pc-logique p { margin: 0; }
.vh-pc .vh-pc-logique-titre { font-weight: 800; margin: 0 0 6px; }

@media (orientation: landscape) {
    .vh-pc { padding: 24px 20px 48px; }
    .vh-pc-cartes { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .vh-pc .vh-pc-carte { flex-direction: column; text-align: center; padding: 24px 18px; }
    .vh-pc-carte-txt { align-items: center; }
    .vh-pc-ico { width: 48px; height: 48px; }
    .vh-pc-tomes { grid-template-columns: repeat(3, 1fr); }
    .vh-pc .vh-pc-tome { height: 100%; }
}

/* 2026-10-08 (étape 5) : sur les vraies pages du parcours, Astra souligne les liens du contenu
   (.ast-single-post .entry-content a) → on enlève le soulignement des cartes, tomes et liens retour. */
.entry-content .vh-pc a.vh-pc-carte,
.entry-content .vh-pc a.vh-pc-tome,
.entry-content .vh-pc a.vh-pc-retour { text-decoration: none; }
.entry-content .vh-pc a.vh-pc-retour:hover { text-decoration: underline; }

/* 2026-10-08 (étape 4) : accueil — titre principal (h1, mots-clés) sous « SYSTEM VANHOOK ». */
.vh-pc .vh-pc-h1 { font-size: clamp(1rem, 4.4vw, 1.35rem); font-weight: 800; line-height: 1.3; margin: 0 0 8px; color: var(--vh-encre); }

/* 2026-10-08 (étape 6) : boutique — petite ligne « Vie privée · Santé » sous le nom du tome des cartes. */
.vh-carte-sous { font-size: 0.8rem; color: #555; margin: 0 0 6px; text-align: center; line-height: 1.3; }

/* 2026-10-14 (blog, étape 2) : étiquette « GUIDE DE MÉTHODE / GUIDE DE SOLUTIONS » sous le fil d'Ariane des articles
   (snippet ID 9632). Le fil d'Ariane lui-même garde son style (.vh-blog-breadcrumb, CSS additionnel Astra). */
.vh-blog-etiquette { display: table; margin: -6px auto 18px; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: #e8f5ee; color: #1f7a4d; }
.vh-blog-etiquette--pratique { background: #fff1e6; color: #b45309; }

/* ── 2026-10-14 (blog, étape 3) : page Blog [vh_blog] (snippet « Page Blog ») ─────────────────────────────── */
.vh-blog { max-width: 1100px; margin: 0 auto; padding: 0 0 30px; }
.vh-blog-head { text-align: center; margin: 0 0 26px; }
.vh-blog-h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 800; margin: 0 0 6px; line-height: 1.2; }
.vh-blog-sous { font-size: clamp(1rem, 4.2vw, 1.25rem); font-weight: 700; color: var(--vh-vert, #1f7a4d); margin: 0 0 14px; }
.vh-blog-intro { font-size: 0.98rem; line-height: 1.6; max-width: 680px; margin: 0 auto; }
.vh-blog-filtres { display: flex; flex-direction: column; gap: 12px; align-items: center; margin: 0 0 24px; }
.vh-blog-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vh-blog-btn { display: inline-block; padding: 9px 16px; border: 2px solid #d9dde3; border-radius: 999px; background: #fff; color: #1a1a2e; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; line-height: 1.2; transition: background 0.15s, border-color 0.15s; }
.vh-blog-btn:hover { background: #f3f4f6; }
.vh-blog-btn.is-actif { background: #1a1a2e; border-color: #1a1a2e; color: #fff; }
.vh-blog-btn--reference.is-actif { background: #1f7a4d; border-color: #1f7a4d; }
.vh-blog-btn--pratique.is-actif { background: #b45309; border-color: #b45309; }
.vh-blog-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vh-blog-btn[hidden] { display: none; } /* 2026-10-15 : sinon le display:inline-block gagne sur la marque hidden (rond gris vide, « Retirer les filtres » toujours visible) */
.vh-blog-selects { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; font-size: 0.9rem; font-weight: 700; }
.vh-blog-selects select { margin-left: 4px; padding: 6px 10px; border: 2px solid #d9dde3; border-radius: 8px; background: #fff; font-weight: 600; }
.vh-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.vh-blog-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; /* 2026-10-15 : marges réduites (avant gap 8px, padding 18px 18px 16px) */ background: #fff; border: 1px solid #e5e7eb; border-top: 5px solid #9ca3af; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.vh-blog-card--reference { border-top-color: #1f7a4d; }
.vh-blog-card--pratique { border-top-color: #b45309; }
.vh-blog-card[hidden] { display: none; } /* 2026-10-14 : sinon le « display: flex » de la carte gagne sur la marque hidden du tri */
.vh-blog-bandeau { display: table; padding: 3px 10px; border-radius: 999px; background: #1a1a2e; color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.vh-blog-card-titre { font-size: 1.05rem; line-height: 1.35; margin: 0; font-weight: 800; }
.vh-blog-card-titre a { color: #1a1a2e; text-decoration: none; }
.vh-blog-card-titre a:hover { text-decoration: underline; }
.vh-blog-card-meta { margin: 0; font-size: 0.78rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.vh-blog-card-extrait { margin: 0; font-size: 0.92rem; line-height: 1.5; color: #374151; }
.vh-blog-card-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: auto 0 0; padding-top: 4px; /* 2026-10-15 : avant 8px */ font-size: 0.8rem; color: #6b7280; }
.vh-blog-lire { font-weight: 800; color: var(--vh-vert, #1f7a4d); text-decoration: none; white-space: nowrap; }
.vh-blog-lire:hover { text-decoration: underline; }
.vh-blog-vide { text-align: center; font-weight: 700; color: #6b7280; margin: 24px 0; }
.vh-blog-fin { text-align: center; margin: 36px 0 0; padding: 22px 16px; background: #f3f4f6; border-radius: 12px; }
.vh-blog-fin p { margin: 0 0 12px; font-weight: 700; }
.vh-blog-btn--fin { background: #c44508; border-color: #c44508; color: #fff !important; } /* 2026-10-16 contraste 5,0:1 : ancien #e8690b (3,3:1) */
.vh-blog-btn--fin:hover { background: #a53906; border-color: #a53906; } /* 2026-10-16 contraste : ancien survol #c95a09 */
.vh-blog-mention { font-size: 0.8rem; font-style: italic; color: #6b7280; text-align: center; margin: 14px 0 0; }
/* 2026-10-14 : les 2 boutons de fin d'article (« Retour à la fiche produit » + « Tous les articles ») côte à côte, l'un sous l'autre sur téléphone */
.vh-blog-back { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 900px) { .vh-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vh-blog-grid { grid-template-columns: 1fr; } }

/* ── 2026-10-15 (blog, étape 4) : portes vers le blog ──────────────────────────────────────────────────────── */
.vh-blog-outils { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vh-blog-outils:empty { display: none; }
.vh-blog-btn--gris { background: #f0f0f0; border-color: #f0f0f0; color: #1a1a2e; text-transform: none; letter-spacing: 0; font-weight: 700; }
.vh-blog-btn--gris:hover { background: #e0e0e0; border-color: #e0e0e0; }
/* Porte 1 : bas des pages de domaine du parcours (snippet Parcours) */
.vh-pc-blog { text-align: center; margin: 26px auto 0; max-width: 680px; }
.vh-pc-blog p { margin: 0 0 10px; font-weight: 700; }
/* 2026-10-17 (style 1.7.8, un seul style de bouton d'action) : « Lire les articles » / « Voir tous les articles sur … » en orange.
   Anciennes couleurs : background: #1a1a2e; survol #343456. */
.vh-pc-blog-btn { display: inline-block; padding: 10px 22px; border-radius: 999px; background: #c44508; color: #fff !important; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.04em; text-decoration: none !important; }
.vh-pc-blog-btn:hover, .vh-pc-blog-btn:focus { background: #a53906; }
/* Porte 2 : bloc « Autres articles » sous les articles (snippet 9632) ; cartes = celles de la page Blog */
.vh-blog-autres { margin: 36px 0 0; }
.vh-blog-autres-titre { font-size: clamp(1.25rem, 4.5vw, 1.6rem); font-weight: 800; text-align: center; margin: 0 0 16px; color: var(--vh-vert, #1f7a4d); } /* 2026-10-15 : plus grand, en vert (avant 1.15rem, noir) */
.vh-blog-autres-btn { text-align: center; margin: 18px 0 0; }
.vh-blog-autres .vh-blog-card-titre { font-size: 0.98rem; }
@media (max-width: 900px) { .vh-blog-autres .vh-blog-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════
   BANDEAU D'ANNONCE (accueil) — snippet « Bandeau annonce », ajouté 2026-10-16 (style 1.5.6)
   Une phrase + un bouton. Fond jaune pâle, texte foncé, bouton foncé : lisible. Sur téléphone, le bouton passe sous la phrase.
   ═══════════════════════════════════════ */
/* 2026-10-16 (style 1.5.7) : textes plus grands. Anciennes valeurs : texte 0.95rem, bouton 0.82rem avec padding 7px 18px, bandeau padding 10px 16px, gap 8px 16px. */
.vh-bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; padding: 14px 16px; background: #fff3cd; color: #1a1a2e; border-bottom: 1px solid #f0d98a; text-align: center; }
.vh-bandeau-texte { margin: 0; font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-weight: 700; line-height: 1.35; color: #1a1a2e; }
/* 2026-10-16 (style 1.6.2, demande de Jean-Claude) : plus de bouton noir, le lien est dans la phrase et souligné. Anciennes règles :
.vh-bandeau-lien { display: inline-block; padding: 10px 24px; border-radius: 999px; background: #1a1a2e; color: #fff !important; font-size: 1rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; }
.vh-bandeau-lien:hover, .vh-bandeau-lien:focus { background: #343456; color: #fff !important; }
*/
.vh-bandeau-lien { color: #1a1a2e !important; font-weight: 800; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; white-space: nowrap; }
.vh-bandeau-lien:hover, .vh-bandeau-lien:focus { color: #157f4a !important; } /* 2026-10-16 contraste vert : ancien #1A9E5C */

/* 2026-10-16 (style 1.5.9, B5) : lien « Comment ça marche ? Découvre le System Vanhook » sous le paragraphe de l'accueil (snippet Parcours). */
.vh-pc .vh-pc-systeme { margin: 12px 0 0; font-size: 1rem; text-align: center; }
.vh-pc .vh-pc-systeme a { color: var(--vh-vert); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.vh-pc .vh-pc-systeme a:hover, .vh-pc .vh-pc-systeme a:focus { color: var(--vh-vert-fonce); }

/* 2026-10-16 (style 1.6.0, nouvel ordre de l'accueil) : l'accueil est découpé en 2 morceaux du snippet Parcours :
   vh-pc--intro (titre + h1 + phrase verte, en haut) et vh-pc--cartes (lien « Comment ça marche ? » + 3 axes, après le Pack duo,
   à l'intérieur du bloc .vh-lc du snippet 9410). Espaces réduits sous l'intro ; cartes de la même largeur que le Pack duo. */
.vh-pc.vh-pc--intro { padding-bottom: 0; }
.vh-pc.vh-pc--intro .vh-pc-intro { margin-bottom: 0; }
.vh-pc.vh-pc--cartes { max-width: none; padding: 0; margin: 0 0 48px; }
/* 2026-10-16 (style 1.6.3) : le lien « Comment ça marche ? » est maintenant SOUS les 3 axes → espace au-dessus.
   Ancienne règle : .vh-pc.vh-pc--cartes .vh-pc-systeme { margin: 0 0 16px; } */
.vh-pc.vh-pc--cartes .vh-pc-systeme { margin: 18px 0 0; }

/* 2026-10-16 (style 1.6.1) : bloc « Accéder à ton espace » de l'accueil (snippet 9410) : phrase d'explication sous le titre
   (« Donne ton e-mail. Tu reçois un lien… »). Le reste du bloc est stylé dans le CSS additionnel d'Astra (.vh-lien-magique-inner). */
.vh-lien-magique-inner .vh-lm-texte { margin: -8px auto 18px; max-width: 720px; font-size: 1.05rem; line-height: 1.5; color: #444; text-wrap: balance; }

/* 2026-10-16 (style 1.6.4) : accueil = un seul sous-titre sous SYSTEM VANHOOK (h1 pour Google, snippet Parcours) :
   même taille, graisse et espaces que l'ancienne phrase verte (.vh-pc-phrase), mais en NOIR (demande de Jean-Claude). */
.vh-pc .vh-pc-h1.vh-pc-soustitre { font-size: clamp(1rem, 4.2vw, 1.3rem); font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--vh-encre); }

/* ═══════════════════════════════════════════════════════════
   PAGE « LES TOMES DISPONIBLES » (shortcode [vh_tomes_disponibles], 2026-10-16, style 1.6.5)
   Le bloc porte aussi la classe vh-pc (couleurs et fenêtre « Me prévenir » du parcours).
   Ordinateur : cartes larges (< 4 tomes) ou grille de 3 colonnes (4 tomes ou plus). Téléphone : une seule colonne partout.
   ═══════════════════════════════════════════════════════════ */
.vh-td { max-width: 1000px; }
.vh-td-entete { text-align: center; margin: 0 0 30px; }
.vh-td .vh-td-titre { font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 800; line-height: 1.2; margin: 0 0 10px; color: var(--vh-encre); }
.vh-td-phrase { font-size: 1.1rem; margin: 0 0 8px; color: #444; }
/* 2026-10-16 (style 1.7.0) : compteur plus visible (texte plus grand, fond vert très clair + bordure verte, contraste ≈ 15:1,
   « N déjà paru(s) » en gras via <strong>). Ancienne règle :
.vh-td-compteur { display: inline-block; margin: 0; padding: 6px 16px; border-radius: 999px; background: var(--vh-gris-fond); font-weight: 700; color: var(--vh-encre); } */
.vh-td-compteur { display: inline-block; margin: 0; padding: 8px 20px; border-radius: 999px; background: #e8f5ee; border: 2px solid var(--vh-vert); font-size: 1.12rem; font-weight: 400; color: var(--vh-encre); }
.vh-td-compteur strong { font-weight: 800; }
.vh-td .vh-td-axe { font-size: 1.35rem; font-weight: 800; margin: 28px 0 4px; color: var(--vh-encre); text-transform: uppercase; }
.vh-td .vh-td-dom { font-size: 1rem; font-weight: 800; margin: 0 0 12px; color: var(--vh-vert); text-transform: uppercase; letter-spacing: 0.04em; }
.vh-td-liste { display: grid; gap: 18px; margin: 0 0 10px; }
.vh-td-liste--grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vh-td-carte { background: #fff; border: 2px solid var(--vh-gris-bord); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.vh-td-liste--large .vh-td-carte { flex-direction: row; align-items: flex-start; gap: 22px; }
.vh-td-couv { flex: 0 0 auto; display: block; text-align: center; }
.vh-td-couv img { width: 100%; max-width: 160px; height: auto; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.vh-td-liste--large .vh-td-couv img { width: 170px; max-width: none; }
.vh-td-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vh-td .vh-td-nom { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; line-height: 1.3; }
.vh-td .vh-td-nom a { color: var(--vh-encre); text-decoration: none; }
.vh-td .vh-td-nom a:hover { color: var(--vh-vert); }
.vh-td-auteur { font-size: 0.85rem; color: #666; margin: -2px 0 8px; } /* 2026-10-16 (style 1.7.0) : « Arthur Vanhook » sous le titre des tomes */
.vh-td-question { font-style: italic; color: #555; margin: 0 0 10px; }
.vh-td-detail { font-size: 0.95rem; line-height: 1.5; margin: 0 0 6px; }
.vh-td-formats { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.vh-td-formats span { background: #f0f0f0; color: #555; border-radius: 6px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; }
.vh-td-prix { font-size: 0.9rem; color: #555; margin: 0 0 12px; }
.vh-td-prix strong { font-size: 1.35rem; font-weight: 800; color: var(--vh-encre); }
.vh-td-barre { text-decoration: line-through; color: #999; font-size: 0.85em; font-weight: 400; }
.vh-td-promo { color: #c0392b; }
.vh-td .vh-td-btn { display: inline-block; align-self: flex-start; margin-top: auto; padding: 10px 20px; border: 0; border-radius: 8px; background: #c44508; color: #fff !important; font: inherit; font-weight: 700; text-decoration: none !important; cursor: pointer; } /* 2026-10-16 contraste 5,0:1 : ancien #e8560a (3,6:1) */
.vh-td .vh-td-btn:hover, .vh-td .vh-td-btn:focus { background: #a53906; } /* 2026-10-16 contraste : ancien survol #c44508 */
.vh-td-liste--grille .vh-td-btn { align-self: stretch; text-align: center; }
.vh-td-aucun { text-align: center; font-size: 1.1rem; font-weight: 700; margin: 10px auto 0; max-width: 640px; }
/* Bloc 3 : bientôt disponibles */
.vh-td-bientot { margin: 44px 0 0; }
.vh-td .vh-td-h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 4px; color: var(--vh-encre); }
.vh-td-bientot-s { color: #555; margin: 0 0 16px; }
.vh-td-bientot-s:has(+ .vh-td-bientot-note) { margin-bottom: 2px; } /* 2026-10-16 (style 1.7.0) : 2 phrases grises collées (« … en cours d'écriture. » + « Tu reçois un e-mail… ») */
.vh-td-petite .vh-td-auteur { margin: 0 0 4px; }
.vh-td-petites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vh-td-petite { border: 2px solid var(--vh-gris-bord); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; }
.vh-td-petite-nom { font-weight: 800; margin: 0 0 4px; line-height: 1.3; }
/* 2026-10-16 (style 1.7.4) : axe · domaine en premier, en gras et foncé. Ancienne règle : .vh-td-petite-ad { font-size: 0.85rem; color: #666; margin: 0 0 12px; } */
.vh-td-petite-ad { font-size: inherit; font-weight: 800; color: var(--vh-encre); margin: 0 0 6px; } /* 2026-10-16 (style 1.7.5) : même taille que le titre du tome (ancien : font-size: 0.9rem) */
.vh-td .vh-td-btn--prevenir { background: #547290; align-self: stretch; text-align: center; font-size: 0.9rem; padding: 9px 12px; } /* 2026-10-16 contraste : ancien #5A7A9A */
.vh-td .vh-td-btn--prevenir:hover, .vh-td .vh-td-btn--prevenir:focus { background: #46627e; }
/* Bloc 4 : invitation à voter */
/* 2026-10-16 (style 1.7.0, choix B de Jean-Claude) : bloc du bas = invitation à agir : fond blanc, bordure verte épaisse, plus d'espace ;
   bouton orange comme « Découvrir ce tome » (contraste texte foncé / blanc ≈ 17:1). Anciennes règles :
.vh-td-vote { margin: 44px 0 0; padding: 26px 20px; text-align: center; background: var(--vh-gris-fond); border: 2px solid var(--vh-encre); border-radius: 12px; }
.vh-td .vh-td-btn--vote { background: var(--vh-encre); align-self: center; }
.vh-td .vh-td-btn--vote:hover, .vh-td .vh-td-btn--vote:focus { background: #343456; } */
.vh-td-vote { margin: 44px 0 0; padding: 40px 28px; text-align: center; background: #fff; border: 4px solid var(--vh-vert); border-radius: 14px; }
.vh-td-vote-t { font-size: 1.2rem; font-weight: 800; margin: 0 0 6px; color: var(--vh-encre); text-wrap: balance; }
.vh-td-vote-s { margin: 0 0 20px; color: #444; } /* 2026-10-16 : 20px (ancien 16px) */
.vh-td .vh-td-btn--vote { align-self: center; } /* même orange que les autres boutons (.vh-td-btn) */
/* Téléphone : une seule colonne partout */
@media (max-width: 767px) {
    .vh-td-liste--grille, .vh-td-petites { grid-template-columns: 1fr; }
    .vh-td-liste--large .vh-td-carte { flex-direction: column; align-items: stretch; }
    .vh-td-liste--large .vh-td-couv img { width: 150px; }
    .vh-td .vh-td-btn { align-self: stretch; text-align: center; }
}

/* 2026-10-16 (style 1.6.6) : pages de domaine sans tome disponible : encadré « Tu veux lire quelque chose dès aujourd'hui ? »
   + bouton « Voir les tomes disponibles » (snippet Page Tomes disponibles, appelé par le snippet Parcours), après « Pas besoin d'acheter les 9 tomes ». */
/* 2026-10-17 (style 1.7.8, demande de Jean-Claude) : même aspect que le bloc du bas de la page « Les tomes disponibles » (.vh-td-vote).
   Ancienne règle : .vh-pc-td { text-align: center; margin: 18px 0 0; padding: 18px; border: 2px solid var(--vh-gris-bord); border-radius: 12px; background: #fff; } */
/* 2026-10-17 (style 1.7.9, demande de Jean-Claude : l'encadré paraissait vide sur toute la largeur) : 600 px au plus, centré
   (téléphone : toute la largeur, car l'écran est plus étroit). Ancienne règle :
   .vh-pc-td { text-align: center; margin: 18px 0 0; padding: 40px 28px; border: 4px solid var(--vh-vert); border-radius: 14px; background: #fff; } */
.vh-pc-td { text-align: center; margin: 18px auto 0; max-width: 600px; box-sizing: border-box; padding: 40px 28px; border: 4px solid var(--vh-vert); border-radius: 14px; background: #fff; }
.vh-pc-td p { margin: 0 0 12px; font-weight: 800; font-size: 1.05rem; color: var(--vh-encre); }
.vh-pc .vh-pc-td-btn { display: inline-block; padding: 10px 22px; border-radius: 8px; background: #c44508; color: #fff !important; font-weight: 700; text-decoration: none !important; } /* 2026-10-16 contraste 5,0:1 : ancien #e8560a (3,6:1) */
.vh-pc .vh-pc-td-btn:hover, .vh-pc .vh-pc-td-btn:focus { background: #a53906; } /* 2026-10-16 contraste : ancien survol #c44508 */

/* 2026-10-16 (style 1.6.7) : cartes AXE (accueil) et DOMAINE (pages d'axe) : ligne d'état + lien vert (snippet Parcours, vh_parcours_carte_etat).
   « disponible » en vert et gras ; « en écriture » / « à faire naître » en gris normal. */
.vh-pc .vh-pc-etat { display: block; margin-top: 8px; font-size: 0.85rem; line-height: 1.35; color: #666; font-weight: 400; }
.vh-pc .vh-pc-etat--dispo { color: var(--vh-vert); font-weight: 800; }
/* 2026-10-16 (style 1.6.9, demande de Jean-Claude) : lien « Voir les 3 domaines → » / « Voir les 9 tomes → » en BLEU des liens du site
   (couleur Astra --ast-global-color-0 = #046bd2 ; survol --ast-global-color-1 = #045cb4) ; le vert reste pour « X tome(s) disponible(s) ».
   Ancienne règle : .vh-pc .vh-pc-voir { display: block; margin-top: 6px; font-size: 0.9rem; font-weight: 800; color: var(--vh-vert); } */
.vh-pc .vh-pc-voir { display: block; margin-top: 6px; font-size: 0.9rem; font-weight: 800; color: var(--ast-global-color-0, #046bd2); }
.vh-pc .vh-pc-carte:hover .vh-pc-voir, .vh-pc .vh-pc-carte:focus-visible .vh-pc-voir { text-decoration: underline; text-underline-offset: 3px; color: var(--ast-global-color-1, #045cb4); }

/* 2026-10-16 (style 1.6.8) : « Voir les 3 domaines → » / « Voir les 9 tomes → » alignés en bas des cartes, même si le texte
   des cartes n'a pas la même longueur (la zone de texte remplit la carte, le lien est poussé en bas). Remplace margin-top: 6px. */
.vh-pc .vh-pc-carte-txt { flex: 1 1 auto; }
.vh-pc .vh-pc-voir { margin-top: auto; padding-top: 6px; }

/* 2026-10-16 (style 1.7.0, suite) : Astra impose un grand espace sous les paragraphes (~33 px) ; règles plus précises (.vh-td …)
   pour garder le nom de l'auteur collé au titre, comme sur l'accueil (même cause, voir .vh-pc.vh-pc--accueil .vh-pc-phrase). */
.vh-td .vh-td-auteur { margin: 0 0 10px; }
.vh-td .vh-td-petite-nom { margin: 0 0 2px; }
.vh-td .vh-td-petite .vh-td-auteur { margin: 0 0 4px; }
/* 2026-10-16 (style 1.7.4) : ancienne règle : .vh-td .vh-td-petite-ad { margin: 0 0 12px; } */
.vh-td .vh-td-petite-ad { margin: 0 0 6px; }
.vh-td .vh-td-petite-q { font-size: 0.9rem; font-style: italic; color: #555; line-height: 1.4; margin: 0 0 12px; } /* question du tome (italique) */

/* 2026-10-16 (style 1.7.6, pages d'axe et de domaine) : fil d'Ariane en haut à gauche (remplace « ← Retour … », .vh-pc-retour gardé).
   « Accueil > Vie privée > Santé » : liens verts comme l'ancien lien retour, page en cours en texte foncé non cliquable. */
.vh-pc .vh-pc-ariane { margin: 0 0 14px; font-size: 0.9rem; font-weight: 700; color: var(--vh-encre); }
.vh-pc .vh-pc-ariane a { color: var(--vh-vert); text-decoration: none; }
.vh-pc .vh-pc-ariane a:hover, .vh-pc .vh-pc-ariane a:focus { text-decoration: underline; }
.vh-pc .vh-pc-ariane-sep { margin: 0 8px; color: #888; font-weight: 400; }

/* 2026-10-16 (style 1.7.7, étape B pages d'axe) : sous les 3 cartes de domaine, « Le tome disponible aujourd'hui » (pluriel tout seul)
   + même carte de tome que la page « Les tomes disponibles » (classes vh-td-*), centré, 1000 px au plus ; puis encadré et lien blog (classes existantes). */
.vh-pc .vh-pc-axe-dispo { max-width: 1000px; margin: 44px auto 0; }
.vh-pc .vh-pc-axe-dispo-t { text-align: center; font-size: 1.5rem; font-weight: 800; line-height: 1.3; margin: 0 0 16px; color: var(--vh-encre); }
.vh-pc .vh-pc-axe-dispo + .vh-pc-blog, .vh-pc .vh-pc-cartes + .vh-pc-td { margin-top: 32px; }
.vh-pc .vh-pc-cartes + .vh-pc-blog { margin-top: 40px; }

/* 2026-10-17 (style 1.8.0, demande de Jean-Claude) : lien « Comment ça marche ? Découvre le System Vanhook » de l'accueil :
   sur téléphone (< 768 px), seulement « Comment ça marche ? » (sur une ligne) ; 768 px et plus : texte entier. Snippet Parcours. */
@media (max-width: 767px) {
    .vh-pc .vh-pc-systeme-fin { display: none; }
}