/* =========================================================
   BizCastCentral — Design Tokens
   Dark-first, system-ui, audio-editorial
   ========================================================= */

:root {
  /* ---------- COLORS — Surfaces ---------- */
  --bg:           #0A0A0B;   /* page background */
  --bg-elevated: #111114;    /* cards, panels */
  --bg-hover:    #17171B;    /* card hover */
  --bg-sunken:   #060607;    /* deep sections, footer */
  --bg-overlay:  rgba(10, 10, 11, 0.72);

  /* ---------- COLORS — Borders ---------- */
  --border-subtle:  rgba(250, 250, 250, 0.06);
  --border-default: rgba(250, 250, 250, 0.10);
  --border-strong:  rgba(250, 250, 250, 0.18);

  /* ---------- COLORS — Text ---------- */
  --text-primary: #FAFAFA;
  --text-body:    #D4D4D6;
  --text-muted:   #9CA3AF;   /* bumped P6: ~7.5:1 contrast */
  --text-subtle:  #78787E;   /* bumped for WCAG AA 4.5:1 */
  --text-on-accent: #0A0A0B;

  /* ---------- COLORS — Brand ---------- */
  --accent:        #F59E0B;   /* gold — editorial signature */
  --accent-hover:  #FBBF24;
  --accent-dim:    rgba(245, 158, 11, 0.12);
  --accent-line:   rgba(245, 158, 11, 0.35);

  --podcast:       #FF6B35;   /* orange — audio/podcast signal */
  --podcast-hover: #FF8559;
  --podcast-dim:   rgba(255, 107, 53, 0.12);

  /* ---------- COLORS — Semantic ---------- */
  --success: #34D399;
  --warning: #FBBF24;
  --error:   #F87171;
  --info:    #60A5FA;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (1.25 minor third) */
  --fs-xs:   12px;   /* caption, meta */
  --fs-sm:   14px;   /* small body */
  --fs-base: 16px;   /* body */
  --fs-md:   18px;   /* lead */
  --fs-lg:   20px;   /* h6 */
  --fs-xl:   24px;   /* h5 */
  --fs-2xl:  30px;   /* h4 */
  --fs-3xl:  36px;   /* h3 */
  --fs-4xl:  48px;   /* h2 */
  --fs-5xl:  64px;   /* h1 / display */
  --fs-6xl:  80px;   /* hero */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.12em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---------- SPACING (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-subtle:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-medium:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-prominent: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow-accent:  0 0 0 1px var(--accent), 0 0 24px rgba(245, 158, 11, 0.18);

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --container-wide: 1320px;
  --container-narrow: 720px;
  --gutter:       24px;

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:      120ms;
  --t-base:      180ms;
  --t-slow:      280ms;

  /* ---------- Z ---------- */
  --z-sticky: 30;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal:  100;
}

/* =========================================================
   Reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

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

button { font-family: inherit; cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

::selection {
  background: var(--accent);
  color: var(--text-on-accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =========================================================
   Type primitives
   ========================================================= */
.h-display {
  font-size: clamp(40px, 6vw, var(--fs-6xl));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.h1 { font-size: clamp(32px, 4.5vw, var(--fs-5xl)); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-primary); }
.h2 { font-size: clamp(28px, 3.5vw, var(--fs-4xl)); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-primary); }
.h3 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--text-primary); }
.h4 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-primary); }
.h5 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-primary); }
.h6 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-primary); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}
.meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* =========================================================
   Layout helpers
   ========================================================= */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary {
  background: var(--text-primary);
  color: var(--text-on-accent);
}
.btn--primary:hover { background: #fff; }

.btn--accent {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn--accent:hover { background: var(--accent-hover); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--bg-elevated); border-color: var(--text-primary); }

.btn--ghost {
  background: transparent;
  color: var(--text-body);
  height: 36px;
  padding: 0 var(--space-3);
}
.btn--ghost:hover { color: var(--text-primary); background: var(--bg-elevated); }

.btn--sm { height: 36px; padding: 0 var(--space-4); font-size: var(--fs-xs); }
.btn--lg { height: 52px; padding: 0 var(--space-6); font-size: var(--fs-base); }

/* =========================================================
   Badges / pills
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-body);
}
.badge--accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); }
.badge--podcast { color: var(--podcast); border-color: rgba(255,107,53,0.35); background: var(--podcast-dim); }
.badge--solid { background: var(--text-primary); color: var(--text-on-accent); border-color: transparent; }

/* =========================================================
   Card base + variants (style 3 = signature)
   ========================================================= */
.card {
  position: relative;
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.card:hover { border-color: var(--border-default); background: var(--bg-hover); }

/* style 3 — signature top accent line */
.card--editorial {
  background: var(--bg-elevated);
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--accent);
  padding-top: var(--space-5);
  position: relative;
}
.card--editorial::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 32px; height: 3px;
  background: var(--accent);
}
.card--editorial:hover { background: transparent; }
.card--editorial:hover::before { width: 64px; transition: width var(--t-base) var(--ease-out); }

