/*
 * LE-RADAR.ca — Pages d'entités (radios, journaux, établissements, annuaire).
 *
 * Ces pages sont générées par scripts/seo-pages.js et lisibles sans
 * JavaScript. Elles réutilisent tous les jetons de style.css (couleurs,
 * typographies, thème clair/sombre) : ce fichier n'ajoute que la mise en page
 * propre à ces pages, jamais une couleur ou une police en dur.
 */

.seo-wire {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--pad) 48px;
  color: var(--ink);
}

.masthead-inner { position: relative; }
/*
 * `.seo-masthead-actions` (position: absolute) a été retiré : la rangée
 * d'actions flottait hors du flux et recouvrait le mot-symbole à toutes les
 * largeurs — invisible tant qu'elle ne portait qu'une pastille, criant dès
 * qu'elle en a porté huit. Les pages d'entités utilisent maintenant la même
 * grille `.masthead-top` que l'accueil et le RSS (style-masthead.css), ce qui
 * leur donne d'office tout le responsive déjà éprouvé.
 */

/* ── Fil d'Ariane ───────────────────────────────────────────────────────── */

.seo-crumbs {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.seo-crumbs a { color: var(--muted); text-decoration: none; }
.seo-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.seo-crumbs__sep { opacity: 0.55; }

/* ── Titres ─────────────────────────────────────────────────────────────── */

.seo-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}

.seo-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4vw + 0.3rem, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--ink);
}
/* Titre « Au tableau » cliquable : reset filtres + rechargement. */
.seo-title__link {
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}
.seo-title__link:hover {
  color: var(--accent);
}
.seo-title__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.seo-title__link:active {
  opacity: 0.85;
}

.seo-lead {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.seo-wire .media-follow-row {
  margin: 0 0 18px;
}
.seo-wire .seo-dir-stats {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  margin: -6px 0 20px;
}

.media-channels { margin: 0 0 28px; }
.media-channels__title {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.media-channels__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.media-channels__item a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 8px 14px;
  text-decoration: none;
}
.media-channels__item a:hover { color: var(--accent); }
.media-channels__item a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.seo-wire p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

/*
 * `.seo-wire p` (0,1,1) bat `.site-foot__wordmark` (0,1,0). Les pages
 * générées sortent le pied en frère de <main> ; affiches / kit média le
 * nichaient encore dans `.seo-wire` — LE-RADAR.ca tombait alors en Inter.
 */
.seo-wire .site-foot p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 8px;
}
.seo-wire .site-foot .site-foot__wordmark {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: var(--ink);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 48;
}

.seo-section {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.seo-section > h2 {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}
.seo-section > h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  margin: 22px 0 12px;
}
.seo-section > h3:first-of-type { margin-top: 4px; }
.seo-section__lead {
  margin: -8px 0 16px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* Sommaire interne de l’annuaire /medias/ */
.seo-toc {
  margin: 8px 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-soft);
}
.seo-toc__label {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.seo-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.seo-toc__list a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.seo-toc__list a:hover { text-decoration: underline; }

/* ── Fiche de faits ─────────────────────────────────────────────────────── */

.seo-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px 20px;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.seo-fact { padding: 7px 0; min-width: 0; }
.seo-fact dt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.seo-fact dd {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.seo-fact dd a { color: var(--accent); text-decoration: none; }
.seo-fact dd a:hover { text-decoration: underline; }

/* ── Appel à l'action ───────────────────────────────────────────────────── */

.seo-cta { margin: 22px 0; }
/* Rangée d’actions sur une fiche journal : récents + archives côte à côte. */
.seo-source-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin: 22px 0 0;
}
.seo-source-actions .seo-cta {
  margin: 0;
}
/* À la fin d'une liste d'articles, le retour vers le fil filtré reste aligné
   avec le contenu. Sa marge supérieure le détache clairement de la dernière
   manchette, sans créer une zone vide avant le pied de page. */
.seo-wire .seo-cta--source {
  margin: 22px 0 0;
  text-align: left;
}
.seo-wire .seo-source-actions .seo-cta--source { margin: 0; }
.seo-wire:has(.seo-cta--source),
.seo-wire:has(.seo-source-actions) { padding-bottom: 28px; }
.seo-cta a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  padding: 11px 20px;
  border-radius: 999px;
  text-decoration: none;
}
.seo-cta a:hover { background: var(--accent-dark); }
/* CTA secondaire (archives) : même pilule, contour accent. */
.seo-cta--secondary a {
  color: var(--accent);
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--accent) 72%, transparent);
  box-shadow: none;
}
.seo-cta--secondary a:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.seo-archive-link {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 13px;
}
.seo-archive-link a { color: var(--accent); font-weight: 600; }
@media (max-width: 560px) {
  .seo-source-actions { flex-direction: column; align-items: stretch; }
  .seo-source-actions .seo-cta a { width: 100%; text-align: center; box-sizing: border-box; }
}

