/* BlogPost.css - Gold Black Luxury Edition */

.blog-post-page {
  /* Échelle d'espacement article — rythme serré / généreux */
  --bp-space-xs: 0.5rem;
  --bp-space-sm: 0.875rem;
  --bp-space-md: 1.375rem;
  --bp-space-lg: 2.25rem;
  --bp-space-xl: clamp(2.75rem, 5vw, 4.25rem);
  --bp-space-2xl: clamp(3.25rem, 7vw, 5rem);
  /* Lecture ~65–72ch ; carte reste large pour stats / tableaux */
  --bp-read: min(42rem, calc(100vw - 4rem));
  --bp-wide: min(56rem, calc(100vw - 3rem));
  --bp-gutter: clamp(1.5rem, 4vw, 4rem);
  /* Typo site (évite Inter/Poppins génériques sur l’article) */
  --font-heading: var(--font-secondary, 'Bricolage Grotesque', system-ui, sans-serif);
  --font-body: var(--font-primary, 'Hanken Grotesk', system-ui, sans-serif);
  /* Surface opaque (plus de glass) — tokens marque */
  --bp-surface: var(--color-bg, var(--bg, oklch(0.08 0.008 85)));
  --bp-surface-elevated: var(--color-bg-elevated, var(--bg-alt, oklch(0.11 0.01 85)));
  --bp-border: color-mix(in oklch, var(--color-gold) 14%, var(--color-text, white) 8%);
  --bp-border-subtle: color-mix(in oklch, var(--color-text, white) 8%, transparent);
  --bp-text-soft: color-mix(in oklch, var(--color-text, oklch(0.94 0.01 85)) 78%, transparent);
  --bp-text-softer: color-mix(in oklch, var(--color-text, oklch(0.94 0.01 85)) 70%, transparent);
  --bp-ink: var(--color-on-gold, oklch(0.12 0.02 85));

  min-height: 100svh;
  padding: 0;
  margin-top: 0;
  background: transparent;
  overflow-x: clip;
}

/* Reading Progress Bar */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-gold-metallic);
  z-index: 20000;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s ease-out;
}

/* Immersive Hero — hauteur intrinsèque : un titre sur 3 lignes ne doit
   jamais pousser la ligne "Publié le / Lecture / Auteur" jusqu'à chevaucher
   le conteneur en dessous (tiré vers le haut via margin-top négatif). */
.post-hero-immersive {
  position: relative;
  min-height: clamp(420px, 52vh, 560px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  /* Plus de chevauchement avec le bloc article — air sous le hero */
  padding: clamp(7rem, 14vw, 9.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

.post-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.post-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) saturate(1.05);
  transform: scale(1.02);
}

/* Plus de bande noire pleine hauteur — léger voile bas uniquement
   pour garder le titre lisible sur l’image. */
.post-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    color-mix(in oklch, var(--color-bg, black) 12%, transparent) 0%,
    color-mix(in oklch, var(--color-bg, black) 8%, transparent) 45%,
    color-mix(in oklch, var(--color-bg, black) 48%, transparent) 100%
  );
}

.post-hero-content {
  position: relative;
  z-index: 20; /* Supérieur au container */
  text-align: center;
  max-width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0 var(--bp-gutter);
}

.back-btn-minimal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0.625rem 0.85rem;
  margin-left: -0.85rem; /* aligne le libellé, zone tactile élargie */
  color: var(--color-gold);
  text-decoration: none;
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: var(--bp-space-md);
  opacity: 0.9;
  border-radius: 6px;
  transition: opacity 0.3s var(--ease-luxe), transform 0.3s var(--ease-luxe), background 0.3s var(--ease-luxe), border-color 0.3s var(--ease-luxe), box-shadow 0.3s var(--ease-luxe), color 0.3s var(--ease-luxe);
}

.back-btn-minimal:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.back-btn-minimal:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.post-category-tag {
  display: block;
  margin: 0 0 24px;
  color: var(--color-gold);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.post-article-footer {
  margin-top: var(--bp-space-xl);
}

h1.post-title-immersive,
.post-title-immersive {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.35rem);
  color: var(--color-gold);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: var(--bp-space-lg);
  letter-spacing: -0.04em;
  text-shadow: none; /* override glow global App.css h1 */
  text-wrap: balance;
}

.post-meta-minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-inline: auto;
  color: var(--color-text-muted);
  text-align: center;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.meta-item .label {
  font-size: clamp(0.75rem, 1.5vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-gold);
}

.meta-item span:not(.label) {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-white);
}

