/* ==========================================================================
   lbcx.fr — le blog (pages générées par scripts/blog-construire.mjs)

   Se charge APRÈS lbcx.css et réutilise ses jetons : fond --bg, textes --ink*,
   orange --o TOUJOURS en lumière (liseré, lueur, dégradé), jamais en aplat.
   Titres Archivo, texte Figtree. Colonne de lecture 720 px, rien sous 13 px.
   Pas de `?v=` à monter à la main : le script y met l'empreinte du fichier.
   ========================================================================== */

.blog { position: relative; isolation: isolate; padding: 128px 0 80px; }
.col { width: min(720px, 100% - var(--gut) * 2); margin-inline: auto; }
.large { width: min(1080px, 100% - var(--gut) * 2); margin-inline: auto; }
@media (max-width: 760px) { .blog { padding-top: 100px; } }

/* --- fil d'Ariane ------------------------------------------------------- */
.fil ol { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 14.5px/1.5 var(--body); color: var(--ink-3); }
.fil li + li::before { content: "/"; margin: 0 10px; color: var(--ink-4); }
.fil a { color: var(--ink-3); transition: color .2s; }
.fil a:hover { color: var(--ink); }
.fil [aria-current] { color: var(--ink-4); }

/* --- en-tête d'article -------------------------------------------------- */
.art-head h1, .blog-head h1 { margin: 0; font: 800 clamp(31px, 4.6vw, 50px)/1.1 var(--disp); font-stretch: 108%; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.art-chapo { margin: 20px 0 0; font: 400 20px/1.55 var(--body); color: var(--ink-2); text-wrap: pretty; }
.art-meta { margin: 20px 0 0; padding-bottom: 26px; font: 500 15px/1.5 var(--body); color: var(--ink-3); background: linear-gradient(90deg, #ff8a4a, rgba(255, 106, 31, 0) 55%) 0 100% / 100% 2px no-repeat; }
.art-meta a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.art-meta a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .art-head h1, .blog-head h1 { font-stretch: 100%; }
  .art-chapo { font-size: 18px; }
  /* au téléphone, le fil s'arrête à « Blog » : le titre est juste dessous */
  .art-head .fil [aria-current] { display: none; }
}

/* --- couverture --------------------------------------------------------- */
.art-cover { width: min(960px, 100% - var(--gut) * 2); margin: 34px auto 0; }
.art-cover img, .carte img, .une-carte img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--bg-2); }
.art-cover img { border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 40px 90px -50px rgba(255, 106, 31, .55); }
@media (max-width: 560px) { .art-cover img { border-radius: 14px; } }

/* --- sommaire ----------------------------------------------------------- */
.art-toc { margin-top: 38px; padding: 22px 26px 20px; border-radius: 18px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--line); }
.art-toc-t { margin: 0 0 10px; font: 700 16px/1.3 var(--disp); color: var(--ink); }
.art-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.art-toc li { counter-increment: toc; }
.art-toc a { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; font: 500 16px/1.45 var(--body); color: var(--ink-2); transition: color .2s; }
.art-toc a::before { content: counter(toc); flex: none; min-width: 18px; font: 700 14px/1 var(--disp); color: var(--o-3); }
.art-toc a:hover { color: var(--ink); }
@media (max-width: 560px) { .art-toc { padding: 18px 18px 16px; } }

