/* ============================================================
   ASEC Mimosas — Phase 3 design system
   CSS custom properties: color, type, space, radius, shadow.
   Mobile-first: base rules = xs, min-width media queries layer up.
   No webfont — system stack only, to keep weight minimal for a
   mostly-mobile, often-metered audience (see phase2-audit/audit.md, C1).
   ============================================================ */

:root {
  /* ---- Color: ASEC jaune-et-noir ----
     NOTE: sampled from the club crest for this build. Confirm exact
     hex against the official brand book before production (see
     ASSUMPTIONS.md). */
  --c-yellow-50:  #fffbea;
  --c-yellow-100: #fff2b8;
  --c-yellow-300: #ffdf5c;
  --c-yellow-500: #f5c400; /* primary */
  --c-yellow-600: #d1a600;
  --c-yellow-700: #a37f00;
  /* yellow-700 measures only 3.75:1 on white — below the 4.5:1 AA floor for
     body-size text. yellow-800 is the accessible text-on-light gold:
     5.33:1 on white, 5.07:1 on warm-50, 4.98:1 on grey-50. Used by the
     article-detail pages; the older surfaces still carry yellow-700 and
     want a dedicated sweep (see plan notes). */
  --c-yellow-800: #856700;

  --c-black-900: #0c0c0c; /* primary dark */
  --c-black-800: #161616;
  --c-black-700: #232323;

  --c-white: #ffffff;
  --c-grey-50:  #f7f7f7;
  --c-grey-100: #eeeeee;
  --c-grey-200: #dcdcdc;
  --c-grey-400: #9a9a9a;
  --c-grey-600: #6b6b6b;
  --c-grey-800: #333333;

  /* Functional (match states, never rely on color alone — always pair with text/icon) */
  --c-live: #e11d2e;
  --c-live-bg: #fdeceb;
  --c-card-yellow: #f0c400;
  --c-card-red: #d1392b;
  --c-win: var(--c-yellow-500);

  /* Warm off-white page base: softer than pure white on phone OLED panels
     and reads more premium, at zero byte cost. */
  --c-warm-50: #faf9f6;

  /* Semantic aliases */
  --color-bg: #ffff;
  --color-surface: var(--c-white);
  --color-surface-alt: var(--c-grey-50);
  --color-ink: var(--c-black-900);
  --color-ink-muted: var(--c-grey-600);
  --color-border: var(--c-grey-200);
  --color-primary: var(--c-yellow-500);
  --color-primary-ink: var(--c-black-900); /* text on yellow */
  --color-inverse-bg: var(--c-black-900);
  --color-inverse-ink: var(--c-white);
  --color-inverse-muted: #b9b9b9;

  /* ---- Type scale: fluid, mobile-first (clamp between xs and xl) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-body:   1rem;
  --fs-sm:     0.875rem;
  --fs-xs:     0.75rem;
  --fs-h6:     clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-h5:     clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-h4:     clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --fs-h3:     clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
  --fs-h2:     clamp(1.9rem, 1.55rem + 1.4vw, 2.6rem);
  --fs-h1:     clamp(2.4rem, 1.8rem + 2.4vw, 4rem);
  --fs-display:clamp(2.8rem, 2rem + 3.2vw, 5.2rem);
  --lh-tight: 1.08;
  --lh-normal: 1.5;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Radius / shadow ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.18);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --nav-height: 64px;
}

/* ============================================================
   Breakpoints (reference, mobile-first min-width):
   xs: 0        sm: 480px     md: 768px
   lg: 992px    xl: 1200px
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  /* Safety net against Bootstrap .row negative-margin gutter bleed when a
     row's gutter (g-*) doesn't exactly match container-ds's own padding —
     horizontal only, so it never clips the mobile nav dropdown (vertical). */
  overflow-x: hidden;
}
body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.container-ds { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 768px) { .container-ds { padding-inline: var(--sp-6); } }

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; margin: 0; text-wrap: balance; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 800; margin: 0; text-wrap: balance; }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: 700; margin: 0; text-wrap: balance; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; margin: 0; }
h5, .h5 { font-size: var(--fs-h5); font-weight: 700; margin: 0; }
.text-display { font-size: var(--fs-display); line-height: .95; font-weight: 800; letter-spacing: -.01em; }
.text-muted { color: var(--color-ink-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.eyebrow {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-yellow-700);
}

/* ---- Sections / rhythm ---- */
.section-ds { padding-block: var(--sp-8); }
.section-ds--tight { padding-block: var(--sp-6); }
.section-ds--inverse { background: var(--color-inverse-bg); color: var(--color-inverse-ink); }
.section-ds--inverse .text-muted { color: var(--color-inverse-muted); }
.section-ds--alt { background: var(--color-surface-alt); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.section-head .more { font-size: var(--fs-sm); font-weight: 700; color: var(--c-yellow-700); }
.section-ds--inverse .section-head .more { color: var(--c-yellow-300); }

/* ---- Skip link (accessibility, audit C6) ---- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--color-primary); color: var(--color-primary-ink);
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---- Focus states (accessibility) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--c-yellow-500); outline-offset: 2px;
}

/* ---- Buttons ---- */
.btn-ds {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .02em;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
  min-height: 44px; /* touch target */
}
.btn-ds:hover { transform: translateY(-1px); }
.btn-ds--primary { background: var(--color-primary); color: var(--color-primary-ink); }
.btn-ds--primary:hover { box-shadow: var(--shadow-md); }
.btn-ds--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn-ds--ghost-light { background: transparent; border-color: rgba(255,255,255,.6); color: var(--color-inverse-ink); }
.btn-ds--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); min-height: 36px; }

