/* ============================================================
   Vinabox — Base layer (apply tokens to global elements)
   Chargé après vinabox-tokens.css.
   Objectif : tout le site adopte typo bordeaux/jaune sans
   casser GeneratePress. On vise body + headings + liens.
   On NE remplace PAS les composants existants (FAQ details,
   callouts, hero box-vin) qui ont leur propre CSS.
   ============================================================ */

/* ---------- BODY ---------- */
body,
.entry-content,
.site,
.site-content {
  font-family: var(--vb-font-sans, 'Satoshi', system-ui, sans-serif);
  color: var(--vb-fg, #151311);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--vb-bg, #FFFFFF);
  line-height: var(--vb-lh-normal, 1.55);
}

/* Tailles de paragraphe — corps éditorial confortable */
.entry-content p,
.entry-content li,
.page-content p,
.page-content li {
  line-height: var(--vb-lh-loose, 1.7);
}

/* ---------- HEADINGS — SERIF BORDEAUX ---------- */
h1, .entry-title, .page-title,
.site-title,
.wp-block-heading.has-text-align-left[level="1"] {
  font-family: var(--vb-font-serif, 'DM Serif Display', Georgia, serif);
  color: var(--vb-bordeaux-500, #61262A);
  font-weight: 400;
  line-height: var(--vb-lh-tight, 1.1);
  letter-spacing: var(--vb-ls-tight, -0.02em);
  text-wrap: balance;
}

h1, .entry-title, .page-title {
  font-size: var(--vb-text-h1, clamp(2.4rem, 1.9rem + 2.8vw, 3.75rem));
}

h2 {
  font-family: var(--vb-font-serif, 'DM Serif Display', Georgia, serif);
  color: var(--vb-bordeaux-600, #541F23);
  font-weight: 400;
  line-height: var(--vb-lh-tight, 1.1);
  letter-spacing: var(--vb-ls-tight, -0.02em);
  font-size: var(--vb-text-h2, clamp(2rem, 1.6rem + 2vw, 2.85rem));
  text-wrap: balance;
}

h3 {
  font-family: var(--vb-font-serif, 'DM Serif Display', Georgia, serif);
  color: var(--vb-bordeaux-700, #44181B);
  font-weight: 400;
  line-height: var(--vb-lh-snug, 1.25);
  font-size: var(--vb-text-h3, clamp(1.65rem, 1.4rem + 1.2vw, 2.1rem));
}

/* H4-6 restent en sans-serif gras (UI / sous-titres) */
h4 {
  font-family: var(--vb-font-sans, 'Satoshi', sans-serif);
  font-weight: 700;
  line-height: var(--vb-lh-snug, 1.25);
  font-size: var(--vb-text-h4, clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem));
  color: var(--vb-fg, #151311);
}

h5 {
  font-family: var(--vb-font-sans, 'Satoshi', sans-serif);
  font-weight: 700;
  line-height: var(--vb-lh-snug, 1.25);
  font-size: var(--vb-text-h5, clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem));
  color: var(--vb-fg, #151311);
}

h6 {
  font-family: var(--vb-font-sans, 'Satoshi', sans-serif);
  font-weight: 700;
  font-size: var(--vb-text-caption, 0.78rem);
  text-transform: uppercase;
  letter-spacing: var(--vb-ls-caps, 0.12em);
  color: var(--vb-fg-muted, #5C5448);
}

/* ---------- LIENS ---------- */
a {
  color: var(--vb-link, #61262A);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--vb-duration-fast, 120ms) var(--vb-ease, cubic-bezier(.2,.7,.2,1));
}
a:hover, a:focus {
  color: var(--vb-link-hover, #44181B);
}

/* Liens dans le contenu : underline plus visible */
.entry-content a:not(.wp-block-button__link):not(.vb-btn):not(.button),
.page-content a:not(.wp-block-button__link):not(.vb-btn):not(.button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- BLOCKQUOTE ---------- */
blockquote,
.wp-block-quote {
  font-family: var(--vb-font-serif, 'DM Serif Display', Georgia, serif);
  font-size: var(--vb-text-h5, 1.35rem);
  line-height: var(--vb-lh-snug, 1.25);
  color: var(--vb-bordeaux-600, #541F23);
  border-left: 3px solid var(--vb-jaune-500, #D39C44);
  padding: var(--vb-space-2, 8px) 0 var(--vb-space-2, 8px) var(--vb-space-6, 24px);
  margin: var(--vb-space-8, 32px) 0;
  font-style: normal;
}

/* ---------- STRONG / EM ---------- */
strong, b { font-weight: 700; color: var(--vb-fg, #151311); }
em, i { font-style: italic; }

/* ---------- SELECTION + FOCUS ---------- */
::selection {
  background: var(--vb-jaune-200, #EDD195);
  color: var(--vb-bordeaux-900, #220C0D);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--vb-bordeaux-500, #61262A);
  outline-offset: 2px;
}

/* ---------- BOUTONS GENERATEPRESS / GUTENBERG ---------- */
/* On ré-aligne les boutons WP par défaut sur la palette bordeaux/jaune */
.wp-block-button__link,
.button,
button.button,
input[type="submit"] {
  font-family: var(--vb-font-sans, 'Satoshi', sans-serif);
  font-weight: 700;
  background-color: var(--vb-bordeaux-500, #61262A);
  color: var(--vb-neutral-0, #FFFFFF);
  border-radius: var(--vb-radius-md, 8px);
  padding: 13px 24px;
  transition: all var(--vb-duration-base, 200ms) var(--vb-ease, cubic-bezier(.2,.7,.2,1));
  border: 0;
}
.wp-block-button__link:hover,
.button:hover,
button.button:hover,
input[type="submit"]:hover {
  background-color: var(--vb-bordeaux-700, #44181B);
  color: var(--vb-neutral-0, #FFFFFF);
  transform: translateY(-1px);
  box-shadow: var(--vb-shadow-md);
}

/* ---------- HEADER / SITE TITLE ---------- */
.site-title a,
.main-title a {
  color: var(--vb-bordeaux-500, #61262A);
  font-family: var(--vb-font-serif, 'DM Serif Display', Georgia, serif);
}

/* ---------- HORIZONTAL RULE — jaune accent ---------- */
hr,
.wp-block-separator {
  border: 0;
  height: 2px;
  width: 48px;
  background: var(--vb-jaune-500, #D39C44);
  margin: var(--vb-space-8, 32px) auto;
}

/* ---------- TABLES (génériques, sans casser .vb-compare) ---------- */
.entry-content table:not(.vb-compare):not(.tableau-millesime),
.page-content table:not(.vb-compare):not(.tableau-millesime) {
  border-collapse: collapse;
  font-family: var(--vb-font-sans, 'Satoshi', sans-serif);
  font-size: var(--vb-text-body, 1rem);
}
.entry-content table:not(.vb-compare):not(.tableau-millesime) th {
  background: var(--vb-bordeaux-500, #61262A);
  color: var(--vb-neutral-0, #FFFFFF);
  font-family: var(--vb-font-sans, 'Satoshi', sans-serif);
  font-weight: 700;
  text-align: left;
  padding: 14px 16px;
}
.entry-content table:not(.vb-compare):not(.tableau-millesime) td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--vb-border, #E6DFD6);
}

/* ---------- BACKGROUND ALTERNANCE — section warm-white ---------- */
.has-background.has-pale-bg-background-color,
.bg-warm-white,
.vb-bg-alt {
  background-color: var(--vb-neutral-50, #FAF7F4) !important;
}

/* ---------- FIGURE / IMAGE — radius doux ---------- */
.entry-content figure img,
.page-content figure img,
.wp-block-image img {
  border-radius: var(--vb-radius-md, 8px);
}

/* ---------- READING MEASURE — confort ---------- */
.entry-content > p,
.page-content > p {
  /* Pas de max-width forcé — laisse GeneratePress gérer la grille,
     mais on ajuste le rythme vertical. */
  margin-bottom: var(--vb-space-4, 16px);
}

/* ---------- LOGO — taille contrainte (Session 2 redesign 2026-05-03) ---------- */
/* GeneratePress n'applique pas logo_width sur SVG : on contraint via CSS. */
/* Cible : ~165px desktop, ~140px mobile pour discrétion + conformité conventions modernes. */
.site-logo .custom-logo,
.site-logo .header-image,
.site-header .custom-logo-link img,
.cmplz-logo .custom-logo {
  width: 165px !important;
  height: auto !important;
  max-width: 165px !important;
}
@media (max-width: 768px) {
  .site-logo .custom-logo,
  .site-logo .header-image,
  .site-header .custom-logo-link img,
  .cmplz-logo .custom-logo {
    width: 140px !important;
    max-width: 140px !important;
  }
}

/* ============================================================
   Session 3 (2026-05-03 23h45 — Jeremy live review) — Overrides
   - Slider YouTube #vinabox-netflix-section : pas de soulignement
     sur les liens (titres vidéos + CTA "Voir toutes les vidéos")
   - Tous boutons WP / GeneratePress / .button : jamais d'underline
     (renforcement défensif au cas où l'override .entry-content
     n'attrape pas certains blocs)
   ============================================================ */

#vinabox-netflix-section a,
#vinabox-netflix-section a:hover,
#vinabox-netflix-section a:focus,
.vinabox-slider a,
.vinabox-slider a:hover,
.vinabox-slider a:focus,
.vinabox-cta a,
.vinabox-cta a:hover,
.vinabox-cta a:focus {
  text-decoration: none !important;
}

.wp-block-button__link,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
a.button,
a.button:hover,
a.button:focus,
.gb-button,
.gb-button:hover,
.gb-button:focus,
.vb-btn,
.vb-btn:hover,
.vb-btn:focus,
a.wp-element-button,
a.wp-element-button:hover,
a.wp-element-button:focus {
  text-decoration: none !important;
}

/* ---------- FIX contraste <strong> dans les blocs à fond coloré ----------
   2026-07-29 (visual QA) : la règle `strong, b { color: var(--vb-fg,#151311) }`
   ci-dessus s'appliquait AUSSI dans les encadrés à fond sombre dont le parent
   impose sa couleur en inline (ex. CTA bordeaux #61262A, color:#fff) → le gras
   ressortait quasi noir sur bordeaux, illisible, alors que le reste du
   paragraphe s'affichait bien en clair. Dès qu'un ancêtre pose sa propre
   couleur claire en inline, on hérite au lieu de forcer. */
[style*="color:#fff"] strong,   [style*="color:#fff"] b,
[style*="color: #fff"] strong,  [style*="color: #fff"] b,
[style*="color:#ffffff"] strong,  [style*="color:#ffffff"] b,
[style*="color: #ffffff"] strong, [style*="color: #ffffff"] b,
[style*="color:white"] strong,  [style*="color:white"] b,
[style*="color: white"] strong, [style*="color: white"] b { color: inherit; }

/* ---------- FIX date de modification dupliquée dans entry-meta ----------
   2026-08-14 (visual QA) : GeneratePress rend deux <time> collés dans
   <span class="posted-on"> quand la date de modification existe :
   .updated (dateModified, pour le microdata) puis .entry-date.published.
   Aucune feuille ne masquait le premier, ce qui affichait « 25/07/202525/07/2025 »
   sous le titre (constaté sur /difference-vin-naturel-biodynamie/ et /vin-orange/).
   On masque la date de modification à l'écran, l'itemprop reste dans le DOM
   donc le microdata dateModified n'est pas perdu. */
.entry-meta .posted-on .updated:not(.published) { display: none; }