/* --- le texte ----------------------------------------------------------- */
.art-body { margin-top: 40px; font: 400 18px/1.7 var(--body); color: var(--ink-2); overflow-wrap: break-word; }
.art-body p { margin: 0 0 22px; }
.art-body h2 { margin: 58px 0 18px; scroll-margin-top: 96px; font: 800 clamp(25px, 3vw, 32px)/1.18 var(--disp); font-stretch: 104%; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.art-body h3 { margin: 38px 0 12px; scroll-margin-top: 96px; font: 700 21px/1.3 var(--disp); letter-spacing: -.015em; color: var(--ink); }
.art-body strong { font-weight: 700; color: var(--ink); }
.art-body a { color: var(--o-4); text-decoration: underline; text-decoration-color: var(--o-2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
.art-body a:hover { color: #fff; }
.art-body ul, .art-body ol { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
.art-body li { position: relative; padding-left: 28px; }
.art-body ul li::before { content: ""; position: absolute; left: 6px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: #ffb27a; box-shadow: 0 0 7px var(--o); }
.art-body ol { counter-reset: n; }
.art-body ol li { counter-increment: n; padding-left: 34px; }
.art-body ol li::before { content: counter(n) "."; position: absolute; left: 0; top: 0; font: 700 16px/1.9 var(--disp); color: var(--o-3); }
.art-body blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 2px solid #ff8a4a; box-shadow: -10px 0 22px -14px rgba(255, 106, 31, .9); }
.art-body blockquote p { margin: 0; font: 600 20px/1.5 var(--body); color: var(--ink); }
@media (max-width: 760px) {
  .art-body { font-size: 17px; }
  .art-body blockquote p { font-size: 18px; }
}

/* tableau : il défile dans son cadre, jamais la page */
.art-table { margin: 28px 0 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.art-table:focus-visible { outline: 2px solid var(--o-3); outline-offset: 2px; }
.art-table table { width: 100%; border-collapse: collapse; font: 400 16px/1.5 var(--body); }
.art-table th, .art-table td { min-width: 120px; padding: 12px 16px; text-align: left; vertical-align: top; }
.art-table th { font: 700 15px/1.4 var(--body); color: var(--ink); background: rgba(255, 255, 255, .04); }
.art-table td { border-top: 1px solid var(--line); color: var(--ink-2); }

/* --- la formation, en fin d'article ------------------------------------- */
.art-cta { margin-top: 62px; padding: 34px 34px 36px; border-radius: 24px;
  background: linear-gradient(170deg, rgba(255, 230, 214, .05), rgba(255, 255, 255, .01) 40%), rgba(18, 8, 4, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 150, 100, .3), inset 0 1px 0 rgba(255, 236, 222, .12), 0 30px 80px -44px rgba(255, 106, 31, .7); }
.art-cta .art-cta-t { margin: 0 0 10px; font: 800 25px/1.2 var(--disp); letter-spacing: -.025em; color: var(--ink); }
.art-cta p { margin: 0; font: 400 17px/1.6 var(--body); color: var(--ink-2); }
.art-cta .btn { margin-top: 24px; }
@media (max-width: 560px) {
  .art-cta { padding: 26px 22px 28px; }
  .art-cta .btn { width: 100%; }
}

/* --- cartes d'articles (à lire ensuite, page du blog) -------------------- */
.suite, .rubrique { margin-top: 76px; }
.suite h2, .rubrique h2 { margin: 0 0 24px; scroll-margin-top: 96px; font: 800 clamp(23px, 2.6vw, 29px)/1.2 var(--disp); letter-spacing: -.025em; color: var(--ink); }
.rubrique h2 { padding-bottom: 14px; background: linear-gradient(90deg, #ff8a4a, rgba(255, 106, 31, 0) 40%) 0 100% / 100% 2px no-repeat; }
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
.carte { display: block; }
.carte img, .une-carte img { border-radius: 14px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease); }
.carte:hover img, .une-carte:hover img { box-shadow: 0 0 0 1px rgba(255, 176, 128, .55), 0 18px 50px -22px rgba(255, 106, 31, .7); }
.carte-t { margin: 16px 0 0; font: 700 19px/1.3 var(--disp); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; transition: color .2s; }
.carte:hover .carte-t, .une-carte:hover .une-t { color: #fff; }
.carte-x { margin: 8px 0 0; font: 400 16px/1.55 var(--body); color: var(--ink-2); }
.carte-m { margin: 10px 0 0; font: 500 14.5px/1.5 var(--body); color: var(--ink-3); }
@media (max-width: 900px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cartes { grid-template-columns: 1fr; gap: 30px; } .suite, .rubrique { margin-top: 60px; } }

/* --- la page du blog ---------------------------------------------------- */
.blog-sub { margin: 16px 0 0; max-width: 640px; font: 400 19px/1.55 var(--body); color: var(--ink-2); }
.blog-vide { margin-top: 40px; font: 400 18px/1.6 var(--body); color: var(--ink-3); }
.une { margin-top: 44px; }
.une-carte { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.une-carte img { border-radius: 18px; }
.une-t { margin: 0; font: 800 clamp(25px, 3vw, 34px)/1.15 var(--disp); letter-spacing: -.028em; color: var(--ink); text-wrap: balance; transition: color .2s; }
.une-x { margin: 14px 0 0; font: 400 17px/1.6 var(--body); color: var(--ink-2); }
.une .carte-m { margin-top: 14px; }
@media (max-width: 820px) { .une-carte { grid-template-columns: 1fr; gap: 18px; } }

/* --- nos autres outils : une ligne, discrète ----------------------------- */
.outils { margin-top: 70px; font: 400 15px/1.8 var(--body); color: var(--ink-3); }
.outils a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color .2s; }
.outils a:hover { color: var(--ink); }

.art-body a:focus-visible, .carte:focus-visible, .une-carte:focus-visible, .art-toc a:focus-visible, .fil a:focus-visible, .outils a:focus-visible, .art-meta a:focus-visible { outline: 2px solid var(--o-3); outline-offset: 3px; border-radius: 4px; }