/* ---- Cards ---- */
.card-ds {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden;
}
.card-ds--dark { background: var(--color-inverse-bg); color: var(--color-inverse-ink); border-color: var(--c-black-700); }

.news-card-ds {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface);
  border: 1px solid var(--color-border); transition: box-shadow .2s ease, transform .2s ease;
}
.news-card-ds:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.news-card-ds .thumb { aspect-ratio: 16/10; width: 100%; object-fit: cover; background: var(--color-surface-alt); }
.news-card-ds .body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.news-card-ds h3 { font-size: var(--fs-h6); }

/* Player card — real photo treatment (used on season/team.html).
   Earlier builds used a "digital jersey" (name + number standing in for a
   photo) on the assumption that no per-player photography was verifiable.
   That assumption was wrong: the club's own site (assets.asec.ci/images/
   teams/*.jpg) hosts real current-squad photos. Same gradient-overlay
   technique as .news-hero — photo full-bleed, name/position readable
   against a dark scrim at the bottom, no separate caption block needed. */
.player-card-ds {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  background: var(--c-black-900); border: 1px solid var(--c-black-700);
  transition: box-shadow .2s ease, transform .2s ease;
}
.player-card-ds:hover, .player-card-ds:focus-within { box-shadow: var(--shadow-md); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .player-card-ds { transition: none; }
  .player-card-ds:hover, .player-card-ds:focus-within { transform: none; }
}
.player-card-ds img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; background: var(--c-black-800); display: block; }
.player-card-ds__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-3);
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.85) 100%);
}
.player-card-ds .name { color: var(--color-inverse-ink); font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; }
.player-card-ds .pos { margin-top: 2px; font-size: var(--fs-xs); color: var(--c-yellow-300); text-transform: uppercase; letter-spacing: .03em; }

/* Player card, homepage "feature" variant (index.html's "Nos Lions" teaser
   only — season/team.html's dense 30-card roster grid stays on the plain
   .player-card-ds above). Taller/slimmer crop than the roster grid's 3:4,
   plus a solid offset block behind each card that steps out further on
   hover, alternating yellow/near-black per card like the trophy tiles. */
.player-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
@media (min-width: 768px) { .player-feature-grid { grid-template-columns: repeat(4, 1fr); } }
.player-feature { position: relative; }
.player-feature__offset {
  position: absolute; inset: 0; border-radius: var(--radius-md);
  background: var(--c-yellow-500); transform: translate(8px, 8px);
  transition: transform .2s ease; z-index: 0;
}
.player-feature:nth-child(even) .player-feature__offset { background: var(--c-black-900); }
.player-feature:hover .player-feature__offset, .player-feature:focus-within .player-feature__offset { transform: translate(10px, 10px); }
.player-feature .player-card-ds { position: relative; z-index: 1; }
.player-feature .player-card-ds img { aspect-ratio: 3/5; transition: transform .4s ease; }
.player-feature:hover .player-card-ds img, .player-feature:focus-within .player-card-ds img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .player-feature__offset, .player-feature .player-card-ds img { transition: none; }
  .player-feature:hover .player-feature__offset, .player-feature:focus-within .player-feature__offset { transform: translate(8px, 8px); }
  .player-feature:hover .player-card-ds img, .player-feature:focus-within .player-card-ds img { transform: none; }
}

