/* ══════════════════════════════════════════════════════════════
   VTComptes Blog — Thème Maybach v9 (2026-10-13)
   Fond noir mat, cuir matelassé, bordeaux laqué + chrome (DA Maybach 13/10/2026)
   Mobile-first, contrastes WCAG AA
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

:root {
  /* Couleurs */
  --bg:          #0B0B0D;
  --bg-alt:      #101014;
  --bg-card:     #141418;
  --bg-subtle:   #1A1A1F;
  --border:      rgba(201,206,214,.14);
  --border-dark: rgba(201,206,214,.26);

  /* Texte */
  --text:        #FFFFFF;
  --text-dim:    #D3D6DC;
  --text-muted:  #B8BCC4;
  --text-light:  #9AA0AA;  /* 7:1 sur #0B0B0D (DA Maybach) */

  /* Accent — bordeaux laqué ; texte lisible = #E8627A (6,05:1 sur noir) */
  --accent:      #9B1B30;
  --accent-dark: #6E0F1F;
  --link-text:   #E8627A;
  --accent-soft: rgba(155,27,48,.2);
  --accent-text: #FFFFFF;
  --chrome:      #D5D9E0;

  /* Sémantique */
  --success:     #7fd99a;
  --success-bg:  rgba(127,217,154,.08);
  --warning-bg:  rgba(201,206,214,.07);
  --info-bg:     rgba(138,147,166,.1);

  /* Axe de mise en page — UNE seule référence pour nav / contenu / footer */
  --wrap:        1140px;   /* largeur max des zones larges (nav, index blog, footer) */
  --measure:     720px;    /* largeur de lecture d'un article (mesure typographique) */
  --gutter:      24px;     /* marge latérale unique, toutes zones */

  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md:   0 4px 10px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
  --shadow-lg:   0 10px 24px rgba(0,0,0,.55), 0 4px 6px rgba(0,0,0,.4);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--link-text); text-decoration: none; }