.meta-sep {
  width: 1px;
  height: 30px;
  background: color-mix(in oklch, var(--color-gold) 20%, transparent);
}

/* Main Container — shell large opaque (pas de glass) ; lecture via --bp-read */
.blog-post-container {
  max-width: min(96rem, calc(100vw - 2rem));
  width: calc(100% - 2rem);
  margin: clamp(2.75rem, 6vw, 4.5rem) auto clamp(3.5rem, 8vw, 5.5rem);
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: 12px;
  padding: var(--bp-space-xl) clamp(1.5rem, 4vw, 4rem);
  position: relative;
  z-index: 10;
  box-shadow: 0 24px 48px color-mix(in oklch, var(--color-bg, black) 45%, transparent);
  overflow: visible;
}

/* Colonne de lecture centrée ; blocs « wide » sortent symétriquement
   (titres, stats, tableaux) au lieu d’un paragraphe étroit collé à gauche
   dans une carte large. */
.post-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.post-body {
  max-width: var(--bp-read);
  margin-inline: auto;
  width: 100%;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.35vw + 1rem, 1.125rem);
  line-height: 1.78;
  color: color-mix(in oklch, var(--color-text, oklch(0.94 0.01 85)) 92%, transparent);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Liens CMS — zone tactile un peu plus généreuse (inline, WCAG 2.5.8) */
.post-body a {
  color: var(--color-gold);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  padding-block: 0.2em;
  border-radius: 2px;
  transition: color 0.2s var(--ease-luxe, ease), background 0.2s var(--ease-luxe, ease);
}

.post-body a:hover {
  color: color-mix(in oklch, var(--color-gold) 85%, white);
}

.post-body a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.post-body > p,
.post-body > ul,
.post-body > ol {
  max-width: none;
  margin-block: 0 var(--bp-space-md);
}

.post-body > p:last-child,
.post-body > ul:last-child,
.post-body > ol:last-child {
  margin-bottom: 0;
}

.post-body li + li {
  margin-top: var(--bp-space-xs);
}

.post-body :is(h2, h3, h4, blockquote, .kb-stat, .kb-tip, .kb-table-wrapper, .blog-table-scroll) {
  width: var(--bp-wide);
  max-width: calc(100% + max(0px, var(--bp-wide) - var(--bp-read)));
  margin-inline: calc((var(--bp-read) - var(--bp-wide)) / 2);
}

/* Filet or en tête de carte — fait écho au filet de la carte CTA en bas de
   page, pour que les deux blocs flottants du parcours de lecture se
   répondent visuellement au lieu de sembler traités différemment. */
.blog-post-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-gold-metallic);
}

/* Article Body — typo déjà sur .post-body ci-dessus */
.post-body img,
.post-body video {
  max-width: 100%;
  height: auto;
}

.post-body iframe {
  max-width: 100%;
}

.post-body pre {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Lettrine Or — uniquement le tout premier paragraphe de l'article, pas les p
   imbriqués dans kb-stat/kb-tip/kb-definition (qui redémarrent :first-of-type
   dans leur propre contexte de parent) */
.post-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 800;
  padding: 0.5rem 1rem 0 0;
  color: var(--color-gold);
}

.post-body h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 2.5vw, 2.1rem);
  color: var(--color-white);
  margin-block: var(--bp-space-2xl) var(--bp-space-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.post-body h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--color-gold);
  margin-block: var(--bp-space-xl) var(--bp-space-md);
  font-weight: 700;
  line-height: 1.25;
}

/* H4 — Sous-titres d'étapes (banque de formules Élise) */
.post-body h4 {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: color-mix(in oklch, var(--color-text, white) 72%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-block: var(--bp-space-lg) var(--bp-space-sm);
}

.post-body blockquote {
  position: relative;
  margin-block: var(--bp-space-xl);
  padding: var(--bp-space-lg);
  background: color-mix(in oklch, var(--color-gold) 3%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-gold) 18%, transparent);
  border-radius: 10px;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--color-white);
  line-height: 1.65;
}

.post-body blockquote::before {
  content: '"';
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 5rem;
  font-family: var(--font-heading);
  color: color-mix(in oklch, var(--color-gold) 10%, transparent);
  line-height: 1;
}

.post-tags-bottom {
  margin-top: var(--bp-space-2xl);
  max-width: var(--bp-read);
  margin-inline: auto;
  display: flex;
  gap: var(--bp-space-sm);
  flex-wrap: wrap;
}

.post-tags-bottom .tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gold);
  background: color-mix(in oklch, var(--color-gold) 5%, transparent);
  padding: 6px 14px;
  border: 1px solid color-mix(in oklch, var(--color-gold) 20%, transparent);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Actions de Partage Deluxe */
