/* ============================================================
   article-extras.css — confort de lecture pour les articles
   "hand-made" (CSS custom, non issus du _TEMPLATE.html actuel).
   2026-07-20.

   Contrairement à assets/article.css (qui REMPLACE le <style>
   inline des articles conformes au template), ce fichier vient
   en COMPLÉMENT du <style> déjà présent sur ces 18 articles :
   il n'ajoute QUE les composants introuvables dans leur CSS
   existant (blockquote/prompt-card, hr, progress bar, mesure de
   lecture, images de corps) et évite volontairement tout
   sélecteur déjà utilisé par ces articles avec des valeurs
   différentes (.step, .mini-marquee, table/th/td) pour ne
   provoquer aucune régression visuelle sur leur design existant.
   ============================================================ */

::selection { background: var(--fuchsia); color: #FBF7F0 }

/* Barre de progression de lecture (remplie par article-reading.js) */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--fuchsia), var(--orange));
  z-index: 200; pointer-events: none;
  transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce) { .read-progress { transition: none } }

/* Mesure de lecture : limite la largeur du texte de prose (les cards/grids
   custom de ces articles — .bignum-grid, .outils, .cas, etc. — sont des <div>,
   donc non ciblées ici et gardent leur pleine largeur). */
section.block .container > p,
section.block .container > ul,
section.block .container > ol,
section.block .container > blockquote {
  max-width: 700px;
}

/* Prompt-card : ces articles n'ont pas de style blockquote dédié (ou un style
   minimal type citation) — on ajoute la carte visuelle + bouton copier. */
blockquote {
  position: relative;
  margin: 4px 0 24px; padding: 20px 24px;
  background: var(--code-bg, var(--bg-2));
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--fuchsia);
  border-radius: 14px;
}
blockquote p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink) }
blockquote p + p { margin-top: 10px }
blockquote .copy-btn {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .12em; font-weight: 700; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 12px; cursor: pointer;
  transition: color .15s, border-color .15s, transform .1s;
}
blockquote .copy-btn:hover { color: var(--fuchsia); border-color: var(--fuchsia) }
blockquote .copy-btn:active { transform: scale(.96) }
blockquote .copy-btn.copied { color: var(--teal); border-color: var(--teal) }
blockquote:has(.copy-btn) { padding-top: 44px }

/* hr = divider signature (peu/pas utilisé dans ces articles à ce jour) */
hr {
  border: 0; height: 4px; width: 96px;
  margin: 56px auto;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--teal), var(--fuchsia), var(--orange));
}

/* Images de corps (hors .bignum/.step/.outil déjà stylés) : radius + bordure
   cohérents avec le reste du site. Certains de ces articles (making-of à
   captures d'écran) ont déjà une règle `img` quasi identique — la légère
   redondance de valeurs (ex: var(--line) vs var(--line-strong)) est sans
   impact visuel notable. */
section.block img {
  max-width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--line-strong);
  margin: 4px 0 8px;
}
figure { margin: 4px 0 24px }
figcaption, .img-caption {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: .04em; color: var(--ink-muted);
  margin: 8px 0 0; line-height: 1.5;
}

@media (max-width: 600px) {
  blockquote { padding: 18px 18px }
  blockquote:has(.copy-btn) { padding-top: 48px }
}