/* Hover sobre : couleur uniquement, pas de soulignement animé glissant */
a:hover { color: var(--link-text); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ── Navigation ──────────────────────────────────────────────── */
/* ── Nav — identique à la landing/app, fond clair ───────────── */
.blog-nav {
  background: rgba(11,11,13,.96);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45);
}
.blog-nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 16px;
}
/* Logo — même marque que l'app */
.blog-nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -.02em;
  white-space: nowrap;
  text-decoration: none;
}
.blog-nav-logo-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6E0F1F 0%, #9B1B30 100%);
  border: 1px solid rgba(201,206,214,.35);
  display: grid;
  place-items: center;
  font-family: 'Inter', monospace;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(155,27,48,.45);
}
/* Liens nav */
.blog-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.blog-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 13px;
  border-radius: 100px;
  text-decoration: none;
  /* Hover sobre : couleur seule, pas d'animation glissante */
  transition: background .15s, color .15s;
}
.blog-nav-links a:hover { color: var(--text); background: var(--bg-alt); text-decoration: none; }
.blog-nav-links a.active { color: var(--text); font-weight: 600; }
/* CTA principal — "Accéder à l'app" */
.blog-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg,#6E0F1F,#9B1B30);
  border: 1px solid rgba(201,206,214,.35) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .15s, transform .15s !important;
}
.blog-nav-cta:hover {
  background: linear-gradient(135deg,#7d1224,#a81f36) !important;
  border-color: rgba(201,206,214,.7) !important;
  color: #fff !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}
.blog-nav-cta svg { flex-shrink: 0; }

/* ── Nav mobile : les liens ne DISPARAISSENT pas, ils passent au 2e rang ─────
   Avant (David 2026-09-01) : sous 640px, `.blog-nav-links { display: none }`
   → sur smartphone il ne restait que le logo et « Accéder à l'app ». Le Blog,
   les Tarifs et le Simulateur devenaient inatteignables depuis le haut de page,
   alors que c'est la surface d'entrée n°1 (trafic SEO mobile).
   Après : rail horizontal sous le logo, un seul appui, aucun menu à déplier.
   Aucun HTML à changer — on réutilise le <ul> déjà présent dans chaque page. */
@media (max-width: 640px) {
  .blog-nav-inner {
    height: auto;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 0;
    padding-top: 8px;
    padding-bottom: 0;
  }
  .blog-nav-logo { order: 1; }
  .blog-nav-cta  { order: 2; margin-left: auto; }

  .blog-nav-links {
    display: flex;
    order: 3;
    width: 100%;
    /* bord à bord : le rail file jusqu'aux deux bords, on sent qu'il défile */
    margin: 8px calc(var(--gutter) * -1) 0;
    padding: 7px var(--gutter) 8px;
    gap: 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid var(--border);
  }
  .blog-nav-links::-webkit-scrollbar { display: none; }
  .blog-nav-links li { flex: 0 0 auto; }
  .blog-nav-links a {
    display: block;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 100px;
    white-space: nowrap;
  }
  .blog-nav-links a.active {
    color: #fff;
    background: var(--text);
    border-color: var(--text);
  }
  /* CTA un cran plus compact : il doit tenir à côté du logo sur 320px */
  .blog-nav-cta { padding: 7px 13px !important; font-size: 12.5px !important; }

  /* « Simulateur fiscal » → « Simulateur » : gagne 45px et fait tenir les
     4 onglets sans défilement sur un écran de 390px (iPhone courant). */
  .nav-word-extra { display: none; }
}
/* Écrans étroits : le rail défile forcément — on le DIT avec un fondu au bord
   droit, sinon un libellé tronqué net passe pour un bug d'affichage. */
@media (max-width: 389px) {
  .blog-nav-links {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
}
/* ── Repli du rail au défilement (David 2026-09-01) ────────────────────────
   « Sur smartphone on n'a pas beaucoup de place, il faut en garder un maximum. »
   Le rail se rétracte quand on descend, revient quand on remonte ; le 1er rang
   (logo + bouton) ne bouge jamais. Piloté par assets/js/nav-collapse.js, qui
   pose .has-collapsible-rail puis .is-rail-collapsed.
   La nav passe de `sticky` à `fixed` : replier une nav sticky réduirait sa place
   dans le flux et l'article sauterait de 40px. Le body reçoit en compensation un
   padding mesuré (posé par le script, jamais une valeur devinée). */
@media (max-width: 640px) {
  .blog-nav.has-collapsible-rail {
    position: fixed;
    top: 0; left: 0; right: 0;
  }
  /* rail rétracté : on rend au 1er rang la respiration que le rail lui prenait,
     sinon logo et bouton se retrouvent collés au bord bas de la barre */
  .blog-nav.has-collapsible-rail .blog-nav-inner {
    transition: padding-bottom .22s ease;
  }
  .blog-nav.is-rail-collapsed .blog-nav-inner { padding-bottom: 8px; }
  .blog-nav.has-collapsible-rail .blog-nav-links {
    max-height: 60px;
    transition: max-height .22s ease, padding .22s ease, margin .22s ease,
                opacity .16s ease, border-color .22s ease;
  }
  .blog-nav.is-rail-collapsed .blog-nav-links {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-top-color: transparent;
  }
  /* les ancres du sommaire ne doivent pas finir sous la nav fixe */
  .article-body h2, .article-body h3, .faq-section { scroll-margin-top: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-nav .blog-nav-links { transition: none !important; }
}

/* Très petits écrans : le libellé du CTA se raccourcit plutôt que de passer à la ligne */
@media (max-width: 360px) {
  .blog-nav-logo { font-size: 15px; }
  .blog-nav-cta { padding: 7px 11px !important; }
}

/* ── Hero index ──────────────────────────────────────────────── */
.index-hero {
  background: linear-gradient(135deg, #141418 0%, #0F0F13 100%);
  padding: 64px 24px 56px;
  text-align: center;
}
.index-hero-eyebrow {
  display: inline-block;
  background: var(--accent-soft);
  border: 1px solid rgba(155,27,48,.3);
  color: var(--link-text);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.index-hero h1 {
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: #ffffff;
  max-width: 680px;
  margin: 0 auto 16px;
}
.index-hero p {
  font-size: 16px;
  color: rgba(255,255,255,.72);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Layout principal ────────────────────────────────────────── */
.blog-container {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  padding: 56px 0 80px;
  align-items: start;
}
/* Un item de grille a min-width:auto par défaut : un tableau ou une image large
   élargit la colonne au-delà du viewport et le texte se retrouve coupé.
   min-width:0 rend la colonne réellement compressible. */
.blog-layout > * { min-width: 0; }

@media (max-width: 860px) {
  .blog-layout { grid-template-columns: 1fr; gap: 40px; }
  .blog-sidebar { order: -1; }
}

/* ── Cards articles ──────────────────────────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.article-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr;
  transition: box-shadow .2s, transform .2s;
}
.article-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; }
.article-card:hover .card-title { color: var(--link-text); }

.article-card.featured {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) { .article-card.featured { grid-template-columns: 1fr; } }

.card-img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-subtle);
  flex-shrink: 0;
}
.article-card.featured .card-img-wrap {
  aspect-ratio: auto;
  min-height: 240px;
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.article-card:hover .card-img { transform: scale(1.03); }

.card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
}
.article-card.featured .card-body { padding: 28px 28px 28px; justify-content: center; }

.card-cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--link-text);
  margin-bottom: 8px;
}
.card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 8px;
  transition: color .15s;
}
.article-card.featured .card-title { font-size: 20px; }
.card-excerpt {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-light);
}
.card-read-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--link-text);
  margin-top: 14px;
}
.card-read-link svg { width: 14px; height: 14px; stroke: currentColor; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar-widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.widget-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  background: var(--bg-alt);
}
.widget-body { padding: 16px 18px; }

/* Produits sidebar */
.product-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.product-item:last-child { border-bottom: none; }
.product-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--accent-soft);
  border: 1px solid rgba(155,27,48,.3);
  color: var(--link-text);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.product-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 2px;
}
.product-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--link-text);
  padding: 4px 10px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.product-link:hover { background: rgba(155,27,48,.2); text-decoration: none; }

/* Newsletter widget */
.nwl-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  font-family: inherit;
  margin-bottom: 8px;
  transition: border-color .15s;
}
.nwl-input:focus { outline: none; border-color: var(--accent); }
.nwl-btn {
  width: 100%;
  padding: 9px 12px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.nwl-btn:hover { background: var(--accent-dark); }
.nwl-sub { font-size: 11px; color: var(--text-light); margin-top: 8px; }

/* ── Produits block (index page) ─────────────────────────────── */
.products-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 24px;
}
.products-section .section-inner {
  max-width: var(--wrap);
  margin: 0 auto;
}
.products-section h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.products-section .section-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .2s;
}
.product-card:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.product-card-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--accent-soft);
  border: 1px solid rgba(155,27,48,.25);
  color: var(--link-text);
  align-self: flex-start;
}
.product-card-badge.partner { background: rgba(138,147,166,.1); border-color: rgba(59,130,246,.25); color: #B8BCC4; }
.product-card h3 { font-size: 15px; font-weight: 700; color: var(--text); }
.product-card p { font-size: 13px; color: var(--text-muted); line-height: 1.55; flex: 1; }
.product-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--link-text);
  margin-top: 4px;
}
.product-card-cta svg { width: 13px; height: 13px; stroke: currentColor; }