/* ── Catalogue historique expérimental ─────────────────────────────────── */

.seo-archive-sources { margin: 0; padding-left: 1.2rem; }
.seo-archive-sources li { margin: 8px 0; }
.seo-archive-sources span { color: var(--muted); font-family: var(--sans); font-size: .9rem; }
.seo-archive-year { margin: 32px 0; }
.seo-archive-year > h2 { margin-bottom: 0; }
.seo-archive-record {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.seo-archive-record h2 {
  margin: 2px 0 5px;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.2;
}
.seo-archive-record h2 a { color: var(--ink); }
.seo-archive-record h2 a:hover { color: var(--accent); }
.seo-archive-record p { margin: 7px 0 0; }
.seo-archive-record__source {
  color: var(--accent);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.seo-archive-record__meta,
.seo-archive-record__origin {
  color: var(--muted);
  font-family: var(--sans);
  font-size: .84rem;
}
.seo-archive-record__origin a { color: var(--accent); font-weight: 600; }
.seo-archive-unavailable {
  margin: 32px 0 8px;
  padding: 16px 18px;
  border-left: 3px solid var(--rule-strong);
  background: var(--bg-soft);
}
.seo-archive-unavailable h2 { margin: 0; font-size: 1.1rem; }
.seo-archive-unavailable p,
.seo-archive-unavailable li { color: var(--ink-soft); font-size: .9rem; }

/* ── Cartes (listes d'entités) ──────────────────────────────────────────── */

.seo-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.seo-card a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}
.seo-card a:hover { border-color: var(--accent); transform: translateY(-1px); }
.seo-card__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.seo-card__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}

/* Hub /horaires/ : 6 postes en 3×2, émission en cours / à venir — pas un
   annuaire de « N créneaux » dont la date ISO casse au milieu. */
.seo-radio-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.seo-radio-card a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}
.seo-radio-card a:hover { border-color: var(--accent); transform: translateY(-1px); }
.seo-radio-card__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.seo-radio-card__place {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}
.seo-radio-card__now {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.seo-radio-card__kicker {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.seo-radio-card__show {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.seo-radio-card__when {
  font-family: var(--sans);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.seo-radio-card[data-air-state="live"] .seo-radio-card__now {
  border-left-color: var(--status-live);
  background: color-mix(in srgb, var(--status-live) 12%, transparent);
}
.seo-radio-card[data-air-state="live"] .seo-radio-card__kicker,
.seo-radio-card[data-air-state="live"] .seo-radio-card__show {
  color: var(--status-live);
}
.seo-radio-card[data-air-state="upcoming"] .seo-radio-card__now {
  border-left-color: var(--status-upcoming-mid);
  background: color-mix(in srgb, var(--status-upcoming-soft) 18%, transparent);
}
.seo-radio-card[data-air-state="upcoming"] .seo-radio-card__kicker,
.seo-radio-card[data-air-state="upcoming"] .seo-radio-card__show {
  color: var(--status-upcoming);
}
[data-theme="dark"] .seo-radio-card[data-air-state="live"] .seo-radio-card__now {
  border-left-color: var(--status-live-soft);
  background: color-mix(in srgb, var(--status-live-soft) 14%, transparent);
}
[data-theme="dark"] .seo-radio-card[data-air-state="live"] .seo-radio-card__kicker,
[data-theme="dark"] .seo-radio-card[data-air-state="live"] .seo-radio-card__show {
  color: var(--status-live-soft);
}
[data-theme="dark"] .seo-radio-card[data-air-state="upcoming"] .seo-radio-card__now {
  border-left-color: var(--status-upcoming-soft);
  background: color-mix(in srgb, var(--status-upcoming-soft) 14%, transparent);
}
[data-theme="dark"] .seo-radio-card[data-air-state="upcoming"] .seo-radio-card__kicker,
[data-theme="dark"] .seo-radio-card[data-air-state="upcoming"] .seo-radio-card__show {
  color: var(--status-upcoming-soft);
}

/* ── Manchettes ─────────────────────────────────────────────────────────── */

.seo-headlines { list-style: none; margin: 0; padding: 0; }
.seo-headlines__status {
  margin: -9px 0 12px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.seo-headline {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
/* Bloc : la date et la signature passent sous le titre plutôt que de se
   coller à sa dernière ligne. */
.seo-headline__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}
.seo-headline__title:hover { color: var(--accent); text-decoration: underline; }
.seo-headline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}
.seo-headline time,
.seo-headline__by {
  margin: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}
.seo-headline__brief {
  margin: 7px 0 0;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.seo-headline__more {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.seo-headline__more:hover { text-decoration: underline; }

/* ── Grille horaire ─────────────────────────────────────────────────────── */

/* Une journée est une carte lisible plutôt qu'une colonne comprimée. */
.seo-schedule-scroll {
  margin: 0;
}
.seo-schedule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
}
.seo-day {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-soft);
}
.seo-day h3 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--radio);
  margin: 0 0 8px;
}
.seo-day--today {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--rule));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent);
}
.seo-day--today h3 {
  color: var(--accent);
  animation: seo-highlight-pulse 2.8s ease-in-out infinite alternate;
}
@keyframes seo-highlight-pulse {
  from { text-shadow: 0 0 0 transparent; opacity: 0.76; }
  to { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); opacity: 1; }
}
.seo-day ul { list-style: none; margin: 0; padding: 0; }
.seo-day li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--rule) 78%, transparent);
}
.seo-day li:first-child { border-top: 0; padding-top: 0; }
.seo-day li:last-child { padding-bottom: 0; }
.seo-day li.seo-slot--live,
.seo-day li.seo-slot--upcoming {
  margin-inline: -8px;
  padding-inline: 8px;
  border-left: 3px solid transparent;
  border-radius: 4px;
}
/*
 * Créneaux = mêmes teintes que la barre radio :
 *  - live / playing → coral EN ONDES (--status-live-soft sur sombre)
 *  - upcoming → ambre « À venir » (--status-upcoming-soft)
 * Tokens définis dans style.css (:root).
 */