/* ---- Badges ---- */
.badge-ds {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
}
.badge-ds--live {
  background: var(--c-live); color: var(--c-white);
}
.badge-ds--live .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-white);
  animation: pulse-live 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .badge-ds--live .dot { animation: none; } }
@keyframes pulse-live { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.3);} }
.badge-ds--neutral { background: var(--color-surface-alt); color: var(--color-ink-muted); }
.badge-ds--ft { background: var(--c-black-900); color: var(--color-inverse-ink); }
.badge-ds--soon { background: var(--c-yellow-100); color: var(--c-yellow-700); }

/* ---- Standings table ----
   overflow-x: auto (not hidden) is deliberate: the full classement table
   (season/ranking.html) adds a Forme column on top of the homepage's
   teaser columns, and at some widths that's wider than a phone viewport
   even after .is-stat drops J/G/N/P. Scrolling the table is the honest
   fallback instead of silently clipping the Pts column. */
.table-ds-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow-x: auto; overflow-y: hidden; }
.table-ds { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table-ds th { background: var(--c-black-900); color: var(--color-inverse-ink); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; padding: var(--sp-3); text-align: left; white-space: nowrap; }
.table-ds th abbr { text-decoration: none; }
.table-ds th.is-num, .table-ds td.is-num { text-align: center; }
.table-ds td { padding: var(--sp-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table-ds tbody tr:last-child td { border-bottom: none; }
/* Row headers (competition/fact name leading a data row) read as a label,
   not a second dark header band — quiet weight-only emphasis instead of
   repeating the thead treatment down the left column. */
.table-ds tbody th[scope="row"] {
  background: none; color: var(--color-ink); text-align: left;
  text-transform: none; letter-spacing: normal; font-weight: 800;
  white-space: normal; width: 240px; vertical-align: top;
}
.table-ds tr.is-asec { background: var(--c-yellow-50); font-weight: 700; }
.table-ds .club { display: flex; align-items: center; gap: var(--sp-2); }
.table-ds .club img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
/* Standalone (not scoped to .table-ds) so the homepage table and the
   match-page sidebar standings list can share the same rank-pill look. */
.pos-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--color-surface-alt); color: var(--color-ink-muted); flex-shrink: 0;
}
.is-asec .pos-badge { background: var(--c-yellow-500); color: var(--c-black-900); }
.table-ds .pts-col { font-weight: 800; background: var(--c-yellow-50); }
.table-ds tr.is-asec .pts-col { background: var(--c-yellow-100); }
.table-ds .diff-pos { color: var(--c-yellow-700); }
.table-ds .diff-neg { color: var(--color-ink-muted); }
@media (max-width: 575.98px) { .table-ds .is-stat { display: none; } }
/* Form column: reuses the .form-pill component (match.html's side-form
   widget) at a smaller size so 5 pills stay next to Diff. and Pts.
   without forcing the whole table wider than it needs to be. */
.table-ds .is-form { white-space: nowrap; }
.table-ds .form-pill { width: 18px; height: 18px; font-size: 9px; }

/* ---- Trophy tiles ---- */
.trophy-ds { background: var(--c-black-900); color: var(--color-inverse-ink); border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-3); text-align: center; }
.trophy-ds .count { color: var(--color-primary); font-size: var(--fs-h3); font-weight: 800; line-height: 1; }
.trophy-ds .name { font-size: var(--fs-xs); text-transform: uppercase; margin-top: var(--sp-2); letter-spacing: .02em; }
.trophy-ds .scope { font-size: var(--fs-xs); color: var(--color-inverse-muted); }

/* ---- Partner strip (tiered, audit B7) ---- */
.partners-ds { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-6); }
.partners-ds a { display: flex; align-items: center; }
.partners-ds img { max-height: 42px; width: auto; filter: grayscale(1); opacity: .7; transition: all .2s ease; }
.partners-ds img:hover { filter: none; opacity: 1; }
.partners-ds--title img { max-height: 56px; }

/* ---- Skeleton / lazy placeholder ---- */
.skeleton-ds { background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-border) 37%, var(--color-surface-alt) 63%); background-size: 400% 100%; animation: skeleton-ds 1.4s ease infinite; }
@keyframes skeleton-ds { 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
@media (prefers-reduced-motion: reduce) { .skeleton-ds { animation: none; } }