/* APEX12 blog (/blog): index and article pages (01.11.2026). Linked from blog pages only (tools/build-blog.py), after the
   site's own CSS, so it uses its tokens (assets/site.css :root): black, white, --grey, --line, --raise, red where the eye
   must go (button wipe, active link, current section), Plaax for the big titles, Manrope for reading.
   Reading: ~66 characters per line, 1.7 leading, subheads in Manrope 700 (Plaax trial lacks ' ç ï œ · ° /).
   No eyebrow labels, no badges, no coloured side stripes. Mobile first; the reading needs no JS (v2-blog.js only adds
   the progress line, the current-section mark, the copy-link button and the animated filter). */

.bl { --prose: #d6d6d6; --soft: #bdbdbd; --read: 30em; padding-bottom: 0; }   /* 30em of the prose size ≈ 65 characters of Manrope */
.bl a { -webkit-tap-highlight-color: transparent; }
.bl ::selection { background: var(--red); color: #fff; }

/* ---------- breadcrumb ---------- */
.bl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; color: var(--grey-2); font-size: 13px; }
.bl-crumbs li { display: flex; gap: 10px; min-width: 0; }
.bl-crumbs li + li::before { content: "/"; color: #4a4a4a; }
.bl-crumbs a { transition: color .25s; }
.bl-crumbs a:hover { color: var(--red); }
.bl-crumbs [aria-current] { color: #8c8c8c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* ---------- review banner (drafts preview only, never on the public site) ---------- */
.bl-review { background: #1a1a1a; border-bottom: 1px solid #2a2a2a; color: #e6e6e6; font-size: 14px; line-height: 1.45; padding: 12px 0; }
.bl-review strong { color: #fff; font-weight: 700; }
.bl-review code { font-size: 12.5px; color: #bdbdbd; }
.bl-tbc { background: rgba(233, 57, 66, .14); color: #fff; outline: 1px dashed rgba(233, 57, 66, .7); outline-offset: 1px; border-radius: 2px; padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bl-tbc-k { font-weight: 700; color: #ff8a90; }
.bl-draft-tag { font-weight: 600; color: #ff8a90; }

/* ---------- reading progress (JS) ---------- */
.bl-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.bl-progress i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .9; }
.no-js .bl-progress { display: none; }

/* ================================================================ ARTICLE */
.bl-head { padding-top: clamp(40px, 7vw, 104px); }
.bl-h1 { font-size: clamp(46px, 7.4vw, 112px); line-height: .9; margin-top: 26px; max-width: 15ch; text-wrap: balance; }
.bl-lead { margin: clamp(26px, 3vw, 40px) 0 0; max-width: 36ch; font-size: clamp(20px, 2vw, 27px); line-height: 1.38; color: #fff; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }
.bl-lead a { color: #fff; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: clamp(28px, 3vw, 44px); padding-top: 22px; border-top: 1px solid var(--line); color: var(--grey); font-size: 14px; }
.bl-by { display: inline-flex; align-items: center; gap: 12px; color: #fff; margin-right: 6px; }
.bl-by b { font-weight: 600; }
.bl-by-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: grayscale(1); transition: filter .5s ease; }
.bl-by:hover .bl-by-img { filter: none; }
.bl-by:hover span { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.bl-meta-i { white-space: nowrap; }
.bl-meta-i + .bl-meta-i::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: #555; margin-right: 22px; vertical-align: 3px; }

.bl-hero { margin: clamp(36px, 5vw, 72px) auto 0; }
.bl-hero-img { aspect-ratio: 4 / 3; border-radius: 2px; }
.bl-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.bl-hero figcaption { margin-top: 14px; color: var(--grey-2); font-size: 13px; max-width: 60ch; }

/* body: the reading column; on wide screens a side rail holds the contents */
.bl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(72px, 9vw, 140px); }
.bl-side { margin-bottom: 40px; }

/* contents: a <details> (open by default; on phones it starts closed via JS) */
.bl-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bl-toc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 15px; font-weight: 600; color: #fff; }
.bl-toc summary::-webkit-details-marker { display: none; }
.bl-toc summary::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .4s var(--ease-out); }
.bl-toc details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.bl-toc ol { list-style: none; margin: 0; padding: 0 0 18px; counter-reset: toc; display: grid; gap: 2px; }
.bl-toc li { counter-increment: toc; }
.bl-toc a { position: relative; display: grid; grid-template-columns: 28px 1fr; padding: 8px 0; color: var(--grey); font-size: 15px; line-height: 1.35; transition: color .25s; }
.bl-toc a::before { content: counter(toc, decimal-leading-zero); color: #5c5c5c; font-size: 12px; padding-top: 2px; font-variant-numeric: tabular-nums; transition: color .25s; }
.bl-toc a:hover { color: #fff; }
.bl-toc a[aria-current="true"] { color: #fff; }
.bl-toc a[aria-current="true"]::before { color: var(--red); }

.bl-share { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 0; color: var(--grey); font-size: 14px; font-weight: 500; transition: color .25s; }
.bl-share:hover { color: #fff; }
.bl-share-ok { min-height: 1.4em; margin: 0; color: #fff; font-size: 13px; }

/* the prose */
.bl-prose { min-width: 0; max-width: var(--read); font-size: 18px; line-height: 1.72; color: var(--prose); font-feature-settings: "kern", "liga"; hanging-punctuation: first; }
.bl-prose > * { margin: 0; }
.bl-prose > * + * { margin-top: 1.15em; }
.bl-prose p { text-wrap: pretty; }
.bl-prose strong { color: #fff; font-weight: 600; }
.bl-prose em { font-style: italic; }
.bl-prose h2 { margin-top: 2.4em; color: #fff; font-size: clamp(25px, 2.3vw, 32px); line-height: 1.18; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; scroll-margin-top: calc(var(--nav-h) + 28px); }
.bl-prose h2 + * { margin-top: .75em; }
.bl-prose h3 { margin-top: 1.9em; color: #fff; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; scroll-margin-top: calc(var(--nav-h) + 28px); }
.bl-prose h3 + * { margin-top: .5em; }
.bl-a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: .22em; transition: text-decoration-color .25s, color .25s; }
.bl-a:hover { text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.bl-prose ul, .bl-prose ol { padding: 0; list-style: none; display: grid; gap: .55em; }
.bl-prose ul li { position: relative; padding-left: 1.4em; }
.bl-prose ul li::before { content: ""; position: absolute; left: .2em; top: .78em; width: 6px; height: 6px; background: #fff; border-radius: 50%; opacity: .75; }
.bl-prose ol { counter-reset: li; }
.bl-prose ol li { counter-increment: li; position: relative; padding-left: 2.6em; }
.bl-prose ol li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: .05em; font-family: var(--display); font-size: 1.25em; line-height: 1.3; color: #fff; }
.bl-prose blockquote { margin-inline: 0; padding: .2em 0 .2em 0; font-size: clamp(21px, 1.9vw, 25px); line-height: 1.4; color: #fff; font-weight: 500; letter-spacing: -.01em; }
.bl-prose blockquote p::before { content: "«\00a0"; color: var(--red); }
.bl-prose blockquote p::after { content: "\00a0»"; color: var(--red); }

/* comparison table: scrolls sideways on phones, first column stays */
.bl-table { overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); scrollbar-width: thin; scrollbar-color: #333 transparent; }
.bl-table:focus-visible { outline-offset: -2px; }
.bl-table table { border-collapse: collapse; min-width: 640px; width: 100%; font-size: 15px; line-height: 1.45; }
.bl-table th, .bl-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.bl-table thead th { color: var(--grey-2); font-weight: 600; font-size: 13px; padding-top: 0; border-bottom-color: #3a3a3a; }
.bl-table tbody th { color: #fff; font-weight: 600; position: sticky; left: calc(-1 * var(--m)); background: #000; min-width: 120px; }
.bl-table td { color: var(--soft); }
.bl-prose > .bl-table-hint { margin-top: 10px; color: var(--grey-2); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.bl-table-hint::after { content: ""; width: 18px; height: 1px; background: currentColor; box-shadow: 4px 0 0 -0px transparent; }
@media (min-width: 900px) { .bl-prose > .bl-table-hint { display: none; } }

/* « À APEX12 »: the club's own facts, one raised tone, grain, no side stripe */
.bl-apex { position: relative; margin-block: 2.2em !important; background: var(--raise); border: 1px solid #1f1f1f; border-radius: 2px; overflow: hidden; }
.bl-apex-in { padding: clamp(24px, 3vw, 36px); }
.bl-prose .bl-apex-h { font-family: var(--display); text-transform: uppercase; font-size: clamp(30px, 3vw, 42px); line-height: .9; color: #fff; margin: 0 0 20px; letter-spacing: 0; font-weight: 700; }
.bl-facts { margin: 0; display: grid; }
.bl-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; border-top: 1px solid #262626; }
.bl-facts dt { color: var(--grey-2); font-size: 13px; font-weight: 600; }
.bl-facts dd { margin: 0; color: #fff; font-size: 16px; line-height: 1.5; }
.bl-apex p { font-size: 16px; }

/* FAQ: the discipline pages' accordion (.qa from site.css), sized for the column */
.bl-faq { margin-top: 2.6em !important; }
.bl-faq h2 { margin-top: 0; margin-bottom: .6em; }
.bl-faq .qa summary { font-size: 18px; line-height: 1.4; padding: 20px 0; color: #fff; font-weight: 600; }
.bl-faq .qa .ans { max-width: none; padding: 0 0 22px; font-size: 17px; color: var(--soft); }
.bl-faq .qa .ans p { margin: 0; }
.bl-faq .qa .ans p + p { margin-top: .8em; }

/* end of article: the trial, then the author */
.bl-endcta { margin-top: 3em !important; padding-top: 32px; border-top: 1px solid var(--line); display: grid; gap: 22px; justify-items: start; }
.bl-endcta p { color: #fff; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; font-weight: 500; max-width: 30ch; }

.bl-author { margin-top: 3.2em !important; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: 24px 0 0; border-top: 1px solid var(--line); }
.bl-author-img { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #111; }
.bl-author-photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s ease; }
.bl-author:hover .bl-author-photo { filter: none; }
.bl-author-txt { font-size: 15px; line-height: 1.55; color: var(--soft); }
.bl-author-txt p { margin: 0; }
.bl-author-name { color: #fff; font-size: 17px; font-weight: 700; }
.bl-author-role { color: var(--grey); margin-top: 2px !important; }
.bl-author-bio { margin-top: 12px !important; }
.bl-author-link { margin-top: 16px; font-size: 13px; }

/* « À lire aussi » */
.bl-next { padding-block: clamp(72px, 9vw, 136px); border-top: 1px solid var(--line); }
.bl-next-title { font-size: var(--d-s); margin-bottom: clamp(28px, 3vw, 48px); }
.bl-next-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px var(--gap); }
.bl-next-item a { display: block; }
.bl-next-img { aspect-ratio: 4 / 3; overflow: hidden; background: #111; border-radius: 2px; }
.bl-next-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter .6s ease; }
.bl-next-kind { margin: 16px 0 0; color: var(--grey-2); font-size: 13px; }
.bl-next-h { margin: 6px 0 0; color: #fff; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; display: inline; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease-out); padding-bottom: 2px; }
.bl-next-sum { margin: 10px 0 0; color: var(--grey); font-size: 15px; line-height: 1.5; max-width: 40ch; }
@media (hover: hover) and (pointer: fine) {
  .bl-next-item a:hover .bl-next-img img { transform: scale(1.045); }
  .bl-next-item a:hover .bl-next-h { background-size: 100% 2px; }
}

/* closing call to action (index and empty states) */
.bl-cta { padding-block: clamp(96px, 12vw, 184px); background: #0b0b0b; border-top: 1px solid var(--line); }
.bl-cta-h { font-size: var(--d-l); max-width: 12ch; }
.bl-cta-sub { margin: 28px 0 0; color: var(--grey); max-width: 40ch; font-size: clamp(17px, 1.4vw, 20px); }
.bl-cta-row { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; }

/* ================================================================ INDEX */
.bl-ihead { padding-top: clamp(40px, 7vw, 104px); padding-bottom: clamp(36px, 4vw, 56px); }
.bl-ih1 { font-size: var(--d-xl); margin-top: 26px; }
.bl-ilead { margin: clamp(22px, 2.6vw, 36px) 0 0; max-width: 38ch; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.38; color: var(--grey); text-wrap: pretty; }

/* filters: plain links; #discipline + :target filter without JS, v2-blog.js animates it */
.bl-filters { display: flex; gap: 8px; margin-top: clamp(30px, 3.4vw, 48px); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--m)); padding: 2px var(--m); }
.bl-filters::-webkit-scrollbar { display: none; }
.bl-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid #333; border-radius: 999px; color: #e6e6e6; font-size: 14px; font-weight: 500; transition: border-color .25s, background .25s, color .25s; }
.bl-chip:hover { border-color: #777; color: #fff; }
.bl-chip-n { color: #777; font-size: 12px; font-variant-numeric: tabular-nums; transition: color .25s; }
.bl-chip[aria-current="true"] { background: #fff; color: #000; border-color: #fff; }
.bl-chip[aria-current="true"] .bl-chip-n { color: var(--red); }

.bl-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px var(--gap); padding-top: clamp(12px, 2vw, 24px); padding-bottom: clamp(88px, 10vw, 152px); border-top: 1px solid var(--line); padding-top: clamp(36px, 4vw, 56px); }
.bl-target { display: none; }
.bl-card { min-width: 0; }
.bl-card-link { display: grid; gap: 20px; }
.bl-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: #111; border-radius: 2px; }
.bl-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.bl-card-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--grey-2); font-size: 13px; }
.bl-card-h { margin: 12px 0 0; font-size: clamp(30px, 3.1vw, 46px); line-height: .92; max-width: 20ch; text-wrap: balance; }
.bl-card-sum { margin: 14px 0 0; color: var(--grey); font-size: 16px; line-height: 1.5; max-width: 46ch; }
.bl-card-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bl-card-more svg { transition: transform .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bl-card-link:hover .bl-card-img img { transform: scale(1.04); }
  .bl-card-link:hover .bl-card-more svg { transform: translateX(6px); }
  .bl-card-link:hover .bl-card-more { color: #fff; }
  .bl-card-link:hover .bl-card-h { color: #fff; }
}
.bl-card-link:focus-visible { outline-offset: 6px; }
.bl-empty-filter { grid-column: 1 / -1; color: var(--grey); margin: 0; }

/* no-JS filter: /blog#kids-boxing shows only that discipline */
.bl-list:not(.js-f) .bl-target:target ~ .bl-card { display: none; }
.bl-list:not(.js-f) #boxe-anglaise:target ~ .bl-card[data-d~="boxe-anglaise"],
.bl-list:not(.js-f) #boxe-thai:target ~ .bl-card[data-d~="boxe-thai"],
.bl-list:not(.js-f) #grappling:target ~ .bl-card[data-d~="grappling"],
.bl-list:not(.js-f) #mma:target ~ .bl-card[data-d~="mma"],
.bl-list:not(.js-f) #women-boxing:target ~ .bl-card[data-d~="women-boxing"],
.bl-list:not(.js-f) #kids-boxing:target ~ .bl-card[data-d~="kids-boxing"] { display: block; }
.bl-card.is-out { display: none; }

/* empty blog (no article published yet) */
.bl-soon { padding-block: clamp(40px, 5vw, 72px) clamp(88px, 10vw, 152px); border-top: 1px solid var(--line); display: grid; gap: 14px; }
.bl-soon-h { margin: 0; color: #fff; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; max-width: 24ch; }
.bl-soon-p { margin: 0; color: var(--grey); max-width: 52ch; font-size: 18px; line-height: 1.6; }

/* ================================================================ wider screens */
@media (min-width: 700px) {
  .bl-hero-img { aspect-ratio: 16 / 9; }
  .bl-facts > div { grid-template-columns: 9.5em minmax(0, 1fr); gap: 20px; align-items: baseline; }
  .bl-author { grid-template-columns: 96px minmax(0, 1fr); gap: 24px; }
  .bl-author-img { width: 96px; height: 96px; }
  .bl-next-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px var(--gap); }
  .bl-card-big { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  /* header: the question across the page, then a byline column on the left and the chapeau on the right */
  .bl-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .bl-head > * { grid-column: 1 / -1; }
  .bl-h1 { grid-column: 1 / span 11; max-width: none; }
  .bl-lead, .bl-meta { grid-row: 3; margin-top: clamp(40px, 4vw, 64px); padding-top: 26px; border-top: 1px solid var(--line); }
  .bl-lead { grid-column: 5 / -1; max-width: 30ch; font-size: clamp(24px, 2.05vw, 30px); }
  .bl-meta { grid-column: 1 / span 3; flex-direction: column; align-items: flex-start; gap: 10px; }
  .bl-meta-i + .bl-meta-i::before { display: none; }
  .bl-by { margin: 0 0 8px; }
  .bl-hero-img { aspect-ratio: 21 / 9; }
  .bl-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .bl-side { grid-column: 1 / span 3; grid-row: 1; margin: 0; position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; max-height: calc(100vh - var(--nav-h) - 64px); overflow: auto; scrollbar-width: none; }
  /* text at ~65 characters from column 5; tables may run wider, into the empty columns on the right */
  .bl-prose { grid-column: 5 / span 8; grid-row: 1; max-width: none; }   /* same axis as the chapeau */
  .bl-prose > :not(.bl-table) { max-width: var(--read); }
  .bl-prose > .bl-table { max-width: 100%; }
  .bl-table table { min-width: 0; }
  .bl-toc { border-bottom: 0; }
  .bl-toc summary { pointer-events: none; padding-bottom: 12px; }
  .bl-toc summary::after { display: none; }
  .bl-table { margin-inline: 0; padding-inline: 0; }
  .bl-table tbody th { left: 0; }
  .bl-next-list { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .bl-list { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bl-ihead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .bl-ihead > * { grid-column: 1 / -1; }
  .bl-ih1 { grid-column: 1 / span 6; }
  .bl-ilead { grid-column: 8 / -1; grid-row: 2; margin: 0 0 .3em; align-self: end; }
    .bl-card { grid-column: span 6; }
  .bl-card-big { grid-column: 1 / -1; }
  .bl-card-big .bl-card-link { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .bl-card-big .bl-card-img { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
  .bl-card-big .bl-card-txt { grid-column: 8 / -1; padding: 0 0 8px clamp(8px, 1.5vw, 28px); }
  .bl-card-big .bl-card-h { font-size: clamp(44px, 4.4vw, 72px); }
  .bl-card:not(.bl-card-big):nth-of-type(odd) { margin-top: 0; }
}
@media (min-width: 1440px) {
  .bl-prose { font-size: 19px; }
}

/* the filter's View Transition: cards glide to their new place */
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.19, 1, .22, 1); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: .35s; }

/* drafts preview: the review banner sits above the content, never fixed */
@media (prefers-reduced-motion: reduce) {
  .bl-card-img img, .bl-next-img img, .bl-card-more svg { transition: none; }
}
@media print {
  .nav, .bar, .menu, .foot, .bl-side, .bl-next, .bl-cta, .bl-progress, .bl-endcta { display: none !important; }
  .bl, .bl-prose { color: #000; background: #fff; }
  .bl-prose h2, .bl-prose h3, .bl-prose strong, .bl-a { color: #000; }
}