/* Jour de match (C1) — une page, 4 états */
.mt-sub { font-size: 15px; }
.mt-label { margin: 0; font-size: 15px; font-stretch: 112%; font-weight: 700; text-transform: uppercase; color: var(--mut); }
.mt-ellipsis { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-preview { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--hl); font-size: 15px; }

/* ---------- Hero ---------- */
.mt-hero__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mt-hero__top .tag { flex: none; }
.mt-hero__h1 { margin: 0; font-size: 15px; font-stretch: 112%; font-weight: 700; text-transform: uppercase; color: #C7D6EE; line-height: 1.2; min-width: 0; }
.mt-hero__teams { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; margin: 22px 0 12px; }
.mt-hero__team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.mt-hero__nm { font-stretch: 62%; font-weight: 900; font-size: clamp(20px, 5.6cqi, 48px); line-height: .9; text-transform: uppercase; max-width: 100%; text-wrap: balance; }
.mt-hero__mid { text-align: center; }
.mt-hero__time { font-stretch: 62%; font-weight: 900; font-size: clamp(72px, 19cqi, 184px); line-height: .85; }
.mt-hero__date { font-size: clamp(15px, 1.8cqi, 20px); font-weight: 600; margin-top: 8px; }
.mt-hero__score { font-stretch: 62%; font-weight: 900; font-size: clamp(84px, 21cqi, 196px); line-height: .85; text-align: center; white-space: nowrap; }
.mt-hero__s1 { color: #C7D6EE; }
.mt-hero__sep { color: var(--sky); margin: 0 .08em; }
.mt-hero__cd { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.mt-hero__cd .pill { min-height: 0; padding: 8px 14px; gap: 0; }
.mt-hero__cd strong { font-stretch: 62%; font-weight: 900; font-size: 24px; margin-right: 4px; }
.mt-hero__scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 15px; color: #D6E2F5; text-align: center; }
.mt-hero__info { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 15px; }
.mt-hero__info .pill { max-width: 100%; }
.mt-prog { max-width: 620px; margin: 16px auto 0; }
.mt-prog__bar { position: relative; height: 6px; border-radius: 6px; background: rgba(255,255,255,.16); }
.mt-prog__bar div { height: 100%; border-radius: 6px; background: var(--sky); }
.mt-prog__bar i { position: absolute; left: 50%; top: -5px; width: 2px; height: 16px; background: #C7D6EE; }
.mt-prog__lbl { display: flex; justify-content: space-between; font-size: 15px; color: #C7D6EE; margin-top: 6px; }

/* ---------- Onglets ---------- */
.mt-tabs {
  position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--sf); border: 1px solid var(--line);
}
.mt-tabs__t {
  min-height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; text-decoration: none;
  font-size: 15px; font-stretch: 112%; font-weight: 600; text-transform: uppercase; color: var(--ink); min-width: 0;
}
.mt-tabs__t:hover { color: var(--ink); background: var(--sf2); }
.mt-tabs__t.is-on { background: var(--hero); color: #fff; font-weight: 800; }
.mt-tabs__t.is-off { color: var(--mut); opacity: .55; }
@media (max-width: 360px) { .mt-tabs__t { font-size: 13px; font-stretch: 100%; } }

/* ---------- Mise en page ---------- */
.mt-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.mt-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mt-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mt [id] { scroll-margin-top: 64px; }

/* ---------- Ce qu'il faut retenir ---------- */
.mt-keys { gap: 12px; }
.mt-keys__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mt-keys__list li { display: flex; gap: 14px; align-items: flex-start; }
.mt-keys__n { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--hero); color: #fff; display: grid; place-items: center; font-stretch: 62%; font-weight: 900; font-size: 24px; }
.mt-keys__list p { margin: 0; font-size: 17px; line-height: 1.45; text-wrap: pretty; padding-top: 7px; }

/* ---------- Forme ---------- */
.mt-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-form__who { display: flex; align-items: center; gap: 8px; flex: 1 1 160px; min-width: 0; }
.mt-form__who strong { font-weight: 800; }
.mt-form__who .mut { font-size: 15px; white-space: nowrap; }
.mt-form .form { gap: 4px; }
.mt-form .form__it { width: 32px; height: 32px; }
.mt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-tile { background: var(--sf2); border-radius: 14px; padding: 12px; min-width: 0; }
.mt-tile .mut { font-size: 15px; }
.mt-tile__v { font-stretch: 62%; font-weight: 900; font-size: 28px; line-height: 1.1; }

/* ---------- Confrontations ---------- */
.mt-h2h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; font-size: 15px; }
.mt-h2h__v { font-stretch: 62%; font-weight: 900; font-size: 56px; line-height: .9; font-variant-numeric: tabular-nums; }
.mt-h2h__bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; }
.mt-h2h__list { display: flex; flex-direction: column; }
.mt-h2h__row { display: grid; grid-template-columns: 76px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 44px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); text-decoration: none; }
.mt-h2h__row:hover { color: var(--ink); background: var(--sf2); }
.mt-res { font-stretch: 62%; font-weight: 900; font-size: 20px; padding: 2px 8px; border-radius: 8px; color: #fff; }
.mt-res--V { background: var(--win); }
.mt-res--D { background: var(--loss); }
.mt-res--N { background: var(--drawBg); color: var(--drawInk); }

/* ---------- Absents ---------- */
.mt-abs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.mt-abs .mt-label { margin-bottom: 6px; }
.mt-abs__none { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.mt-abs__row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35; }
.mt-abs__n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sf2); display: grid; place-items: center; font-stretch: 62%; font-weight: 900; font-size: 18px; }

/* ---------- Compos ---------- */
.mt-compos { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mt-compos__head { flex-wrap: wrap; }
.mt-compos__t { font-size: clamp(32px, 4cqi, 44px); line-height: .95; }
.mt-compos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.mt-compos__who { min-width: 0; flex: 1; }
.mt-compos__f { flex: none; padding: 7px 11px; border-radius: 999px; background: var(--sf2); font-stretch: 112%; font-weight: 700; font-size: 15px; }
.mt-compos .pitch__p { width: auto; flex: 1 1 0; min-width: 0; max-width: 80px; }
.mt-compos .pitch__nm { max-width: 100%; }
.mt-nolineup { border: 2px dashed var(--line); border-radius: 20px; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.mt-nolineup__icon { width: 56px; height: 64px; border: 2px solid var(--mut); border-radius: 6px; position: relative; opacity: .7; }
.mt-nolineup__icon i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--mut); }
.mt-nolineup__icon b { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 2px solid var(--mut); border-radius: 50%; transform: translate(-50%, -50%); }
.mt-nolineup__t { font-size: 28px; line-height: .95; margin-top: 4px; }
.mt-nolineup p { margin: 0; color: var(--mut); max-width: 440px; text-wrap: pretty; }

/* ---------- Fil du match ---------- */
.mt-fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mt-ev { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--sf2); color: var(--ink); }
.mt-ev__m { font-stretch: 62%; font-weight: 900; font-size: 24px; line-height: 1; }
.mt-ev__txt { font-size: 15px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.mt-ev__tag { display: inline-block; padding: 3px 8px; margin-right: 6px; border-radius: 7px; font-size: 15px; font-stretch: 112%; font-weight: 800; text-transform: uppercase; line-height: 1.1; background: var(--track); color: var(--ink); }
.mt-ev--goal-club { background: var(--acc); color: #1F0C00; }
.mt-ev--goal-club .mt-ev__tag { background: #1F0C00; color: #FFE2CC; }
.mt-ev--card .mt-ev__tag { background: #F5C400; color: #1F1500; }
.mt-ev--red .mt-ev__tag { background: var(--loss); color: #fff; }
.mt-ev--var .mt-ev__tag { background: var(--hero); color: #fff; }
.mt-ev--info { background: transparent; color: var(--mut); }
.mt-ev--info .mt-ev__tag { background: var(--sf2); color: var(--ink); }

/* ---------- Stats ---------- */
.mt-legend { display: flex; gap: 12px; font-size: 15px; color: var(--mut); }
.mt-legend span { display: flex; align-items: center; gap: 6px; }
.mt-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.mt-stats { display: flex; flex-direction: column; gap: 14px; }
.mt-stats .cmp__head b { font-size: 26px; }
.mt-stats .cmp__head b.is-club { color: var(--blue); }
.mt-stats .cmp__head b:first-child:not(.is-club) { color: var(--ink); }
.mt-stats__k { font-size: 15px; font-stretch: 112%; font-weight: 700; text-transform: uppercase; color: var(--mut); text-align: center; }
.mt-stats .cmp__bar { height: 10px; gap: 4px; }
.mt-stats .cmp__bar span { border-radius: 999px; }

/* ---------- Notes ---------- */
.mt-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px 24px; }
.mt-notes__team { min-width: 0; }
.mt-notes__head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.mt-notes__row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 48px; border-top: 1px solid var(--line); }
.mt-notes__n { font-stretch: 62%; font-weight: 900; font-size: 20px; color: var(--mut); text-align: center; }
.mt-notes__nm { min-width: 0; font-size: 16px; line-height: 1.25; }
.mt-notes__nm a, .mt-notes__nm strong { font-weight: 700; }
.mt-notes__nm a { color: var(--ink); text-underline-offset: 3px; }
.mt-notes__nm .mut { font-size: 15px; }
.mt-foot { margin: 0; font-size: 15px; }

/* ---------- Vote (bientôt) ---------- */
.mt-vote { border-radius: 20px; }
.mt-vote::before { width: 80px; height: 48px; right: -20px; }
.mt-vote__in { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.mt-vote__k { font-size: 15px; font-stretch: 112%; font-weight: 700; text-transform: uppercase; color: #C7D6EE; }
.mt-vote__t { font-size: 30px; line-height: .95; }
.mt-vote p { margin: 0; color: #D6E2F5; font-size: 15px; max-width: 520px; }
.mt-empty { padding: 20px 18px; }

/* ---------- Match suivant ---------- */
.mt-next { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--sf); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mt-next:hover { color: var(--ink); border-color: var(--sky); }
.mt-next__body { flex: 1; min-width: 0; }
.mt-next__t { font-stretch: 62%; font-weight: 900; font-size: 32px; line-height: .95; text-transform: uppercase; margin-top: 4px; }
.mt-next__go { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--hero); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; }

/* ---------- Colonne latérale ---------- */
.mt-links { padding: 8px 18px; gap: 0; }
.mt-links h2 { margin: 10px 0 2px; }
.mt-links a { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mt-links a:last-child { border-bottom: 0; }
.mt-links a > span:last-child { font-weight: 800; }
.mt-links strong { font-weight: 800; }
.mt-links .mut { font-size: 15px; }
.mt-prono { padding: 16px 18px; gap: 10px; }
.mt-prono__head { display: flex; justify-content: space-between; align-items: center; }
.mt-prono__18 { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--mut); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--mut); }
.mt-prono__pick { font-size: 17px; font-weight: 700; line-height: 1.3; }
.mt-prono__conf, .mt-prono__note { margin: 0; font-size: 15px; }
.mt-probs { display: flex; flex-direction: column; font-size: 15px; }
.mt-probs__row { display: grid; grid-template-columns: minmax(0,1fr) 64px 64px; gap: 8px; align-items: center; min-height: 40px; border-top: 1px solid var(--line); }
.mt-probs__row > :not(:first-child) { text-align: right; }
.mt-probs__row--head { min-height: 0; padding-bottom: 6px; border-top: 0; color: var(--mut); font-size: 14px; font-stretch: 112%; font-weight: 600; }
.mt-prono__verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.mt-verdict { padding: 4px 10px; border-radius: 999px; font-weight: 800; }
.mt-verdict--passe { background: var(--win); color: #fff; }
.mt-verdict--rate { background: var(--drawBg); color: var(--drawInk); }
.mt-prono .anj { margin: 0; }

/* Avant-match enrichi */
.mt-stakes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mt-stake { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; background: var(--sf2); text-align: center; }
.mt-stake__l { font-size: 13px; font-stretch: 112%; font-weight: 700; text-transform: uppercase; color: var(--mut); }
.mt-stake__v { font-stretch: 62%; font-weight: 900; font-size: 44px; line-height: 1; }
.mt-stake__s { font-size: 13px; color: var(--mut); }
.mt-stake--victoire { box-shadow: inset 0 0 0 2px var(--win); }
.mt-stake--defaite { box-shadow: inset 0 0 0 2px var(--loss); }
.mt-duel { margin: 0; }
.mt-duel img { width: 100%; height: auto; display: block; border-radius: 20px; background: var(--hero); }