/* ── Footer ──────────────────────────────────────────────────── */
.blog-footer {
  background: #08080A;
  color: rgba(255,255,255,.6);
  padding: 32px var(--gutter);
  text-align: center;
  font-size: 13px;
}
/* Même axe que la nav : le pied de page ne s'étale plus sur toute la largeur */
.blog-footer > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.blog-footer a { color: rgba(255,255,255,.8); }
.blog-footer a:hover { color: #fff; }
.blog-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 12px;
  list-style: none;
}

/* ════════════════════════════════════════════════════════════
   ARTICLE TEMPLATE
   ════════════════════════════════════════════════════════════ */

/* Colonne de lecture unique, centrée sur le MÊME axe que le titre du hero.
   Avant : grille `1fr 300px` alors qu'aucun article n'a de sidebar → 348px de vide
   à droite et l'article décalé à gauche. Et le double padding
   (.blog-container 24px + .article-layout 24px) décalait le corps de 24px de plus
   que le fil d'Ariane, avec débordement/texte coupé sur mobile. */
.article-page .blog-container {
  max-width: calc(var(--measure) + var(--gutter) * 2);
}
.article-layout {
  max-width: none;
  margin: 0;
  padding: 32px 0 80px;   /* padding latéral porté par .blog-container uniquement */
  min-width: 0;
}
.article-layout > * { min-width: 0; }

/* Si un article reçoit un jour une vraie sidebar, la grille revient d'elle-même */
.article-page:has(.article-sidebar) .blog-container { max-width: var(--wrap); }
@media (min-width: 861px) {
  .article-layout:has(.article-sidebar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
  }
}
@media (max-width: 860px) {
  .article-sidebar { order: 1; }
  /* Désactiver le sticky sur mobile/tablette : la sidebar s'affiche sous l'article */
  .toc-sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* Hero article */
.article-hero {
  background: linear-gradient(135deg, #141418 0%, #0F0F13 100%);
  padding: 0;
  margin-bottom: 0;
}
.article-hero-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  opacity: .85;
}
@media (max-width: 600px) { .article-hero-img { height: 240px; } }
.article-hero-overlay {
  background: linear-gradient(135deg, #141418, #0F0F13);
  padding: 48px var(--gutter) 40px;
}
.article-hero-inner {
  max-width: var(--measure);
  margin: 0 auto;
}
.article-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--link-text);
  margin-bottom: 14px;
}
.article-hero h1 {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.03em;
  color: #ffffff;
  margin-bottom: 16px;
}
.article-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  align-items: center;
}
.article-hero-meta .sep { opacity: .4; }
.reading-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  color: rgba(255,255,255,.8);
}

/* Breadcrumb */
.article-breadcrumb {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 0;
  padding-top: 20px;
}
.article-breadcrumb a { color: var(--text-muted); }
.article-breadcrumb a:hover { color: var(--text); }

/* Table des matières */
.toc-box {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 28px 0 32px;
}
.toc-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.toc-list {
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.toc-list li { counter-increment: toc; }
.toc-list a {
  font-size: 14px;
  color: var(--text-dim);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.toc-list a::before {
  content: counter(toc);
  font-size: 11px;
  font-weight: 700;
  color: var(--link-text);
  min-width: 18px;
}
.toc-list a:hover { color: var(--link-text); text-decoration: none; }

/* Sticky TOC sidebar — desktop uniquement */
.toc-sticky {
  position: sticky;
  top: 80px;                          /* nav=60px + 20px marge */
  max-height: calc(100vh - 80px - 24px); /* ne dépasse jamais le viewport */
  overflow-y: auto;                   /* scroll interne si sidebar > viewport */
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: var(--border) transparent;
}
.toc-sticky::-webkit-scrollbar { width: 4px; }
.toc-sticky::-webkit-scrollbar-track { background: transparent; }
.toc-sticky::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.toc-sticky .toc-box { margin: 0 0 16px; }

/* Corps article — la mesure vient du conteneur, pas du bloc : sinon le corps
   se recale à gauche dans un conteneur plus large et « flotte » hors axe. */
.article-body { max-width: none; min-width: 0; }
/* Un mot très long / une URL ne doit jamais être coupé au bord de l'écran */
.article-body p, .article-body li, .article-body h1, .article-body h2,
.article-body h3, .article-body td, .article-body summary, .faq-body {
  overflow-wrap: break-word;
}
.article-body h2 {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 48px 0 16px;
  line-height: 1.25;
  padding-top: 8px;
  border-top: 2px solid var(--border);
}
.article-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 12px;
  letter-spacing: -.01em;
}
.article-body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.article-body p strong { color: var(--text); }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 18px; }
.article-body li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.article-body li strong { color: var(--text); }
.article-body a { color: var(--link-text); text-decoration: underline; text-underline-offset: 2px; }