.seo-day li.seo-slot--live {
  border-left-color: var(--status-live);
  background: color-mix(in srgb, var(--status-live) 12%, transparent);
}
.seo-day li.seo-slot--live.seo-slot--pulse {
  animation: seo-live-pulse 2.8s ease-in-out infinite alternate;
}
.seo-day li.seo-slot--live .seo-slot__title,
.seo-day li.seo-slot--live .seo-slot__title a {
  color: var(--status-live);
  font-weight: 600;
}
/* Lecture réelle : même famille coral, un cran plus marqué (bouton play). */
.seo-day li.seo-slot--live.seo-slot--playing {
  border-left-color: var(--status-live);
  background: color-mix(in srgb, var(--status-live) 16%, transparent);
}
.seo-day li.seo-slot--live.seo-slot--playing.seo-slot--pulse {
  animation-name: seo-playing-pulse;
}
.seo-day li.seo-slot--live.seo-slot--playing .seo-slot__title,
.seo-day li.seo-slot--live.seo-slot--playing .seo-slot__title a {
  color: var(--status-live);
}
.seo-day li.seo-slot--upcoming {
  border-left-color: var(--status-upcoming-mid);
  background: color-mix(in srgb, var(--status-upcoming-soft) 18%, transparent);
}
.seo-day li.seo-slot--upcoming.seo-slot--pulse {
  animation: seo-upcoming-pulse 2.8s ease-in-out infinite alternate;
}
.seo-day li.seo-slot--upcoming .seo-slot__title,
.seo-day li.seo-slot--upcoming .seo-slot__title a {
  color: var(--status-upcoming);
  font-weight: 600;
}
[data-theme="dark"] .seo-day li.seo-slot--live {
  border-left-color: var(--status-live-soft);
  background: color-mix(in srgb, var(--status-live-soft) 14%, transparent);
}
[data-theme="dark"] .seo-day li.seo-slot--live .seo-slot__title,
[data-theme="dark"] .seo-day li.seo-slot--live .seo-slot__title a {
  color: var(--status-live-soft);
}
[data-theme="dark"] .seo-day li.seo-slot--live.seo-slot--playing {
  border-left-color: var(--status-live-soft);
  background: color-mix(in srgb, var(--status-live-soft) 18%, transparent);
}
[data-theme="dark"] .seo-day li.seo-slot--live.seo-slot--playing .seo-slot__title,
[data-theme="dark"] .seo-day li.seo-slot--live.seo-slot--playing .seo-slot__title a {
  color: var(--status-live-soft);
}
[data-theme="dark"] .seo-day li.seo-slot--upcoming {
  border-left-color: var(--status-upcoming-soft);
  background: color-mix(in srgb, var(--status-upcoming-soft) 14%, transparent);
}
[data-theme="dark"] .seo-day li.seo-slot--upcoming .seo-slot__title,
[data-theme="dark"] .seo-day li.seo-slot--upcoming .seo-slot__title a {
  color: var(--status-upcoming-soft);
}
@keyframes seo-live-pulse {
  from { box-shadow: 0 0 0 transparent; }
  to { box-shadow: 0 0 12px color-mix(in srgb, var(--status-live-soft) 55%, transparent); }
}
@keyframes seo-playing-pulse {
  from { box-shadow: 0 0 0 transparent; }
  to { box-shadow: 0 0 12px color-mix(in srgb, var(--status-live-soft) 62%, transparent); }
}
@keyframes seo-upcoming-pulse {
  from { box-shadow: 0 0 0 transparent; }
  to { box-shadow: 0 0 12px color-mix(in srgb, var(--status-upcoming-soft) 55%, transparent); }
}
.seo-day time { font-weight: 700; color: var(--ink); }
.seo-slot__time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.seo-slot__dash { margin: 0 2px; opacity: 0.6; }
.seo-slot__title { min-width: 0; }
.seo-slot__title a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.seo-slot__title a:hover { color: var(--accent); }
.seo-day__none {
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin: 0;
}
.seo-schedule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: -6px 0 14px !important;
  font-family: var(--sans);
  font-size: 12.5px !important;
  color: var(--muted) !important;
}
.seo-slot__note {
  grid-column: 2;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .seo-day--today h3,
  .seo-day li.seo-slot--live,
  .seo-day li.seo-slot--upcoming,
  .seo-day li.seo-slot--pulse { animation: none; opacity: 1; }
}
@media (max-width: 420px) {
  .seo-day { padding: 14px; }
  .seo-day li { grid-template-columns: 82px minmax(0, 1fr); column-gap: 8px; }
}

