/* STARK — mise en page commune aux pages Programmes et Exercices.
   Reprend les composants de encyclopedie.html (nav, cartes, pied de page) et
   ajoute ce qui est propre au catalogue : filtres, listes, fiche détaillée. */

.shell { width: min(var(--shell), calc(100% - var(--shell-gutter))); margin: 0 auto; }
.shell-narrow { width: min(var(--shell-narrow), calc(100% - var(--shell-gutter))); margin: 0 auto; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; padding: 12px 18px; background: var(--blue); color: #fff; font-weight: var(--fw-semibold); border-radius: 0 0 10px 0; }
.skip:focus { left: 0; }

/* ---------- type ---------- */
.display { margin: 0; font-family: var(--display); font-size: var(--fs-display-page); font-weight: var(--fw-semibold); line-height: var(--lh-display-page); letter-spacing: var(--tr-display); text-transform: uppercase; }
.h2 { margin: 0; font-family: var(--display); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); text-transform: uppercase; }
.h3 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tr-h3); line-height: var(--lh-h3); }
.lede { margin: 0; color: var(--dim); font-size: var(--fs-lede); line-height: var(--lh-lede); }
.copy { margin: 0; color: var(--dim); font-size: var(--fs-copy); line-height: var(--lh-copy); }
.hl { color: var(--blue); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-soft); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
.eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.nav { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: var(--fw-semibold); letter-spacing: .02em; }
.brand:hover { color: inherit; }
.brand-mark { width: 32px; height: 32px; border-radius: var(--r-brand-mark); overflow: hidden; background: #fff; flex: 0 0 auto; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.nav-links { display: none; align-items: center; gap: var(--s-3); color: var(--dim); font-size: var(--fs-nav); font-weight: var(--fw-medium); }
.nav-links a { padding: 11px 2px; white-space: nowrap; transition: color var(--t-base) var(--ease); }
.nav-links a:hover, .nav-links a.is-active { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); }
.lang a { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: var(--r-pill); color: var(--dim); font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: .06em; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lang a:hover { color: var(--blue); }
.lang a[aria-current="page"] { background: var(--blue); color: #fff; }

/* ---------- boutons, pilules, fil d'Ariane ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--fs-btn); font-weight: var(--fw-semibold); letter-spacing: -.01em; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.btn-primary { background: var(--btn-face); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-face-hover); color: var(--btn-ink); }
.btn-ghost { border-color: var(--line); background: var(--card); color: var(--text); }
.btn-ghost:hover { border-color: var(--blue-hairline); color: var(--blue); }
.pill { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: var(--r-pill); background: var(--blue-tint); color: var(--blue); font-size: var(--fs-pill); font-weight: var(--fw-semibold); letter-spacing: var(--tr-pill); text-transform: uppercase; }
.tag { display: inline-block; padding: 5px 11px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--blue-soft); font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: var(--s-3); color: var(--dim); font-size: .85rem; }
.crumbs a { color: var(--blue-soft); }
.crumbs span[aria-hidden] { opacity: .5; }

/* ---------- hero de page ---------- */
.page-hero { padding: var(--s-5) 0 var(--s-4); }
.page-hero .display { margin-top: var(--s-3); max-width: 20ch; }
.page-hero .lede { margin-top: var(--s-3); max-width: 56ch; }
.section { padding: var(--s-5) 0 var(--s-6); border-top: 1px solid var(--line-soft); }
.section.shade { background: var(--bg-2); }

/* ---------- grille de cartes (muscles, programmes) ---------- */
.card-grid { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.card { position: relative; display: block; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(160deg, var(--card), var(--card-grad-end)); transition: transform var(--t-card) var(--ease), border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease); }
a.card:hover { color: inherit; transform: translateY(var(--lift-card)); box-shadow: var(--shadow-card-hover); border-color: var(--blue-hairline); }
.card .h3 { margin-top: var(--s-2); }
.card p { margin: 10px 0 0; color: var(--dim); font-size: .93rem; line-height: 1.55; }
.card .meta { margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--dim); font-size: .82rem; }
.card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-3); color: var(--blue-soft); font-size: .85rem; font-weight: var(--fw-semibold); }
.card .go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-base) var(--ease); }
a.card:hover .go svg { transform: translateX(3px); }
/* Une photo du mouvement plutôt qu'un pictogramme : on reconnaît un muscle
   ou un matériel à l'exercice qui le représente, pas à une icône. */
