/* Résultats en direct — Roundnet Worlds 2026
 *
 * Valeurs reprises telles quelles du guide (index.html) : jetons de couleur,
 * échelle Poppins/Inter, rayons 9px et 8px, ombre de carte, hauteurs de
 * contrôle 44/56px, gouttière .shell de 1000px. Rien n'est réinventé ni
 * arrondi ici — la page doit se lire comme une page du guide.
 */

:root {
  --navy: #1A1A2E;
  --deep: #16213E;
  --accent: #FF6B35;
  --accent-hover: #E85B26;
  --bg: #F7F7FB;
  --white: #FFFFFF;
  --border: #DDDDDD;
  --text: #222222;
  --muted: #666666;
  --link: #C4471D;
  --blue: #1769AA;
  --blue-hover: #12558A;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--link); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.shell { max-width: 1000px; margin: 0 auto; padding: 24px 16px 64px; }

/* ---------------------------------------------------------------- entête (identique au guide) */

.hdr-d {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  padding: 20px 28px;
  background: var(--navy);
  border-radius: 2px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: start;
  text-decoration: none;
  color: inherit;
  font: inherit;
}

.brand-logo { display: block; width: 56px; height: 56px; object-fit: contain; flex: none; }
.brand-logo--m { width: 40px; height: 40px; }

.brand-name,
.brand-name-m {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
}

.brand-name { font-size: 26px; }
.brand-name-m { font-size: 19px; }
.brand-name .y,
.brand-name-m .y { color: var(--accent); }
.brand:hover .brand-name,
.brand:hover .brand-name-m { color: var(--accent); }

.hdr-d nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.3vw, 30px);
}

.navlink {
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  color: var(--white);
  font-size: 16px;
  border-bottom: 2px solid transparent;
}

.navlink:hover,
.navlink.is-current { border-bottom: 2px solid var(--accent); color: var(--accent); }

a.navlink,
a.mnav-item,
a.footlink { text-decoration: none; font: inherit; }

a.navlink { display: inline-flex; align-items: center; }
a.mnav-item { display: flex; width: 100%; box-sizing: border-box; }

.nav-sep { width: 1px; height: 34px; background: rgba(255, 255, 255, .35); }

.langwrap { position: relative; }

.langbtn-d {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  cursor: pointer;
  color: var(--white);
  font: inherit;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 8px;
  padding: 7px 10px;
  white-space: nowrap;
}

.langbtn-d:hover { color: var(--accent); border-color: var(--accent); }

.lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.lang-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--navy);
  border-radius: 5px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
}

.langmenu-d {
  position: absolute;
  top: 52px;
  inset-inline-end: 0;
  inset-inline-start: auto;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  min-width: 132px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(70vh, 470px);
  overflow-y: auto;
}

.langopt {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 0;
  border-inline-start: 3px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  color: var(--navy);
  text-align: start;
  background: transparent;
  font-weight: 600;
}

.langopt .lang-flag { margin-inline-end: 8px; font-size: 20px; }
.langopt .lang-code { background: var(--navy); color: var(--white); margin-inline-end: 0; }
.langopt.is-current { background: var(--bg); border-inline-start-color: var(--accent); font-weight: 700; }
.langopt.is-current .lang-code { background: var(--accent); color: var(--navy); }
.langopt:hover { background: var(--bg); }
.langopt.f-ar { font-family: 'Noto Sans Arabic', sans-serif; }
.langopt.f-ja { font-family: 'Noto Sans JP', sans-serif; }
.langopt.f-zh { font-family: 'Noto Sans TC', sans-serif; }

.hdr-m { display: none; }

.hdr-m-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--navy);
  padding: 16px 20px;
  min-height: 80px;
}

.burger {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--white);
}

.mnav { display: flex; flex-direction: column; background: var(--deep); }

.mnav-item {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  padding: 16px 20px;
  min-height: 48px;
  text-align: start;
  cursor: pointer;
  color: var(--white);
  font-size: 16px;
}

.mnav-item:last-child { border-bottom: 0; }
.mnav-item:hover,
.mnav-item.is-current { background: var(--navy); color: var(--accent); }

.langbtn-m {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 20px;
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  cursor: pointer;
  color: var(--navy);
  font-size: 16px;
}

.langbtn-m .lang-code { background: var(--navy); color: var(--white); }

.langmenu-m {
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hdr-m { display: none; }

@media (min-width: 768px) and (max-width: 1080px) {
  .hdr-d { display: none; }
  .hdr-m { display: block; }
}

@media (max-width: 767px) {
  .hdr-d { display: none; }
  .hdr-m { display: block; }
}

/* ------------------------------------------------------------------ corps */

main { margin-top: 48px; }

.title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

h1 {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.08;
  color: var(--navy);
}

.status { margin: 0; font-size: 14px; color: var(--muted); }

/* Renvoi vers le tableau squads de la federation. Il vit en haut de page, la ou
   l'on cherche des scores, plutot qu'au pied ou personne ne descend.
   Meme bleu et meme rayon que le bouton Streaming du guide : les deux renvois
   hors du site se ressemblent, et se distinguent de l'orange des actions
   propres a la page. Blanc sur #1769AA vaut 5,77:1, au-dela du seuil AA. */
.toplinks { display: flex; flex-wrap: wrap; gap: 10px; margin: -4px 0 22px; }
.toplink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 9px;
  background: var(--blue);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.toplink:hover { background: var(--blue-hover); color: var(--white); }
.toplink::after { content: "\2197"; font-size: 15px; }

.status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: #2F7D4B;
  vertical-align: 1px;
}