/* ── Notes et vides ─────────────────────────────────────────────────────── */

.seo-note,
.seo-empty {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 0;
}
.seo-wire .seo-note { margin: 18px 0 0; }
.seo-empty { font-style: italic; }

.seo-foot-meta { font-size: 12.5px; }

/* ── Mât simplifié (ces pages n'ont pas la banque photo, qui est en JS) ─── */

/* Le pied de page est un frère de <main>, pas son enfant : il sort ainsi de
   `.seo-wire p` (15 px, couleur du corps) et garde la typographie qu'il a
   partout ailleurs sur le site. Il reprend en revanche la gouttière et la
   largeur de la colonne principale pour rester aligné avec elle. */
.seo-wire + .site-foot {
  max-width: var(--maxw);
  margin: 0 auto;
  /* Garder le même air que `.site-foot` : `padding: 0 …` collait le filet
     à « Conçu avec… » (colonne droite en wide E). */
  padding: 28px var(--pad) 48px;
  position: relative;
  border-top: 0;
}
.seo-wire + .site-foot::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--pad);
  right: var(--pad);
  border-top: 1px solid var(--rule);
  pointer-events: none;
}

@media (max-width: 900px) {
  .seo-radio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .seo-facts { grid-template-columns: 1fr; }
  .seo-cards { grid-template-columns: 1fr; }
  .seo-radio-cards { grid-template-columns: 1fr; }
}

/* ── Page /sports/ — tableau RSEQ (parité LE-KIOSQUE « Au tableau ») ─── */

.seo-wire--sports { padding-bottom: 56px; }

.sports-board-meta {
  margin: -8px 0 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
/* Horodatage exact : un peu plus lisible que le reste de la méta (exigence stats). */
.sports-board-meta__time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink, inherit);
  font-weight: 600;
}

.sports-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}
.sports-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sports-filters__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.sports-filter {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.sports-filter:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  color: var(--ink);
}
.sports-filter[aria-pressed="true"],
.sports-filter.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--rule));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
}
.sports-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sports-board-status {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}

.sports-sport-block {
  margin: 0 0 28px;
  border: 0;
}
/*
 * Focus group (5 personas) : option B unanime —
 * chevron collé au groupe « glyphe + libellé + compteur », pas au bord droit.
 * Cluster éditorial compact ; summary full-width reste cliquable.
 */
.sports-sport-block__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.4rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 12px;
  /* Zone tactile confortable (~44px) sans orphelin à droite. */
  padding: 0.45rem 0.15rem 0.45rem 0;
  min-height: 2.5rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  border-radius: 6px;
  /* Full-width = grande cible de clic ; contenu + chevron restent en cluster (flex-start). */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.sports-sport-block__title::-webkit-details-marker { display: none; }