.card .cover { width: 88px; height: 88px; border-radius: 14px; border: 1px solid var(--line); background: #fff; object-fit: cover; }

/* ---------- tuiles compactes (matériel, familles d'exercices) ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: var(--s-3); }
.tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px var(--s-2); border: 1px solid var(--line); border-radius: 14px; background: var(--card); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.tile:hover { color: inherit; border-color: var(--blue-hairline); transform: translateY(var(--lift-option)); }
.tile img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--line); background: #fff; object-fit: cover; }
.tile .label { flex: 1 1 auto; font-size: .95rem; font-weight: var(--fw-medium); }
.tile:hover .label { color: var(--blue); }
.tile .count { color: var(--dim); font-size: .82rem; font-variant-numeric: tabular-nums; }
.subsection { margin-top: var(--s-5); }
.subsection > h2 { margin: 0; }
.subsection > p { max-width: 60ch; margin: 10px 0 0; color: var(--dim); font-size: .95rem; }
.more { margin-top: var(--s-2); }
.more summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--blue-soft); font-size: .9rem; font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font-size: 1.1rem; }
.more[open] summary::after { content: "–"; }

/* ---------- filtres ---------- */
.filters { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.filters label { display: flex; flex-direction: column; gap: 6px; color: var(--dim); font-size: .78rem; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.filters input, .filters select { min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--text); font: inherit; }
.filters input:hover, .filters select:hover { border-color: var(--blue-hairline); }
.result-count { margin-top: var(--s-3); color: var(--dim); font-size: .88rem; }

/* ---------- liste d'exercices ---------- */
.ex-list { display: grid; gap: 10px; margin-top: var(--s-3); }
.ex-item { display: flex; align-items: center; gap: var(--s-2); padding: 10px var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.ex-item:hover { color: inherit; border-color: var(--blue-hairline); transform: translateY(var(--lift-option)); }
.ex-item img { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 12px; background: var(--bg-2); object-fit: cover; }
.ex-item > span { min-width: 0; }
.ex-item .h3 { display: block; font-size: 1.02rem; }
.ex-item .meta { display: block; margin-top: 4px; color: var(--dim); font-size: .82rem; }
.ex-item .chev { margin-left: auto; color: var(--blue-soft); flex: 0 0 auto; }
.ex-item .chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- fiche exercice ---------- */
.detail { display: grid; gap: var(--s-4); padding: var(--s-4) 0 var(--s-6); }
.detail-media { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.detail-media img, .detail-media video { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.facts { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.facts li { display: flex; justify-content: space-between; gap: var(--s-2); padding: 12px var(--s-2); border-top: 1px solid var(--line-soft); font-size: .92rem; }
.facts li:first-child { border-top: 0; }
.facts .k { color: var(--dim); }
.facts .v { font-weight: var(--fw-medium); text-align: right; }
.steps { margin: var(--s-3) 0 0; padding-left: 1.3em; color: var(--dim); font-size: var(--fs-copy); line-height: var(--lh-copy); }
.steps li { margin-bottom: 10px; }
.steps li::marker { color: var(--blue-soft); font-weight: var(--fw-semibold); }
.block { margin-top: var(--s-5); }
.block > .h3 { margin-bottom: var(--s-2); }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-2); }
.chip { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font-size: .88rem; }
a.chip:hover { border-color: var(--blue-hairline); color: var(--blue); }

/* ---------- séances d'un programme ---------- */
.session { margin-top: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.session > h3 { margin: 0; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-soft); background: var(--bg-2); font-size: 1.05rem; }
.session table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.session th { text-align: left; padding: 10px var(--s-3); color: var(--dim); font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.session td { padding: 12px var(--s-3); border-top: 1px solid var(--line-soft); vertical-align: top; }
.session td a { color: var(--blue-soft); }
.session .ex-cell { display: flex; align-items: center; gap: 12px; color: inherit; }
.session .ex-cell:hover .name { color: var(--blue); }
.session .ex-cell img { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 10px; background: var(--bg-2); object-fit: cover; }
.session .ex-cell .name { display: block; color: var(--blue-soft); }
.session .ex-cell .num { display: block; margin-top: 2px; }
.session .num { color: var(--dim); white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.session td:first-child, .session th:first-child { min-width: 210px; }
.session td:not(:first-child), .session th:not(:first-child) { white-space: nowrap; }
@media (max-width: 639px) {
  .session th, .session td { padding-left: var(--s-2); padding-right: var(--s-2); }
}

/* ---------- fiche programme (mise en page éditoriale) ---------- */
/* L'en-tête est collant : les ancres du sommaire doivent s'arrêter dessous. */
.prog-section { scroll-margin-top: 88px; }

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-top: var(--s-4); }
.kpi { padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.kpi dt { margin: 0; color: var(--dim); font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.kpi dd { margin: 6px 0 0; font-size: 1.15rem; font-weight: var(--fw-semibold); letter-spacing: -.01em; }

.prog-layout { display: grid; gap: var(--s-5); margin-top: var(--s-5); padding-bottom: var(--s-6); }
.toc { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.toc h2 { margin: 0 0 12px; font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: .92rem; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--blue-soft); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.toc a:hover { background: var(--blue-tint); color: var(--blue); }
.toc a[aria-current="true"] { background: var(--blue-tint); color: var(--blue); font-weight: var(--fw-medium); }

/* Le texte reste à une longueur de ligne lisible ; les séances, elles,
   prennent toute la colonne. */
.prose > h2 { margin: 0; }
.prose p { max-width: 68ch; margin: var(--s-2) 0 0; color: var(--dim); font-size: var(--fs-copy); line-height: var(--lh-copy); }
.prose .h2, .prose .h3 { max-width: 24ch; }
.prose > section + section { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
.prose h3 { margin: var(--s-4) 0 0; }

/* ---------- une séance ---------- */
.day { margin-top: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-soft); background: var(--bg-2); }
.day-head .index { color: var(--blue-soft); font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.day-head h3 { margin: 0; font-size: 1.1rem; width: 100%; }
.day-head .count { color: var(--dim); font-size: .82rem; }
.day-list { list-style: none; margin: 0; padding: 0; }
.day-list li + li { border-top: 1px solid var(--line-soft); }
.ex-row { display: flex; align-items: center; gap: var(--s-2); padding: 12px var(--s-3); color: inherit; }
.ex-row:hover { color: inherit; background: var(--bg-2); }
.ex-row img { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 12px; background: var(--bg-2); object-fit: cover; }
.ex-row .body { min-width: 0; flex: 1 1 auto; }
.ex-row .name { display: block; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.ex-row:hover .name { color: var(--blue); }
.ex-row .specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.spec { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--dim); font-size: .78rem; white-space: nowrap; }
.spec b { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.spec.is-muscle { background: var(--blue-tint); color: var(--blue); }
.ex-row .chev { flex: 0 0 auto; color: var(--blue-soft); }
.ex-row .chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.next-programs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-2); }

/* ---------- états ---------- */
.state { margin-top: var(--s-4); padding: var(--s-4); border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--dim); text-align: center; }

/* ---------- pied de page ---------- */
footer { padding: var(--s-5) 0 var(--s-4); border-top: 1px solid var(--line-soft); }
.foot-grid { display: grid; gap: var(--s-4); padding-bottom: var(--s-4); }
.foot-col h3 { margin: 0 0 14px; font-size: .78rem; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { font-size: .92rem; transition: color var(--t-fast) var(--ease); }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); color: var(--dim); font-size: .85rem; padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }

.js .reveal { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: var(--reveal-delay-1); }
.reveal[data-delay="2"] { transition-delay: var(--reveal-delay-2); }
.reveal[data-delay="3"] { transition-delay: var(--reveal-delay-3); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

@media (min-width: 640px) {
  .shell { width: min(var(--shell), calc(100% - var(--shell-gutter-wide))); }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
  .ex-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .prog-layout { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  .toc { position: sticky; top: 88px; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 2fr repeat(2, 1fr); }
  .detail { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; gap: var(--s-5); }
}