:root {
  color-scheme: light;
  --accent: #d9a928;
  --background: #f1efe7;
  --card: #fffdf7;
  --ink: #10211c;
  --muted: #68736f;
  --night: #061914;
  --night-soft: #123a2e;
  --line: #dcd9cf;
  --success: #18794e;
  --warning: #a35d00;
  --danger: #b42318;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
.staging-banner { position: sticky; z-index: 1000; inset-block-start: 0; padding: 0.45rem 1rem; background: #8a2b2b; color: #fff; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }

html {
  background: var(--background);
  scroll-behavior: smooth;
  scroll-padding-block-start: 1rem;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  padding-block-end: calc(5.5rem + env(safe-area-inset-bottom));
  color: var(--ink);
  background:
    radial-gradient(circle at 94% -8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 31rem),
    linear-gradient(180deg, #faf9f4 0, var(--background) 26rem);
}

button, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 78%, black);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 50;
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  color: white;
  background: var(--night);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 76rem;
  margin-inline: auto;
  padding: calc(0.85rem + env(safe-area-inset-top)) 1rem 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  border-radius: 0.8rem 0.8rem 1.25rem 0.8rem;
  color: var(--night);
  background: var(--accent);
  box-shadow: 0 0.55rem 1.2rem color-mix(in srgb, var(--accent) 30%, transparent);
  font-weight: 950;
  letter-spacing: -0.1em;
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.05rem; letter-spacing: -0.025em; }
.brand small { margin-block-start: 0.1rem; color: var(--muted); font-size: 0.7rem; }

.install-button, .fallback button, .primary-action {
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.05rem;
  color: white;
  background: var(--night);
  font-weight: 800;
  cursor: pointer;
}

main { max-width: 76rem; margin-inline: auto; padding-inline: 1rem; }

.toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block: 0.75rem 1rem;
}

.brand-manifesto {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  overflow: hidden;
  margin-block: 1rem 1.25rem;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  border: 1px solid rgb(238 202 92 / 34%);
  border-radius: 1.7rem;
  background:
    radial-gradient(circle at 94% 15%, rgb(227 30 36 / 18%), transparent 34%),
    radial-gradient(circle at 8% 100%, rgb(0 133 63 / 24%), transparent 35%),
    linear-gradient(135deg, #38220d, #1b1108 58%, #39170f);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
}
.brand-manifesto::after {
  position: absolute;
  inset: -10rem -5rem auto auto;
  width: 22rem;
  aspect-ratio: 1;
  border: 2rem solid rgb(238 202 92 / 4%);
  border-radius: 50%;
  content: "";
}
.brand-manifesto-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(4.8rem, 10vw, 7rem);
  aspect-ratio: 1;
  border: 2px solid var(--accent);
  border-radius: 1.35rem;
  object-fit: cover;
  object-position: center;
  background: #edf4ef;
  box-shadow: inset 0 0 0 999px rgb(238 202 92 / 12%);
}
.brand-manifesto-mark[hidden] { display: none; }
.brand-manifesto p, .brand-manifesto h2, .brand-manifesto span { position: relative; z-index: 1; }
.brand-manifesto p { margin: 0 0 0.45rem; color: var(--accent); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; }
.brand-manifesto h2 { margin: 0; font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(2.6rem, 7vw, 5.8rem); font-weight: 400; line-height: 0.88; letter-spacing: 0.035em; text-transform: uppercase; }

.country-exclusive-sn[hidden] { display: none; }
.ad-banner[hidden] { display: none; }
.ad-banner {
  position: relative;
  min-height: clamp(5.5rem, 12vw, 8.5rem);
  overflow: hidden;
  margin-block: 1.25rem;
  border: 1px solid rgb(238 202 92 / 30%);
  border-radius: 1.25rem;
  background: linear-gradient(120deg, rgb(26 38 20 / 98%), rgb(52 27 11 / 98%));
}
.ad-banner a { display: grid; min-height: inherit; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; color: var(--ink); text-decoration: none; }
.ad-banner-copy small, .ad-banner-copy strong { display: block; }
.ad-banner-copy small { color: var(--accent); font-size: 0.6rem; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase; }
.ad-banner-copy strong { margin-block-start: 0.3rem; font-size: clamp(1.15rem, 3vw, 2rem); }
.ad-banner-copy span { display: block; margin-block-start: 0.25rem; color: var(--muted); font-size: 0.72rem; }
.ad-banner img { width: clamp(6rem, 16vw, 10rem); aspect-ratio: 3 / 4; border-radius: 0.75rem; object-fit: cover; object-position: center; }
.player-recent-results { margin-block-start: 1.25rem; }
.player-recent-results h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.player-recent-results .player-match-card { margin-block-start: 0.55rem; }
.match-events { display: grid; gap: 0.55rem; margin-block: 1.15rem; }
.match-events-title { margin: 0 0 0.15rem; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.55rem); text-transform: uppercase; }
.match-event { position: relative; padding: 0.8rem 1rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 0.85rem; background: rgb(0 0 0 / 22%); }
.match-event.is-tracked { border-color: rgb(255 213 48 / 62%); background: linear-gradient(100deg, rgb(0 145 73 / 24%), rgb(255 213 48 / 9%)); box-shadow: inset 0.22rem 0 0 #ffd530; }
.match-event p { margin: 0; }
.match-event-headline { color: var(--ink); font-size: clamp(0.88rem, 1.8vw, 1.08rem); font-weight: 900; }
.match-event-assist { margin-block-start: 0.35rem !important; color: var(--muted); font-size: 0.78rem; }
.match-event-player { display: inline; padding: 0; font: inherit; }
.match-event-highlight { display: inline-flex; margin-block-start: 0.55rem; padding: 0.25rem 0.55rem; border-radius: 999px; color: #07130c; background: #ffd530; font-size: 0.58rem; font-weight: 950; letter-spacing: 0.06em; text-transform: uppercase; }
.match-events-pending { margin: 1rem 0 0; padding: 0.7rem 0.85rem; border: 1px dashed rgb(238 202 92 / 34%); border-radius: 0.75rem; color: var(--muted); background: rgb(0 0 0 / 18%); font-size: 0.72rem; }
.brand-manifesto span { display: block; max-width: 58rem; margin-block-start: 0.8rem; color: var(--muted); font-size: clamp(0.82rem, 1.4vw, 1.05rem); line-height: 1.5; }

.country-control { flex: 1; }
.country-control label {
  display: block;
  margin-block-end: 0.35rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.country-control select {
  width: min(100%, 20rem);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 0.72rem 2.5rem 0.72rem 0.85rem;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 0.35rem 1rem rgb(16 33 28 / 5%);
  font-weight: 750;
}

.feed-status {
  max-width: 15rem;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  font-size: 0.68rem;
  font-weight: 750;
  text-align: center;
}
.feed-status.success { color: var(--success); background: color-mix(in srgb, var(--success) 12%, white); }
.feed-status.warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, white); }
.feed-status.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, white); }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  min-height: 30rem;
  padding: 1.5rem;
  border-radius: 1.65rem;
  color: white;
  background:
    radial-gradient(circle at 83% 16%, color-mix(in srgb, var(--accent) 56%, transparent), transparent 12rem),
    linear-gradient(135deg, var(--night-soft), var(--night) 62%);
  box-shadow: 0 1.5rem 3.6rem rgb(7 27 22 / 20%);
}
.hero.hero-senegal {
  width: min(100%, 86rem);
  margin-inline: auto;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.8rem;
  background-image:
    linear-gradient(90deg, rgb(3 10 23 / 94%) 0%, rgb(3 10 23 / 76%) 48%, rgb(3 10 23 / 36%) 100%),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Jubilation_apr%C3%A8s_un_but.jpg/1920px-Jubilation_apr%C3%A8s_un_but.jpg");
  background-position: center 44%;
  background-size: cover;
}
.hero-photo-credit {
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-end: 0.75rem;
  color: rgb(255 255 255 / 68%);
  font-size: 0.58rem;
}
.hero-senegal .hero-flag { display: none; }

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.14;
  background-image: repeating-linear-gradient(125deg, transparent 0 28px, white 29px 30px);
  mask-image: linear-gradient(to left, black, transparent 62%);
  content: "";
}

.hero-flag {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.8rem;
  z-index: -1;
  opacity: 0.21;
  filter: saturate(0.5);
  font-size: clamp(9rem, 38vw, 24rem);
  line-height: 1;
  transform: rotate(-7deg);
}

body[data-country="CI"] .hero-flag,
body[data-country="MA"] .hero-flag {
  z-index: 0;
  opacity: 0.48;
  filter: saturate(1.45) contrast(1.12) drop-shadow(0 0.7rem 1.2rem rgb(0 0 0 / 24%));
}

body[data-country="CI"] .hero-copy,
body[data-country="MA"] .hero-copy {
  position: relative;
  z-index: 1;
}

.hero-copy { align-self: center; width: min(100%, 54rem); max-width: 44rem; margin-inline: auto; padding-block: 2.5rem 6rem; }
.hero h1 {
  max-width: 14ch;
  margin: 0.35rem 0 1rem;
  font-size: clamp(2.35rem, 10vw, 5.3rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.eyebrow, .card-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.hero-dek { max-width: 54ch; margin: 0; color: rgb(255 255 255 / 75%); font-size: 0.96rem; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-block-start: 1.3rem; }
.primary-action { color: var(--night); background: var(--accent); }
.read-time { color: rgb(255 255 255 / 58%); font-size: 0.75rem; }

.fixture {
  position: absolute;
  inset-inline: 1.1rem;
  inset-block-end: 1.1rem;
  z-index: 2;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 1.1rem;
  background: rgb(255 255 255 / 9%);
  backdrop-filter: blur(0.75rem);
}
.fixture-competition, .fixture-meta { margin: 0; color: rgb(255 255 255 / 58%); font-size: 0.67rem; }
.fixture-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.7rem; margin-block: 0.38rem; }
.team { font-weight: 800; }
.team:last-child { text-align: end; }
.score { padding: 0.3rem 0.55rem; border-radius: 0.5rem; color: #fff; background: #123f35; font-size: 1rem; }
.demo-badge {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  z-index: 3;
  max-width: 12rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  color: rgb(255 255 255 / 76%);
  background: rgb(7 27 22 / 38%);
  font-size: 0.62rem;
  text-align: center;
}

.skeleton { animation: pulse 1.5s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: 0.78; } }

.section-block { margin-block-start: 2.5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.section-heading h2, .notification-preview h2, .fallback h2, .detail-dialog h2 {
  margin: 0.15rem 0 0;
  font-size: clamp(1.5rem, 5vw, 2.35rem);
  letter-spacing: -0.045em;
}
.section-count { color: var(--muted); font-size: 0.75rem; font-weight: 750; }

[hidden] { display: none !important; }

.section-count { max-width: 100%; overflow-wrap: anywhere; text-align: end; }
.live-dot { width: 0.65rem; aspect-ratio: 1; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--success) 14%, transparent); }

