/* Pilier « Buteurs et passeurs de Ligue 1 » (/buteurs-ligue-1/) */
.but { --but-ok: #0F7F70; --but-hls: color-mix(in srgb, var(--sky) 18%, var(--sf)); padding-top: 12px; }
.but [hidden] { display: none !important; }
.but-small { font-size: 15px; }

/* ---------- En-tête ---------- */
.but-head { display: flex; flex-direction: column; gap: 8px; }
.but-h1 { margin: 0; font-stretch: 62%; font-weight: 900; font-size: clamp(44px, 6.5cqi, 76px); line-height: .9; text-transform: uppercase; text-wrap: balance; }
.but-lead { margin: 0; font-size: clamp(17px, 1.8cqi, 20px); line-height: 1.45; font-weight: 500; max-width: 720px; text-wrap: pretty; }
.but-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; color: var(--mut); }
.but-auto { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--sf); border: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.but-auto > span { width: 8px; height: 8px; border-radius: 50%; background: var(--but-ok); }

/* ---------- Encart AJA (fond héros) ---------- */
.but-aja { padding: 18px clamp(16px, 4cqi, 32px) 20px; }
.but-aja::before { display: none; }
.but-h2-hero { margin: 0; font-stretch: 62%; font-weight: 900; font-size: clamp(30px, 4cqi, 40px); line-height: .95; text-transform: uppercase; }
.but-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-top: 14px; }
.but-tile { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.08); min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.but-tile__k { font-size: 15px; font-stretch: 112%; font-weight: 700; text-transform: uppercase; color: var(--sky); }
.but-tile__v { font-stretch: 62%; font-weight: 900; font-size: 44px; line-height: 1; }
.but-tile__v span { font-size: 22px; text-transform: uppercase; }
.but-tile__nm { font-size: 18px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.but-tile__nm a { color: #fff; text-decoration-color: var(--sky); text-underline-offset: 3px; }
.but-tile__nm a:hover { color: var(--sky); }
.but-tile__s { font-size: 15px; color: #C7D6EE; }

/* ---------- Onglets ---------- */
.but-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--sf); border: 1px solid var(--line); max-width: 520px; width: 100%; }
.but-tabs button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 700 15px 'Archivo', sans-serif; font-stretch: 112%; text-transform: uppercase; cursor: pointer; }
.but-tabs button[aria-selected="true"] { background: var(--hero); color: #fff; }

/* ---------- Tableau ---------- */
.but-st { background: var(--sf); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.but-st .empty { margin: 16px; }
.but-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.but-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.but-table th, .but-table td { text-align: center; padding: 6px; height: 52px; border-top: 1px solid var(--line); white-space: nowrap; }
.but-table thead th { height: 44px; border-top: 0; color: var(--mut); font-weight: 600; }
.but-table abbr { text-decoration: none; }
.but-table .but-c-rk { width: 44px; padding-left: 12px; }
.but-table .but-c-pl { text-align: left; font-weight: 700; max-width: 240px; }
.but-table thead .but-c-pl { font-weight: 600; }
.but-table .but-c-club { text-align: left; }
.but-table .but-c-main { font-stretch: 62%; font-size: 15px; }
.but-table .but-c-main b { font-weight: 900; font-size: 24px; display: block; line-height: 1; }
.but-table thead .but-c-main { font-stretch: normal; }
.but-pen { display: block; font-stretch: 100%; font-size: 13px; color: var(--mut); margin-top: 2px; }
.but-pl { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.but-pl a, .but-pl > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.but-pl a { color: inherit; text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 3px; }
.but-pl__club { display: none; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--mut); min-width: 0; }
.but-club { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 220px; font-weight: 600; }
.but-rk { display: inline-grid; place-items: center; min-width: 30px; height: 28px; border-radius: 8px; font-stretch: 62%; font-weight: 900; font-size: 18px; color: var(--ink); }
.but-rk--top { box-shadow: inset 0 0 0 2px var(--sky); }
.but-table tr.is-club th, .but-table tr.is-club td { background: var(--but-hls); }
.but-table tr.is-club td:first-child { box-shadow: inset 4px 0 0 var(--sky); }
.but-st__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 14px 16px; border-top: 1px solid var(--line); font-size: 15px; }
.but-st__legend span { display: flex; align-items: center; gap: 6px; }
.but-sw { width: 14px; height: 14px; border-radius: 4px; display: block; background: var(--but-hls); box-shadow: inset 3px 0 0 var(--sky); flex: none; }

/* ---------- Liens ---------- */
.but-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.but-linkcard { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 20px; background: var(--sf); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.but-linkcard:hover { color: var(--ink); border-color: var(--sky); }
.but-linkcard strong, .but-linkcard > span:last-child { font-weight: 800; }

/* Mobile : le club passe sous le nom du joueur, colonnes secondaires masquées. */
@media (max-width: 640px) {
  .but-table .but-c-club, .but-table .but-c-min, .but-table .but-c-opt { display: none; }
  .but-pl__club { display: flex; }
  .but-table th, .but-table td { padding: 6px 4px; height: 58px; }
  .but-table .but-c-rk { width: 36px; padding-left: 8px; }
  .but-table .but-c-pl { max-width: 160px; white-space: normal; }
  .but-pl a, .but-pl > span:first-child { white-space: nowrap; }
  .but-table th abbr[title="Minutes par but"], .but-table th abbr[title="Minutes par passe décisive"] { font-size: 14px; }
}
@media (max-width: 640px) {
  .but-table td.but-c-main { white-space: normal; width: 48px; }
  .but-pen { font-size: 12px; line-height: 1.15; }
  .but-table th { white-space: normal; }
}