/* Piliers : Baromètre du maintien (B4), Classement (B3), Calendrier & résultats (B2) */
.pil {
  --pil-ok: #0F7F70; --pil-bar: #F2B33D; --pil-rel: #C2303D; --pil-eu: var(--sky);
  --pil-hls: color-mix(in srgb, var(--sky) 18%, var(--sf));
  padding-top: 12px;
}
.pil [hidden] { display: none !important; }
.pil-small { font-size: 15px; }

/* ---------- En-tête de page ---------- */
.pil-head { display: flex; flex-direction: column; gap: 8px; }
.pil-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; }
.pil-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; color: var(--mut); }
.pil-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; }
.pil-auto > span { width: 8px; height: 8px; border-radius: 50%; background: var(--pil-ok); }

/* ---------- Tuiles sur fond héros ---------- */
.pil-tiles { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.pil-tiles--gap, .pil-tiles--sum { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-top: 14px; }
.pil-tiles--sum { gap: 10px; }
.pil-tile { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.08); min-width: 0; }
.pil-tiles--sum .pil-tile { border-radius: 16px; }
.pil-tile__l { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.pil-tile__l i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.pil-tile__v { font-stretch: 62%; font-weight: 900; font-size: 40px; line-height: 1; }
.pil-tile__v--md { font-size: 34px; line-height: 1.05; }
.pil-tile__v--sky { color: var(--sky); }
.pil-tile__s { font-size: 15px; color: #C7D6EE; }

/* ---------- B4 : héros baromètre ---------- */
.pil-hero { padding: 20px clamp(16px, 4cqi, 40px) 22px; }
.pil-hero__top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; }
.pil-hero__big { font-stretch: 62%; font-weight: 900; font-size: clamp(120px, 24cqi, 220px); line-height: .8; }
.pil-hero__big span { font-size: .5em; }
.pil-hero__txt { padding-bottom: 10px; max-width: 380px; }
.pil-hero__lead { margin: 0; font-size: clamp(19px, 2.2cqi, 26px); font-weight: 700; line-height: 1.25; }
.pil-hero__sub { margin: 8px 0 0; font-size: 15px; color: #C7D6EE; }
.pil-hero__sub strong { font-weight: 800; }
.pil-hero__sub .is-up { color: #7FE0C9; }
.pil-hero__sub .is-down { color: #FF9AA3; }
.pil-zbar { display: flex; height: 16px; gap: 3px; margin: 22px 0 10px; border-radius: 999px; overflow: hidden; }

/* ---------- Mise en page principale + colonne ---------- */
.pil-split { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.pil-split__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pil-split__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.pil-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; }
.pil-legend--mut { color: var(--mut); }
.pil-legend span { display: flex; align-items: center; gap: 6px; }
.pil-legend__line { width: 16px; height: 4px; border-radius: 2px; display: block; }
.pil-sq { width: 10px; height: 10px; border-radius: 3px; display: block; }

/* Courbe */
.pil-chart { margin: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
.pil-chart__y { position: relative; height: 220px; font-size: 15px; color: var(--mut); }
.pil-chart__y span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; }
.pil-chart__area { position: relative; height: 220px; }
.pil-chart__area > i { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.pil-chart__area > i.is-base { height: 2px; background: var(--ink); }
.pil-chart__area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; max-width: none; }
.pil-chart__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sf); }
.pil-chart__val { position: absolute; right: 0; transform: translate(0, -130%); font-stretch: 62%; font-weight: 900; font-size: 26px; color: var(--winT); line-height: 1; }
.pil-chart__x { display: flex; justify-content: space-between; font-size: 15px; color: var(--mut); margin-top: 8px; }

/* Matchs restants */
.pil-rem { gap: 6px; }
.pil-rem__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.pil-rem__row:hover { color: var(--ink); background: var(--sf2); }
.pil-rem__j { font-stretch: 62%; font-weight: 900; font-size: 20px; color: var(--mut); }
.pil-rem__club { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pil-rem__txt { min-width: 0; line-height: 1.25; }
.pil-rem__txt strong { font-weight: 700; }
.pil-rem__diff { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pil-rem__lab { font-size: 15px; font-weight: 700; white-space: nowrap; }
.pil-segs { display: flex; gap: 2px; }
.pil-segs i { width: 10px; height: 14px; border-radius: 3px; background: var(--track); display: block; }
.pil-tone--easy { background: var(--pil-ok) !important; }
.pil-tone--mid { background: var(--pil-bar) !important; }
.pil-tone--hard { background: var(--pil-rel) !important; }
.pil-ink--easy { color: var(--winT); }
.pil-ink--mid { color: var(--ink); }
.pil-ink--hard { color: var(--lossT); }
.pil-more summary { display: flex; align-items: center; min-height: 48px; border-top: 1px solid var(--line); font-weight: 800; color: var(--blue); cursor: pointer; list-style: none; }
.pil-more summary::-webkit-details-marker { display: none; }
.pil-more summary::after { content: "▾"; margin-left: 8px; }
.pil-more[open] summary::after { content: "▴"; }
.pil-rem__more { border-top: 1px solid var(--line); }

/* Tableau des probabilités */
.pil-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pil-probs { min-width: 560px; }
.pil-probs th, .pil-probs td { white-space: nowrap; }
.pil-probs .t-club a, .pil-club { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; min-height: 32px; }

/* Colonne : points nécessaires */
.pil-need { display: flex; align-items: baseline; gap: 8px; }
.pil-need__v { font-stretch: 62%; font-weight: 900; font-size: 80px; line-height: .85; }
.pil-need > span:last-child { font-weight: 700; }
.pil-need__bar { height: 12px; border-radius: 999px; background: var(--sf2); overflow: hidden; }
.pil-need__bar div { height: 100%; border-radius: 999px; background: var(--aja); }
.pil-need__scale { display: flex; justify-content: space-between; font-size: 15px; margin-top: -6px; }
.pil-p { margin: 0; line-height: 1.5; text-wrap: pretty; }
.pil-exp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.pil-exp__v { font-stretch: 62%; font-weight: 900; font-size: 30px; line-height: 1; }
.pil-exp .pil-small { font-size: 14px; line-height: 1.25; margin-top: 4px; }

.pil-method { background: var(--sf2); border-radius: 20px; padding: 18px; }
.pil-method .h3 { font-size: 26px; margin-bottom: 8px; }
.pil-method p { margin: 0 0 10px; line-height: 1.55; text-wrap: pretty; }
.pil-method p:last-child { margin-bottom: 0; }

.pil-links { padding: 8px 18px; gap: 0; }
.pil-links h2 { margin: 10px 0 2px; }
.pil-links a, .pil-linkcard { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.pil-links a { min-height: 56px; border-bottom: 1px solid var(--line); }
.pil-links a:last-child { border-bottom: 0; }
.pil-links strong, .pil-linkcard strong { font-weight: 800; }
.pil-links a > span:last-child, .pil-linkcard > span:last-child { font-weight: 800; }

/* ---------- B3 : classement ---------- */
.pil-gap { padding: 18px clamp(16px, 4cqi, 32px) 20px; }
.pil-gap::before { display: none; }
.pil-gap__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.pil-h2-hero { margin: 0; font-stretch: 62%; font-weight: 900; font-size: clamp(30px, 4cqi, 40px); line-height: .95; text-transform: uppercase; }
.pil-gap__now { font-size: 15px; color: #C7D6EE; }

.pil-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%; }
.pil-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; }
.pil-tabs button[aria-selected="true"] { background: var(--hero); color: #fff; }

.pil-st { background: var(--sf); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pil-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.pil-table th, .pil-table td { text-align: center; padding: 0 4px; height: 48px; border-top: 1px solid var(--line); white-space: nowrap; }
.pil-table thead th { height: 44px; border-top: 0; color: var(--mut); font-weight: 600; }
.pil-table abbr { text-decoration: none; }
.pil-table .pil-table__club { position: sticky; left: 0; z-index: 1; background: var(--sf); text-align: left; padding: 0 8px 0 12px; width: 200px; max-width: 200px; font-weight: inherit; }
.pil-table thead .pil-table__club { font-weight: 600; }
.pil-table .pil-club { min-height: 0; font-weight: inherit; gap: 8px; }
.pil-table .pil-club a { color: inherit; text-decoration: none; }
.pil-table .pil-club a:hover { text-decoration: underline; }
.pil-table__pts { font-stretch: 62%; font-weight: 900; font-size: 22px; }
.pil-table .pil-table__form { text-align: left; padding-left: 12px; }
.pil-table tr.is-club th, .pil-table tr.is-club td { background: var(--pil-hls); font-weight: 800; }
.pil-table tr.is-sep th, .pil-table tr.is-sep td { border-top-width: 2px; }
.pil-rk { flex: none; min-width: 30px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-stretch: 62%; font-weight: 900; font-size: 18px; color: var(--ink); }
.pil-rk--ldc { background: var(--sky); color: #0A1F4D; }
.pil-rk--europe { box-shadow: inset 0 0 0 2px var(--sky); }
.pil-rk--barrage { background: var(--pil-bar); color: #1F1500; }
.pil-rk--relegation { background: var(--pil-rel); color: #fff; }
.pil-form { display: flex; gap: 3px; }
.pil-form__it { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-stretch: 62%; font-weight: 800; font-size: 14px; color: #fff; flex: none; }
.pil-form__it--V { background: var(--win); }
.pil-form__it--N { background: var(--drawBg); color: var(--drawInk); }
.pil-form__it--D { background: var(--loss); }
.pil-st__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 14px 16px; border-top: 1px solid var(--line); font-size: 15px; }
.pil-st__legend span { display: flex; align-items: center; gap: 6px; }
.pil-st__legend i { width: 14px; height: 14px; border-radius: 4px; display: block; }

.pil-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.pil-linkcard { padding: 16px 18px; border-radius: 20px; background: var(--sf); border: 1px solid var(--line); }
.pil-linkcard:hover { color: var(--ink); border-color: var(--sky); }

/* ---------- B2 : calendrier ---------- */
.pil-sum { padding: 18px clamp(16px, 4cqi, 40px) 20px; }
.pil-sum__k { position: relative; color: #C7D6EE; }
.pil-sum__empty { position: relative; margin: 12px 0 0; color: #C7D6EE; }
.pil-wdl { display: flex; gap: 3px; height: 8px; margin-top: 8px; border-radius: 999px; overflow: hidden; }
.pil-wdl--V { background: #0F7F70; }
.pil-wdl--N { background: #8C9AB8; }
.pil-wdl--D { background: #C2303D; }
.pil-sum__cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.pil-sum__note { font-size: 15px; color: #C7D6EE; max-width: 360px; }
.pil-ico-cal { width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 2px #0A1F4D; position: relative; display: block; flex: none; }
.pil-ico-cal::after { content: ""; position: absolute; left: 2px; right: 2px; top: 6px; height: 2px; background: #0A1F4D; }
.pil-sum__next { position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.pil-sum__next:hover { color: #fff; background: rgba(255,255,255,.14); }
.pil-sum__next .kicker { color: var(--sky); }
.pil-sum__nm { font-stretch: 62%; font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; }
.pil-sum__when { font-size: 15px; color: #C7D6EE; }

.pil-filters { display: flex; flex-direction: column; gap: 8px; }
.pil-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pil-chips::-webkit-scrollbar { display: none; }
.pil-chip { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--sf); color: var(--ink); font: 600 15px 'Archivo', sans-serif; cursor: pointer; }
.pil-chip--solid { border: 0; font-weight: 700; font-stretch: 112%; text-transform: uppercase; }
.pil-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pil-chip--solid[aria-pressed="true"] { background: var(--hero); color: #fff; }

.pil-cal { display: flex; flex-direction: column; gap: 16px; }
.pil-month { padding: 6px 18px 8px; gap: 0; }
.pil-month__t { font-size: 26px; margin: 10px 0 4px; }
.pil-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 64px; padding: 6px 10px; margin: 0 -10px; border-top: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; scroll-margin-top: 16px; }
.pil-row:hover { color: var(--ink); background: var(--sf2); }
.pil-row.is-next { background: var(--hl); }
.pil-row__j { display: flex; flex-direction: column; line-height: 1.1; }
.pil-row__j > span:first-child { font-stretch: 62%; font-weight: 900; font-size: 20px; }
.pil-row__j .mut { font-size: 15px; }
.pil-row__club { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pil-row__txt { min-width: 0; line-height: 1.3; }
.pil-row__txt strong { font-weight: 700; }
.pil-next { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--acc); color: #1F0C00; font-size: 13px; font-weight: 800; font-stretch: 112%; text-transform: uppercase; vertical-align: 2px; }
.pil-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.pil-row__res { display: flex; align-items: center; gap: 6px; }
.pil-row__res .pil-form__it { width: 26px; height: 26px; border-radius: 8px; font-size: 16px; }
.pil-row__score { font-stretch: 62%; font-weight: 900; font-size: 24px; }
.pil-row__time { font-stretch: 62%; font-weight: 900; font-size: 24px; line-height: 1; white-space: nowrap; }
.pil-row__end .pil-small { white-space: nowrap; }

@media (max-width: 420px) {
  .pil-row__end .pil-small { white-space: normal; max-width: 110px; font-size: 14px; line-height: 1.2; }
  .pil-exp__v { font-size: 26px; }
}

/* Mobile : classement lisible sans défilement jusqu'aux points (V, N, D et buts masqués) */
@media (max-width: 560px) {
  .pil-table { min-width: 0; }
  .pil-table th:nth-child(3), .pil-table td:nth-child(3),
  .pil-table th:nth-child(4), .pil-table td:nth-child(4),
  .pil-table th:nth-child(5), .pil-table td:nth-child(5),
  .pil-table th:nth-child(6), .pil-table td:nth-child(6) { display: none; }
  .pil-table .pil-table__club { width: auto; max-width: 170px; padding-left: 10px; }
  .pil-table th, .pil-table td { padding: 0 6px; }
}
.pil-sum__k { padding-right: 110px; }
.pil-nw { white-space: nowrap; }

/* ---------- B3 : classement complet (sections pil-cl-) ---------- */
.pil-cl-sec { min-width: 0; }
.pil-cl-h2 { margin: 8px 0 12px; }
.pil-cl-note { margin: 0; line-height: 1.45; }

/* L'AJA journée après journée */
.pil-cl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pil-cl-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--sf2); min-width: 0; }
.pil-cl-kpis .kicker { font-size: 13px; }
.pil-cl-kpis strong { font-stretch: 62%; font-weight: 900; font-size: 34px; line-height: 1; }
.pil-cl-kpis .mut { font-size: 14px; }
.pil-cl-chart { margin: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
.pil-cl-chart__y { position: relative; height: 240px; font-size: 14px; color: var(--mut); }
.pil-cl-chart__y span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; }
.pil-cl-chart__area { position: relative; height: 240px; border-radius: 10px; overflow: hidden; }
.pil-cl-chart__area svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pil-cl-chart__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--aja); box-shadow: 0 0 0 2px var(--sf); }
.pil-cl-chart__dot.is-last { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--acc); }
.pil-cl-chart__x { position: relative; height: 20px; margin-top: 6px; font-size: 14px; color: var(--mut); }
.pil-cl-chart__x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.pil-cl-legend { padding: 0; border: 0; }
.pil-cl-legend i { opacity: .55; }
.pil-cl-days { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.pil-cl-days li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 48px; border-top: 1px solid var(--line); }
.pil-cl-days__j { font-stretch: 62%; font-weight: 900; font-size: 20px; color: var(--mut); }
.pil-cl-days__m { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pil-cl-days__m a { color: var(--ink); text-decoration: none; }
.pil-cl-days__m a:hover { text-decoration: underline; }
.pil-cl-days__m .pil-form__it { width: 26px; height: 26px; }
.pil-cl-days__r { white-space: nowrap; text-align: right; }
.pil-cl-days__r strong { font-stretch: 62%; font-weight: 900; font-size: 22px; }

/* Tableaux forme + stats : colonne club figée, défilement interne */
.pil-cl-scroll { margin: 0 -18px; border-top: 1px solid var(--line); }
.pil-cl-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.pil-cl-t--stats { min-width: 900px; }
.pil-cl-t th, .pil-cl-t td { text-align: center; padding: 0 6px; height: 46px; border-top: 1px solid var(--line); white-space: nowrap; }
.pil-cl-t thead th { height: 44px; border-top: 0; color: var(--mut); font-weight: 600; }
.pil-cl-t abbr { text-decoration: none; }
.pil-cl-t .pil-cl-t__club { position: sticky; left: 0; z-index: 1; background: var(--sf); text-align: left; padding: 0 8px 0 18px; width: 210px; max-width: 210px; font-weight: inherit; box-shadow: 1px 0 0 var(--line); }
.pil-cl-t .pil-club { min-height: 0; font-weight: inherit; gap: 8px; }
.pil-cl-t .pil-cl-t__l { text-align: left; }
.pil-cl-t tr.is-club th, .pil-cl-t tr.is-club td { background: var(--pil-hls); font-weight: 800; }
.pil-cl-t thead button { border: 0; background: none; padding: 0 2px; min-height: 44px; color: inherit; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pil-cl-t thead button:hover { color: var(--ink); }
.pil-cl-t thead button[data-dir]::after { content: "▾"; margin-left: 3px; color: var(--ink); }
.pil-cl-t thead button[data-dir="asc"]::after { content: "▴"; }
.pil-cl-up { color: var(--winT); font-weight: 700; }
.pil-cl-down { color: var(--lossT); font-weight: 700; }

/* Classements thématiques */
.pil-cl-leads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.pil-cl-lead { gap: 10px; }
.pil-cl-lead__t { margin: 0; font-stretch: 62%; font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase; }
.pil-cl-lead__l { list-style: none; margin: 0; padding: 0; }
.pil-cl-lead__l li { display: grid; grid-template-columns: 26px 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 40px; border-top: 1px solid var(--line); padding: 0 6px; margin: 0 -6px; border-radius: 8px; }
.pil-cl-lead__l li.is-club { background: var(--pil-hls); font-weight: 800; }
.pil-cl-lead__l li strong { font-weight: 800; white-space: nowrap; }
.pil-cl-lead__rk { font-stretch: 62%; font-weight: 900; font-size: 18px; color: var(--mut); }
.pil-cl-lead__l li.pil-cl-lead__gap { display: block; min-height: 0; padding: 2px 6px; color: var(--mut); border-top: 1px solid var(--line); }

@media (max-width: 560px) {
  .pil-cl-t .pil-cl-t__club { width: auto; max-width: 150px; padding-left: 14px; }
  .pil-cl-kpis strong { font-size: 28px; }
}
.pil-cl-chart__x span.is-minor { visibility: hidden; }