/* Table */
.table-wrap { overflow-x: auto; margin: 24px 0; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { background: var(--bg-alt); padding: 12px 16px; text-align: left; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 13px; }
td { padding: 11px 16px; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-alt); }
td strong { color: var(--text); }
.ok { color: #7fd99a; font-weight: 700; }
.ko { color: #f87171; font-weight: 700; }

/* Callouts */
.callout {
  background: rgba(201,206,214,.07);
  border: 1px solid rgba(155,27,48,.35);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.65;
}
.callout strong { color: var(--text); }

.callout.tip {
  background: rgba(127,217,154,.08);
  border-color: #86efac;
  border-left-color: #7fd99a;
}
.callout.tip strong { color: #14532d; }

.callout.warning {
  background: #fef2f2;
  border-color: #fca5a5;
  border-left-color: #f87171;
}
.callout.warning strong { color: #991b1b; }

.callout.stat {
  background: rgba(138,147,166,.1);
  border-color: #bfdbfe;
  border-left-color: #8A93A6;
  text-align: center;
  padding: 24px;
}
.stat-num {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #B8BCC4;
  display: block;
  margin-bottom: 4px;
}
.stat-label {
  font-size: 14px;
  color: #1e40af;
  font-weight: 500;
}

/* Section image */
.section-img {
  margin: 28px 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.section-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.section-img figcaption {
  background: var(--bg-alt);
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-style: italic;
}

/* Citation */
blockquote {
  border-left: 4px solid var(--accent);
  margin: 28px 0;
  padding: 16px 20px;
  background: var(--bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
blockquote p {
  font-size: 17px;
  font-style: italic;
  color: var(--text);
  margin: 0;
  line-height: 1.65;
}
blockquote cite {
  font-size: 13px;
  color: var(--text-muted);
  font-style: normal;
  display: block;
  margin-top: 8px;
}

/* Séparateur décoratif */
.article-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0;
}
.article-sep::before, .article-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.article-sep-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* FAQ */
.faq-section { margin-top: 48px; }
details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--bg-card);
}
summary {
  padding: 15px 18px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '';
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: transform .2s;
}
details[open] summary::after { transform: rotate(-180deg); }
details[open] summary { border-bottom: 1px solid var(--border); }
.faq-body { padding: 16px 18px; font-size: 15px; color: var(--text-dim); line-height: 1.7; }

/* CTA in-article */
.article-cta {
  background: linear-gradient(135deg, #141418, #0F0F13);
  border-radius: var(--radius);
  padding: 28px;
  margin: 36px 0;
  text-align: center;
  color: #ffffff;
}
.article-cta h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #ffffff;
}
.article-cta p {
  font-size: 14px;
  color: rgba(255,255,255,.72);
  margin-bottom: 20px;
  line-height: 1.65;
}
.article-cta a {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  transition: background .15s;
}
.article-cta a:hover { background: var(--accent-dark); }
.article-cta-sub {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-top: 10px;
}

/* Partage social */
.share-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 36px 0;
  flex-wrap: wrap;
}
.share-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--bg);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.share-btn:hover { background: var(--bg-alt); border-color: var(--border-dark); text-decoration: none; color: var(--text); }
.share-btn svg { width: 14px; height: 14px; stroke: currentColor; }

/* Disclaimer */
.article-disclaimer {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-top: 40px;
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.65;
}

/* Produits en bas d'article */
.article-products {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 48px;
}
.article-products-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-products-header h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0;
}
.article-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
}
.article-products-grid .product-card {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.article-products-grid .product-card:last-child { border-right: none; }

/* ── Bloc Amazon affilié inline ──────────────────────────────── */
.amazon-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 40px 0;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}
.amazon-block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.amazon-block-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  flex: 1;
}
.amazon-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #232f3e;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .02em;
}
.amazon-affiliate-note {
  font-size: 10px;
  color: var(--text-light);
  margin-left: auto;
  font-style: italic;
}
.amazon-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0;
}
.amazon-product-item {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background .15s;
}
.amazon-product-item:last-child { border-right: none; }
.amazon-product-item:hover { background: var(--bg-alt); text-decoration: none; }
.amazon-product-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 5px;
}
.amazon-product-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 10px;
}
.amazon-product-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--link-text);
  margin-bottom: 8px;
}
.amazon-product-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #ff9900;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  width: fit-content;
  margin-top: auto;
  transition: background .15s;
}
.amazon-product-item:hover .amazon-product-cta { background: #e68900; }
.amazon-product-cta svg { width: 10px; height: 10px; stroke: #fff; }
@media (max-width: 600px) {
  .amazon-products-grid { grid-template-columns: 1fr 1fr; }
  .amazon-product-item:nth-child(even) { border-right: none; }
}

/* ════════════════════════════════════════════════════════════
   SHOP PRODUITS VTC — style NOSK8 adapté thème clair
   Section séparée, exclu du TOC, rail scroll-snap
   ════════════════════════════════════════════════════════════ */

.vtc-shop {
  padding: 36px 0;
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  margin: 40px 0;
  background: var(--bg-alt);
}

.vtc-shop__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  padding: 0 2px;
}

.vtc-shop__title {
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  border: none;
  padding: 0;
}

.vtc-shop__title::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 2px;
}