.news-grid { display: grid; gap: 0.8rem; }
.news-card {
  display: grid;
  grid-template-columns: 5rem 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  box-shadow: 0 0.75rem 1.9rem rgb(16 33 28 / 6%);
}
.news-card-featured { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); }
.news-visual {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100%;
  color: var(--night);
  background:
    radial-gradient(circle at 70% 25%, white 0 0.2rem, transparent 0.25rem),
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 86%, white), color-mix(in srgb, var(--accent) 52%, var(--night)));
  font-size: 2rem;
  font-weight: 950;
}
.news-visual-image { width: 100%; height: 100%; object-fit: cover; }
.news-visual-player { object-position: center 16%; background: linear-gradient(145deg, #17345c, #07101f); }
.news-visual-editorial { object-position: center; background: #10241e; }
.news-visual-club { padding: 2.5rem; object-fit: contain; background: linear-gradient(145deg, #17345c, #07101f); }
.news-visual.news-visual-team {
  align-content: end;
  justify-items: start;
  padding: 1rem;
  color: white;
  background-image:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--accent) 62%, white) 0 0.35rem, transparent 0.4rem),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 78%, #10241e), #10241e);
}
.news-visual-team strong { position: relative; z-index: 1; font-size: 0.72rem; text-transform: uppercase; }
.news-visual-credit { position: absolute; inset-inline: 0.35rem; inset-block-end: 0.3rem; z-index: 2; overflow: hidden; color: rgb(255 255 255 / 76%); font-size: 0.48rem; font-weight: 800; text-overflow: ellipsis; text-shadow: 0 1px 3px black; white-space: nowrap; }
.news-copy { padding: 1rem; }
.news-copy h3 { margin: 0.25rem 0 0.45rem; font-size: 1.05rem; line-height: 1.15; letter-spacing: -0.025em; }
.news-title-action {
  display: inline;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: start;
  cursor: pointer;
}
.news-title-action:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.news-title-action:focus-visible { border-radius: 0.2rem; outline: 3px solid color-mix(in srgb, var(--accent) 72%, white); outline-offset: 0.18rem; }
.news-dek { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.news-meta { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.66rem; }
.card-action {
  margin-block-start: 0.8rem;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 0.23rem;
  cursor: pointer;
}

.briefs-block { padding: 1.2rem; border-radius: 1.35rem; color: white; background: var(--night); }
.briefs-news-grid { margin-block-end: 1.4rem; }
.briefs-subheading { display: flex; align-items: center; justify-content: space-between; padding-block: 0.2rem 0.5rem; border-block-end: 1px solid rgb(255 255 255 / 12%); }
.briefs-subheading h3 { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.briefs-list { display: grid; }
.brief-title-action { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.brief-title-action:hover, .brief-title-action:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; }
.brief-analysis-action { margin-block-start: 0.55rem; }
.brief-visual { display: grid; grid-column: 1 / -1; gap: 0.3rem; width: min(15rem, 100%); }
.brief-visual-image { width: 100%; aspect-ratio: 16 / 10; border-radius: 0.7rem; object-fit: cover; }
.brief-card { display: grid; grid-template-columns: 5.7rem 1fr; gap: 0.85rem; padding-block: 1rem; border-block-start: 1px solid rgb(255 255 255 / 12%); }
.brief-card:first-child { border-block-start: 0; }
.brief-card time { color: rgb(255 255 255 / 52%); font-size: 0.63rem; line-height: 1.35; }
.brief-card h3 { margin: 0.2rem 0 0.3rem; font-size: 0.98rem; }
.brief-card p:last-child { margin: 0; color: rgb(255 255 255 / 66%); font-size: 0.78rem; line-height: 1.45; }

.competition-grid { display: grid; gap: 0.75rem; }
.competition-card {
  min-width: 0;
  padding: 1.05rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--card) 95%, transparent);
}
.competition-card-active { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); }
.competition-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.competition-card-top p { margin: 0; }
.competition-season { padding: 0.25rem 0.45rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: 999px; color: var(--muted); font-size: 0.58rem; font-weight: 900; }
.competition-card h3 { margin: 0.55rem 0 0; font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.55rem; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; }
.competition-status { margin: 0.55rem 0 0; font-size: 0.76rem; font-weight: 800; }
.competition-focus { min-height: 2.8rem; margin: 0.7rem 0 0; color: var(--muted); font-size: 0.68rem; line-height: 1.8; }
.player-focus-link { border: 0; padding: 0; color: var(--ink); background: transparent; font: inherit; font-weight: 850; text-decoration: underline; text-decoration-color: rgb(253 239 66 / 55%); text-underline-offset: 0.18rem; cursor: pointer; }
.player-focus-link:hover { color: var(--senegal-yellow); }
.competition-clubs-label { margin: 1rem 0 0.45rem; color: var(--muted); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.competition-clubs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.45rem; }
.competition-club-highlight { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.55rem; border: 1px solid rgb(253 239 66 / 36%); border-radius: 0.65rem; color: var(--ink); background: linear-gradient(135deg, rgb(0 133 63 / 34%), rgb(7 16 31 / 92%)); font-size: 0.68rem; font-weight: 850; }
.competition-club-highlight b { display: grid; place-items: center; min-width: 1.25rem; aspect-ratio: 1; border-radius: 50%; color: #06101d; background: var(--senegal-yellow); font-size: 0.58rem; }
.season-banner { display: grid; gap: 0.7rem; margin-block-end: 0.9rem; padding: 1rem; border: 1px solid rgb(253 239 66 / 25%); border-radius: 1rem; background: linear-gradient(110deg, rgb(0 133 63 / 24%), rgb(7 16 31 / 92%) 48%, rgb(227 30 36 / 14%)); }
.season-banner span, .season-banner strong { display: block; }
.season-banner span { color: var(--accent); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.season-banner strong { margin-block-start: 0.15rem; font-family: Impact, "Arial Narrow", sans-serif; font-size: 2rem; font-weight: 400; letter-spacing: 0.04em; }
.season-banner p { margin: 0; color: var(--muted); font-size: 0.75rem; line-height: 1.5; }
.competitions-summary { margin: 0.8rem 0 0; padding: 0.75rem 0.9rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: 0.8rem; color: var(--muted); background: rgb(255 255 255 / 4%); font-size: 0.68rem; line-height: 1.5; }
.standings-wrap { overflow-x: auto; margin: 0.85rem -0.35rem -0.25rem; padding-inline: 0.35rem; scrollbar-width: thin; }
.standings-table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 0.72rem; }
.standings-table th, .standings-table td { padding: 0.58rem 0.45rem; border-block-start: 1px solid rgb(255 255 255 / 8%); text-align: end; font-variant-numeric: tabular-nums; }
.standings-table thead th { border-block-start: 0; color: #7184a4; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.standings-table th:nth-child(2), .standings-table tbody th { min-width: 10rem; text-align: start; }
.standings-table tbody th { color: #dce6f6; font-weight: 750; }
.standings-table tbody td:first-child { color: var(--accent); font-weight: 900; }
.standings-table tbody td:last-child { color: var(--ink); font-weight: 950; }
.standing-row-lion { background: linear-gradient(90deg, rgb(0 133 63 / 54%), rgb(0 133 63 / 22%) 45%, rgb(253 239 66 / 10%)); box-shadow: inset 4px 0 0 var(--senegal-yellow); }
.standing-row-lion th { color: white; font-weight: 950; }
.standing-row-lion td { color: #f5f8ff; }
.standing-row-lion td:first-child { color: var(--senegal-yellow); font-size: 0.82rem; }
.standing-lion-badge { display: inline-flex; margin-inline-start: 0.55rem; padding: 0.2rem 0.38rem; border: 1px solid rgb(253 239 66 / 48%); border-radius: 999px; color: var(--senegal-yellow); background: rgb(4 18 16 / 72%); font-size: 0.5rem; font-weight: 950; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.lion-dot { display: inline-block; width: 0.48rem; aspect-ratio: 1; margin-inline-end: 0.45rem; border-radius: 50%; background: var(--senegal-yellow); box-shadow: 0 0 0.75rem rgb(253 239 66 / 70%); }
.standing-club-logo { width: 1.3rem; height: 1.3rem; margin-inline-end: 0.42rem; object-fit: contain; vertical-align: middle; }
.standings-unavailable { margin: 1rem 0 0; padding: 0.8rem; border: 1px dashed rgb(255 255 255 / 13%); border-radius: 0.75rem; color: var(--muted); font-size: 0.7rem; }

.europe-block { padding: 1.2rem; border-radius: 1.35rem; color: white; background: var(--night); }
.europe-grid, .club-grid { display: grid; gap: 0.75rem; }
.europe-grid article { padding: 1rem; border: 1px solid rgb(255 255 255 / 13%); border-radius: 1rem; background: rgb(255 255 255 / 6%); }
.europe-grid article > span { color: var(--accent); font-size: 0.7rem; font-weight: 950; letter-spacing: 0.12em; }
.europe-grid h3, .club-card h3 { margin: 0.3rem 0 0; }
.europe-grid p { margin-block-end: 0; color: rgb(255 255 255 / 64%); font-size: 0.75rem; line-height: 1.5; }
.club-card {
  width: 100%;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 1rem;
  color: inherit;
  background: var(--card);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease;
}
.club-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.club-card:hover { transform: translateY(-0.15rem); }
.club-action {
  display: inline-block;
  margin-block-start: 0.8rem;
  color: var(--accent);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.club-detail { margin-block: 0.45rem 0; color: var(--ink); font-size: 0.76rem; }
.club-league { margin: 0.35rem 0 0; font-size: 0.75rem; font-weight: 800; }
.club-players { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.7rem; line-height: 1.5; }

.player-filters { display: grid; gap: 0.65rem; margin-block-end: 1rem; }
.player-filters label span { display: block; margin-block-end: 0.3rem; color: var(--muted); font-size: 0.65rem; font-weight: 800; }
.player-filters input, .player-filters select {
  width: 100%;
  min-height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding-inline: 0.75rem;
  color: var(--ink);
  background: var(--card);
}

.player-grid { display: grid; gap: 0.7rem; }
.club-head { display: flex; align-items: center; gap: 0.85rem; }
.club-heading-copy { min-width: 0; }
.club-heading-copy .card-kicker { margin: 0 0 0.25rem; }
.club-heading-copy h3 { margin: 0; }
.club-fanion {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.8rem;
  padding-block-end: 0.35rem;
  color: #06101d;
  background: linear-gradient(145deg, var(--senegal-yellow), #f7b733);
  clip-path: polygon(8% 0, 92% 0, 92% 72%, 50% 100%, 8% 72%);
  filter: drop-shadow(0 0.55rem 0.65rem rgb(0 0 0 / 28%));
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
}
.club-logo { width: 2.4rem; height: 2.4rem; object-fit: contain; }
.club-fanion:has(.club-logo) { width: 3.8rem; padding: 0.45rem; border-radius: 0.85rem; background: white; clip-path: none; font-size: 0; }
.player-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: 0.85rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 95%, transparent);
  box-shadow: 0 0.7rem 1.8rem rgb(16 33 28 / 5%);
  text-align: start;
  cursor: pointer;
}
.player-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
.avatar, .notification-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, var(--night-soft), var(--night));
  font-size: 0.75rem;
  font-weight: 900;
}
.player-photo { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar:has(.player-photo) { font-size: 0; }
.player-name, .player-club, .player-league, .player-position, .player-metric span { display: block; }
.player-name { font-weight: 850; }
.player-club { margin-block-start: 0.22rem; color: var(--ink); font-size: 0.73rem; font-weight: 850; }
.player-league, .player-position, .player-metric span { margin-block-start: 0.18rem; color: var(--muted); font-size: 0.68rem; }
.player-position { color: color-mix(in srgb, var(--accent) 60%, var(--ink)); font-weight: 800; }
.player-metric { text-align: end; }
.player-metric strong { display: block; font-size: 1.05rem; }
.player-arrow { color: var(--muted); }
.player-card-matches { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.player-card-match { min-width: 0; padding: 0.65rem; border: 1px solid var(--line); border-radius: 0.75rem; background: rgb(4 10 21 / 72%); }
.player-card-match small, .player-card-match b { display: block; }
.player-card-match small { margin-block-end: 0.25rem; color: var(--senegal-yellow); font-size: 0.58rem; font-weight: 900; text-transform: uppercase; }
.player-card-match b { overflow: hidden; color: var(--muted); font-size: 0.65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.editor-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.2rem; border: 1px solid rgb(253 239 66 / 28%); border-radius: 1.2rem; background: linear-gradient(135deg, rgb(16 35 66 / 96%), rgb(7 16 31 / 96%)); }
.editor-avatar { display: grid; place-items: center; width: 5rem; aspect-ratio: 1; border: 2px solid var(--senegal-yellow); border-radius: 1.2rem; color: var(--senegal-yellow); background: #07101f; font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.5rem; }
.editor-avatar-yoro {
  background-image: url("./media/yoro-mangara-source.png");
  background-repeat: no-repeat;
  background-position: -296px -299px;
  background-size: 2010px 628px;
}
.editor-card h3 { margin: 0.2rem 0 0.45rem; font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.8rem; text-transform: uppercase; }
.editor-card p:not(.card-kicker) { margin: 0 0 0.65rem; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.editor-card a { color: var(--senegal-yellow); font-size: 0.72rem; font-weight: 900; text-decoration: none; }
.editorial-team-top {
  margin-block-start: 1rem;
  padding: 0;
  border-color: rgb(253 239 66 / 20%);
  background: transparent;
  box-shadow: none;
}
.editorial-team-top::before { display: none; }
.editorial-team-top .editor-card { border-radius: 1.35rem; }
.editorial-team-top .editor-card h2 { margin: 0.15rem 0 0.35rem; font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(1.55rem, 4vw, 2.2rem); text-transform: uppercase; }

.notification-preview {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  overflow: hidden;
  margin-block-start: 2.5rem;
  padding: 1.3rem;
  border-radius: 1.35rem;
  color: white;
  background: linear-gradient(130deg, var(--night-soft), var(--night));
}
.notification-preview::after { position: absolute; inset-inline-end: -3rem; inset-block-end: -4rem; width: 11rem; aspect-ratio: 1; border: 1.1rem solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 50%; content: ""; }
.notification-preview p:last-child { margin-block-end: 0; color: rgb(255 255 255 / 66%); font-size: 0.8rem; line-height: 1.5; }
.notification-icon { color: var(--night); background: var(--accent); }
.notification-pill { grid-column: 2; width: fit-content; padding: 0.35rem 0.55rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: 999px; color: rgb(255 255 255 / 64%); font-size: 0.62rem; }
.notification-form { position: relative; z-index: 1; display: grid; grid-column: 1 / -1; gap: 0.85rem; padding-block-start: 0.5rem; }
.notification-form > label { display: grid; gap: 0.3rem; color: rgb(255 255 255 / 78%); font-size: 0.72rem; font-weight: 800; }
.notification-form input, .notification-form select { min-width: 0; padding: 0.72rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 0.7rem; color: #10221c; background: #e5ece8; font: inherit; }
.notification-form fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.55rem; margin: 0; padding: 0.8rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: 0.8rem; }
.notification-form legend { padding-inline: 0.35rem; font-size: 0.72rem; font-weight: 900; }
.notification-form fieldset label, .notification-consent { display: flex; align-items: flex-start; gap: 0.45rem; color: rgb(255 255 255 / 82%); font-size: 0.7rem; }
.notification-form fieldset input, .notification-form .notification-consent input { min-width: auto; margin-block-start: 0.1rem; padding: 0; }
.notification-form .primary-action { width: fit-content; }
#notification-feedback { min-height: 1.2rem; margin: 0; color: #d8eee4; }

.partner-slot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1rem 0; padding: 1rem; border: 1px dashed color-mix(in srgb, var(--muted) 42%, transparent); border-radius: 1rem; color: var(--muted); font-size: 0.72rem; }
.partner-slot strong { color: var(--ink); }
.fallback { margin-block-start: 1rem; padding: 1.2rem; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--danger) 6%, white); }
.fallback p { color: var(--muted); }

.detail-dialog {
  width: min(calc(100% - 1.5rem), 44rem);
  max-height: min(88vh, 52rem);
  overflow: auto;
  border: 0;
  border-radius: 1.4rem;
  padding: 1.5rem;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 2rem 6rem rgb(7 27 22 / 35%);
}
.detail-dialog::backdrop { background: rgb(6 25 20 / 72%); backdrop-filter: blur(0.25rem); }
.dialog-close { position: sticky; inset-block-start: 0; inset-inline-start: calc(100% - 2.5rem); z-index: 2; display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--card); font-size: 1.5rem; cursor: pointer; }
.detail-dialog h2 { max-width: 18ch; margin-block-start: 0.4rem; font-size: clamp(2rem, 8vw, 3.5rem); line-height: 1; }
.dialog-meta { color: var(--muted); font-size: 0.72rem; }
.dialog-dek { margin-block: 1.2rem; font-size: 1.05rem; font-weight: 650; line-height: 1.55; }
.dialog-body { padding-block-start: 0.3rem; border-block-start: 1px solid var(--line); }
.dialog-body p { line-height: 1.72; }
.correction-note { margin: 1rem 0; padding: 0.8rem 1rem; border-inline-start: 0.25rem solid var(--green, #087443); border-radius: 0.5rem; background: #e8f2ec; color: #12382b; font-weight: 700; }
.player-dialog-head { display: flex; align-items: center; gap: 1rem; }
.avatar-large { flex: 0 0 auto; width: clamp(5.5rem, 10vw, 7.5rem); border: 2px solid color-mix(in srgb, var(--accent) 72%, white); background: #07101f; box-shadow: 0 0 1.8rem color-mix(in srgb, var(--accent) 20%, transparent); font-size: 1.25rem; }
.player-dialog-photo { object-position: center top; }
.player-dialog-head h2 { margin-block-start: 0.15rem; }
.dialog-metric { display: inline-flex; align-items: baseline; gap: 0.5rem; margin-block-start: 1.4rem; padding: 0.8rem 1rem; border-radius: 0.9rem; color: var(--night); background: color-mix(in srgb, var(--accent) 65%, white); }
.dialog-metric strong { font-size: 1.5rem; }
.dialog-metric span { font-size: 0.72rem; font-weight: 700; }
.player-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-block: 1rem; }
.player-stat { padding: 0.7rem; border: 1px solid var(--line); border-radius: 0.8rem; background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.player-stat strong, .player-stat span { display: block; }
.player-stat strong { font-size: 1.05rem; }
.player-stat span { margin-block-start: 0.15rem; color: var(--muted); font-size: 0.65rem; }
.highlights { padding-inline-start: 1.2rem; color: var(--muted); line-height: 1.65; }

.bottom-nav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0.55rem max(0.5rem, env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
  border-block-start: 1px solid rgb(255 255 255 / 10%);
  color: rgb(255 255 255 / 57%);
  background: rgb(6 25 20 / 95%);
  backdrop-filter: blur(1rem);
}
.bottom-nav a { display: grid; place-items: center; gap: 0.15rem; min-height: 2.8rem; font-size: 0.62rem; text-decoration: none; }
.bottom-nav a span { font-size: 1rem; }
.bottom-nav a.active, .bottom-nav a:hover { color: var(--accent); }

[dir="rtl"] .hero-flag { transform: rotate(7deg); }
[dir="rtl"] .hero::before { mask-image: linear-gradient(to right, black, transparent 62%); }

@media (max-width: 39rem) {
  .toolbar { align-items: stretch; flex-direction: column; }
  .country-control select, .feed-status { width: 100%; max-width: none; }
  .hero { min-height: 34rem; }
  .hero-copy { padding-block-start: 3rem; }
  .news-dek { display: none; }
  .player-metric { display: none; }
  .partner-slot { align-items: start; flex-direction: column; }
}

@media (min-width: 40rem) {
  .hero { min-height: 28rem; padding: 2rem; }
  .hero-copy { padding-block: 2rem 5rem; }
  .fixture { inset-inline: auto 1.5rem; inset-block-end: 1.5rem; width: min(23rem, 42%); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .competition-grid { grid-template-columns: repeat(2, 1fr); }
  .season-banner { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; }
  .europe-grid, .club-grid { grid-template-columns: repeat(2, 1fr); }
  .player-filters { grid-template-columns: repeat(2, 1fr); }
  .news-card { grid-template-columns: 7rem 1fr; }
  .news-card-featured { grid-column: 1 / -1; }
  .player-grid { grid-template-columns: repeat(2, 1fr); }
  .brief-card { grid-template-columns: 8rem 1fr; }
  .notification-preview { grid-template-columns: auto 1fr auto; align-items: center; padding: 1.6rem; }
  .notification-pill { grid-column: auto; }
  .notification-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-form fieldset, .notification-form .notification-consent, .notification-form .primary-action, #notification-feedback { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  body { padding-block-end: 2rem; }
  .app-header, main { padding-inline: 1.5rem; }
  .hero { grid-template-columns: minmax(0, 1fr) 22rem; align-items: end; min-height: 32rem; padding: 2.5rem; }
  .hero-copy { padding-block: 2rem 0; }
  .fixture { position: relative; inset: auto; width: auto; margin-block-end: 0; }
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .news-card, .news-card-featured { grid-column: auto; grid-template-columns: 1fr; }
  .news-visual { min-height: 8.5rem; }
  .news-card-featured { grid-row: span 1; }
  .player-grid { grid-template-columns: repeat(3, 1fr); }
  .competition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-grid { grid-template-columns: repeat(3, 1fr); }
  .player-filters { grid-template-columns: 2fr repeat(3, 1fr); }
  .bottom-nav { position: static; width: min(38rem, calc(100% - 2rem)); margin: 2rem auto 0; border-radius: 999px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skeleton { animation: none; }
  .player-card:hover { transform: none; }
}

/* Direction claire « Atlantique » : surfaces ivoire, ciel et vert profond. */
:root {
  color-scheme: light;
  --accent: #146b68;
  --background: #eef7f6;
  --card: #fffefa;
  --ink: #102f3b;
  --muted: #5d747a;
  --night: #123f4b;
  --night-soft: #286c75;
  --line: #c9dfdf;
  --success: #087c4d;
  --warning: #a86606;
  --danger: #b83743;
}

html { background: #dcefee; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgb(90 194 166 / 24%), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgb(102 181 229 / 28%), transparent 34rem),
    linear-gradient(155deg, #f9fcf8 0%, #eaf6f5 48%, #e8f3fb 100%);
}
.app-header { border-color: rgb(17 73 83 / 10%); background: rgb(250 253 250 / 88%); box-shadow: 0 0.5rem 1.8rem rgb(30 91 104 / 8%); }
.brand strong { color: #103843; }
.brand small { color: #417079; }
.language-switcher button { border-color: #bfd7d7; color: #234f58; background: #f8fcfa; }
.language-switcher button.active { border-color: #0b7756; color: white; background: #0b7756; }
.toolbar { border-color: #c8dfdf; background: rgb(255 255 252 / 82%); box-shadow: 0 0.6rem 2rem rgb(23 85 96 / 7%); }
.country-control select { border-color: #bfd7d7; color: var(--ink); background: white; }
.feed-status { color: #526e74; background: #edf5f3; }
.quickbar { background: linear-gradient(180deg, rgb(238 247 246 / 97%), rgb(238 247 246 / 86%)); }
.quickbar a { border-color: #bfd7d7; color: #285761; background: rgb(255 255 255 / 86%); }
.quickbar a:hover { color: #075f47; background: white; }
.quickbar a.active, .quickbar a[aria-current="location"] { border-color: #0b7756; color: white; background: #0b7756; box-shadow: 0 0 0 0.22rem rgb(11 119 86 / 10%); }
.hero { border-color: rgb(255 255 255 / 62%); background: linear-gradient(135deg, #176f69 0%, #267f8e 52%, #559fc5 100%); box-shadow: 0 1.8rem 4.5rem rgb(31 98 111 / 20%); }
.hero h1, .hero .eyebrow, .hero-dek, .hero .demo-badge { color: white; }
.hero .fixture { border-color: rgb(255 255 255 / 24%); background: rgb(7 58 68 / 24%); }
.section-block, .section-block:nth-of-type(even) { border-color: rgb(143 190 191 / 42%); background: rgb(255 254 250 / 88%); box-shadow: 0 1.2rem 3.2rem rgb(33 99 111 / 9%); backdrop-filter: blur(0.5rem); }
.univers-block { background: rgb(255 255 255 / 34%); }
.universe-card { border-color: rgb(255 255 255 / 62%); color: white; background: #176b69; box-shadow: 0 0.9rem 2.2rem rgb(34 101 112 / 15%); }
.universe-card::after { background: linear-gradient(90deg, rgb(12 73 72 / 92%) 0%, rgb(18 92 95 / 72%) 58%, rgb(34 112 137 / 40%) 100%), url("./media/generated/football-universes-v1.jpg") center / cover; }
.briefs-block, .europe-block { color: var(--ink); background: linear-gradient(145deg, rgb(248 253 250 / 96%), rgb(232 245 248 / 96%)); }
.brief-card { border-color: #d7e7e6; }
.brief-card time, .brief-card p:last-child { color: var(--muted); }
.competition-card, .club-card, .player-card, .national-card, .upcoming-club-card, .club-live-card { border-color: #d0e3e2; background: #fffefa; box-shadow: 0 0.7rem 1.8rem rgb(32 91 102 / 7%); }
.competition-card h3, .club-card h3, .player-name, .national-card h3 { color: var(--ink); }
.standings-table tbody th, .standings-table tbody td:last-child { color: #234b54; }
.standings-table thead th { color: #637e83; }
.season-banner, .competitions-summary, .news-archive-box, .match-archive-box { border-color: #cce0df; background: linear-gradient(120deg, #edf8f4, #edf6fb); }
.player-card-match { border-color: #d2e3e3; background: #edf6f5; }
.player-card-match b { color: #4e6b72; }
.participation-badge { border-color: #c0d8d7; color: #516f75; background: white; }
.participation-starter { border-color: #77c7a2; color: #087449; background: #e9f8f0; }
.participation-substitute { border-color: #85bde0; color: #176b96; background: #edf7fd; }
.participation-unused, .participation-absent { border-color: #dfbd80; color: #8b5a08; background: #fff8e9; }
.detail-dialog { border-color: #c9dfdf; color: var(--ink); background: #fffefa; }
.bottom-nav { border-color: #b9d4d4; background: rgb(250 253 251 / 94%); box-shadow: 0 -0.5rem 2rem rgb(28 85 96 / 12%); }
.bottom-nav a { color: #315d65; }

/* Cartes gris ardoise : plus de profondeur sur le fond Atlantique clair. */
:root { --card: #d9e2e2; --muted: #526b71; --line: #b7caca; }
.competition-card, .club-card, .player-card, .national-card, .upcoming-club-card, .club-live-card { border-color: #b6caca; background: linear-gradient(145deg, #e1e8e7, #d4dede); box-shadow: 0 0.7rem 1.8rem rgb(32 72 80 / 11%); }
.season-banner, .competitions-summary, .news-archive-box, .match-archive-box { border-color: #b9cdcc; background: linear-gradient(120deg, #dce7e4, #d8e5e9); }
.player-card-match { border-color: #b9cccc; background: #cbd7d7; }
.club-live-card { color: var(--ink); background-image: linear-gradient(135deg, #dce6e4, #cfdcdf); }
.match-event { border-color: #b5c9c8; background: #ccd8d7; }
.match-event.is-tracked { border-color: #68af8d; background: linear-gradient(100deg, #c9dfd3, #dce6dc); }

/* Cartes gris ardoise : plus de profondeur sur le fond Atlantique clair. */
:root { --card: #d9e2e2; --muted: #526b71; --line: #b7caca; }
.competition-card, .club-card, .player-card, .national-card, .upcoming-club-card, .club-live-card { border-color: #b6caca; background: linear-gradient(145deg, #e1e8e7, #d4dede); box-shadow: 0 0.7rem 1.8rem rgb(32 72 80 / 11%); }
.season-banner, .competitions-summary, .news-archive-box, .match-archive-box { border-color: #b9cdcc; background: linear-gradient(120deg, #dce7e4, #d8e5e9); }
.player-card-match { border-color: #b9cccc; background: #cbd7d7; }
.club-live-card { color: var(--ink); background-image: linear-gradient(135deg, #dce6e4, #cfdcdf); }
.match-event { border-color: #b5c9c8; background: #ccd8d7; }
.match-event.is-tracked { border-color: #68af8d; background: linear-gradient(100deg, #c9dfd3, #dce6dc); }
.brand-manifesto { border-color: #c6dfd9; color: #153f47; background: radial-gradient(circle at 94% 15%, rgb(101 180 229 / 20%), transparent 34%), radial-gradient(circle at 8% 100%, rgb(58 172 123 / 22%), transparent 35%), linear-gradient(135deg, #f8fcf5, #e8f5ef 58%, #e8f3fa); box-shadow: 0 1rem 2.8rem rgb(33 99 111 / 10%); }
.brand-manifesto h1 { color: #164b56; }
.brand-manifesto p { color: #527078; }
.brand-manifesto-kicker { color: #0b7756; }
.hero-senegal { background-image: linear-gradient(90deg, rgb(12 72 76 / 86%) 0%, rgb(20 94 101 / 66%) 48%, rgb(46 111 138 / 30%) 100%), url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Jubilation_apr%C3%A8s_un_but.jpg/1920px-Jubilation_apr%C3%A8s_un_but.jpg"); }
.club-live-card { color: var(--ink); background-image: linear-gradient(135deg, #f6fcf9, #eaf5f8); }
.match-event { border-color: #c9dedd; background: #f4f9f7; }
.match-event.is-tracked { border-color: #7bc3a1; background: linear-gradient(100deg, #e6f6ed, #f8fbf4); }

@media (max-width: 39.99rem) {
  .news-archive-box { align-items: stretch; flex-direction: column; }
}

/* Identité Sénégal — adaptée du build Qualif Gaïndé appartenant au projet. */
:root {
  color-scheme: dark;
  --accent: #eeca5c;
  --background: #071f2f;
  --card: #102f3d;
  --ink: #fdf8ee;
  --muted: #c8ba9f;
  --night: #071f2f;
  --night-soft: #124c56;
  --line: #2d6670;
  --success: #3ddc84;
  --warning: #ffb020;
  --danger: #ff6b74;
  --senegal-green: #00853f;
  --senegal-yellow: #fdef42;
  --senegal-red: #e31e24;
}

html { background: var(--background); }
body {
  background:
    radial-gradient(circle at 18% -8%, rgb(0 133 63 / 42%) 0, transparent 30rem),
    radial-gradient(circle at 105% 18%, rgb(65 160 205 / 38%) 0, transparent 36rem),
    radial-gradient(circle at 50% 110%, rgb(22 105 122 / 32%) 0, transparent 40rem),
    linear-gradient(180deg, #0c3d4c, #071f2f 72%);
  background-attachment: fixed;
}

.news-archive-box, .match-archive-box { margin-block-start: 1rem; padding: 1rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: 1rem; background: rgb(8 38 48 / 72%); }
.news-archive-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.news-archive-box p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.75rem; }
.match-archive-box summary { cursor: pointer; color: var(--accent); font-weight: 900; }
.club-history-grid { display: grid; gap: 0.7rem; margin-block-start: 1rem; }
.club-history-card { display: grid; gap: 0.45rem; padding: 0.9rem; border: 1px solid rgb(255 255 255 / 11%); border-radius: 0.85rem; background: rgb(255 255 255 / 5%); }
.participation-badge { display: inline-flex; margin-inline: 0.2rem 0.55rem; padding: 0.2rem 0.45rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px; color: var(--muted); font-size: 0.57rem; font-weight: 900; }
.participation-starter { color: #b8ffd5; border-color: rgb(61 220 132 / 50%); }
.participation-substitute { color: #b9dcff; border-color: rgb(74 163 255 / 50%); }
.participation-unused, .participation-absent { color: #ffd4b3; border-color: rgb(255 176 32 / 48%); }

.app-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  max-width: none;
  padding-inline: max(1rem, calc((100vw - 76rem) / 2));
  border-block-end: 1px solid rgb(255 255 255 / 9%);
  background: rgb(15 10 5 / 91%);
  backdrop-filter: blur(1rem);
}

.brand-mark {
  border-radius: 50%;
  color: #06101d;
  background: linear-gradient(145deg, var(--senegal-yellow), var(--accent), var(--senegal-green));
  box-shadow: 0 0 0 1px rgb(253 239 66 / 38%), 0 0.7rem 1.6rem rgb(0 0 0 / 48%);
}
.brand-mark::after {
  position: absolute;
  width: 1.5rem;
  height: 0.18rem;
  margin-block-start: 2.2rem;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--senegal-green) 0 33%, var(--senegal-yellow) 33% 66%, var(--senegal-red) 66%);
  content: "";
}
.brand strong { text-transform: uppercase; letter-spacing: 0.08em; }
.brand small { max-width: 24rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; }
.header-actions, .language-switcher { display: flex; align-items: center; gap: 0.35rem; }
.language-switcher button {
  min-width: 2rem;
  padding: 0.38rem 0.48rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  color: #dce6f6;
  background: rgb(255 255 255 / 5%);
  font-size: 0.62rem;
  font-weight: 900;
  cursor: pointer;
}
.language-switcher button.active {
  border-color: var(--senegal-green);
  color: white;
  background: var(--senegal-green);
}
.language-switcher button:disabled { opacity: 0.42; cursor: not-allowed; }
.language-switcher button[hidden] { display: none; }

/* Thèmes nationaux du socle multi-pays. Les surfaces restent claires et lisibles. */
body[data-theme="ivory-coast"] {
  background:
    radial-gradient(circle at 8% 0%, rgb(232 117 22 / 32%), transparent 30rem),
    linear-gradient(155deg, #fff 0%, #f7eee6 55%, #ead8ca 100%);
}
body[data-theme="morocco"] {
  background:
    radial-gradient(circle at 92% 4%, rgb(193 39 45 / 30%), transparent 32rem),
    linear-gradient(155deg, #fff 0%, #f5e9e9 55%, #e8cecf 100%);
}
body[data-theme="cape-verde"] {
  background:
    radial-gradient(circle at 10% 0%, rgb(22 74 138 / 32%), transparent 30rem),
    radial-gradient(circle at 92% 16%, rgb(196 39 47 / 18%), transparent 26rem),
    linear-gradient(155deg, #fff 0%, #edf3fa 55%, #d6e2f0 100%);
}

.toolbar {
  align-items: center;
  margin-block: 1rem;
  padding: 0.75rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1rem;
  background: rgb(25 18 9 / 78%);
}
.country-control select {
  border-color: rgb(255 255 255 / 15%);
  color: var(--ink);
  background: #221809;
}
.feed-status { color: var(--muted); background: rgb(255 255 255 / 7%); }
.feed-status.success { color: var(--success); background: rgb(61 220 132 / 10%); }
.feed-status.warning { color: var(--warning); background: rgb(255 176 32 / 10%); }
.feed-status.danger { color: var(--danger); background: rgb(255 107 116 / 10%); }

.hero {
  min-height: 27rem;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at 10% 8%, rgb(201 164 59 / 18%), transparent 30%),
    linear-gradient(145deg, #3d2712, #17110a);
  box-shadow: 0 1.8rem 5rem rgb(0 0 0 / 48%);
}
.hero::after {
  position: absolute;
  inset-inline-end: -4rem;
  inset-block-start: -5rem;
  z-index: -1;
  width: 18rem;
  aspect-ratio: 1;
  border: 1px solid rgb(201 164 59 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 2.2rem rgb(201 164 59 / 5%), 0 0 0 5rem rgb(201 164 59 / 3%);
  content: "";
}
.hero h1, .section-heading h2, .universe-card strong, .national-card h3 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero h1 { max-width: 10ch; font-size: clamp(3.6rem, 10vw, 7.2rem); line-height: 0.86; }
.hero-dek { max-width: 44rem; color: #d6e0ee; }
.hero-flag { filter: saturate(1.15); }
.eyebrow { color: var(--accent); letter-spacing: 0.13em; }
.primary-action, .install-button, .fallback button { color: #06101d; background: var(--senegal-yellow); }

.quickbar {
  position: sticky;
  inset-block-start: 4.3rem;
  z-index: 30;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 0.7rem;
  scrollbar-width: none;
  background: linear-gradient(180deg, rgb(14 10 5 / 97%), rgb(14 10 5 / 82%));
}
.quickbar a {
  flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 999px;
  color: #dce6f6;
  background: rgb(255 255 255 / 5%);
  font-size: 0.66rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}
.quickbar a:hover { color: var(--senegal-yellow); background: rgb(255 255 255 / 10%); }
.quickbar a.active, .quickbar a[aria-current="location"] {
  border-color: rgb(253 239 66 / 66%);
  color: #06101d;
  background: var(--senegal-yellow);
  box-shadow: 0 0 0 0.22rem rgb(253 239 66 / 10%);
}

.section-block {
  position: relative;
  margin-block-start: 3rem;
  padding: clamp(1.15rem, 2.5vw, 2rem);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.75rem;
  scroll-margin-top: 8rem;
  background: linear-gradient(145deg, rgb(49 31 14 / 88%), rgb(20 13 6 / 94%));
  box-shadow: 0 1.4rem 3.5rem rgb(0 0 0 / 22%);
}
.section-block::before {
  position: absolute;
  inset-block: 1.4rem;
  inset-inline-start: 0;
  width: 0.22rem;
  border-radius: 0 99px 99px 0;
  background: var(--chapter-accent, var(--accent));
  box-shadow: 0 0 1.4rem var(--chapter-accent, var(--accent));
  content: "";
}
.section-block:nth-of-type(even) { background: linear-gradient(145deg, rgb(17 45 31 / 75%), rgb(20 13 6 / 94%)); }
#national, #memoire-mondial { --chapter-accent: var(--senegal-green); }
#weekend, #europe { --chapter-accent: #4aa3ff; }
#breves { --chapter-accent: var(--senegal-red); }
#competitions, #clubs { --chapter-accent: var(--senegal-yellow); }
#joueurs { --chapter-accent: #a878ff; }
.univers-block { border-color: rgb(238 202 92 / 12%); background: rgb(14 10 5 / 42%); box-shadow: none; }
.univers-block::before { display: none; }
.section-heading h2 { font-size: clamp(2rem, 6vw, 3.5rem); }
.section-count { color: var(--muted); }

.universe-grid { display: grid; gap: 0.85rem; }
.universe-card {
  position: relative;
  display: flex;
  min-height: 11.5rem;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.35rem;
  color: var(--ink);
  background: linear-gradient(145deg, rgb(45 29 13 / 96%), rgb(20 13 7 / 98%));
  box-shadow: 0 0.9rem 2.2rem rgb(0 0 0 / 24%);
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease;
}
.universe-card:hover { border-color: rgb(253 239 66 / 55%); transform: translateY(-0.2rem); }
.universe-card::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.78;
  background:
    linear-gradient(90deg, rgb(18 11 5 / 93%) 0%, rgb(18 11 5 / 74%) 56%, rgb(18 11 5 / 32%) 100%),
    url("./media/generated/football-universes-v1.jpg") center / cover;
  transition: opacity 180ms ease, transform 300ms ease;
  content: "";
}
.universe-card:hover::after { opacity: 0.95; transform: scale(1.025); }
.universe-card-national::after { background-position: 4% center; }
.universe-card-weekend::after { background-position: 22% center; }
.universe-card-competitions::after { background-position: 48% center; }
.universe-card-europe::after { background-position: 60% center; filter: hue-rotate(25deg); }
.universe-card-clubs::after { background-position: 76% center; }
.universe-card-players::after { background-position: 96% center; }
.universe-card-briefs::after {
  background:
    linear-gradient(90deg, rgb(18 11 5 / 87%), rgb(18 11 5 / 38%)),
    url("./media/generated/breves-gaindes-editorial-v1.jpg") center 58% / cover;
}

.gaindes-portals {
  display: grid;
  gap: 1.25rem;
  margin-block: 1.5rem;
}
.gaindes-portal {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(238 202 92 / 30%);
  border-radius: 1.6rem;
  color: var(--ink);
  background: linear-gradient(135deg, #1d2514, #261307);
  box-shadow: 0 1.1rem 3rem rgb(0 0 0 / 30%);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease;
}
.gaindes-portal:hover { border-color: rgb(238 202 92 / 65%); transform: translateY(-0.18rem); }
.gaindes-portal-media { min-height: 19rem; background-position: center; background-size: cover; }
.gaindes-portal-tracking .gaindes-portal-media { background-image: url("./media/generated/suivi-gaindes-lion-v1.jpg"); background-position: 28% center; }
.gaindes-portal-briefs .gaindes-portal-media { background-image: url("./media/generated/breves-gaindes-editorial-v1.jpg"); background-position: center 58%; }
.gaindes-portal-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(1.35rem, 4vw, 3rem); }
.gaindes-portal-copy small { color: var(--accent); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.13em; text-transform: uppercase; }
.gaindes-portal-copy strong { display: block; margin-block: 0.6rem 0.8rem; font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(2.8rem, 7vw, 5.7rem); font-weight: 400; line-height: 0.92; letter-spacing: 0.035em; text-transform: uppercase; }
.gaindes-portal-copy p { max-width: 54rem; margin: 0; color: var(--muted); font-size: clamp(0.9rem, 1.5vw, 1.12rem); line-height: 1.6; }
.gaindes-portal-copy b { display: block; margin-block-start: 1.1rem; color: var(--accent); font-size: 0.95rem; }
.universe-card > span {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-end: 1rem;
  z-index: 1;
  color: rgb(255 255 255 / 13%);
  font-family: Impact, sans-serif;
  font-size: 4rem;
  line-height: 1;
}
.universe-card small {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-block-end: auto;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgb(201 164 59 / 34%);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.universe-card strong { position: relative; z-index: 1; font-size: 1.65rem; line-height: 1; }
.universe-card p { position: relative; z-index: 1; max-width: 38rem; margin-block: 0.55rem 0; color: #e9dcc4; font-size: 0.8rem; text-shadow: 0 1px 4px rgb(0 0 0 / 70%); }
.universe-card-featured { min-height: 14rem; background: radial-gradient(circle at 80% 20%, rgb(208 106 36 / 34%), transparent 35%), linear-gradient(145deg, #402711, #17110a); }

.hero-key-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  max-width: 38rem;
  margin-block-start: 1rem;
}
.hero-key-figures span {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 0.8rem;
  background: rgb(23 16 8 / 76%);
}
.hero-key-figures strong { color: var(--senegal-yellow); font-size: clamp(1.75rem, 4vw, 2.65rem); line-height: 0.95; }
.hero-key-figures small { color: var(--muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

.national-grid { display: grid; gap: 0.8rem; }
.national-card, .coming-card {
  padding: 1.2rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgb(45 29 13 / 94%), rgb(20 13 7 / 97%));
  box-shadow: 0 0.9rem 2.2rem rgb(0 0 0 / 24%);
}
.national-card h3 { margin-block: 0.8rem 0.25rem; font-size: 2.25rem; }
.national-card > strong { display: block; color: var(--senegal-yellow); font-family: Impact, sans-serif; font-size: 4rem; line-height: 1; }
.national-card p, .coming-card p { color: var(--muted); line-height: 1.55; }
.national-card small { color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; }
.national-history-card { grid-column: 1 / -1; }
.national-identity, .national-proof { color: var(--muted); font-weight: 800; }
.national-record-label { margin-block-end: 0.5rem; font-size: 0.72rem; }
.national-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.national-metrics span { padding: 0.55rem 0.35rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: 0.7rem; text-align: center; background: rgb(255 255 255 / 4%); }
.national-metrics strong, .national-metrics small { display: block; }
.national-metrics strong { color: var(--senegal-yellow); font-size: 1.15rem; }
.national-metrics small { margin-block-start: 0.2rem; color: var(--muted); font-size: 0.48rem; }
.national-coach { display: grid; grid-template-columns: 2.8rem 1fr; gap: 0.7rem; align-items: center; margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid rgb(255 255 255 / 10%); }
.national-coach-avatar { display: grid; place-items: center; width: 2.8rem; aspect-ratio: 1; border: 1px solid rgb(253 239 66 / 35%); border-radius: 50%; color: var(--senegal-yellow); background: #17110a; font-family: Impact, sans-serif; font-size: 1.2rem; }
.national-coach b, .national-coach small { display: block; }
.national-coach small { color: var(--accent); font-size: 0.55rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.national-coach p { margin: 0.2rem 0 0; font-size: 0.65rem; }
.national-coach-history { margin-block: 0.9rem 0; padding: 0.8rem; border-inline-start: 0.2rem solid var(--senegal-yellow); color: #e9dcc4; background: rgb(253 239 66 / 5%); font-size: 0.7rem; line-height: 1.55; }
.national-coach-sources a { color: var(--senegal-yellow); font-size: 0.6rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.national-rankings { margin-block: 0.75rem 0; padding: 0.6rem 0.7rem; border-radius: 0.65rem; background: rgb(255 255 255 / 5%); font-size: 0.65rem; }
.national-rankings-pending { border: 1px dashed rgb(255 255 255 / 14%); }
.national-history-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem; }
.national-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.national-filters select { min-height: 2.3rem; max-width: 15rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: 0.65rem; padding: 0.45rem 1.8rem 0.45rem 0.6rem; color: var(--ink); background: #17110a; font-size: 0.68rem; }
.national-match {
  display: grid;
  gap: 0.3rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}
.national-match:last-child { border-bottom: 0; }
.national-match time, .national-match small { color: var(--muted); font-size: 0.7rem; }
.national-match-fixture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}
.national-match-fixture bdi:last-child { text-align: end; }
.national-match-fixture strong { color: var(--senegal-yellow); font-size: 1.05rem; }
.national-empty { margin-block: 1rem 0; color: var(--muted); }
.upcoming-club-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.upcoming-club-head p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.club-fixture-grid { display: grid; gap: clamp(0.55rem, 1.6vw, 0.9rem); margin-block-end: 0.8rem; }
.club-upcoming-grid, .club-live-grid { display: contents; }
.club-live-card { min-height: 19rem; padding: clamp(1.35rem, 3.4vw, 2.4rem); border: 1px solid #ff334f; border-radius: 1.35rem; background: linear-gradient(145deg, rgb(75 8 20 / 94%), rgb(22 13 7 / 98%)); box-shadow: 0 0 2.4rem rgb(255 25 61 / 18%); }
.club-live-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 0.65rem; }
.live-badge { padding: 0.32rem 0.55rem; border-radius: 999px; color: #fff; background: #e0002a; font-size: 0.7rem; font-weight: 950; letter-spacing: 0.08em; animation: live-pulse 1.5s infinite; }
.club-finished-card { border-color: rgb(238 202 92 / 36%); background: linear-gradient(145deg, rgb(55 36 16 / 96%), rgb(22 13 7 / 98%)); box-shadow: 0 1.1rem 2.6rem rgb(0 0 0 / 24%); }
.live-badge-finished { background: #71613f; animation: none; }
.live-minute { color: var(--senegal-yellow); font-size: clamp(1.1rem, 3vw, 1.7rem); font-weight: 950; }
.club-live-card:not(.club-finished-card) .live-minute,
.player-match-card.is-live .live-minute { color: #4cff9a; text-shadow: 0 0 0.8rem rgb(76 255 154 / 35%); }
.player-match-card.is-live { border-color: #ff334f; background: linear-gradient(145deg, rgb(75 8 20 / 80%), #07101f); }
@keyframes live-pulse { 50% { opacity: 0.65; } }
.upcoming-club-card { position: relative; display: flex; min-width: 0; min-height: 19rem; overflow: hidden; flex-direction: column; justify-content: space-between; padding: clamp(0.65rem, 1.8vw, 1rem); border: 1px solid rgb(255 255 255 / 14%); border-radius: 1.1rem; background: linear-gradient(145deg, rgb(45 29 13 / 96%), rgb(20 13 7 / 98%)); }
.upcoming-club-card .card-kicker { overflow: hidden; margin-block: 0.35rem; font-size: clamp(0.52rem, 1.4vw, 0.68rem); text-overflow: ellipsis; white-space: nowrap; }
.upcoming-club-card .upcoming-club-date { margin: 0.25rem 0; font-size: clamp(0.58rem, 1.45vw, 0.75rem); }
.upcoming-club-card .upcoming-club-lions { gap: 0.28rem; font-size: clamp(0.58rem, 1.4vw, 0.72rem); }
.match-countdown { display: flex; width: fit-content; margin-block-end: 0.9rem; padding: 0.55rem 0.8rem; border-radius: 0.75rem; color: #06101d; background: var(--senegal-yellow); box-shadow: 0 0 1.2rem rgb(255 238 45 / 18%); font-size: clamp(0.86rem, 1.4vw, 1.05rem); font-variant-numeric: tabular-nums; font-weight: 950; letter-spacing: 0.015em; white-space: nowrap; }
.upcoming-club-fixture { display: grid; grid-template-columns: minmax(0, 12rem) auto minmax(0, 12rem); justify-content: center; gap: 0.75rem; align-items: center; margin-block: 0.75rem; }
.club-live-card .upcoming-club-fixture { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(0.75rem, 2vw, 1.6rem); margin-block: 1.4rem; }
.club-live-card .upcoming-club-fixture strong { font-size: clamp(1.15rem, 3vw, 2rem); line-height: 1.08; }
.club-live-card .upcoming-club-fixture strong, .upcoming-club-card .upcoming-club-fixture strong { min-width: 0; overflow-wrap: anywhere; }
.club-live-card .upcoming-club-fixture span { min-width: 5rem; padding: 0.55rem 0.8rem; border-radius: 0.9rem; color: #fff; background: #123f35; font-size: clamp(1.55rem, 4vw, 2.5rem); font-weight: 950; text-align: center; }
.upcoming-club-fixture strong:first-child { text-align: end; }
.upcoming-club-fixture strong:last-child { text-align: start; }
.upcoming-club-fixture span { color: var(--senegal-yellow); font-size: 1.2rem; font-weight: 900; }
.upcoming-club-date { margin: 0; color: var(--muted); font-size: 0.68rem; }
.upcoming-club-lions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-block-start: 0.8rem; }
.tracked-player-label { align-self: center; color: var(--muted); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.035em; text-transform: uppercase; }
.world-cup-block {
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 38%),
    linear-gradient(135deg, #211508, #2d1d0d);
}
.world-cup-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block-end: 1rem;
}
.world-cup-summary span {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgb(23 16 8 / 78%);
}
.world-cup-summary strong { color: var(--accent); font-size: 1.8rem; }
.world-cup-summary small { color: var(--muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.world-cup-matches { display: grid; gap: 0.75rem; }
.world-cup-matches .national-match { padding: 0.9rem; border: 1px solid var(--line); border-radius: 0.9rem; background: rgb(23 16 8 / 68%); }
.section-link { color: var(--accent); font-size: 0.72rem; font-weight: 800; text-decoration: none; }
.senegal-flag { display: inline-grid; grid-template-columns: repeat(3, 1fr); width: 4rem; height: 1.7rem; overflow: hidden; border-radius: 0.25rem; box-shadow: 0 0.5rem 1.2rem rgb(0 0 0 / 35%); }
.senegal-flag i:nth-child(1) { background: var(--senegal-green); }
.senegal-flag i:nth-child(2) { position: relative; background: var(--senegal-yellow); }
.senegal-flag i:nth-child(2)::after { position: absolute; inset: 50% auto auto 50%; color: var(--senegal-green); content: "★"; font-size: 0.7rem; transform: translate(-50%, -50%); }
.senegal-flag i:nth-child(3) { background: var(--senegal-red); }
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 999px;
  color: #dbe6f7;
  background: rgb(255 255 255 / 5%);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}
.source-badge::before { width: 0.45rem; aspect-ratio: 1; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0.2rem rgb(61 220 132 / 12%); content: ""; }
.source-badge-pending::before { background: var(--warning); box-shadow: 0 0 0 0.2rem rgb(255 176 32 / 12%); }
.coming-card strong { display: block; font-size: 1.2rem; }

.news-card, .brief-card, .competition-card, .europe-grid article, .club-card, .player-card {
  border-color: rgb(255 255 255 / 14%);
  background: linear-gradient(145deg, rgb(45 29 13 / 94%), rgb(20 13 7 / 97%));
  box-shadow: 0 0.9rem 2.2rem rgb(0 0 0 / 22%);
}
.news-card:hover, .competition-card:hover, .club-card:hover, .player-card:hover { border-color: rgb(253 239 66 / 52%); }
.news-visual, .player-avatar { background: #35230f; }
.briefs-block { background: radial-gradient(circle at 100% 0, rgb(208 106 36 / 26%), transparent 34%), linear-gradient(145deg, rgb(49 31 14 / 94%), rgb(20 13 7 / 97%)); }
.europe-block { background: radial-gradient(circle at 100% 0, rgb(0 133 63 / 18%), transparent 34%), linear-gradient(145deg, rgb(49 31 14 / 94%), rgb(20 13 7 / 97%)); }
.brief-card time, .news-meta, .competition-clubs, .club-players, .player-position, .player-league { color: var(--muted); }
.competition-card-active { border-color: rgb(61 220 132 / 32%); }
.competition-status { color: var(--success); }
.europe-grid article > span { color: #06101d; background: var(--senegal-yellow); }
.player-filters { padding: 0.85rem; border: 1px solid rgb(255 255 255 / 11%); border-radius: 1rem; background: rgb(25 18 9 / 82%); }
.player-filters input, .player-filters select { border-color: var(--line); color: var(--ink); background: #221809; }
.player-name { font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.2rem; letter-spacing: 0.04em; text-transform: uppercase; }
.player-metric { min-width: 3.2rem; padding: 0.42rem 0.5rem; border: 1px solid rgb(61 220 132 / 34%); border-radius: 0.7rem; color: var(--ink); background: linear-gradient(145deg, rgb(0 133 63 / 22%), rgb(7 16 31 / 92%)); }
.player-metric span { color: var(--success); }
.notification-preview { border: 1px solid rgb(255 255 255 / 14%); background: linear-gradient(145deg, #3d2712, #17110a); }
.notification-icon { background: var(--senegal-yellow); }
.partner-slot { border-color: rgb(255 255 255 / 18%); }
.partner-slot strong { color: var(--ink); }
.detail-dialog { border: 1px solid var(--line); color: var(--ink); background: #221809; box-shadow: 0 2rem 6rem rgb(0 0 0 / 65%); }
.detail-dialog::backdrop { background: rgb(12 8 4 / 86%); }
.dialog-close { color: var(--ink); background: #17110a; }
.dialog-metric { border: 1px solid rgb(61 220 132 / 38%); color: var(--ink); background: linear-gradient(145deg, rgb(0 133 63 / 28%), rgb(7 16 31 / 96%)); }
.dialog-metric span { color: var(--success); }
.editorial-analysis, .article-sources { margin-block: 1.25rem; padding: 1rem; border-inline-start: 0.22rem solid var(--accent); background: #17110a; }
.editorial-analysis h3, .article-sources h3 { margin-block-start: 0; }
.article-image { margin: 1.25rem 0; }
.article-image img { display: block; width: 100%; max-height: 28rem; object-fit: cover; border-radius: 0.8rem; }
.article-image figcaption { margin-block-start: 0.45rem; color: var(--muted); font-size: 0.7rem; }
.article-image a, .article-sources a { color: var(--accent); }
.player-stat { border-color: rgb(255 255 255 / 12%); background: #17110a; }
.player-match-grid { display: grid; gap: 0.7rem; margin-block: 1rem; }
.player-match-card { padding: 0.9rem; border: 1px solid var(--line); border-radius: 0.9rem; background: #17110a; }
.player-match-card small, .player-match-card time { display: block; color: var(--muted); font-size: 0.68rem; }
.player-match-card small { margin-block-end: 0.45rem; color: var(--accent); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.player-match-card strong { display: block; margin-block-end: 0.35rem; }
.player-match-performance { margin-block: 0.55rem 0; color: var(--ink); font-size: 0.75rem; }
.player-match-summary { margin-block: 0.7rem 0.25rem; line-height: 1.55; }
.player-match-summary-heading { display: block; margin-top: 0.85rem; color: var(--green); }
.player-match-editorial { padding-left: 0.75rem; border-left: 3px solid var(--green); }
.player-match-summary-date { color: var(--muted); font-size: 0.68rem; }
.bottom-nav { background: rgb(15 10 5 / 96%); }

.editor-card { padding: 0; overflow: hidden; }
.editor-card-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem;
  color: inherit;
  text-decoration: none;
}
.editor-card-link:hover { background: rgb(238 202 92 / 7%); }
.editor-card-copy { display: grid; gap: 0.35rem; }
.editor-card-copy > strong { font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: 0.025em; text-transform: uppercase; }
.editor-card-copy > span:not(.card-kicker, .editor-card-cta) { color: var(--muted); line-height: 1.55; }
.editor-card-cta { margin-block-start: 0.35rem; color: var(--accent); font-size: 0.78rem; font-weight: 900; }

.briefs-editorial-lead {
  display: grid;
  grid-template-columns: minmax(17rem, 0.95fr) minmax(18rem, 1.25fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
  margin-block: 0.8rem 1.5rem;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: 1px solid rgb(238 202 92 / 30%);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #2b1b0b, #171008);
  box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 25%);
}
.briefs-editorial-visual {
  min-height: clamp(16rem, 30vw, 23rem);
  border-radius: 1.15rem;
  background: url("./media/generated/breves-gaindes-editorial-v1.jpg") 30% center / cover;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
}
body[data-country="CI"] .briefs-editorial-visual {
  background-image: url("./media/generated/totem-elephant-ci-v1.png");
  background-position: center 42%;
}
body[data-country="MA"] .briefs-editorial-visual {
  background-image: url("./media/generated/totem-lion-atlas-ma-v1.png");
  background-position: center 36%;
}
.briefs-editorial-copy h3 { max-width: 16ch; margin: 0.8rem 0; font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(2rem, 5vw, 4rem); line-height: 0.96; letter-spacing: 0.015em; text-transform: uppercase; }
.briefs-editorial-copy p { max-width: 52rem; color: var(--muted); font-size: clamp(0.9rem, 1.5vw, 1.08rem); line-height: 1.55; }
.briefs-editorial-copy a { color: var(--accent); font-weight: 900; text-decoration: none; }
.briefs-editorial-label { display: inline-flex; width: fit-content; padding: 0.42rem 0.65rem; border: 1px solid rgb(238 202 92 / 35%); border-radius: 999px; color: var(--accent); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }

.mangara-space { background: radial-gradient(circle at 100% 0, rgb(208 106 36 / 22%), transparent 34%), linear-gradient(145deg, rgb(49 31 14 / 94%), rgb(20 13 7 / 97%)); }
.mangara-space-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.mangara-space-intro h2 { margin: 0.25rem 0 0.45rem; font-size: clamp(2rem, 6vw, 4rem); }
.mangara-space-intro p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }
.mangara-featured, .mangara-articles { display: grid; gap: 0.8rem; margin-block-start: 1rem; }
.mangara-articles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.mangara-article-card, .mangara-empty { padding: 1rem; border: 1px solid rgb(255 255 255 / 13%); border-radius: 1rem; background: rgb(23 16 8 / 76%); }
.mangara-article-card button { border: 0; padding: 0; color: var(--accent); background: transparent; font-weight: 900; cursor: pointer; }
.mangara-article-card h3 { margin: 0.55rem 0; }
.mangara-article-card p, .mangara-empty { color: var(--muted); line-height: 1.5; }
.mangara-article-meta { color: var(--accent); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; }

.match-index { margin-block-start: 1rem; padding: 0.85rem; border: 1px solid rgb(238 202 92 / 24%); border-radius: 0.9rem; background: rgb(10 7 3 / 55%); }
.match-index-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-block-end: 0.65rem; }
.match-index-title { color: var(--accent); font-size: 0.68rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }
.match-index-confidence { color: var(--muted); font-size: 0.58rem; }
.match-index-bar { display: flex; min-height: 0.75rem; overflow: hidden; border-radius: 999px; background: #100b05; }
.match-index-segment { min-width: 0.15rem; transition: width 500ms ease; }
.match-index-segment-home { background: #138d50; }
.match-index-segment-draw { background: #d99c28; }
.match-index-segment-away { background: #c83c43; }
.match-index-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; margin-block-start: 0.55rem; font-size: 0.65rem; }
.match-index-labels span:nth-child(2) { text-align: center; }
.match-index-labels span:last-child { text-align: end; }
.match-index-labels b { display: block; color: var(--ink); font-size: 0.8rem; }
.match-index-note { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.58rem; line-height: 1.4; }
.match-index-history { display: grid; gap: 0.35rem; margin-block-start: 0.7rem; padding-block-start: 0.7rem; border-block-start: 1px solid rgb(255 255 255 / 10%); }
.match-index-history-row { display: grid; grid-template-columns: minmax(4rem, auto) 1fr auto; gap: 0.55rem; align-items: center; font-size: 0.62rem; }
.match-index-history-row progress { width: 100%; accent-color: var(--senegal-green); }
.club-live-card .match-index { margin-block-start: 1.35rem; padding: clamp(1rem, 2.2vw, 1.35rem); }
.club-live-card .match-index-bar { min-height: 1.05rem; }
.club-live-card .match-index-title { font-size: clamp(0.78rem, 1.4vw, 1rem); }
.club-live-card .match-index-labels { font-size: clamp(0.68rem, 1.2vw, 0.86rem); }
.club-live-card .match-index-labels b { font-size: clamp(0.9rem, 1.7vw, 1.2rem); }

.indice-info { position: relative; width: fit-content; margin: 0.85rem 0 1rem auto; }
.indice-info summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.2rem; padding: 0.45rem 0.75rem; border: 1px solid rgb(238 202 92 / 42%); border-radius: 999px; color: var(--accent); background: rgb(19 12 7 / 90%); font-size: 0.72rem; cursor: pointer; list-style: none; }
.indice-info summary::-webkit-details-marker { display: none; }
.indice-info summary:focus-visible { outline: 3px solid var(--senegal-yellow); outline-offset: 3px; }
.indice-info-popover { position: absolute; inset-block-start: calc(100% + 0.55rem); inset-inline-end: 0; z-index: 12; width: min(30rem, calc(100vw - 3rem)); padding: 1rem; border: 1px solid rgb(238 202 92 / 55%); border-radius: 1rem; color: var(--ink); background: rgb(20 13 7 / 98%); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 58%); }
.indice-info-popover > p { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.75rem; }
.indice-info-popover ol { display: grid; gap: 0.6rem; margin: 0; padding-inline-start: 1.2rem; }
.indice-info-popover li strong, .indice-info-popover li span { display: block; }
.indice-info-popover li strong { color: var(--accent); font-size: 0.75rem; }
.indice-info-popover li span { margin-block-start: 0.12rem; color: var(--muted); font-size: 0.68rem; }

.standings-wrap.is-collapsed tbody tr:nth-child(n + 6) { display: none; }
.club-grid.is-collapsed .club-card:nth-child(n + 4) { display: none; }

.expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: min(100%, 34rem);
  min-height: 3rem;
  margin: 1rem auto 0;
  padding: 0.7rem 1rem;
  border: 1px solid rgb(238 202 92 / 56%);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, rgb(62 39 16 / 96%), rgb(27 18 9 / 98%));
  box-shadow: 0 0.7rem 1.8rem rgb(0 0 0 / 22%);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}
.expand-toggle[hidden] { display: none; }
.expand-toggle:hover { border-color: var(--accent); background: linear-gradient(135deg, rgb(78 48 18 / 98%), rgb(34 22 10 / 98%)); }
.expand-toggle:focus-visible { outline: 3px solid var(--senegal-yellow); outline-offset: 3px; }
.expand-toggle-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #171006;
  background: var(--accent);
  font-size: 0.9rem;
  line-height: 1;
}

@media (min-width: 40rem) {
  .gaindes-portal { grid-template-columns: minmax(17rem, 38%) minmax(0, 1fr); }
  .universe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .universe-card-featured { grid-column: 1 / -1; }
  .national-grid { grid-template-columns: 0.75fr 1.25fr; }
  .world-cup-matches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-fixture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .club-live-card, .upcoming-club-card { height: 100%; }
  .club-live-card { padding: clamp(0.9rem, 1.7vw, 1.25rem); }
  .club-live-card .upcoming-club-fixture { gap: clamp(0.4rem, 1vw, 0.8rem); margin-block: 0.85rem; }
  .club-live-card .upcoming-club-fixture strong { font-size: clamp(0.9rem, 1.7vw, 1.25rem); }
  .club-live-card .upcoming-club-fixture span { min-width: 3.7rem; padding: 0.42rem 0.55rem; font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
  .club-live-card .match-events { gap: 0.4rem; margin-block: 0.75rem; }
  .club-live-card .match-events-title { font-size: clamp(0.95rem, 1.8vw, 1.2rem); }
  .club-live-card .match-event { padding: 0.55rem 0.7rem; }
  .club-live-card .match-event-headline { font-size: clamp(0.72rem, 1.35vw, 0.88rem); }
  .club-live-card .match-index { margin-block-start: 0.75rem; padding: 0.75rem; }
  .club-grid.is-collapsed .club-card:nth-child(n + 4) { display: block; }
  .club-grid.is-collapsed .club-card:nth-child(n + 7) { display: none; }
}

@media (max-width: 30rem) {
  .brand small { display: none; }
  .language-switcher button { min-width: 1.8rem; padding-inline: 0.38rem; }
  .national-metrics { grid-template-columns: repeat(2, 1fr); }
  .national-filters, .national-filters select { width: 100%; max-width: none; }
  .section-block { margin-block-start: 1.5rem; padding: 1rem; border-radius: 1.25rem; }
  .match-countdown { width: 100%; justify-content: center; font-size: 0.8rem; }
  .upcoming-club-fixture { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.5rem; }
  .briefs-editorial-lead { grid-template-columns: 1fr; }
  .briefs-editorial-visual { min-height: 14rem; }
  .editor-card-link, .mangara-space-intro { grid-template-columns: 1fr; }
  .club-live-card { min-height: 17rem; padding: 1.1rem; }
  .club-live-card .upcoming-club-fixture strong { font-size: 1.08rem; }
  .club-live-card .upcoming-club-fixture span { min-width: 4rem; font-size: 1.55rem; }
  .brand-manifesto { grid-template-columns: 1fr; }
  .brand-manifesto-mark { width: 4.5rem; }
  .gaindes-portal-media { min-height: 15rem; }
  .indice-info { margin-inline-start: 0; }
  .indice-info-popover { inset-inline-start: 0; inset-inline-end: auto; width: min(30rem, calc(100vw - 4rem)); }
}

@media (min-width: 64rem) {
  .universe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .universe-card-featured { grid-column: span 3; }
  .competition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .player-card { grid-template-columns: auto minmax(0, 1fr) auto; align-content: start; }
  .player-arrow { display: none; }
  .club-grid.is-collapsed .club-card:nth-child(n + 7) { display: block; }
  .club-grid.is-collapsed .club-card:nth-child(n + 10) { display: none; }
}

/* La direction claire doit rester la dernière couche de thème. */
:root { color-scheme: light; --accent: #006b3c; --background: #eef7f3; --card: #aec2b7; --ink: #0d3027; --muted: #405f55; --night: #123f35; --night-soft: #286c58; --line: #8da99c; --success: #006b3c; --warning: #a86606; --danger: #b83743; }
html { background: #dcefee; }
body { color: var(--ink); background: radial-gradient(circle at 10% 0%, rgb(90 194 166 / 24%), transparent 28rem), radial-gradient(circle at 92% 12%, rgb(102 181 229 / 28%), transparent 34rem), linear-gradient(155deg, #f9fcf8 0%, #eaf6f5 48%, #e8f3fb 100%); }
.app-header { border-color: rgb(17 73 83 / 10%); background: rgb(250 253 250 / 88%); box-shadow: 0 0.5rem 1.8rem rgb(30 91 104 / 8%); }
.brand strong { color: #103843; }
.brand small { color: #417079; }
.language-switcher button { border-color: #bfd7d7; color: #234f58; background: #f8fcfa; }
.language-switcher button.active { border-color: #0b7756; color: white; background: #0b7756; }
.toolbar { border-color: #c8dfdf; background: rgb(255 255 252 / 82%); box-shadow: 0 0.6rem 2rem rgb(23 85 96 / 7%); }
.country-control select { border-color: #bfd7d7; color: var(--ink); background: white; }
.feed-status { color: #526e74; background: #edf5f3; }
.quickbar { background: linear-gradient(180deg, rgb(238 247 246 / 97%), rgb(238 247 246 / 86%)); }
.quickbar a { border-color: #bfd7d7; color: #285761; background: rgb(255 255 255 / 86%); }
.quickbar a:hover { color: #075f47; background: white; }
.quickbar a.active, .quickbar a[aria-current="location"] { border-color: #006b3c; color: white; background: #006b3c; box-shadow: 0 0 0 0.22rem rgb(0 107 60 / 12%); }
.hero { border-color: rgb(255 255 255 / 62%); background: linear-gradient(135deg, #176f69 0%, #267f8e 52%, #559fc5 100%); box-shadow: 0 1.8rem 4.5rem rgb(31 98 111 / 20%); }
.hero h1, .hero .eyebrow, .hero-dek, .hero .demo-badge { color: white; }
.hero .fixture { border-color: rgb(255 255 255 / 24%); background: rgb(7 58 68 / 24%); }
.section-block, .section-block:nth-of-type(even) { border-color: rgb(143 190 191 / 42%); background: rgb(255 254 250 / 88%); box-shadow: 0 1.2rem 3.2rem rgb(33 99 111 / 9%); backdrop-filter: blur(0.5rem); }
.univers-block { background: rgb(255 255 255 / 34%); }
.universe-card { border-color: rgb(255 255 255 / 62%); color: white; background: #176b69; box-shadow: 0 0.9rem 2.2rem rgb(34 101 112 / 15%); }
.universe-card::after { background: linear-gradient(90deg, rgb(12 73 72 / 92%) 0%, rgb(18 92 95 / 72%) 58%, rgb(34 112 137 / 40%) 100%), url("./media/generated/football-universes-v1.jpg") center / cover; }
.briefs-block, .europe-block { color: var(--ink); background: linear-gradient(145deg, rgb(248 253 250 / 96%), rgb(232 245 248 / 96%)); }
.brief-card { border-color: #d7e7e6; }
.brief-card time, .brief-card p:last-child { color: var(--muted); }
.competition-card, .club-card, .player-card, .national-card, .upcoming-club-card, .club-live-card { border-color: #87a698; background: linear-gradient(145deg, #b8cbbf, #9fb7aa); box-shadow: 0 0.7rem 1.8rem rgb(26 69 52 / 15%); }
.competition-card h3, .club-card h3, .player-name, .national-card h3 { color: var(--ink); }
.standings-table tbody th, .standings-table tbody td:last-child { color: #234b54; }
.standings-table thead th { color: #637e83; }
.season-banner, .competitions-summary, .news-archive-box, .match-archive-box { border-color: #91ad9f; background: linear-gradient(120deg, #bfd1c7, #afc6bc); }
.player-card-match { border-color: #829f92; background: #91aa9e; }
.player-card-match b { color: #4e6b72; }
.expand-toggle { border-color: #9cc9c5; color: #174c54; background: white; box-shadow: 0 0.5rem 1.4rem rgb(32 91 102 / 9%); }
.expand-toggle:hover { border-color: #0b7756; background: #edf8f4; }
.participation-badge { border-color: #c0d8d7; color: #516f75; background: white; }
.participation-starter { border-color: #77c7a2; color: #087449; background: #e9f8f0; }
.participation-substitute { border-color: #85bde0; color: #176b96; background: #edf7fd; }
.participation-unused, .participation-absent { border-color: #dfbd80; color: #8b5a08; background: #fff8e9; }
.detail-dialog { border-color: #c9dfdf; color: var(--ink); background: #fffefa; }
.bottom-nav { border-color: #b9d4d4; background: rgb(250 253 251 / 94%); box-shadow: 0 -0.5rem 2rem rgb(28 85 96 / 12%); }
.bottom-nav a { color: #315d65; }
.club-live-card { color: var(--ink); background-image: linear-gradient(135deg, #b6cabf, #99b2a5); }
.match-event { border-color: #809e90; background: #91aa9e; }
.match-event.is-tracked { border-color: #347c59; background: linear-gradient(100deg, #90b09f, #abc1b5); }

/* Vert plus profond : contraste renforcé sans éclaircir excessivement les surfaces. */
:root {
  --accent: #075f3b;
  --background: #b8cfc2;
  --card: #a9beb2;
  --line: #789787;
}
html { background: #a7c1b3; }
body {
  background:
    radial-gradient(circle at 12% 0%, rgb(35 123 78 / 34%), transparent 30rem),
    radial-gradient(circle at 94% 14%, rgb(58 133 101 / 28%), transparent 36rem),
    linear-gradient(155deg, #7ca28e 0%, #a4bdae 48%, #c0d2c8 100%);
}
.language-switcher button.active,
.quickbar a.active,
.quickbar a[aria-current="location"] {
  border-color: #06472e;
  background: linear-gradient(135deg, #043b27, #087344);
}
.hero {
  background: linear-gradient(135deg, #043426 0%, #075a3a 55%, #287553 100%);
  box-shadow: 0 1.8rem 4.5rem rgb(4 52 38 / 28%);
}
.universe-card { background: #06432f; box-shadow: 0 0.9rem 2.2rem rgb(4 52 38 / 24%); }
.universe-card::after {
  background:
    linear-gradient(90deg, rgb(3 43 31 / 96%) 0%, rgb(7 83 55 / 86%) 58%, rgb(37 111 78 / 66%) 100%),
    url("./media/generated/football-universes-v1.jpg") center / cover;
}
.competition-card, .club-card, .player-card, .national-card, .upcoming-club-card, .club-live-card {
  border-color: #789787;
  background: linear-gradient(145deg, #b7c9bf, #91ad9e);
}
.season-banner, .competitions-summary, .news-archive-box, .match-archive-box {
  border-color: #789787;
  background: linear-gradient(120deg, #aec3b7, #91ad9e);
}
.detail-dialog { border-color: #5c806d; }
.editorial-analysis,
.article-sources {
  border-inline-start-color: #1da867;
  color: #f7fff9;
  background: linear-gradient(135deg, #032d21 0%, #075039 58%, #0b6846 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}
.editorial-analysis h3,
.editorial-analysis p,
.article-sources h3,
.article-sources li { color: #f7fff9; }
.article-sources a { color: #ffe27a; text-decoration-color: rgb(255 226 122 / 72%); }

/* Lot navigation, PWA et lisibilité — couche finale volontairement déterministe. */
.live-ticker {
  position: sticky;
  inset-block-start: var(--app-header-height, 5rem);
  z-index: 39;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.5rem max(1rem, calc((100vw - 76rem) / 2));
  overflow: hidden;
  border-block: 1px solid rgb(255 255 255 / 16%);
  color: #fff;
  background: linear-gradient(90deg, #053c2b, #086b45 58%, #164f6a);
  box-shadow: 0 0.55rem 1.4rem rgb(3 52 37 / 18%);
}
.live-ticker[hidden], .back-to-top[hidden], .install-button[hidden] { display: none; }
.live-ticker > strong { flex: 0 0 auto; color: #ffe66d; font-size: 0.68rem; letter-spacing: 0.08em; white-space: nowrap; }
.live-ticker-track { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.live-ticker-rail, .live-ticker-group { display: flex; align-items: center; gap: 0.55rem; width: max-content; }
.live-ticker-track.is-scrolling { overflow: hidden; }
.live-ticker-track.is-scrolling .live-ticker-rail { animation: live-ticker-scroll 28s linear infinite; }
.live-ticker-track.is-scrolling:hover .live-ticker-rail,
.live-ticker-track.is-scrolling:focus-within .live-ticker-rail { animation-play-state: paused; }
.live-ticker-match {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  padding: 0.42rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  color: #fff;
  background: rgb(0 0 0 / 18%);
  font-size: 0.72rem;
  text-decoration: none;
}
.live-ticker-match strong { padding: 0.18rem 0.42rem; border-radius: 0.45rem; color: #0a2c21; background: #fff7ca; font-size: 0.82rem; }
.live-ticker-minute { color: #4cff9a; font-weight: 950; text-shadow: 0 0 0.7rem rgb(76 255 154 / 38%); }

@keyframes live-ticker-scroll {
  to { transform: translateX(calc(-50% - 0.275rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .live-ticker-track.is-scrolling { overflow-x: auto; }
  .live-ticker-track.is-scrolling .live-ticker-rail { animation: none; }
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
  max-width: 76rem;
  margin: 2rem auto 0;
  padding: 2rem max(1rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  border-radius: 1.5rem 1.5rem 0 0;
  color: #eefaf3;
  background: linear-gradient(135deg, #032f22, #07563a 60%, #0b4054);
  box-shadow: 0 -0.7rem 2rem rgb(4 55 39 / 16%);
}
.site-footer-brand strong { color: #ffe66d; font-size: 1.25rem; }
.site-footer-brand p { max-width: 28rem; margin: 0.45rem 0 0; color: #cce0d6; line-height: 1.5; }
.site-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1rem; }
.site-footer-links a, .site-footer-meta a { color: #f7fff9; text-underline-offset: 0.22rem; }
.site-footer-links a:hover, .site-footer-meta a:hover { color: #ffe66d; }
.site-footer-meta { display: grid; gap: 0.6rem; color: #cce0d6; font-size: 0.72rem; }
.legal-main { width: min(920px, calc(100% - 2rem)); margin: 2rem auto 4rem; }
.legal-card { background: #f8fcfa; border: 1px solid #b9d3c6; border-radius: 1.5rem; padding: clamp(1.25rem, 4vw, 3rem); color: #103a31; box-shadow: 0 1rem 3rem rgba(4, 45, 35, 0.1); }
.legal-card h1 { margin-top: 0; font-family: var(--display-font); font-size: clamp(2.2rem, 8vw, 4.6rem); line-height: 0.95; text-transform: uppercase; }
.legal-card h2 { margin: 2rem 0 0.5rem; color: #087b55; }
.legal-card p, .legal-card li { line-height: 1.65; }
.legal-card a { color: #087b55; font-weight: 700; }

.back-to-top {
  position: fixed;
  z-index: 30;
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  inset-block-end: calc(5.5rem + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #075f3b;
  box-shadow: 0 0.7rem 1.8rem rgb(3 45 32 / 35%);
  font-size: 1.45rem;
  font-weight: 900;
  cursor: pointer;
}

.detail-dialog {
  border: 1px solid #b8d0c3;
  color: #102c24;
  background: #fffefa;
  box-shadow: 0 2rem 6rem rgb(3 45 32 / 35%);
}
.detail-dialog h2, .detail-dialog h3, .detail-dialog p, .detail-dialog li, .detail-dialog strong { color: #102c24; }
.detail-dialog .eyebrow { color: #087249; }
.detail-dialog .dialog-meta, .detail-dialog .player-match-card small, .detail-dialog .player-match-card time, .detail-dialog .highlights { color: #49675e; }
.detail-dialog .dialog-close {
  border-color: #fff;
  color: #fff;
  background: #075f3b;
  box-shadow: 0 0.4rem 1rem rgb(3 45 32 / 24%);
}
.detail-dialog .dialog-metric { border: 1px solid #77af92; color: #102c24; background: #dcefe4; }
.detail-dialog .dialog-metric span { color: #075f3b; }
.detail-dialog .player-match-card, .detail-dialog .player-stat {
  border-color: #bfd2c8;
  color: #102c24;
  background: #edf5f0;
}
.detail-dialog .player-match-card.is-live { border-color: #d93f55; background: #fff0f2; }
.detail-dialog .player-match-performance, .detail-dialog .player-match-summary { color: #203f35; }
.detail-dialog.player-detail-dialog {
  border-color: #d8dedb;
  color: #111;
  background: #fff;
}
.player-detail-dialog h2,
.player-detail-dialog h3,
.player-detail-dialog .eyebrow { color: #075f3b; }
.player-detail-dialog p,
.player-detail-dialog li,
.player-detail-dialog strong,
.player-detail-dialog .dialog-meta,
.player-detail-dialog .highlights,
.player-detail-dialog .player-match-card small,
.player-detail-dialog .player-match-card time,
.player-detail-dialog .player-match-performance,
.player-detail-dialog .player-match-summary { color: #111; }
.player-detail-dialog .dialog-metric,
.player-detail-dialog .player-match-card,
.player-detail-dialog .player-stat,
.player-detail-dialog .player-match-card.is-live {
  border-color: #d8dedb;
  color: #111;
  background: #fff;
  box-shadow: none;
}
.player-detail-dialog .dialog-metric span,
.player-detail-dialog .player-match-card small,
.player-detail-dialog .player-stat span { color: #075f3b; }
.player-detail-dialog .dialog-close {
  border-color: #075f3b;
  color: #fff;
  background: #075f3b;
}
.install-steps { display: grid; gap: 0.75rem; padding-inline-start: 1.4rem; line-height: 1.55; }

@media (max-width: 46rem) {
  .app-header { align-items: flex-start; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .install-button { padding: 0.52rem 0.75rem; font-size: 0.72rem; }
  .live-ticker { border-radius: 0; }
  .site-footer { grid-template-columns: 1fr; border-radius: 1.25rem 1.25rem 0 0; }
  .site-footer-links { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .back-to-top { inset-block-end: 1.25rem; }
}

/* Lisibilité éditoriale : surfaces blanches, texte noir, vert réservé aux repères. */
:root {
  --accent: #087443;
  --background: #f3f6f4;
  --card: #ffffff;
  --ink: #111814;
  --muted: #4b5751;
  --line: #d2ddd7;
  --night: #ffffff;
  --night-soft: #eef3f0;
}

html { background: #edf2ef; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgb(8 116 67 / 9%), transparent 30rem),
    linear-gradient(155deg, #f8faf9 0%, #edf3ef 58%, #e5ede8 100%);
}

.section-block,
.section-block:nth-of-type(even),
.briefs-block,
.europe-block,
.mangara-space {
  color: var(--ink);
  background: rgb(255 255 255 / 96%);
}

.competition-card,
.club-card,
.player-card,
.national-card,
.upcoming-club-card,
.club-live-card,
.news-card,
.brief-card,
.europe-grid article,
.mangara-article-card,
.mangara-empty,
.season-banner,
.competitions-summary,
.news-archive-box,
.match-archive-box,
.briefs-editorial-lead,
.notification-preview,
.match-event,
.match-event.is-tracked {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 0.7rem 1.8rem rgb(17 24 20 / 8%);
}

.news-card:hover,
.competition-card:hover,
.club-card:hover,
.player-card:hover { border-color: #76a98d; }

.section-heading h2,
.briefs-subheading h3,
.briefs-editorial-copy h3,
.news-copy h3,
.competition-card h3,
.club-card h3,
.player-name,
.national-card h3,
.europe-grid h3,
.mangara-article-card h3,
.match-index-title,
.card-kicker,
.eyebrow { color: var(--accent); }

.news-dek,
.news-meta,
.brief-card time,
.brief-card p:last-child,
.briefs-editorial-copy p,
.europe-grid p,
.mangara-article-card p,
.mangara-empty,
.competition-clubs,
.club-players,
.player-position,
.player-league,
.national-card p,
.coming-card p,
.match-index-confidence,
.match-index-note { color: var(--muted); }

.card-action,
.briefs-editorial-copy a,
.mangara-article-card button,
.editor-card-cta { color: var(--accent); }

.brief-card { border-block-start-color: var(--line); }
.briefs-subheading { border-block-end-color: var(--line); }
.briefs-editorial-label,
.europe-grid article > span {
  border-color: #9bc4ad;
  color: var(--accent);
  background: #edf7f1;
}

.player-filters {
  border-color: var(--line);
  background: #f5f7f6;
}
.player-filters label span { color: #34443c; }
.player-filters input,
.player-filters select,
.national-filters select {
  border-color: #aebeb6;
  color: var(--ink);
  background: #fff;
}
.player-filters input::placeholder { color: #68756f; }

.player-metric {
  border-color: #bad3c5;
  color: var(--ink);
  background: #edf6f1;
}
.player-metric span { color: var(--accent); }
.player-card-match {
  border-color: var(--line);
  background: #f3f5f4;
}
.player-card-match small { color: var(--accent); }
.player-card-match b { color: #435049; }

.player-match-card,
.player-stat,
.match-index,
.indice-info-popover {
  border-color: var(--line);
  color: var(--ink);
  background: #f5f7f6;
}
.match-index-labels,
.match-index-labels b,
.player-match-performance,
.player-match-summary { color: var(--ink); }
.match-index-history { border-block-start-color: var(--line); }
.match-index-bar { background: #dfe7e2; }
.indice-info summary {
  border-color: #9bc4ad;
  color: var(--accent);
  background: #fff;
}

.editorial-analysis,
.article-sources {
  border-inline-start-color: var(--accent);
  color: var(--ink);
  background: #f3f6f4;
  box-shadow: inset 0 0 0 1px var(--line);
}
.editorial-analysis h3,
.article-sources h3 { color: var(--accent); }
.editorial-analysis p,
.article-sources li { color: var(--ink); }
.article-sources a { color: #075f38; text-decoration-color: #75a88b; }

.notification-preview p,
.notification-preview label,
.notification-preview legend { color: var(--ink); }

/* Lisibilité commune à toutes les sélections : aucun texte jaune sur fond clair. */
.national-card > strong,
.national-metrics strong,
.national-coach-avatar,
.national-coach-sources a,
.national-match-fixture strong,
.world-cup-summary strong,
.player-card-match small,
.hero-key-figures small {
  color: #06472e;
  font-weight: 900;
}
.national-coach-history { border-inline-start-color: #075f3b; }

/* Contraste des données mises en avant sur les surfaces foncées. */
.hero-key-figures strong { color: #fff; font-weight: 950; }
.standings-table tbody .standing-row-lion th,
.standings-table tbody .standing-row-lion td,
.standings-table tbody .standing-row-lion td:first-child,
.standings-table tbody .standing-row-lion td:last-child,
.standing-lion-badge {
  color: #fff;
  font-weight: 900;
}
.standing-lion-badge {
  border-color: rgb(255 255 255 / 58%);
  background: rgb(3 49 34 / 82%);
}

/* Une dernière compétition impaire utilise toute la rangée sur écran large. */
@media (min-width: 50rem) {
  .competition-grid > .competition-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Les libellés longs restent contenus dans les trois compteurs du hero. */
.hero-key-figures span { min-width: 0; }
.hero-key-figures small {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(0.43rem, 1.35vw, 0.58rem);
  letter-spacing: 0.015em;
  line-height: 1.15;
}

/* État honnête des alertes quand l'API d'abonnement n'est pas configurée. */
.notification-preview { color: var(--ink); }
.notification-preview #notification-intro { display: block; color: #42534b; }
.notification-preview .notification-pill {
  border-color: #9eb9aa;
  color: #06472e;
  background: #edf7f1;
  font-weight: 900;
}

/* Les zones volontairement vertes conservent uniquement une typographie blanche. */
.hero,
.universe-card,
.live-ticker,
.site-footer,
.quickbar a.active,
.quickbar a[aria-current="location"] { color: #fff; }
.universe-card .card-kicker,
.universe-card strong,
.universe-card p,
.live-ticker a,
.site-footer a { color: #fff; }

/* Deux cartes spéciales alignées sur la direction claire. */
.world-cup-summary span,
.world-cup-matches .national-match {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 0.45rem 1.2rem rgb(17 24 20 / 6%);
}
.world-cup-summary strong { color: var(--accent); }
.world-cup-summary small,
.world-cup-matches .national-match time,
.world-cup-matches .national-match small { color: var(--muted); }
.world-cup-matches .national-match-fixture strong { color: var(--ink); }

.gaindes-portal {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 0.9rem 2.2rem rgb(17 24 20 / 10%);
}
.gaindes-portal:hover { border-color: #76a98d; }
.gaindes-portal-copy small,
.gaindes-portal-copy strong,
.gaindes-portal-copy b { color: var(--accent); }
.gaindes-portal-copy p { color: var(--ink); }

/* Sénégal : vert forêt → vert gazon autour des contenus, cartes claires préservées. */
body[data-country="SN"] {
  background:
    radial-gradient(circle at 8% 6%, rgb(51 190 79 / 34%), transparent 28rem),
    radial-gradient(circle at 94% 18%, rgb(24 142 61 / 38%), transparent 34rem),
    linear-gradient(145deg, #021b13 0%, #043c26 40%, #08743b 72%, #22a447 100%);
  background-attachment: fixed;
}

body[data-country="SN"] .section-block,
body[data-country="SN"] .section-block:nth-of-type(even),
body[data-country="SN"] .briefs-block,
body[data-country="SN"] .europe-block,
body[data-country="SN"] .mangara-space {
  border-color: rgb(129 181 151 / 62%);
  background: linear-gradient(145deg, rgb(255 255 255 / 98%), rgb(239 248 243 / 97%));
  box-shadow: 0 1.2rem 3rem rgb(0 32 18 / 24%);
}

body[data-country="SN"] .section-block:nth-of-type(even) {
  background: linear-gradient(145deg, rgb(248 253 250 / 98%), rgb(228 242 234 / 97%));
}

body[data-country="SN"] .competition-card,
body[data-country="SN"] .club-card,
body[data-country="SN"] .player-card,
body[data-country="SN"] .national-card,
body[data-country="SN"] .upcoming-club-card,
body[data-country="SN"] .club-live-card,
body[data-country="SN"] .news-card,
body[data-country="SN"] .brief-card,
body[data-country="SN"] .europe-grid article,
body[data-country="SN"] .mangara-article-card,
body[data-country="SN"] .mangara-empty,
body[data-country="SN"] .season-banner,
body[data-country="SN"] .competitions-summary,
body[data-country="SN"] .news-archive-box,
body[data-country="SN"] .match-archive-box,
body[data-country="SN"] .briefs-editorial-lead,
body[data-country="SN"] .notification-preview,
body[data-country="SN"] .match-event,
body[data-country="SN"] .match-event.is-tracked {
  border-color: #c5dacf;
  color: var(--ink);
  background: linear-gradient(145deg, #fff 0%, #f1f8f4 100%);
  box-shadow: 0 0.7rem 1.8rem rgb(0 54 30 / 10%);
}

body[data-country="SN"] .toolbar {
  border-color: rgb(144 191 163 / 62%);
  background: linear-gradient(120deg, rgb(255 255 255 / 96%), rgb(237 248 241 / 94%));
  box-shadow: 0 0.8rem 2rem rgb(0 40 23 / 18%);
}

/* Côte d’Ivoire : orange brûlé autour des contenus, cartes blanches ou pêche très clair. */
body[data-country="CI"] {
  background:
    radial-gradient(circle at 8% 7%, rgb(233 105 24 / 42%), transparent 29rem),
    radial-gradient(circle at 94% 18%, rgb(255 151 55 / 32%), transparent 34rem),
    linear-gradient(145deg, #2a0d04 0%, #5c1c08 38%, #9a3b0b 70%, #d66a18 100%);
  background-attachment: fixed;
}

body[data-country="CI"] .section-block,
body[data-country="CI"] .section-block:nth-of-type(even),
body[data-country="CI"] .briefs-block,
body[data-country="CI"] .europe-block,
body[data-country="CI"] .mangara-space {
  border-color: rgb(224 147 100 / 62%);
  background: linear-gradient(145deg, rgb(255 255 255 / 98%), rgb(255 244 236 / 97%));
  box-shadow: 0 1.2rem 3rem rgb(52 13 1 / 26%);
}

body[data-country="CI"] .section-block:nth-of-type(even) {
  background: linear-gradient(145deg, rgb(255 251 248 / 98%), rgb(252 232 218 / 97%));
}

body[data-country="CI"] .competition-card,
body[data-country="CI"] .club-card,
body[data-country="CI"] .player-card,
body[data-country="CI"] .national-card,
body[data-country="CI"] .upcoming-club-card,
body[data-country="CI"] .club-live-card,
body[data-country="CI"] .news-card,
body[data-country="CI"] .brief-card,
body[data-country="CI"] .europe-grid article,
body[data-country="CI"] .mangara-article-card,
body[data-country="CI"] .mangara-empty,
body[data-country="CI"] .season-banner,
body[data-country="CI"] .competitions-summary,
body[data-country="CI"] .news-archive-box,
body[data-country="CI"] .match-archive-box,
body[data-country="CI"] .briefs-editorial-lead,
body[data-country="CI"] .notification-preview,
body[data-country="CI"] .match-event,
body[data-country="CI"] .match-event.is-tracked {
  border-color: #ebc7b0;
  color: var(--ink);
  background: linear-gradient(145deg, #fff 0%, #fff5ee 100%);
  box-shadow: 0 0.7rem 1.8rem rgb(86 25 4 / 11%);
}

body[data-country="CI"] .toolbar {
  border-color: rgb(225 156 113 / 66%);
  background: linear-gradient(120deg, rgb(255 255 255 / 96%), rgb(255 242 233 / 94%));
  box-shadow: 0 0.8rem 2rem rgb(70 18 2 / 19%);
}

.match-day-badge {
  display: inline-flex;
  width: fit-content;
  margin-block-end: 0.55rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid rgb(111 4 14 / 30%);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #b70e20, #df263a);
  box-shadow: 0 0.3rem 0.8rem rgb(112 4 15 / 24%);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.match-day-badge[hidden] { display: none; }

/* Enclave sociale : galerie éditoriale isolée, lisible même sans Instagram. */
.social-section[hidden] { display: none; }
body[data-country] .social-section,
body[data-country] .social-section:nth-of-type(even) { position: relative; overflow: hidden; padding: clamp(1.2rem, 3vw, 2.4rem); border: 0; border-radius: 1.6rem; color: #fff; background: #032d21; box-shadow: 0 1.4rem 3.5rem rgb(0 35 25 / 22%); }

/* Infographies éditoriales pilotées par le registre multi-pays. */
.universe-card::after {
  opacity: 1;
  background-position: center;
  background-size: cover;
}
.universe-card-national::after { background-image: linear-gradient(90deg, rgb(3 43 31 / 86%), rgb(3 43 31 / 66%)), var(--universe-image-1); }
.universe-card-weekend::after { background-image: linear-gradient(90deg, rgb(3 43 31 / 86%), rgb(3 43 31 / 66%)), var(--universe-image-2); }
.universe-card-competitions::after { background-image: linear-gradient(90deg, rgb(3 43 31 / 86%), rgb(3 43 31 / 66%)), var(--universe-image-3); }
.universe-card-europe::after { background-image: linear-gradient(90deg, rgb(3 43 31 / 86%), rgb(3 43 31 / 66%)), var(--universe-image-4); filter: none; }
.universe-card-clubs::after { background-image: linear-gradient(90deg, rgb(3 43 31 / 86%), rgb(3 43 31 / 66%)), var(--universe-image-5); }
.universe-card-players::after { background-image: linear-gradient(90deg, rgb(3 43 31 / 86%), rgb(3 43 31 / 66%)), var(--universe-image-6); }
.news-visual-illustration { object-position: center; background: #10241e; }

.hero.hero-illustrated {
  background-image:
    linear-gradient(90deg, rgb(3 10 23 / 94%) 0%, rgb(3 10 23 / 78%) 48%, rgb(3 10 23 / 34%) 100%),
    var(--country-hero-image);
  background-position: center;
  background-size: cover;
}
.hero-illustrated .hero-flag { display: none; }
.hero-title-stars {
  position: absolute;
  inset-block-start: clamp(4.3rem, 12vw, 6.2rem);
  inset-inline-end: clamp(1rem, 5vw, 3.5rem);
  z-index: 2;
  display: flex;
  gap: 0.42rem;
  color: #f4c84c;
  filter: drop-shadow(0 0.2rem 0.22rem rgb(0 0 0 / 70%));
  font-size: clamp(1.7rem, 5vw, 3.1rem);
  line-height: 1;
}
.hero-senegal .hero-title-stars { inset-block-start: 5rem; inset-inline-end: 2rem; }

@media (max-width: 44rem) {
  .hero-title-stars { inset-block-start: 4.4rem; inset-inline-end: 1rem; font-size: 1.6rem; }
  .hero-senegal .hero-title-stars { inset-block-start: 4.5rem; inset-inline-end: 1rem; }
}
.social-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.13; background: repeating-linear-gradient(120deg, transparent 0 38px, rgb(255 255 255 / 18%) 39px 40px); }
.social-section > * { position: relative; }
.social-heading { align-items: end; padding-bottom: 1.15rem; border-bottom: 1px solid rgb(255 255 255 / 22%); }
.social-heading h2 { max-width: 18ch; color: #fff; font-family: Georgia, serif; font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: 0.92; letter-spacing: -0.045em; }
.social-heading .eyebrow { color: var(--accent-2); }
.social-description { max-width: 32rem; margin: 0.65rem 0 0; color: #cee2da; }
.social-demo-badge {
  display: inline-flex;
  padding: 0.42rem 0.72rem;
  border: 1px solid #8a6410;
  border-radius: 999px;
  color: #4b3300;
  background: #fff2bd;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.social-filters { display: flex; gap: 0.55rem; margin: 1.2rem 0; overflow-x: auto; scrollbar-width: thin; }
.social-filters button {
  flex: 0 0 auto;
  padding: 0.62rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}
.social-filters button:hover,
.social-filters button:focus-visible,
.social-filters button.active { border-color: var(--accent-2); color: #05261d; background: var(--accent-2); }
.social-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 1rem; align-items: start; }
.social-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.social-grid[data-count="1"] .social-card { width: 100%; }
.social-grid[data-count="1"] .social-media { min-height: clamp(38rem, 70vw, 58rem); }
.social-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.social-grid[data-count="2"] .social-card--featured { grid-row: auto; }
.social-grid[data-count="2"] .social-media { min-height: clamp(34rem, 52vw, 46rem); }
.social-grid[data-count="3"] .social-card--featured { grid-row: span 2; }
.social-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1.1rem;
  color: #fff;
  background: #074435;
  box-shadow: none;
}
.social-card--featured { grid-row: span 3; }
.social-grid > .social-card:only-child { grid-column: 1 / -1; }
.social-media { position: relative; min-height: 25rem; overflow: hidden; background: linear-gradient(145deg, #082b20, #04140f); }
.social-card--featured .social-media { min-height: 46rem; }
.social-media-fallback { display: grid; position: absolute; inset: 0; place-items: center; padding: 2rem; color: #fff; text-align: center; font-weight: 850; }
.social-media .instagram-media,
.social-media iframe { position: absolute !important; inset: 0; z-index: 2; width: 100% !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; border: 0 !important; background: #fff; }
.social-copy { display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem 1.1rem 1.2rem; }
.social-copy h3 { margin: 0; color: #fff; font-family: Georgia, serif; font-size: clamp(1.2rem, 2.4vw, 1.9rem); line-height: 1.02; }
.social-copy p { margin: 0; color: #cee2da; line-height: 1.5; }
.social-source { color: var(--accent-2); font-size: 0.7rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }
.social-presence { width: fit-content; margin-top: 0.4rem; padding: 0.45rem 0.7rem; border-radius: 999px; color: #17382b; background: #e8f3ed; font-weight: 850; }
.social-why { margin-top: 0.15rem; color: #cee2da; font-size: 0.78rem; }
.social-why summary { width: fit-content; cursor: pointer; color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 38%); text-underline-offset: 0.22rem; }
.social-why summary:hover, .social-why summary:focus-visible { color: var(--accent-2); text-decoration-color: currentColor; }
.social-why p { margin-top: 0.55rem; padding-inline-start: 0.8rem; border-inline-start: 2px solid var(--accent-2); color: #cee2da; }
.social-unavailable { margin: 0; padding: 2rem; color: var(--muted); text-align: center; }
.social-empty { grid-column: 1 / -1; margin: 0; padding: clamp(2rem, 7vw, 5rem); border: 1px dashed rgb(255 255 255 / 35%); border-radius: 1rem; color: #cee2da; text-align: center; font-weight: 800; }
[dir="rtl"] .social-copy { text-align: right; }

@media (max-width: 60rem) {
  .social-grid { grid-template-columns: 1fr; }
  .social-card--featured { grid-row: auto; }
  .social-card--featured .social-media, .social-media { min-height: 36rem; }
}

@media (max-width: 42rem) {
  .social-section { margin-inline: -0.35rem; padding: 1rem; border-radius: 1.2rem; }
  .social-media { min-height: 31rem; }
}