/* ============================================
   ARTICLE.CSS — Page détail article
   ============================================ */

/* Reading progress bar */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.read-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .1s;
}

/* Hero */
.art-hero {
  padding: 130px 0 30px;
}
.art-hero__inner { max-width: none; }
.art-hero__back {
  background: transparent;
  border: 0;
  color: var(--ink-dim);
  font-size: 13px;
  margin-bottom: 30px;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  transition: color .25s;
}
.art-hero__back:hover { color: var(--ink); }

.art-hero__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.art-hero__title {
  margin: 0;
  max-width: 960px;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.art-hero__author {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.art-hero__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.art-hero__avatar .ph-label {
  left: 0;
  right: 0;
  bottom: 50%;
  transform: translateY(50%);
  text-align: center;
}
.art-hero__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-hero__author-name { font-size: 14px; }
.art-hero__author-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .1em;
}

/* Big visual */
.art-visual {
  padding: 20px 0 60px;
}
.art-visual__inner {
  aspect-ratio: 16 / 9;
  max-height: 600px;
  border-radius: var(--r-lg);
}
.art-visual__inner--img {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.art-visual__inner--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Layout : 3 colonnes pleine largeur */
.art-layout {
  padding: 56px 0 110px;
}
.art-layout__grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 250px;
  gap: 56px;
  align-items: start;
}

/* COL 1 — Sommaire sticky (scroll-spy) */
.art-toc {
  position: sticky;
  top: 110px;
  align-self: start;
}
.art-toc__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.art-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}
.art-toc__link {
  display: flex;
  gap: 10px;
  padding: 8px 0 8px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.art-toc__link:hover { color: var(--ink); }
.art-toc__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  flex: none;
  padding-top: 1px;
}
.art-toc__link.is-active {
  color: var(--ink);
  border-left-color: var(--accent);
}
.art-toc__link.is-active .art-toc__num { color: var(--accent); }

/* COL 3 — Rail auteur + partage (sticky) */
.art-rail { align-self: start; }
.art-rail__sticky { position: sticky; top: 110px; }
.art-author-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  background: var(--surface);
}
.art-author-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--bg-2);
  display: grid;
  place-items: center;
}
.art-author-card__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-author-card__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.art-author-card__role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-mute);
  margin-top: 5px;
}
.art-author-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.art-author-card__link:hover { text-decoration: underline; }
.art-rail__share { margin-top: 24px; }
.art-rail__share-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.art-rail .art-share {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Body */
.art-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.art-body--rich > p:first-of-type::first-letter {
  float: left;
  font-family: 'Instrument Serif', serif;
  font-size: 3.6em;
  line-height: .78;
  padding: 6px 12px 0 0;
  color: var(--accent);
}
.art-body__lede {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0 0 36px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  text-wrap: pretty;
}
.art-body h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -.02em;
  margin: 48px 0 18px;
  scroll-margin-top: 100px;
}
.art-body p {
  margin: 0 0 18px;
  color: var(--ink-dim);
}
.art-body p strong { color: var(--ink); font-weight: 400; }
.art-body ol,
.art-body ul {
  margin: 24px 0 32px;
  padding-left: 20px;
  color: var(--ink-dim);
}
.art-body li { margin-bottom: 12px; }

.art-body blockquote {
  margin: 40px 0;
  padding: 32px 36px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.art-body blockquote p {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.art-body blockquote footer {
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-mute);
}

.art-body .art-figure {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  margin: 40px 0;
}

.art-cta-box {
  margin-top: 40px;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.art-cta-box__title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  letter-spacing: -.01em;
}

/* Partage */
.art-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.art-share__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 4px;
}
.art-share__btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--ink-dim);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.art-share__btn:hover { border-color: var(--ink); color: var(--ink); }
.art-share__btn.is-copied { border-color: var(--accent); color: var(--accent); }

@media (max-width: 1100px) {
  .art-layout__grid {
    /* minmax(0, 1fr) et non 1fr : une piste 1fr a un minimum automatique,
       ce qui laissait un tableau large pousser la colonne au-delà de l'écran. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .art-toc { display: none; }
  .art-body { max-width: 760px; margin-inline: auto; }
  .art-rail { max-width: 760px; margin: 52px auto 0; }
  .art-rail__sticky { position: static; }
  .art-author-card { max-width: 440px; }
}
@media (max-width: 760px) {
  .art-hero { padding: 110px 0 22px; }
  .art-body--rich > p:first-of-type::first-letter { font-size: 3em; }
}

/* Related */
.art-related {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------
   Tableaux d'article
   Aucune règle n'existait : les tableaux étaient rendus nus, et ils
   débordaient de la page sur téléphone (503 px de large mesurés sur un
   écran de 390 px). `display: block` + `overflow-x: auto` fait défiler
   le tableau dans son propre cadre au lieu de pousser la page entière.
   ------------------------------------------------------------------ */
/* Sans min-width, un enfant de grille prend la largeur de son contenu :
   c'est .art-body qui s'élargissait, pas le tableau qui dépassait. */
.art-layout__grid > *,
.art-body { min-width: 0; }

/* Sans width: 100%, l'article se dimensionne sur son contenu et sort de sa
   colonne de grille dès qu'il contient un tableau large (380 px mesurés dans
   une piste de 346). Mesuré au navigateur, pas déduit. */
.art-body { width: 100%; }

.art-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 0.94rem;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
}
.art-body table th,
.art-body table td {
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.art-body table th {
  background: var(--bg-2);
  font-weight: 600;
}
.art-body table tr:nth-child(even) td { background: rgba(10, 14, 20, 0.02); }

/* Sur téléphone seulement : table-layout fixed répartit les colonnes sur la
   largeur disponible au lieu de les dimensionner sur leur contenu. C'est la
   seule façon fiable d'empêcher un tableau de cinq colonnes d'élargir sa
   colonne de grille. En grand écran les colonnes gardent leur largeur
   naturelle, sinon les montants se coupent au milieu. */
@media (max-width: 760px) {
  /* min-width : sans plancher, les colonnes se compriment jusqu'à couper
     les montants au milieu. Le tableau défile, il ne se tasse pas. */
  .art-body table { display: block; overflow-x: auto; font-size: 0.86rem; min-width: 0; }
  .art-body table tbody, .art-body table thead { display: table; width: 100%; min-width: 560px; }
  .art-body table th,
  .art-body table td { padding: 10px 12px; }
  /* Les colonnes de montants ne se coupent pas : « 1 500 € à 8 000 € »
     découpé sur quatre lignes est illisible. Le tableau défile à la place. */
  .art-body table td:nth-child(2),
  .art-body table td:nth-child(3) { white-space: nowrap; }
  .art-body { overflow-x: clip; }
}