.vtc-shop__all {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  text-decoration: none;
}
.vtc-shop__all:hover { color: var(--link-text); text-decoration: none; }

.vtc-shop__affil-note {
  font-size: 10px;
  color: var(--text-light);
  font-style: italic;
}

/* Rail scroll-snap */
.vtc-shop__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 10px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.vtc-shop__rail::-webkit-scrollbar { display: none; }
.vtc-shop__rail > * { scroll-snap-align: start; }

@media (min-width: 720px) {
  .vtc-shop__rail { grid-auto-columns: calc((100% - 36px) / 3.5); }
}
@media (min-width: 1100px) {
  .vtc-shop__rail { grid-auto-columns: calc((100% - 48px) / 4.5); }
}

/* Card */
.vtc-shop-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  color: inherit;
  display: block;
  transition: transform .15s, box-shadow .15s;
}
.vtc-shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
/* Même piège de spécificité que .equip-card : .article-body a{text-decoration:underline}
   passe au-dessus d'une simple classe et soulignait tout le texte des cartes (constaté
   2026-08-29 en corrigeant les icônes de repli). */
.article-body .vtc-shop-card,
.article-body .vtc-shop-card:hover,
.article-body .vtc-shop-card *,
.article-body .vtc-shop__all,
.article-body .vtc-shop__all:hover {
  text-decoration: none;
}

.vtc-shop-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--text);
  color: var(--bg-card);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 7px;
  border-radius: 3px;
  z-index: 2;
}

.vtc-shop-card__imgwrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-subtle, #1A1A1F);
}
.vtc-shop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.vtc-shop-card:hover .vtc-shop-card__img { transform: scale(1.05); }

.vtc-shop-card__body { padding: 10px 12px 12px; }

.vtc-shop-card__src {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin: 0 0 4px;
}

.vtc-shop-card__name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.vtc-shop-card__price {
  font-size: 14px;
  font-weight: 800;
  color: var(--link-text);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vtc-shop-card__cta {
  font-size: 11px;
  font-weight: 700;
  background: #ff9900;
  color: #000;
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
}


/* ── Gouttière mobile : un seul réglage, toutes les zones suivent ──────────── */
@media (max-width: 480px) {
  :root { --gutter: 18px; }
}

/* ── Recherche articles (blog index) — autocomplétion client-side, sans backend ─── */
/* Suggestions par défaut au focus = ordre éditorial d'index.html (pas de mesure
   d'audience branchée sur le blog aujourd'hui, aucun GA4/tracking) — voir commentaire JS. */
.blog-search-section { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.blog-search-wrap { position: relative; max-width: 640px; margin: 0 auto 40px; }
.blog-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-dark);
  border-radius: 100px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.blog-search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow);
}
.search-icon { flex-shrink: 0; color: var(--text-muted); }
.blog-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}
.blog-search-input::placeholder { color: var(--text-muted); }
.blog-search-input::-webkit-search-cancel-button { display: none; }
.blog-search-clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: var(--bg-subtle);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.blog-search-clear:hover { background: var(--border); color: var(--text); }

.blog-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px 0;
  max-height: 420px;
  overflow-y: auto;
  z-index: 40;
}
.blog-search-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 4px 18px 8px;
}
.blog-search-results { list-style: none; }
.search-result-item + .search-result-item { border-top: 1px solid var(--border); }
.search-result-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 18px;
  text-decoration: none;
}
.search-result-item.is-active .search-result-link,
.search-result-link:hover { background: var(--bg-alt); }
.search-result-cat {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--link-text);
}
.search-result-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.search-result-excerpt {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-search-empty { padding: 16px 18px; font-size: 13.5px; color: var(--text-muted); }

@media (max-width: 480px) {
  .blog-search-wrap { margin: 0 auto 28px; }
  .blog-search-box { padding: 11px 14px; border-radius: 14px; }
  .blog-search-input { font-size: 16px; } /* évite le zoom auto iOS Safari sur focus si <16px */
  .blog-search-panel { border-radius: 12px; }
}

/* ── Affiliation Amazon — disclosure légale + grille d'équipement (article dédié) ── */
.affiliate-disclosure {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 10px 2px 0;
}
.affiliate-disclosure-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 20px 0 28px;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
}
.affiliate-disclosure-box svg { flex-shrink: 0; color: var(--text-muted); margin-top: 2px; }
.affiliate-disclosure-box strong { color: var(--text); }

.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
.equip-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.equip-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-dark);
}
/* Spécificité : .article-body a { text-decoration: underline } est plus spécifique
   qu'une simple classe — sans ce sélecteur composé, TOUT le texte des cartes
   (nom, description) ressort souligné (bug constaté 2026-08-29). */
.article-body .equip-card,
.article-body .equip-card:hover,
.article-body .equip-card * {
  text-decoration: none;
}
.equip-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--link-text);
  flex-shrink: 0;
}
.equip-card__cat {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.equip-card__name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}
.equip-card__desc {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.equip-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--link-text);
  margin-top: 4px;
}
.equip-card__cta svg { width: 13px; height: 13px; transition: transform .15s; }
.equip-card:hover .equip-card__cta svg { transform: translateX(2px); }