.sports-sport-block__title::marker { content: ''; }
.sports-sport-block__title:hover { color: var(--accent); }
.sports-sport-block__title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.sports-sport-block__glyph {
  font-size: 1.15rem;
  line-height: 1;
  flex: 0 0 auto;
}
.sports-sport-block__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sports-sport-block__count {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.3;
  flex: 0 0 auto;
}
/* Répartition Fém. / Masc. dans le titre de section. */
.sports-sport-block__sex-split {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.sports-sport-block__sex {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}
.sports-sport-block__sex--f {
  color: #9d174d;
  background: color-mix(in srgb, #db2777 14%, transparent);
  border: 1px solid color-mix(in srgb, #db2777 32%, transparent);
}
.sports-sport-block__sex--m {
  color: #1e3a8a;
  background: color-mix(in srgb, #3b82f6 14%, transparent);
  border: 1px solid color-mix(in srgb, #3b82f6 32%, transparent);
}
/* Chevron dans le cluster (pas margin-inline-start: auto). */
.sports-sport-block__chevron {
  margin-inline-start: 0.15rem;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  /* Ouvert : pointe vers le bas (V). */
  transform: rotate(45deg);
  transition: transform 160ms ease, opacity 160ms ease;
  opacity: 0.55;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .sports-sport-block__chevron { transition: none; }
}
.sports-sport-block:not([open]) > .sports-sport-block__title {
  margin-bottom: 0;
}
/* Fermé : pointe vers la droite (›). */
.sports-sport-block:not([open]) .sports-sport-block__chevron {
  transform: rotate(-45deg);
  opacity: 0.8;
}
.sports-sport-block[hidden],
.sports-panel[hidden],
.sports-sex-group[hidden] {
  display: none !important;
}

.sports-board {
  display: grid;
  /*
   * auto-fill : 1 → 2 → 3 colonnes selon largeur (pas 3 forcées).
   * min 288 px : assez pour nom + ligne de match sans « É T S » empilé.
   */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
  gap: 14px;
  align-items: start;
}

/* Sous-titres Féminin / Masculin : pleine largeur de la grille. */
.sports-sex-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
  padding: 0.35rem 0 0.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 85%, transparent);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.sports-sex-group:first-child {
  margin-top: 0;
}
.sports-sex-group__label--f {
  color: #9d174d;
}
.sports-sex-group__label--m {
  color: #1e3a8a;
}
.sports-sex-group__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.sports-panel {
  container-type: inline-size;
  container-name: sports-panel;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-soft);
  padding: 14px 14px 12px;
  border-top: 3px solid var(--sports-panel-c, var(--accent));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  scroll-margin-top: 5.5rem; /* sous barre radio sticky */
  transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  min-width: 0; /* évite le débordement grid */
}
/*
 * Deep-link / sélection (puce mât ou ?team=) — carte formation ciblée.
 * Pas de voile coloré sur le fond : le contenu (titres, scores) reste lisible.
 * Seule la bordure / le halo pulse (parité CTA « Au tableau »).
 */
.sports-panel.is-spotlight {
  background: var(--bg-soft);
  border-color: var(--sports-panel-c, var(--accent));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--sports-panel-c, var(--accent)) 42%, transparent),
    0 8px 22px -12px color-mix(in srgb, var(--sports-panel-c, var(--accent)) 38%, transparent);
  animation: sports-panel-spotlight-pulse 2.4s ease-in-out infinite;
}
@keyframes sports-panel-spotlight-pulse {
  0%, 100% {
    border-color: color-mix(in srgb, var(--sports-panel-c, var(--accent)) 72%, var(--rule));
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--sports-panel-c, var(--accent)) 28%, transparent),
      0 6px 18px -12px color-mix(in srgb, var(--sports-panel-c, var(--accent)) 30%, transparent);
  }
  50% {
    border-color: var(--sports-panel-c, var(--accent));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--sports-panel-c, var(--accent)) 48%, transparent),
      0 10px 26px -10px color-mix(in srgb, var(--sports-panel-c, var(--accent)) 42%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sports-panel.is-spotlight {
    animation: none;
    border-color: var(--sports-panel-c, var(--accent));
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--sports-panel-c, var(--accent)) 40%, transparent),
      0 6px 18px -12px color-mix(in srgb, var(--sports-panel-c, var(--accent)) 32%, transparent);
  }
}
/* Carte « liens officiels » (hockey hors API S1) : un peu plus large. */
.sports-panel--external {
  grid-column: 1 / -1;
  max-width: 42rem;
}
.sports-panel--external .sports-panel__meta {
  max-width: 40rem;
}
.sports-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.sports-panel__glyph {
  font-size: 1.35rem;
  line-height: 1;
  flex: 0 0 auto;
  margin-top: 2px;
}
.sports-panel__identity {
  min-width: 0;
  flex: 1 1 auto;
}
/*
 * Identité d’équipe (focus group stats univ.) :
 *  - H3 = surnom / marque (Cougars, Carabins…) — honneur au club
 *  - programme = établissement court + code (sous-marque)
 *  - school = nom légal
 */