/* =========================================================
   Forms
   ========================================================= */
.input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-subtle); }
.input:focus { outline: none; border-color: var(--accent); }

/* =========================================================
   Utility
   ========================================================= */
.divider { height: 1px; background: var(--border-subtle); border: 0; margin: var(--space-6) 0; }
.divider--accent { background: var(--accent-line); }

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.accent { color: var(--accent); }
.podcast-c { color: var(--podcast); }

.mono { font-family: var(--font-mono); }

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* =========================================================
   Waveform — recurring audio motif
   ========================================================= */
.waveform {
  display: inline-flex;
  align-items: end;
  gap: 2px;
  height: 16px;
}
.waveform span {
  display: block;
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.85;
}

/* =========================================================
   Scrollbar
   ========================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2e; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a40; }

/* =========================================================
   Compatibility layer — Old variable names → new tokens
   Ensures existing PHP templates keep working while
   transitioning to the new design system naming.
   ========================================================= */
:root {
  /* Old surface vars → new tokens */
  --color-bg:           var(--bg);
  --color-bg-elevated:  var(--bg-elevated);
  --color-bg-hover:     var(--bg-hover);

  /* Old text vars → new tokens */
  --color-text:         var(--text-primary);
  --color-text-muted:   var(--text-muted);
  --color-text-subtle:  var(--text-subtle);

  /* Old accent vars → new tokens */
  --color-accent:       var(--accent);
  --color-accent-hover: var(--accent-hover);

  /* Old border vars → new tokens */
  --color-border:       var(--border-subtle);
  --color-border-hover: var(--border-default);

  /* Old font vars → new tokens */
  --font-sans:          var(--font-sans);

  /* Old size vars → new tokens */
  --text-xs:   var(--fs-xs);
  --text-sm:   var(--fs-sm);
  --text-base: var(--fs-base);
  --text-lg:   var(--fs-lg);
  --text-xl:   var(--fs-xl);
  --text-2xl:  var(--fs-2xl);
  --text-3xl:  var(--fs-3xl);
}

/* =========================================================
   Animations — from the design prototype
   ========================================================= */
@keyframes bcc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,53,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,107,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,53,0); }
}
@keyframes wave-0 { from { transform: scaleY(0.4) } to { transform: scaleY(1) } }
@keyframes wave-1 { from { transform: scaleY(0.7) } to { transform: scaleY(0.3) } }
@keyframes wave-2 { from { transform: scaleY(0.3) } to { transform: scaleY(0.9) } }
@keyframes wave-3 { from { transform: scaleY(0.9) } to { transform: scaleY(0.5) } }

/* =========================================================
   ACTION 3 — Force H1 inside article body to render as H2
   (prevents double H1 when post content starts with H1)
   ========================================================= */