@media (max-width: 480px) {
  .equip-grid { grid-template-columns: 1fr; }
}

/* ── Icône de repli pour vtc-shop-card sans photo fiable ──────────────────
   L'image "Support téléphone GPS" (Unsplash 1512054502232-10a0a035d672),
   déjà en place sur 6 articles, montre en réalité un téléphone posé sur un
   bureau — aucune image vérifiée disponible pour un support voiture réel,
   bascule en icône sobre plutôt qu'un visuel trompeur (2026-08-29). */
.vtc-shop-card__iconwrap {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle, #1A1A1F);
}
.vtc-shop-card__iconwrap svg {
  width: 40%;
  height: 40%;
  color: var(--link-text);
}

body{background:#0B0B0D}
/* FOND4K : cuir capitonné, 3 définitions natives (1080 / 2560 / 3840), AVIF puis WebP */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 38%,rgba(11,11,13,.35) 0%,rgba(11,11,13,.62) 60%,rgba(11,11,13,.85) 100%),url('/assets/img/maybach-cuir-m1080.webp') center/cover no-repeat,#0B0B0D;
  background:radial-gradient(ellipse at 50% 38%,rgba(11,11,13,.35) 0%,rgba(11,11,13,.62) 60%,rgba(11,11,13,.85) 100%),image-set(url('/assets/img/maybach-cuir-m1080.avif') type("image/avif"),url('/assets/img/maybach-cuir-m1080.webp') type("image/webp")) center/cover no-repeat,#0B0B0D}
@media(min-width:900px){
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 32%,rgba(11,11,13,.30) 0%,rgba(11,11,13,.58) 60%,rgba(11,11,13,.82) 100%),url('/assets/img/maybach-cuir-2560.webp') center/cover no-repeat,#0B0B0D;
  background:radial-gradient(ellipse at 50% 32%,rgba(11,11,13,.30) 0%,rgba(11,11,13,.58) 60%,rgba(11,11,13,.82) 100%),image-set(url('/assets/img/maybach-cuir-2560.avif') type("image/avif"),url('/assets/img/maybach-cuir-2560.webp') type("image/webp")) center/cover no-repeat,#0B0B0D}
}
@media(min-width:1920px),(min-width:900px) and (min-resolution:2dppx){
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 32%,rgba(11,11,13,.30) 0%,rgba(11,11,13,.58) 60%,rgba(11,11,13,.82) 100%),url('/assets/img/maybach-cuir-3840.webp') center/cover no-repeat,#0B0B0D;
  background:radial-gradient(ellipse at 50% 32%,rgba(11,11,13,.30) 0%,rgba(11,11,13,.58) 60%,rgba(11,11,13,.82) 100%),image-set(url('/assets/img/maybach-cuir-3840.avif') type("image/avif"),url('/assets/img/maybach-cuir-3840.webp') type("image/webp")) center/cover no-repeat,#0B0B0D}
}