.sports-panel__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  margin: 0 0 3px;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sports-panel__name--branded .sports-panel__brand {
  color: color-mix(in srgb, var(--sports-panel-c, var(--accent)) 42%, var(--ink));
}
.sports-panel__brand {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sports-panel__program {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin: 0 0 3px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.sports-panel__name-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sports-panel__code {
  font-family: var(--sans);
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 auto;
  opacity: 0.85;
}
/* Ancienne pastille surnom — conservée si un template externe s’y réfère. */
.sports-panel__nick {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--sports-panel-c, var(--accent)) 78%, var(--ink));
  background: color-mix(in srgb, var(--sports-panel-c, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sports-panel-c, var(--accent)) 28%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Catégorie Féminin / Masculin — pastille bien visible (pas un « F » perdu dans la meta). */
.sports-panel__sex {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 999px;
  padding: 2px 7px;
  flex: 0 0 auto;
}
.sports-panel__sex--f {
  color: #9d174d;
  background: color-mix(in srgb, #db2777 16%, transparent);
  border: 1px solid color-mix(in srgb, #db2777 36%, transparent);
}
.sports-panel__sex--m {
  color: #1e3a8a;
  background: color-mix(in srgb, #3b82f6 14%, transparent);
  border: 1px solid color-mix(in srgb, #3b82f6 32%, transparent);
}
.sports-panel__sex--x {
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
}
/* Match en cours — même famille que Féminin / Masculin (lavis + filet, pas un plot LED). */
.sports-panel__live {
  display: none;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 999px;
  padding: 2px 7px;
  flex: 0 0 auto;
  color: var(--status-live, #c8102e);
  background: color-mix(in srgb, var(--status-live, #c8102e) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-live, #c8102e) 36%, transparent);
}
.sports-panel--live .sports-panel__live,
.sports-panel__live:not([hidden]) {
  display: inline-block;
}
.sports-panel__live[hidden] { display: none !important; }
[data-theme="dark"] .sports-panel__live {
  color: var(--status-live-soft, #ff7d6e);
  background: color-mix(in srgb, var(--status-live-soft, #ff7d6e) 16%, transparent);
  border-color: color-mix(in srgb, var(--status-live-soft, #ff7d6e) 36%, transparent);
}
/* Ligne 2 : établissement (registre). */
.sports-panel__school {
  margin: 0 0 3px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
/* Ligne 3 : sport · sexe · division · secteur · fiche. */
.sports-panel__meta {
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.sports-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Date | score | adversaire | badge — colonne adversaire un peu plus large. */
  display: grid;
  grid-template-columns: 4.5rem 4.25rem minmax(0, 1fr) 1.25rem;
  column-gap: 8px;
}
.sports-panel__empty {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}
.sports-result {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: start;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--rule) 78%, transparent);
}
@supports not (grid-template-columns: subgrid) {
  .sports-panel__list { display: block; }
  .sports-result {
    display: grid;
    grid-template-columns: 4.75rem 4.5rem minmax(0, 1fr) 1.35rem;
    column-gap: 8px;
    grid-column: auto;
  }
}
/* Même grille que les scores — seul le bandeau change. */
.sports-result--next {
  border-left: 3px solid var(--status-upcoming-mid, #bd8a18);
  margin-inline: -6px;
  padding-inline: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--status-upcoming-soft, #e8c07a) 16%, transparent);
}
.sports-result:first-child {
  border-top: 0;
  padding-top: 0;
}
.sports-result__time {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
  min-width: 0;
}
.sports-result__clock {
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
}
.sports-result__score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.sports-result__score--next {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--status-upcoming, #9a6900);
  white-space: normal;
  line-height: 1.25;
}
.sports-result__title {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
.sports-result__title a {
  display: block;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.sports-result__title a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.sports-result__vs {
  opacity: 0.65;
  margin-right: 3px;
  font-weight: 600;
}
/* Ligne adversaire : surnom (identité) en gras ; établissement court à côté. */
.sports-result__opp {
  font-weight: 700;
  color: var(--ink);
}
.sports-result__opp-school,
.sports-result__opp-nick {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
/* Établissement sur sa propre ligne — plus de (parenthèse) qui casse en vertical. */
.sports-result__opp-full {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.sports-result__venue {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.sports-result__venue::before {
  content: "· ";
  opacity: 0.7;
}
.sports-result__badge {
  justify-self: end;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sports-result--W {
  border-left: 3px solid #3d9a6a;
  margin-inline: -6px;
  padding-inline: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, #3d9a6a 9%, transparent);
}
.sports-result--W .sports-result__badge { color: #2f7a54; }
.sports-result--L {
  border-left: 3px solid #c45c5c;
  margin-inline: -6px;
  padding-inline: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, #c45c5c 9%, transparent);
}
.sports-result--L .sports-result__badge { color: #a04545; }
.sports-result--D,
.sports-result--T {
  border-left: 3px solid #8fa3b0;
  margin-inline: -6px;
  padding-inline: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, #8fa3b0 10%, transparent);
}
.sports-result--place {
  border-left: 3px solid #0e7490;
  margin-inline: -6px;
  padding-inline: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, #0e7490 9%, transparent);
}
.sports-result__badge--place {
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 700;
  color: inherit;
}
.sports-result--next .sports-result__badge--next {
  color: var(--status-upcoming, #9a6900);
}
.sports-result--live {
  border-left: 3px solid var(--status-live, #c8102e);
  margin-inline: -6px;
  padding-inline: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--status-live, #c8102e) 9%, transparent);
}
.sports-result__score--live {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--status-live, #c8102e);
  white-space: normal;
  line-height: 1.25;
}
.sports-result--live .sports-result__badge {
  color: var(--status-live, #c8102e);
}
.sports-result--live .sports-result__badge:empty {
  visibility: hidden;
}
[data-theme="dark"] .sports-result--live {
  border-left-color: var(--status-live-soft, #ff7d6e);
  background: color-mix(in srgb, var(--status-live-soft, #ff7d6e) 12%, transparent);
}
[data-theme="dark"] .sports-result__score--live,
[data-theme="dark"] .sports-result--live .sports-result__badge {
  color: var(--status-live-soft, #ff7d6e);
}
.sports-filter[data-filter-period="live"][aria-pressed="true"],
.sports-filter[data-filter-period="live"].is-active {
  border-color: color-mix(in srgb, var(--status-live, #c8102e) 55%, var(--rule));
  background: color-mix(in srgb, var(--status-live, #c8102e) 12%, var(--bg));
  color: var(--status-live, #c8102e);
}
[data-theme="dark"] .sports-filter[data-filter-period="live"][aria-pressed="true"],
[data-theme="dark"] .sports-filter[data-filter-period="live"].is-active {
  color: var(--status-live-soft, #ff7d6e);
  border-color: color-mix(in srgb, var(--status-live-soft, #ff7d6e) 55%, var(--rule));
  background: color-mix(in srgb, var(--status-live-soft, #ff7d6e) 12%, var(--bg));
}
/* Ancienne note sources (retirée du HTML) — garde le sélecteur inoffensif. */
.sports-board-note { display: none; }

/* Méta hors saison (focus-group B) — sous le score, secondaire. */
.sports-result__season-meta {
  grid-column: 1 / -1;
  margin: -2px 0 2px;
  padding: 0 0 0 0.15rem;
  font: 500 0.7rem/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: var(--muted);
}
.sports-result--prior-season .sports-result__score {
  opacity: 0.92;
}
.sports-chip__season-meta {
  display: inline;
  margin-left: 0.35rem;
  font: 500 0.65rem/1.2 var(--sans);
  color: var(--muted);
  white-space: nowrap;
}
.sports-chip--prior-season {
  opacity: 0.94;
}

/* ── Outils page Au tableau : flèche + loupe overlay bas-droite ── */
.sports-page-tools {
  --tools-fab: 48px;
  --tools-outset: 12px;
  --tools-gutter: max(0px, calc((100vw - min(var(--maxw), 100vw)) / 2));
  --tools-side-left: max(
    max(14px, env(safe-area-inset-left, 0px)),
    calc(var(--tools-gutter) - var(--tools-fab) - var(--tools-outset))
  );
  --tools-side-right: max(
    max(14px, env(safe-area-inset-right, 0px)),
    calc(var(--tools-gutter) - var(--tools-fab) - var(--tools-outset))
  );
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--vk-inset, 0px));
  z-index: 180;
  display: flex;
  /* DOM = [flèche, loupe] — les deux collés à droite (flèche hidden : loupe seule). */
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 12px;
  padding-left: var(--tools-side-left);
  padding-right: var(--tools-side-right);
  pointer-events: none;
}
.sports-page-tools > * { pointer-events: auto; }

.sports-page-tools__fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 2px 8px -2px rgba(0, 0, 0, 0.12),
    0 8px 24px -10px rgba(0, 0, 0, 0.18);
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease;
}
.sports-page-tools__fab svg {
  width: 22px;
  height: 22px;
  display: block;
}
.sports-page-tools__fab[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .sports-page-tools__fab:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
    color: var(--accent);
  }
}
.sports-page-tools__fab:active { transform: scale(0.96); }
.sports-page-tools__fab:focus { outline: none; }
.sports-page-tools__fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
[data-theme="dark"] .sports-page-tools__fab {
  background: var(--bg-soft);
  border-color: var(--rule);
  box-shadow:
    0 2px 10px -2px rgba(0, 0, 0, 0.45),
    0 10px 28px -12px rgba(0, 0, 0, 0.55);
}

.sports-search {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: min(360px, calc(100vw - 28px));
}
.sports-search__fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 2px 8px -2px rgba(0, 0, 0, 0.12),
    0 8px 24px -10px rgba(0, 0, 0, 0.18);
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sports-search__fab svg {
  width: 22px;
  height: 22px;
  display: block;
}
.sports-search__fab .hidden { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .sports-search__fab:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
    color: var(--accent);
  }
}
.sports-search__fab:active { transform: scale(0.96); }
.sports-search__fab:focus { outline: none; }
.sports-search__fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.sports-search__fab.is-active,
.sports-search.has-query .sports-search__fab {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
[data-theme="dark"] .sports-search__fab {
  background: var(--bg-soft);
  border-color: var(--rule);
}

.sports-search__panel {
  width: min(320px, calc(100vw - 28px));
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: var(--bg);
  box-shadow:
    0 4px 16px -6px rgba(0, 0, 0, 0.14),
    0 16px 40px -16px rgba(0, 0, 0, 0.22);
}
.sports-search__panel[hidden] { display: none !important; }
[data-theme="dark"] .sports-search__panel {
  background: var(--bg-soft);
}

.sports-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-soft, var(--bg));
}
.sports-search__field:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
}
.sports-search__field-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--muted);
}
.sports-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 14px/1.3 var(--sans);
  padding: 10px 0;
  outline: none;
}
.sports-search__input::placeholder { color: var(--muted); opacity: 0.9; }
/* Masquer la loupe native type=search (WebKit) */
.sports-search__input::-webkit-search-decoration,
.sports-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.sports-search__clear {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0 4px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sports-search__clear.hidden { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .sports-search__clear:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
}

.sports-search__hint {
  margin: 8px 2px 0;
  font: 400 11.5px/1.4 var(--sans);
  color: var(--muted);
}

@media print {
  .sports-page-tools { display: none !important; }
}

@media (max-width: 560px) {
  .sports-panel__list {
    grid-template-columns: 4.25rem 4rem minmax(0, 1fr) 1.2rem;
    column-gap: 6px;
  }
  .sports-result { font-size: 12.5px; }
  @supports not (grid-template-columns: subgrid) {
    .sports-result {
      grid-template-columns: 4.25rem 4rem minmax(0, 1fr) 1.2rem;
      column-gap: 6px;
    }
  }
  .sports-panel { padding: 12px 12px 10px; }
}

/* Focus-group P3 : noms longs — repli 2 lignes sous ~340px de carte */
@container sports-panel (max-width: 340px) {
  .sports-panel__list > .sports-result {
    display: grid;
    grid-template-columns: 1fr auto;
    /* Trois rangées explicites : time+badge / score / title (grid-row: 3). */
    grid-template-rows: auto auto auto;
    gap: 4px 8px;
  }
  .sports-result__time { grid-column: 1; grid-row: 1; }
  .sports-result__badge { grid-column: 2; grid-row: 1; justify-self: end; }
  .sports-result__score { grid-column: 1; grid-row: 2; }
  .sports-result__title { grid-column: 1 / -1; grid-row: 3; white-space: normal; overflow: visible; text-overflow: unset; }
  .sports-result__opp, .sports-result__opp-full { white-space: normal; overflow-wrap: anywhere; }
}