.article-content h1 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

/* =========================================================
   ACTION 12 — CTA newsletter inline (between content and related)
   ========================================================= */
.bcc-newsletter-cta {
  margin: var(--space-8) 0;
  padding: var(--space-7) var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  text-align: center;
}
.bcc-newsletter-cta .eyebrow {
  margin-bottom: var(--space-3);
}
.bcc-newsletter-cta h3 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
.bcc-newsletter-cta p {
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.bcc-newsletter-cta .bcc-newsletter-form {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}
.bcc-newsletter-cta .bcc-newsletter-form .input {
  flex: 1;
}

/* =========================================================
   ACTION 20 — Waveform animated bars (podcast signal)
   ========================================================= */
.waveform--animated span {
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.waveform--animated span:nth-child(1) { animation-name: wave-0; }
.waveform--animated span:nth-child(2) { animation-name: wave-1; }
.waveform--animated span:nth-child(3) { animation-name: wave-2; }
.waveform--animated span:nth-child(4) { animation-name: wave-3; }
.waveform--animated span:nth-child(5) { animation-name: wave-0; animation-delay: 0.1s; }

/* =========================================================
   ACTION 19 — FAQ accordion
   ========================================================= */
.bcc-faq details {
  border-bottom: 1px solid var(--border-subtle);
}
.bcc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  cursor: pointer;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-size: var(--fs-md);
  list-style: none;
  user-select: none;
}
.bcc-faq summary::-webkit-details-marker { display: none; }
.bcc-faq summary::after {
  content: "+";
  font-size: var(--fs-xl);
  color: var(--accent);
  transition: transform var(--t-fast) var(--ease-out);
  flex-shrink: 0;
  margin-left: var(--space-4);
}
.bcc-faq details[open] summary::after {
  content: "−";
}
.bcc-faq details > div {
  padding: 0 0 var(--space-5);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}

/* =========================================================
   ACTION 18 — TOC sticky sidebar
   ========================================================= */
.bcc-article-with-toc {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-7);
  align-items: start;
}
.bcc-toc-sidebar {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.bcc-toc {
  padding: var(--space-4);
  border-left: 2px solid var(--accent-line);
}
.bcc-toc-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.bcc-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bcc-toc-item {
  margin-bottom: var(--space-1);
}
.bcc-toc-item a {
  display: block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  line-height: var(--lh-snug);
}
.bcc-toc-item a:hover { color: var(--text-primary); }
.bcc-toc-item a.active {
  color: var(--accent);
  background: var(--accent-dim);
}
.bcc-toc-sub a { padding-left: var(--space-4); font-size: 11px; }

/* Hide TOC on tablet/mobile (handled by responsive.css already via bcc-article-body) */
@media (max-width: 1024px) {
  .bcc-article-with-toc {
    grid-template-columns: 1fr;
  }
  .bcc-toc-sidebar { display: none; }
}

/* =========================================================
   P6 — Contraste métadonnées : bumper --text-muted
   Ancienne valeur #8C8C92 (~6:1), nouvelle #9CA3AF (~7.5:1)
   Plus lisible sur fond sombre sans casser l'esthétique
   ========================================================= */
/* Override already defined in :root — re-declared for specificity */


/* =========================================================
   P1 — Cookie banner (override du plugin wst-consent-banner)
   Compact mais lisible : 2 lignes max desktop, stack mobile,
   boutons toujours visibles, pas de tronquage agressif
   ========================================================= */
#wst-consent-banner.wst-cookie-banner,
.wst-cookie-banner {
  position: fixed !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  max-height: none !important;
  background: var(--bg-elevated, #111114) !important;
  border-top: 1px solid var(--border-subtle, rgba(250,250,250,0.1)) !important;
  border-radius: 0 !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.5) !important;
  color: var(--text-body, #D4D4D6) !important;
  padding: 16px 24px !important;
  margin: 0 !important;
}
.wst-cookie-banner .wst-cookie-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.wst-cookie-banner .wst-cookie-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  flex: 1 1 60% !important;
  min-width: 240px !important;
}
.wst-cookie-banner .wst-cookie-header svg {
  flex-shrink: 0 !important;
  color: var(--accent, #F59E0B) !important;
  margin-top: 2px !important;
}
.wst-cookie-banner h2,
.wst-cookie-banner .wst-cookie-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--text-primary, #FAFAFA) !important;
  line-height: 1.3 !important;
}
.wst-cookie-banner p,
.wst-cookie-banner .wst-cookie-desc,
.wst-cookie-banner .wst-cookie-text {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--text-muted, #9CA3AF) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}
.wst-cookie-banner .wst-cookie-actions,
.wst-cookie-banner .wst-cookie-buttons {
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}
.wst-cookie-banner button,
.wst-cookie-banner a.wst-button,
.wst-cookie-banner [class*="wst-button"],
.wst-cookie-banner input[type="submit"] {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: 1px solid var(--border-default, rgba(250,250,250,0.15)) !important;
  background: transparent !important;
  color: var(--text-primary, #FAFAFA) !important;
  transition: all 150ms ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wst-cookie-banner button:hover,
.wst-cookie-banner a.wst-button:hover {
  border-color: var(--accent, #F59E0B) !important;
  color: var(--accent, #F59E0B) !important;
}
.wst-cookie-banner .wst-accept,
.wst-cookie-banner [data-action="accept"],
.wst-cookie-banner button[type="submit"],
.wst-cookie-banner .button-primary {
  background: var(--accent, #F59E0B) !important;
  border-color: var(--accent, #F59E0B) !important;
  color: var(--bg, #0A0A0B) !important;
}
.wst-cookie-banner .wst-accept:hover,
.wst-cookie-banner [data-action="accept"]:hover,
.wst-cookie-banner button[type="submit"]:hover {
  background: var(--accent-hover, #D97706) !important;
  border-color: var(--accent-hover, #D97706) !important;
  color: var(--bg, #0A0A0B) !important;
}
@media (max-width: 640px) {
  .wst-cookie-banner { padding: 12px 16px !important; }
  .wst-cookie-banner .wst-cookie-inner { gap: 12px !important; }
  .wst-cookie-banner .wst-cookie-actions,
  .wst-cookie-banner .wst-cookie-buttons {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .wst-cookie-banner button { flex: 1 1 auto !important; min-width: 120px !important; }
}

/* =========================================================
   P3 — Mobile nav fixes
   Force le burger visible ≤1024px, fix overflow
   ========================================================= */
@media (max-width: 1024px) {
  .bcc-burger {
    display: inline-flex !important;
  }
  .bcc-desktop-nav {
    display: none !important;
  }
  .bcc-cta-newsletter {
    display: none !important;
  }
  /* Fix overflow horizontal */
  body {
    overflow-x: hidden !important;
  }
  .bcc-feature-card {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .bcc-live-ribbon {
    font-size: 11px !important;
  }
}

@media (max-width: 640px) {
  .site-header .container {
    height: 56px !important;
    gap: 12px !important;
  }
  .bcc-logo span:last-child {
    font-size: 15px !important;
  }
  /* Hero featured full-width mobile */
  .bcc-feature-card > div:first-child {
    aspect-ratio: 16/9 !important;
  }
}

/* =========================================================
   FIX UX rapport 2 — sommaire, line-clamp, hero
   ========================================================= */

/* Sommaire : enlever le soulignement systématique */
.bcc-toc a {
  text-decoration: none !important;
}
.bcc-toc a:hover,
.bcc-toc a:focus {
  text-decoration: underline !important;
}

/* Articles similaires : ne pas tronquer agressivement */
.bcc-articles-grid .card--editorial p,
.related-articles .card--editorial p {
  -webkit-line-clamp: 3 !important;
}

/* Hero featured : limiter la hauteur sur grand écran (P5) */
.bcc-feature-card > div:first-child {
  max-height: 480px !important;
}

/* TOC sticky : améliorer scroll sur sommaire long (P4) */
.bcc-toc-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
.bcc-toc-sidebar::-webkit-scrollbar { width: 4px; }
.bcc-toc-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 2px;
}

/* Recentrer le contenu article (P6 colonne gauche vide / P7 largeur déséquilibrée) */
.single-article > .container {
  max-width: 1200px !important;
}
@media (min-width: 1280px) {
  .bcc-article-with-toc {
    grid-template-columns: minmax(0, 720px) 240px !important;
    justify-content: center !important;
    column-gap: 64px !important;
  }
}

/* =========================================================
   FIX UX rapport 3 — mobile H1, header mobile CTA, layout
   ========================================================= */

/* P1/P9 : H1 mobile ne doit pas être tronqué */
.single-title,
.single-article h1,
.h1 {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  max-width: 100% !important;
}
@media (max-width: 640px) {
  .single-title,
  .single-article h1 {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    hyphens: auto !important;
  }
  /* Container article assure padding */
  .single-article > .container,
  .bcc-article-with-toc {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* P2/P3 : Header mobile — montrer le CTA "S'inscrire" (au moins l'icône) */
@media (max-width: 1024px) {
  .bcc-cta-newsletter {
    display: inline-flex !important;
    width: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  /* Cacher le label texte, garder l'icône */
  .bcc-cta-newsletter > svg + * { display: none !important; }
}
@media (max-width: 480px) {
  /* Ultra-compact : petit logo, 3 actions visibles */
  .site-header .container {
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .bcc-logo span:last-child { font-size: 14px !important; }
  .search-toggle,
  .bcc-cta-newsletter,
  .bcc-burger {
    width: 36px !important;
    height: 36px !important;
  }
}

/* P11 : Breadcrumb — tronquer le dernier élément si trop long */
.breadcrumbs .current,
.breadcrumbs span:last-child,
nav.breadcrumbs > span:last-child {
  display: inline-block !important;
  max-width: 320px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
}
@media (max-width: 640px) {
  .breadcrumbs .current,
  nav.breadcrumbs > span:last-child {
    max-width: 180px !important;
  }
}

/* P12 : Reading progress — couleur plus douce, label ARIA */
.reading-progress {
  background: var(--accent-line, rgba(245,158,11,0.35)) !important;
  height: 3px !important;
  opacity: 0.85 !important;
}

/* P8 : Back-to-top — masquer en zone footer */
.back-to-top-btn {
  z-index: 30 !important;
  bottom: 24px !important;
  right: 24px !important;
}
.back-to-top-btn.near-footer {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(20px) !important;
  transition: all 200ms ease !important;
}
@media (max-width: 480px) {
  /* Sur très petits écrans : ne pas afficher pour gagner de la place */
  .back-to-top-btn { display: none !important; }
}

/* P5 : Featured image hero du single — réduire l'agressivité visuelle */
.single-article .single-featured-image {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
}
.single-article .single-featured-image img {
  max-height: 360px !important;
  object-fit: cover !important;
  width: 100% !important;
}

/* P10 — Inverser hiérarchie métadonnées : date plus grande, label petit gris */
.bcc-transparency-banner .bcc-tb-label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-subtle) !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.bcc-transparency-banner time,
.bcc-transparency-banner .bcc-tb-published time,
.bcc-transparency-banner .bcc-tb-modified time,
.bcc-transparency-banner .bcc-tb-reading span:not(.bcc-tb-label) {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* P5 — Désactiver l'affichage de la featured image hero sur les single posts
   (l'image générée a son titre tronqué et duplique le H1) */
.single-article .single-featured-image {
  display: none !important;
}