/* FX4K : reflet chromé sur les titres, cartes qui se soulèvent (transform/opacité/background-position seulement) */
@keyframes mxSweep{from{background-position:110% 0,0 0}to{background-position:-10% 0,0 0}}
@media(hover:hover){
  .index-hero h1,.article-hero h1{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,1) 50%,transparent 62%) 110% 0/250% 100% no-repeat,linear-gradient(180deg,#EEF0F4 0%,#A9AFBA 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .article-header h1:hover,.blog-hero h1:hover,main h1:hover{animation:mxSweep 1.1s ease 1}
  .article-card,.post-card,.product-card,.toc-box{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
  .article-card:hover,.post-card:hover,.product-card:hover,.toc-box:hover{transform:translateY(-3px);border-color:rgba(235,238,244,.42);box-shadow:0 18px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(235,238,244,.08)}
}
@media(hover:none){
  .index-hero h1,.article-hero h1{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,1) 50%,transparent 62%) 110% 0/250% 100% no-repeat,linear-gradient(180deg,#EEF0F4 0%,#A9AFBA 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mxSweep 1.4s ease .7s 1 both}
}
@media(prefers-reduced-motion:reduce){
  .index-hero h1,.article-hero h1,.article-header h1:hover,.blog-hero h1:hover,main h1:hover,.article-card:hover,.post-card:hover,.product-card:hover,.toc-box:hover{animation:none !important;transition:none !important;transform:none !important}
}
.article-card,.post-card,.product-card,.toc-box,.callout,.card{border-color:var(--border)}
.blog-nav-links a:hover{background:rgba(201,206,214,.08)}
.blog-nav-links a.active{color:var(--link-text)}
::selection{background:#6E0F1F;color:#fff}

/* Fond cuir visible : bandeaux translucides (le cuir passe derrière), pastille VT laque + liseré chrome comme la landing */
.index-hero{background:linear-gradient(180deg,rgba(11,11,13,.55) 0%,rgba(11,11,13,.25) 100%)}
.blog-nav{background:rgba(11,11,13,.88);border-bottom-color:rgba(235,238,244,.16)}
.blog-footer{background:rgba(8,8,10,.86)}
.blog-nav-logo-mark{
  border:1px solid transparent;
  background:linear-gradient(135deg,#6E0F1F 0%,#9B1B30 100%) padding-box,linear-gradient(135deg,rgba(235,238,244,.6),rgba(235,238,244,.15)) border-box;
  box-shadow:0 6px 18px -6px rgba(155,27,48,.6),inset 0 1px 0 rgba(255,255,255,.18);
}
.article-hero{background:transparent}
.article-hero-overlay{background:linear-gradient(180deg,rgba(11,11,13,.62),rgba(11,11,13,.2))}

/* ══════════════════════════════════════════════════════════════
   v11 — MAGAZINE (David 17/10/2026 : « le blog n'avait pas une bonne tête,
   inspire-toi de NOSK8 »). On garde la DA Maybach (noir, chrome, bordeaux) et on
   reprend la grammaire éditoriale NOSK8 : la photo porte la page, le titre est posé
   dessus, les articles d'abord, une lecture sans texture derrière le texte.
   Retour arrière : supprimer ce bloc (tout est ici, rien ailleurs).
   ══════════════════════════════════════════════════════════════ */
:root{--serif:"Source Serif 4","Source Serif Pro",Charter,"Iowan Old Style",Georgia,"Noto Serif",serif}

/* ── ACCUEIL DU BLOG ─────────────────────────────────────────── */
/* Bandeau compact : on voit la une dès le premier écran (avant : 1 écran entier de slogan) */
.index-hero{padding:28px var(--gutter) 6px;text-align:left;max-width:var(--wrap);margin:0 auto;background:none}
.index-hero-eyebrow{margin:0 0 10px;padding:0;border:0;background:none;font-size:11px;letter-spacing:.22em;color:var(--link-text)}
.index-hero h1{font-size:clamp(26px,6.4vw,44px);line-height:1.05;letter-spacing:-.035em;margin:0 0 10px;max-width:16ch}
.index-hero p{font-size:15px;line-height:1.55;color:var(--text-muted);max-width:56ch;margin:0}
.blog-search-section{margin-top:18px}
.blog-layout{padding-top:22px}
@media (max-width:860px){.blog-sidebar{order:0}}   /* les articles AVANT newsletter et partenaires */

.section-label{font-size:11px;letter-spacing:.22em}

/* La une : photo plein cadre, titre posé dessus (gabarit NOSK8) */
.article-card.featured{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(235,238,244,.14);background:#0B0B0D;margin-bottom:8px}
.article-card.featured .card-img-wrap{aspect-ratio:4/5;height:auto;max-height:78svh}
.article-card.featured .card-img{width:100%;height:100%;object-fit:cover}
.article-card.featured .card-body{position:absolute;inset:auto 0 0 0;padding:90px 20px 22px;background:linear-gradient(180deg,rgba(11,11,13,0) 0%,rgba(11,11,13,.82) 45%,rgba(11,11,13,.97) 100%)}
.article-card.featured .card-cat{color:#fff;background:#9B1B30;display:inline-block;padding:4px 9px;border-radius:4px;font-size:10.5px;letter-spacing:.14em}
.article-card.featured .card-title{font-size:clamp(23px,6vw,34px);line-height:1.1;letter-spacing:-.025em;color:#fff;margin:12px 0 8px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.article-card.featured .card-excerpt{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.82);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-card.featured .card-meta{color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600;margin-top:12px}
.article-card.featured .card-read-link{display:none}
@media (min-width:861px){.article-card.featured .card-img-wrap{aspect-ratio:16/9}}

/* Le fil : une ligne par article, vignette à gauche (lecture rapide sur téléphone) */
.article-grid{gap:0}
.article-card:not(.featured){display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:start;background:none;border:0;border-bottom:1px solid rgba(235,238,244,.1);border-radius:0;padding:16px 0;box-shadow:none}
.article-card:not(.featured):hover{transform:none;box-shadow:none}
.article-card:not(.featured) .card-img-wrap{aspect-ratio:1/1;height:auto;border-radius:8px;overflow:hidden}
.article-card:not(.featured) .card-img{width:100%;height:100%;object-fit:cover}
.article-card:not(.featured) .card-body{padding:0;gap:4px}
.article-card:not(.featured) .card-cat{font-size:10.5px;letter-spacing:.14em;margin:0}
.article-card:not(.featured) .card-title{font-size:16.5px;line-height:1.28;letter-spacing:-.01em;margin:2px 0 0;color:#fff}
.article-card:not(.featured) .card-excerpt,.article-card:not(.featured) .card-read-link{display:none}
.article-card:not(.featured) .card-meta{font-size:11.5px;margin-top:6px;color:var(--text-light)}
@media (min-width:700px){
  .article-card:not(.featured){grid-template-columns:200px 1fr;gap:22px;padding:22px 0}
  .article-card:not(.featured) .card-img-wrap{aspect-ratio:4/3}
  .article-card:not(.featured) .card-title{font-size:20px}
  .article-card:not(.featured) .card-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;color:var(--text-muted);margin-top:6px}
}

/* ── PAGE ARTICLE ────────────────────────────────────────────── */
/* Lecture : fond uni, le cuir reste sur l'accueil et la landing (texte long = zéro motif derrière) */
body:has(.article-hero)::before{background:#0B0B0D !important}
body:has(.article-hero){background:#0B0B0D}

/* Photo d'ouverture plein cadre, titre posé en bas de la photo (gabarit NOSK8) */
.article-hero{position:relative;background:#0B0B0D;overflow:hidden}
.article-hero-img{height:min(74svh,620px);opacity:1;filter:saturate(.92) contrast(1.04)}
.article-hero-overlay{position:absolute;inset:auto 0 0 0;padding:120px var(--gutter) 26px;background:linear-gradient(180deg,rgba(11,11,13,0) 0%,rgba(11,11,13,.78) 42%,#0B0B0D 100%) !important}
.article-kicker{display:inline-block;color:#fff;background:#9B1B30;padding:4px 9px;border-radius:4px;font-size:10.5px;letter-spacing:.16em;margin-bottom:12px}
.article-hero h1{font-size:clamp(27px,7.4vw,46px);line-height:1.06;letter-spacing:-.03em;margin-bottom:14px;text-shadow:0 2px 22px rgba(0,0,0,.55)}
@media(hover:hover),(hover:none){.article-hero h1{background:none !important;-webkit-text-fill-color:#fff !important;color:#fff !important}}
.article-hero-meta{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.72);gap:10px}
.reading-time-badge{background:none;border:0;padding:0;font-size:11.5px;color:rgba(255,255,255,.72)}
@media (min-width:861px){.article-hero-img{height:560px}.article-hero-overlay{padding-bottom:40px}}
.article-breadcrumb{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;padding-top:18px;border-bottom:1px solid rgba(235,238,244,.1);padding-bottom:14px}

/* Corps : serif lisible, chapo en italique, lettrine (comme NOSK8) */
.article-body p,.article-body li{font-family:var(--serif);font-size:18.5px;line-height:1.72;color:#E4E6EA}
.article-body > p:first-of-type{font-size:20px;line-height:1.6;color:#fff}
.article-body > p:first-of-type::first-letter{float:left;font-family:var(--serif);font-weight:700;font-size:3.3em;line-height:.85;margin:.06em .1em 0 0;color:#fff}
.article-body p strong,.article-body li strong{font-family:inherit;color:#fff;font-weight:700}
.article-body a{color:#fff;text-decoration:underline;text-decoration-color:#C0344D;text-decoration-thickness:2px;text-underline-offset:3px}
.article-body a:hover{color:var(--link-text)}
.article-body h2{font-size:clamp(23px,5.6vw,30px);line-height:1.15;letter-spacing:-.025em;margin:46px 0 16px;padding-top:24px;border-top:1px solid rgba(235,238,244,.16)}
.article-body h3{font-size:19px;margin:30px 0 10px}

/* Sommaire : liste sobre, numéros bordeaux, pas de soulignement */
.toc-box{background:none;border:0;border-top:2px solid #fff;border-bottom:1px solid rgba(235,238,244,.16);border-radius:0;padding:14px 0 10px;margin:30px 0}
.toc-box:hover{transform:none;box-shadow:none}
.toc-title{font-size:11px;letter-spacing:.2em;color:#fff}
.toc-list a{font-family:inherit;font-size:15px;color:var(--text-dim);text-decoration:none !important;line-height:1.4}
.toc-list a::before{color:#E8627A;font-weight:700}
.toc-list a:hover{color:#fff}

/* Encadrés : filet bordeaux à gauche, fond à peine marqué */
.callout,.callout.tip,.callout.warning{background:rgba(255,255,255,.035);border:0;border-left:3px solid #9B1B30;border-radius:0 8px 8px 0;padding:16px 18px}
.callout p,.callout{font-family:var(--serif);font-size:17px;color:#E4E6EA}
.callout strong,.callout.tip strong,.callout.warning strong{color:#fff;font-family:Inter,system-ui,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:4px}
blockquote{border-left:3px solid #9B1B30}
blockquote p{font-family:var(--serif);font-style:italic;font-size:21px}

/* Appel à l'action en cours de lecture : encart éditorial entre deux filets (comme le Brief NOSK8) */
.article-cta{background:none !important;border:0;border-top:2px solid #fff;border-bottom:1px solid rgba(235,238,244,.2);border-radius:0;padding:22px 0;margin:40px 0;text-align:left;box-shadow:none}
.article-cta h3{font-size:clamp(21px,5.4vw,26px);line-height:1.15;letter-spacing:-.02em;color:#fff;margin:0 0 8px}
.article-cta p{font-family:var(--serif);font-size:16.5px;color:var(--text-muted)}
.article-cta .article-cta-sub{font-family:Inter,system-ui,sans-serif;font-size:12px;color:var(--text-light)}
.section-img img{border-radius:10px}
.section-img figcaption{font-family:var(--serif);font-style:italic}
.table-wrap{border-color:rgba(235,238,244,.16)}
.table-wrap td,.table-wrap th{font-family:Inter,system-ui,sans-serif}
/* v11 — la boutique (encart Amazon) garde son habillage d'interface : sans-serif, titre sans filet */
.article-body .vtc-shop p,.article-body .vtc-shop li{font-family:inherit;font-size:inherit;line-height:1.4;color:inherit}
.article-body .vtc-shop h2.vtc-shop__title{margin:0;padding-top:0;border-top:0;font-size:20px}
.article-body .vtc-shop .affiliate-disclosure{font-family:inherit;font-size:12.5px;line-height:1.5;color:var(--text-muted);margin:6px 0 14px}
.vtc-shop-card__iconwrap{aspect-ratio:16/9}
.vtc-shop-card__iconwrap svg{width:30%;height:30%}
.article-card.featured .card-cat{align-self:flex-start;width:fit-content;max-width:100%}