.post-actions-luxe {
  margin-top: var(--bp-space-2xl);
  padding-top: var(--bp-space-lg);
  border-top: 1px solid var(--bp-border-subtle);
  max-width: var(--bp-read);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bp-space-md);
}

.share-label {
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-text-subtle);
  text-transform: uppercase;
}

.share-buttons-grid {
  display: flex;
  gap: 15px;
}

.share-btn-luxe {
  width: 50px;
  height: 50px;
  border: 1px solid var(--bp-border-subtle);
  background: transparent;
  color: var(--color-white);
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.4s var(--ease-luxe), transform 0.4s var(--ease-luxe), background 0.4s var(--ease-luxe), border-color 0.4s var(--ease-luxe), box-shadow 0.4s var(--ease-luxe), color 0.4s var(--ease-luxe);
}

.share-btn-luxe:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
  background: color-mix(in oklch, var(--color-gold) 5%, transparent);
}

/* CTA Premium Bottom */
.post-cta-premium {
  padding: var(--bp-space-2xl) var(--bp-gutter) clamp(4rem, 10vw, 6rem);
}

.cta-premium-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--bp-surface-elevated);
  border: 1px solid color-mix(in oklch, var(--color-gold) 28%, transparent);
  padding: 60px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.cta-premium-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-gold-metallic);
}

.cta-premium-content h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 15px;
  letter-spacing: -1px;
  color: var(--color-gold);
}

.cta-premium-content p {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--bp-text-soft);
}

.cta-premium-actions {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

.btn-primary-luxe, .btn-secondary-luxe {
  padding: 16px 32px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-decoration: none;
  transition: opacity 0.4s var(--ease-luxe), transform 0.4s var(--ease-luxe), background 0.4s var(--ease-luxe), border-color 0.4s var(--ease-luxe), box-shadow 0.4s var(--ease-luxe), color 0.4s var(--ease-luxe);
  border-radius: 2px;
  text-transform: uppercase;
}

.btn-primary-luxe {
  background: var(--gradient-gold-metallic);
  color: var(--bp-ink);
}

.btn-primary-luxe:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in oklch, var(--color-gold) 14%, transparent);
}

.btn-secondary-luxe {
  background: transparent;
  border: 1px solid var(--bp-border);
  color: var(--color-white);
}

.btn-secondary-luxe:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOCS VISUELS ÉLISE BLOG — kb-definition, kb-tip, kb-stat, kb-table
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 🔷 DÉFINITION — Aside éditorial, volontairement sans carte : kb-tip,
   kb-stat et le tableau comparatif sont déjà tous encadrés (fond + bordure),
   les répéter ici créerait une pile de cartes identiques. La définition se
   distingue par la seule typographie et un léger retrait. */
.post-body .kb-definition {
  margin-block: var(--bp-space-lg);
  padding: var(--bp-space-md) 0;
  border-top: 1px solid color-mix(in oklch, var(--color-gold) 15%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--color-gold) 15%, transparent);
}

.post-body .kb-definition::before {
  content: 'DÉFINITION';
  display: block;
  font-size: clamp(0.75rem, 1.5vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--color-gold);
  margin-bottom: 10px;
  font-family: var(--font-heading);
}

.post-body .kb-definition .kb-definition__term {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.post-body .kb-definition p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--bp-text-soft);
  font-style: italic;
}

/* 🔶 CONSEIL — Encadré insight Karibloom */
.post-body .kb-tip {
  margin-block: var(--bp-space-lg);
  padding: var(--bp-space-md) var(--bp-space-lg);
  background: color-mix(in oklch, var(--color-gold) 6%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-gold) 25%, transparent);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.post-body .kb-tip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-gold-metallic);
}

.post-body .kb-tip strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-gold);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.post-body .kb-tip p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--bp-text-soft);
}

/* 🔵 STATISTIQUE — Chiffre clé mis en valeur */
.post-body .kb-stat {
  margin-block: var(--bp-space-lg);
  padding: var(--bp-space-lg) var(--bp-space-xl);
  background: var(--bp-surface-elevated);
  border: 1px solid var(--bp-border-subtle);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.post-body .kb-stat .kb-stat__number {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: -2px;
  flex-shrink: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.post-body .kb-stat p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bp-text-softer);
}

/* Tableaux bruts (CMS) — scroll horizontal */
.post-body .blog-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--bp-space-lg);
  border-radius: 6px;
  border: 1px solid color-mix(in oklch, var(--color-gold) 12%, transparent);
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