.status.is-error::before { background: #D83B4C; }
.status.is-loading::before { background: var(--accent); }

.banner {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-inline-start: 4px solid #D83B4C;
  border-radius: 9px;
  font-size: 15px;
  text-wrap: pretty;
}

/* Encart d'état : le motif « venue-body » du guide. */
.notice {
  margin: 0 0 28px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: 9px;
  font-size: 15px;
  color: var(--text);
  text-wrap: pretty;
}

.notice b { color: var(--navy); }
.notice p { margin: 0; }
.notice p + p { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* --------------------------------------------------------------- contrôles */

.controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Métriques des boutons de vue de la carte du guide. */
.chip {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.chip:hover { border-color: var(--navy); }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); }

.chip small {
  margin-inline-start: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.chip.is-on small { color: rgba(255, 255, 255, .72); }

/* Etiquette lue mais non vue : le seul nom accessible du champ etait son
   `placeholder`, que les technologies d'assistance n'exposent pas toutes. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.searchbox {
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}

/* ------------------------------------------------------- saisie assistee */

.suggest-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  inset-inline: 0;
  max-height: 320px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(26, 26, 46, .14);
}

.suggest-option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  color: var(--navy);
}

.suggest-option:hover,
.suggest-option.is-active { background: var(--bg); }
.suggest-option.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }

.suggest-option-label { flex: 1; min-width: 0; }
.suggest-option-detail { font-size: 13px; color: var(--muted); }

.suggest-option-count {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.search {
  width: 100%;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 15px;
}

.suggest {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.suggest-label { font-size: 13px; font-weight: 700; color: var(--navy); }
.suggest .chip { min-height: 38px; padding: 0 13px; font-size: 15px; }
.suggest .chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--navy); }

.search-hint { margin: 0 0 16px; font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- sections */

.section { margin-top: 48px; }
#content > .section:first-child { margin-top: 32px; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--navy);
}

.section-count {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
}

.division-head {
  margin: 28px 0 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
}

.section .division-head:first-of-type { margin-top: 0; }

/* --------------------------------------------------------- grille de poules */

/* Une poule par colonne, un tour par ligne. Le nombre de colonnes vient de
   `--cols`, pose par score.js : aucune requete media n'intervient ici, faute de
   quoi le point de rupture CSS et le calcul JavaScript pourraient diverger et
   remplir la grille dans un ordre que le DOM ne prevoit pas. */
.group-band {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.group-band + .group-band { margin-top: 24px; }

.group-head {
  margin: 0;
  padding: 8px 12px;
  background: var(--navy);
  border-radius: 8px;
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/* Une cellule porte les matchs d'un tour dans une poule : deux dans une poule
   de cinq equipes, trois dans une poule de six. */
.match-slot {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

/* Case sans poule : la derniere bande est completee pour que le remplissage
   ligne par ligne garde une poule par colonne. Elle occupe la place, sans rien
   peindre ni rien annoncer. */
.group-head.is-empty {
  background: none;
  padding: 0;
}

/* En liste, les en-tetes et les cales n'ont plus rien a aligner : la lecture se
   fait tour par tour et chaque carte nomme deja sa poule. */
.group-band--single > .group-head,
.group-band--single > .match-slot.is-empty { display: none; }

/* ------------------------------------------------------------------ match */

.match {
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.match-meta .sep { color: var(--border); }

.side {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.side + .side { border-top: 1px solid var(--border); }

.side-name { font-size: 15px; line-height: 1.4; color: var(--text); }
.side.is-winner .side-name { font-weight: 700; color: var(--navy); }
.side-name .tbd { color: var(--muted); }

.side-score {
  flex: none;
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.side.is-winner .side-score { color: var(--accent); }
.side-score .g + .g { margin-inline-start: 8px; }
.pending .side-score { font-weight: 400; color: var(--border); }

/* ------------------------------------------------------------------- états */

/* Motif « rules-discrepancy » du guide : encart neutre en pointillés. */
.empty,
.more {
  margin: 0;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px dashed var(--muted);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  text-wrap: pretty;
}

.empty { padding: 28px 18px; text-align: center; font-size: 15px; }
.more { margin-top: 16px; text-align: center; }

.loading { margin: 32px 0; text-align: center; color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------- ou regarder (/stream) */

.stream-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.stream-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.stream-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  color: var(--navy);
  text-decoration: none;
}

.stream-link:hover .stream-name { color: var(--link); text-decoration: underline; }

.stream-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.stream-name {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.stream-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stream-platform { font-size: 13px; color: var(--muted); }
.stream-note { margin: 0; font-size: 14px; color: var(--text); text-wrap: pretty; }

.src { margin: 24px 0 0; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------------- pied */

.site-footer {
  margin-top: 64px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--navy);
  border-radius: 9px;
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}

.foot-brand { max-width: 52ch; }

.foot-brand p:first-child {
  margin: 0 0 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
}

.foot-brand .y { color: var(--accent); }

.foot-disclaimer {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
  text-wrap: pretty;
}

.foot-nav { display: flex; flex-direction: column; gap: 10px; }

.footlink {
  align-self: flex-start;
  color: var(--white);
  font-size: 16px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.footlink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --------------------------------------------------------------- adaptatif */

@media (max-width: 767px) {
  main { margin-top: 32px; }
  .searchbox { max-width: none; }
  /* La grille n'est pas traitee ici : `--cols` vaut deja 1 sous cette largeur,
     et la classe `group-band--single` masque en-tetes et cales. */
}

@media (max-width: 430px) {
  .section-head { font-size: 21px; }
}