.post-body .blog-table-scroll table {
  width: 100%;
  min-width: 280px;
  margin: 0;
  border-collapse: collapse;
}

/* 📊 TABLEAU COMPARATIF — Wrapper scrollable */
.post-body .kb-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--bp-space-lg);
  border-radius: 6px;
  border: 1px solid color-mix(in oklch, var(--color-gold) 15%, transparent);
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

/* 📊 TABLEAU COMPARATIF — Avant / Après */
.post-body .kb-table {
  width: 100%;
  min-width: 480px;       /* force le scroll sur très petits écrans */
  border-collapse: collapse;
  table-layout: fixed;    /* colonnes égales (50/50) */
  margin: 0;              /* géré par le wrapper */
  font-size: 0.95rem;
}

.post-body .kb-table th,
.post-body .kb-table td {
  width: 50%;
  word-break: break-word; /* évite les débordements de texte */
}

.post-body .kb-table thead tr {
  background: color-mix(in oklch, var(--color-gold) 8%, transparent);
}

.post-body .kb-table thead th {
  padding: 14px 20px;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 2px solid color-mix(in oklch, var(--color-gold) 30%, transparent);
}

.post-body .kb-table tbody tr {
  border-bottom: 1px solid var(--bp-border-subtle);
  transition: background 0.2s ease;
}

.post-body .kb-table tbody tr:hover {
  background: color-mix(in oklch, var(--color-text, white) 3%, transparent);
}

.post-body .kb-table tbody td {
  padding: 14px 20px;
  color: var(--bp-text-soft);
  line-height: 1.5;
  vertical-align: top;
}

.post-body .kb-table tbody td:first-child {
  color: var(--color-text-muted);
  border-right: 1px solid var(--bp-border-subtle);
}

.post-body .kb-table tbody td:first-child::before {
  content: '✗ ';
  color: color-mix(in oklch, var(--color-danger, oklch(0.65 0.2 25)) 70%, transparent);
  font-weight: 700;
}

.post-body .kb-table tbody td:last-child::before {
  content: '✓ ';
  color: color-mix(in oklch, var(--color-success, oklch(0.72 0.16 145)) 80%, transparent);
  font-weight: 700;
}

/* Responsive blocs */
@media (max-width: 768px) {
  .post-body .kb-stat {
    flex-direction: row;        /* garde le chiffre à gauche, texte à droite */
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .post-body .kb-stat .kb-stat__number {
    font-size: 1.6rem;          /* réduit de 2.8rem → lisible sans dominer */
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
  }

  .post-body .kb-stat p {
    font-size: 0.88rem;
  }

  .post-body .kb-table-wrapper {
    border-radius: 4px;
    margin-inline: -4px;
    width: calc(100% + 8px);
    max-width: none;
  }

  .post-body .kb-table {
    font-size: 0.82rem;
    min-width: 360px;
  }

  .post-body .kb-table thead th,
  .post-body .kb-table tbody td {
    padding: 10px 12px;
  }

  .post-body .kb-definition,
  .post-body .kb-tip {
    padding: 18px 20px;
  }
}

@media (max-width: 600px) {
  .blog-post-page {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  /* Comparatif avant/après : colonnes empilées, titres entièrement lisibles */
  .post-body .kb-table-wrapper {
    overflow-x: visible;
    margin-inline: 0;
    width: 100%;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  .post-body .kb-table {
    min-width: 0 !important;
    table-layout: auto;
    font-size: 0.82rem;
  }

  .post-body .kb-table thead tr {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .post-body .kb-table thead th {
    width: 100% !important;
    display: block;
    padding: 11px 14px;
    letter-spacing: 0.1em;
    font-size: clamp(0.57rem, 3vw, 0.74rem);
    line-height: 1.38;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
    border-bottom: none;
  }

  .post-body .kb-table thead th:last-child {
    border-bottom: 2px solid color-mix(in oklch, var(--color-gold) 28%, transparent);
  }

  .post-body .kb-table tbody td {
    width: 100% !important;
    display: block;
    padding: 11px 14px;
    border-right: none !important;
  }

  .post-body .kb-table tbody td:first-child {
    border-bottom: 1px solid var(--bp-border-subtle);
    border-right: none;
  }

  .post-body .kb-table tbody tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    border: 1px solid var(--bp-border-subtle);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bp-surface-elevated);
    border-bottom: none;
  }

  .post-body .kb-table tbody tr:hover {
    background: var(--bp-surface-elevated);
  }

  @media (hover: hover) and (pointer: fine) {
    .post-body .kb-table tbody tr:hover {
      background: color-mix(in oklch, var(--color-text, white) 4%, transparent);
    }
  }

  .post-body .blog-table-scroll {
    margin-inline: -8px;
    width: calc(100% + 16px);
  }
}

/* Selection Color */
::selection {
  background: var(--color-gold);
  color: var(--bp-ink);
}

/* Hero éditorial — titre à gauche, métas (Publié le / Lecture / Auteur) centrées */
@media (min-width: 1024px) {
  .post-hero-content {
    text-align: left;
    max-width: min(72rem, calc(100% - 4rem));
    margin-inline: max(var(--bp-gutter), calc((100% - 96rem) / 2 + var(--bp-gutter)));
  }

  .back-btn-minimal {
    justify-content: flex-start;
  }

  .post-meta-minimal {
    justify-content: center;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-post-container {
    padding: var(--bp-space-xl) var(--bp-gutter);
    margin-inline: 1rem;
  }

  .post-body :is(h2, h3, h4, blockquote, .kb-stat, .kb-tip, .kb-table-wrapper, .blog-table-scroll) {
    width: 100%;
    margin-inline: 0;
  }
  
  .cta-premium-card {
    flex-direction: column;
    text-align: center;
    padding: var(--bp-space-xl);
  }
}

@media (max-width: 768px) {
  .post-hero-immersive {
    min-height: auto;
    padding-top: clamp(6rem, 18vw, 7.5rem);
    padding-bottom: clamp(3.5rem, 10vw, 5rem);
  }
  
  .post-title-immersive {
    font-size: clamp(1.75rem, 7vw, 2.2rem);
    margin-bottom: var(--bp-space-md);
  }

  .post-meta-minimal {
    flex-wrap: wrap;
    gap: var(--bp-space-sm);
    justify-content: center;
  }

  .meta-sep {
    display: none;
  }
  
  .blog-post-container {
    padding: var(--bp-space-lg) var(--bp-space-md);
    margin-top: 0;
    margin-inline: 0.75rem;
    border-radius: 10px;
  }

  .post-body {
    max-width: none;
  }
  
  .post-tags-bottom,
  .post-actions-luxe {
    max-width: none;
  }
  
  .post-body h2 {
    font-size: 1.55rem;
  }
}

/* États chargement article + accessibilité partage */
.blog-post-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.blog-post-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 55vh;
  gap: 1.25rem;
  padding: 2rem;
}

.blog-post-loading-bar {
  width: min(320px, 80vw);
  height: 4px;
  border-radius: 2px;
  background: var(--bp-border-subtle);
  position: relative;
  overflow: hidden;
}

.blog-post-loading-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 42%;
  background: var(--gradient-gold-metallic);
  animation: blog-post-load-shimmer 1.05s ease-in-out infinite;
}

@keyframes blog-post-load-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(260%);
  }
}

.blog-post-loading-text {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-subtle);
}

.share-copy-feedback {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--color-gold);
  text-align: center;
  max-width: 28rem;
}

.share-btn-luxe:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ── Apparitions texte (stagger reveal) — transform + opacity only ──
   Vocabulaire livre-animations : cascade ~80ms, ease-out, reduced-motion. */
@keyframes bp-text-reveal {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.post-hero-content > .back-btn-minimal,
.post-hero-content > .post-category-tag,
.post-hero-content > .post-title-immersive,
.post-hero-content > .post-meta-minimal {
  animation: bp-text-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.post-hero-content > .back-btn-minimal {
  animation-delay: 0.06s;
}

.post-hero-content > .post-category-tag {
  animation-delay: 0.14s;
}

.post-hero-content > .post-title-immersive {
  animation-delay: 0.22s;
}

.post-hero-content > .post-meta-minimal {
  animation-delay: 0.34s;
}

.blog-post-container {
  animation: bp-text-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* Scroll reveal corps article — navigateurs avec view timelines */
@supports (animation-timeline: view()) {
  .post-body > * {
    opacity: 0;
    animation: bp-text-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress-bar {
    transition: none;
  }

  .blog-post-loading-bar::after {
    animation: none;
    width: 72%;
    transform: none;
    left: 14%;
  }

  .share-btn-luxe:hover {
    transform: none;
  }

  .btn-primary-luxe:hover,
  .btn-secondary-luxe:hover {
    transform: none;
  }

  .back-btn-minimal:hover {
    transform: none;
  }

  .post-hero-content > .back-btn-minimal,
  .post-hero-content > .post-category-tag,
  .post-hero-content > .post-title-immersive,
  .post-hero-content > .post-meta-minimal,
  .blog-post-container,
  .post-body > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/*# sourceMappingURL=3093.d90e274b.chunk.css.map*/