/*
 * PronoTennis v2 - feuille de style commune
 * Charte : vert gazon pour le cadre et les « tableaux d'affichage » des scores,
 * jaune balle réservé au vainqueur choisi, à votre ligne au classement et au service en direct.
 * Police : Archivo (variable : graisse 400-800, largeur 75-100 %), licence SIL OFL.
 */

@font-face {
  font-family: "Archivo";
  src: url("archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --gazon: #0e4a36;
  --gazon-fonce: #093426;
  --gazon-clair: #e2ece6;
  --gazon-voile: #f3f7f4;
  --encre: #17221d;
  --gris: #55635c;
  --gris-clair: #87958e;
  --fond: #edf1ee;
  --surface: #ffffff;
  --ligne: #d4ddd8;
  --balle: #d6ea3a;
  --balle-pale: #f6fbd8;
  --atp: #1f4e79;
  --wta: #7a2f6b;
  --erreur: #a8261b;
  --erreur-fond: #fbebe9;
  --ok: #13684d;
  --ok-fond: #e5f3ec;
  --info-fond: #e9f0f6;
  --rayon: 10px;
  --rayon-petit: 4px;
  --police: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --etroit: 78%;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.5;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--gazon); text-underline-offset: 2px; }
a:hover { color: var(--gazon-fonce); }

h1, h2, h3 {
  font-stretch: var(--etroit);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
}
h1 { font-size: 2.125rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 0.8em; }
small { font-size: 0.8125rem; font-weight: 400; color: var(--gris); }

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

.masque {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.evitement {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--balle); color: var(--encre); padding: 8px 14px; border-radius: 6px; font-weight: 650;
}
.evitement:focus { top: 8px; }

.icone { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.125em; }
.icone svg { width: 100%; height: 100%; }

/* ---------- En-tête et bandeau du tournoi ---------- */

.entete { background: var(--gazon); color: #fff; position: relative; z-index: 20; }
.entete-int {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; min-height: 60px;
}
.entete :focus-visible { outline-color: var(--balle); }

.marque {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none;
  font-stretch: 75%; font-weight: 800; font-size: 1.375rem; letter-spacing: 0.01em;
}
.marque:hover { color: #fff; }
.marque .icone { width: 28px; height: 28px; }

.nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav > a, .menu > summary {
  color: rgba(255, 255, 255, 0.86); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
}
.nav > a:hover, .menu > summary:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav > a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 #fff; border-radius: 0; }

.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icone { width: 0.85em; height: 0.85em; transition: transform 0.15s; }
.menu[open] > summary .icone-chevron { transform: rotate(180deg); }
.menu-panneau {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px;
  background: var(--surface); color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--rayon);
  box-shadow: 0 12px 32px rgba(9, 52, 38, 0.18); padding: 10px;
}
.menu-plus .menu-panneau { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 4px 16px; min-width: 420px; }
.menu-compte .menu-panneau { left: auto; right: 0; min-width: 200px; }
.menu-panneau a, .menu-panneau .lien {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 6px;
  color: var(--encre); text-decoration: none; font-size: 0.9375rem;
}
.menu-panneau a:hover, .menu-panneau .lien:hover { background: var(--gazon-voile); color: var(--gazon); }
.menu-panneau a[aria-current="page"] { font-weight: 700; }
.menu-groupe { display: flex; flex-direction: column; }
.menu-titre { margin: 6px 10px 2px; font-size: 0.8125rem; font-weight: 650; color: var(--gris); }
.menu-note { grid-column: 1 / -1; margin: 6px 10px 2px; font-size: 0.8125rem; color: var(--gris); }
.menu :focus-visible { outline-color: var(--gazon); }
.entete .menu > summary:focus-visible { outline-color: var(--balle); }

.compte { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.compte .menu > summary { padding: 6px 8px; }
.pastille {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 750; font-size: 0.875rem;
}
.lien-entete { color: #fff; font-weight: 600; text-decoration: none; }
.lien-entete:hover { color: #fff; text-decoration: underline; }

.tournoi {
  background-color: var(--gazon);
  /* lignes de court très discrètes : ligne de service et ligne médiane */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)),
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14));
  background-size: 100% 2px, 2px 12%;
  background-position: 0 88%, 72% 100%;
  background-repeat: no-repeat;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tournoi-int { max-width: 1200px; margin: 0 auto; padding: 22px 24px 30px; }
.tournoi-nom {
  font-stretch: 75%; font-weight: 800; font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: 1; margin: 0 0 8px; letter-spacing: -0.01em; color: #fff;
}
.tournoi-etat { margin: 0; color: #cfe1d7; font-size: 1.0625rem; }
.compte-a-rebours { color: #fff; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Mise en page ---------- */

.contenu { max-width: 1200px; margin: 0 auto; padding: 28px 24px 56px; }

.page-etroite { max-width: 460px; margin: 0 auto; }
.page-moyenne { max-width: 760px; margin: 0 auto; }
.page-large { max-width: 900px; margin: 0 auto; }

.bloc { margin-bottom: 40px; }
.bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.bloc-tete h2 { margin: 0; font-size: 1.625rem; }
.maj-live { margin: 0; font-size: 0.8125rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.maj-live:empty { display: none; }

.jour {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.9375rem; font-weight: 700; color: var(--gris); margin: 20px 0 10px;
}
.jour::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }

.vide { color: var(--gris); }
.note { color: var(--gris); font-size: 0.875rem; }

/* ---------- Annonces ---------- */

.annonce { padding: 12px 16px; border-radius: 8px; margin: 0 0 20px; background: var(--info-fond); }
.annonce-ok { background: var(--ok-fond); color: #0d4a37; }
.annonce-erreur { background: var(--erreur-fond); color: var(--erreur); }
.annonce a { font-weight: 650; }

.bienvenue { margin-bottom: 32px; }
.bienvenue h2 { font-size: 1.75rem; max-width: 22ch; }
.bienvenue p { max-width: 62ch; color: var(--gris); }
.bienvenue .bouton { margin-right: 8px; }

/* ---------- Boutons et formulaires ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gazon); color: #fff; border: 1px solid var(--gazon);
  font: inherit; font-weight: 650; font-size: 0.9375rem; line-height: 1.2;
  padding: 10px 18px; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--gazon-fonce); color: #fff; }
.bouton:disabled { opacity: 0.6; cursor: progress; }
.bouton-secondaire { background: var(--surface); color: var(--gazon); border-color: var(--ligne); }
.bouton-secondaire:hover { background: var(--gazon-voile); color: var(--gazon-fonce); }
.bouton-clair { background: #fff; color: var(--gazon); border-color: #fff; }
.bouton-clair:hover { background: var(--balle); border-color: var(--balle); color: var(--encre); }
.bouton-large { width: 100%; }
.lien { background: none; border: 0; font: inherit; color: var(--gazon); cursor: pointer; padding: 0; width: 100%; text-align: left; }

.formulaire { display: flex; flex-direction: column; gap: 16px; }
.carte-formulaire { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 24px; margin-bottom: 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > span:first-child { font-weight: 650; font-size: 0.9375rem; }
.champ input, .champ select {
  font: inherit; font-size: 1rem; color: var(--encre); background: #fff;
  border: 1px solid #b9c6bf; border-radius: 8px; padding: 10px 12px; min-height: 44px; width: 100%;
}
.champ input:focus, .champ select:focus { outline: 3px solid rgba(14, 74, 54, 0.22); outline-offset: 0; border-color: var(--gazon); }
.champ input[aria-invalid="true"] { border-color: var(--erreur); }
.champ-erreur { color: var(--erreur); font-size: 0.875rem; }
.case-a-cocher { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.case-a-cocher input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--gazon); flex: none; }
.groupe { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 14px; }
.groupe legend { font-stretch: var(--etroit); font-weight: 750; font-size: 1.25rem; padding: 0; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.groupe + .groupe { border-top: 1px solid var(--ligne); padding-top: 22px; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.actions-formulaire { display: flex; align-items: center; gap: 18px; }
.piege { position: absolute; left: -9999px; }
.intro { color: var(--gris); }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; cursor: pointer; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce span {
  display: inline-block; padding: 5px 12px; border: 1px solid #b9c6bf; border-radius: 999px;
  font-size: 0.875rem; font-weight: 600; background: #fff; font-variant-numeric: tabular-nums;
}
.puce input:checked + span { background: var(--gazon); border-color: var(--gazon); color: #fff; }
.puce input:focus-visible + span { outline: 3px solid var(--gazon); outline-offset: 2px; }
.puce input:disabled + span { opacity: 0.55; cursor: default; }

/* ---------- Joueurs ---------- */

.joueur { display: flex; align-items: center; gap: 10px; min-width: 0; }
.joueur-photo {
  flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: var(--gazon-clair); display: grid; place-items: center;
}
.joueur-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.initiales { font-stretch: 75%; font-weight: 750; font-size: 0.8125rem; color: var(--gazon); }
.joueur-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.joueur-nom { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.joueur-details { font-size: 0.8125rem; color: var(--gris); display: flex; gap: 8px; }
.joueur-nation { text-decoration: none; letter-spacing: 0.02em; }
.joueur-rang { font-variant-numeric: tabular-nums; }

.circuit {
  display: inline-block; font-size: 0.75rem; font-weight: 750; letter-spacing: 0.03em;
  padding: 2px 7px; border-radius: var(--rayon-petit); color: #fff; background: var(--atp);
}
.circuit-wta { background: var(--wta); }

/* ---------- Cartes de match ---------- */

.carte-etat { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--gris); font-size: 0.8125rem; font-weight: 600; }
.carte-etat.est-fait { color: var(--ok); }
.carte-etat.est-direct { color: var(--gazon); }
.point-direct { width: 8px; height: 8px; border-radius: 50%; background: #d23b2b; box-shadow: 0 0 0 3px rgba(210, 59, 43, 0.18); }

.saisie-libelle { font-size: 0.875rem; color: var(--gris); margin: 0 0 8px; }
.nom-vainqueur { color: var(--encre); font-weight: 650; }
.tuiles { display: flex; gap: 6px; flex-wrap: wrap; }
.tuile {
  width: 46px; height: 46px; border: 0; border-radius: var(--rayon-petit);
  background: var(--gazon); color: #fff; text-align: center; padding: 0;
  font-family: var(--police); font-stretch: 75%; font-weight: 750; font-size: 1.375rem;
  letter-spacing: 0.08em; font-variant-numeric: tabular-nums; caret-color: var(--balle);
}
.tuile::placeholder { color: rgba(255, 255, 255, 0.35); }
.tuile:focus { outline: 3px solid var(--balle); outline-offset: 1px; }
.tuile[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #ff8a7a; }
.sets { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sets-libelle { font-size: 0.875rem; color: var(--gris); margin-right: 2px; }

.carte-message { margin: 0 auto 0 0; font-size: 0.875rem; color: var(--gris); }
.carte-message.erreur { color: var(--erreur); }
.carte-message.ok { color: var(--ok); }

.bouton-beber {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.875rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 999px; padding: 4px 14px 4px 6px; cursor: pointer; color: var(--encre);
}
.bouton-beber:hover { border-color: var(--gazon); }
.bouton-beber img { width: 24px; height: 24px; }

.aide-saisie { font-size: 0.875rem; color: var(--gris); margin-top: 14px; max-width: 70ch; }
.score-texte { font-stretch: 75%; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* ---------- Tableau d'affichage des scores ---------- */

.tableau-score { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.tableau-score th { text-align: left; font-weight: inherit; padding: 0 8px 0 0; width: 100%; max-width: 0; }
.tableau-score td { padding: 0; }
.tableau-score td + td { padding-left: 4px; }
.tableau-score .service { width: 14px; text-align: center; }
.balle-service { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--balle); box-shadow: 0 0 0 1.5px var(--gazon-fonce); vertical-align: middle; }
.tableau-score .case {
  width: 36px; min-width: 36px; height: 36px; text-align: center; vertical-align: middle;
  background: var(--gazon); color: rgba(255, 255, 255, 0.58); border-radius: var(--rayon-petit);
  font-stretch: 75%; font-weight: 750; font-size: 1.1875rem; font-variant-numeric: tabular-nums;
}
.tableau-score .case-gagnee { color: #fff; }
.tableau-score .case-courante { background: var(--gazon-fonce); color: var(--balle); box-shadow: inset 0 0 0 2px var(--balle); }
.tableau-score .case-vide { background: var(--gazon-clair); }
.tableau-score .case-jeu { background: #fff; color: var(--gazon); box-shadow: inset 0 0 0 1px var(--gazon); min-width: 40px; }
.tableau-score .case-change { animation: case-change 1.6s ease-out; }
@keyframes case-change { from { background: var(--balle); color: var(--gazon-fonce); } }
.tableau-score .perdant .joueur-nom { color: var(--gris); font-weight: 600; }
.tableau-score .gagnant .joueur-nom { font-weight: 750; }

.libelle { color: var(--gris); font-size: 0.8125rem; font-weight: 600; margin-right: 4px; }
.sans-prono { color: var(--gris); }
.beber { vertical-align: -3px; }

.cote { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--surface); }
.cote-part { display: block; min-width: 2px; }
.cote-1 { background: var(--gazon); }
.cote-2 { background: #a7bdb2; }
.cote-legende { display: flex; justify-content: space-between; margin: 0; font-size: 0.8125rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.cote-vide { margin: 0; font-size: 0.875rem; color: var(--gris); }
.lien-fleche { font-size: 0.875rem; font-weight: 650; }

/* ---------- Résultats ---------- */

.puce-points { font-size: 0.8125rem; background: var(--gazon-voile); border: 1px solid var(--gazon-clair); border-radius: 6px; padding: 2px 8px; color: var(--gris); }
.puce-points b { color: var(--gazon); font-variant-numeric: tabular-nums; }
.en-attente { color: var(--gris); font-size: 0.8125rem; }

/* ---------- Évolution, tchat, publicité ---------- */

.evolution { display: inline-flex; align-items: center; gap: 2px; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.evolution .icone { width: 0.7em; height: 0.7em; }
.evolution.monte { color: var(--ok); }
.evolution.descend { color: var(--erreur); }
.evolution.stable, .evolution.nouveau { color: var(--gris-clair); font-weight: 600; }

.tchat { width: 100%; height: 450px; border: 0; border-radius: 8px; background: var(--gazon-voile); display: block; }

.publicite { min-height: 100px; }

/* ---------- Accueil : une colonne, une ligne par match ---------- */

.tournoi-int { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tournoi-texte { min-width: 0; }
.tournoi-etat + .tournoi-etat { margin-top: 4px; }
.tournoi-message a, .tournoi-message b, .tournoi-message strong { color: #fff; }
.tournoi-place { display: flex; align-items: center; gap: 10px; flex: none; color: #cfe1d7; text-decoration: none; font-size: 0.875rem; line-height: 1.35; }
.tournoi-place:hover { color: #fff; }
.tournoi-place-rang { font-stretch: 75%; font-weight: 800; font-size: 2.75rem; line-height: 1; color: var(--balle); font-variant-numeric: tabular-nums; }
.tournoi-place .evolution.monte { color: #9fe0b9; }
.tournoi-place .evolution.descend { color: #ffb4a8; }
.page-pronos .tournoi-int { max-width: 920px; }
.page-pronos .tournoi-nom { font-size: clamp(2rem, 4.2vw, 2.75rem); }

.page-accueil { max-width: 920px; margin: 0 auto; }
.bloc-compte { margin-left: 10px; font-size: 0.9375rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--gris); }
.bloc-compte b { color: var(--encre); font-weight: 700; }

.lignes { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.lignes > li + li { border-top: 1px solid var(--ligne); }
.ligne-groupe { padding: 7px 16px; background: var(--gazon-voile); color: var(--gris); font-size: 0.8125rem; font-weight: 650; }
.ligne { position: relative; display: grid; align-items: center; column-gap: 12px; padding: 10px 16px; min-height: 58px; }
.ligne-prono { display: block; padding: 0; }
.ligne-prono .prono { display: grid; grid-template-columns: 40px 48px minmax(0, 1fr) minmax(96px, auto) 24px; align-items: center; column-gap: 12px; row-gap: 8px; padding: 10px 16px; min-height: 58px; }
.ligne-prono .prono > .circuit { grid-column: 1; grid-row: 1; }
.ligne-heure { grid-column: 2; grid-row: 1; font-size: 0.8125rem; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ligne-commence { color: var(--erreur); font-weight: 600; }
.ligne-duel { grid-column: 3; grid-row: 1; border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ligne-resume { grid-column: 4; grid-row: 1; justify-self: end; display: none; font: inherit; font-size: 0.9375rem; color: var(--encre); background: none; border: 0; padding: 4px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.ligne-resume:hover { background: var(--gazon-voile); }
.js .est-fait:not(.est-edition) .ligne-resume { display: inline-block; }
.resume-ajout { color: var(--gazon); font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ligne-etat { grid-column: 5; grid-row: 1; display: flex; justify-content: center; color: var(--ok); }
.etat-fait .icone { width: 18px; height: 18px; }
.etat-modifie { width: 10px; height: 10px; border-radius: 50%; background: #d9a400; }

.choix { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; min-width: 0; position: relative; }
.ligne-prono .choix { cursor: pointer; }
.ligne-prono .choix:hover { background: var(--gazon-voile); }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-rond { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b9c6bf; background: #fff; }
.choix input:checked + .choix-rond { border-color: var(--gazon); background: var(--balle); box-shadow: inset 0 0 0 3px #fff; }
.ligne-prono .choix:has(input:checked) { background: var(--balle-pale); }
.choix:has(input:checked) .choix-nom { font-weight: 750; }
.choix:has(input:focus-visible) { outline: 3px solid var(--gazon); outline-offset: 1px; }
.choix-nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rang { flex: none; color: var(--gris-clair); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.ligne-saisie { grid-column: 3 / -1; grid-row: 2; display: none; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--gazon-voile); border-radius: 8px; }
html:not(.js) .ligne-saisie, .est-edition .ligne-saisie { display: flex; }
.ligne-saisie .saisie-libelle { margin: 0; font-size: 0.875rem; color: var(--gris); }
.ligne-saisie .tuiles { flex-wrap: nowrap; gap: 4px; }
.ligne-saisie .tuile { width: 40px; height: 40px; font-size: 1.1875rem; }
.ligne-saisie .sets { margin: 0; }
.ligne-saisie .bouton { margin-left: auto; padding: 8px 16px; }
.ligne-saisie .carte-message { flex-basis: 100%; margin: 0; }
.ligne-saisie .carte-message:empty { display: none; }

.ligne-visiteur { grid-template-columns: 40px 48px minmax(0, 1fr); }
.ligne-visiteur .ligne-duel { grid-column: auto; grid-row: auto; }
.ligne-visiteur .ligne-heure { grid-column: auto; grid-row: auto; }

.ligne-direct { grid-template-columns: 40px 80px minmax(0, 1fr) 220px; }
.ligne-direct .ligne-heure { grid-column: auto; grid-row: auto; }
.ligne-direct .carte-etat { margin: 0; font-size: 0.75rem; white-space: nowrap; }
.ligne-direct .tableau-score { width: auto; justify-self: start; border-spacing: 0 3px; }
.ligne-direct .tableau-score th { width: 190px; max-width: 190px; }
.ligne-direct .joueur-photo, .ligne-direct .joueur-details { display: none; }
.ligne-direct .joueur-nom { font-weight: 600; }
.ligne-direct .tableau-score .case { width: 28px; min-width: 28px; height: 26px; font-size: 1rem; }
.ligne-direct .tableau-score .case-jeu { min-width: 32px; }
.ligne-votre { font-size: 0.875rem; color: var(--gris); text-align: right; line-height: 1.35; }
.ligne-votre b { color: var(--encre); }
.ligne-votre .libelle { font-weight: 500; margin-right: 2px; }
.ligne-direct .ligne-votre .libelle { display: block; margin: 0; }
.ligne-lien { position: absolute; inset: 0; }
.ligne-lien:focus-visible { outline: 3px solid var(--gazon); outline-offset: -3px; }
.ligne:has(.ligne-lien):hover { background: var(--gazon-voile); }

.ligne-resultat { grid-template-columns: 40px minmax(0, 1fr) auto 80px; }
.ligne-sans-points { grid-template-columns: 40px minmax(0, 1fr) auto; }
.ligne-match .score-texte { margin-left: 8px; color: var(--gris); }
.ligne-points { text-align: right; font-stretch: 75%; font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ligne-points.zero, .ligne-points.non-compte { color: var(--gris-clair); }
.ligne-points.en-attente { font-stretch: 100%; font-weight: 500; font-size: 0.8125rem; color: var(--gris); }
.ligne-points small { display: block; font-stretch: 100%; font-weight: 500; font-size: 0.75rem; color: var(--gris); }

.menu-beber > summary { color: var(--encre); padding: 4px 12px 4px 6px; }
.menu-beber > summary:hover { color: var(--encre); background: var(--surface); border-color: var(--gazon); }
.menu-beber .menu-panneau { left: auto; right: 0; min-width: 310px; z-index: 15; }
.menu-beber form { margin: 0; }
.menu-beber .lien { align-items: flex-start; gap: 10px; padding: 8px 10px; font-weight: 600; }
.menu-beber .lien small { display: block; margin-top: 2px; font-weight: 400; }

.liens-accueil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: -16px 0 32px; font-size: 0.9375rem; }
.liens-accueil form { margin: 0; }
.liens-accueil a, .liens-accueil .lien { display: inline-flex; align-items: center; gap: 6px; width: auto; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

.tchat-page { height: min(72vh, 760px); }

@media (max-width: 760px) {
  .tournoi-int { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tournoi-place-rang { font-size: 2.125rem; }
  .lignes { border-radius: 8px; }
  .ligne, .ligne-prono { border-left: 3px solid var(--atp); }
  .ligne-wta { border-left-color: var(--wta); }
  .ligne { padding: 10px 12px; }
  .ligne > .circuit, .ligne-prono .prono > .circuit { display: none; }
  .ligne-prono .prono { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 10px 12px; }
  .ligne-prono .ligne-heure { grid-column: 1; grid-row: 1; }
  .ligne-prono .ligne-heure:empty { display: none; }
  .ligne-prono .ligne-etat { grid-column: 2; grid-row: 2; }
  .ligne-prono .ligne-duel { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: 2px; }
  .ligne-prono .ligne-resume { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .ligne-saisie { grid-column: 1 / -1; grid-row: 4; padding: 10px; }
  .ligne-visiteur { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .ligne-visiteur .ligne-heure:empty { display: none; }
  .ligne-visiteur .ligne-duel { grid-template-columns: 1fr; gap: 0; }
  .ligne-direct { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .ligne-direct .tableau-score { width: 100%; }
  .ligne-direct .tableau-score th { width: 100%; max-width: 0; }
  .ligne-direct .ligne-votre { text-align: left; }
  .ligne-direct .ligne-votre .libelle { display: inline; margin-right: 4px; }
  .ligne-resultat, .ligne-sans-points { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .ligne-resultat .ligne-match { grid-column: 1; grid-row: 1; }
  .ligne-resultat .ligne-votre { grid-column: 1; grid-row: 2; text-align: left; }
  .ligne-resultat .ligne-points { grid-column: 2; grid-row: 1 / 3; }
  .ligne-sans-points .ligne-votre { grid-column: 1; grid-row: 2; }
  .ligne-match .score-texte { display: block; margin: 0; }
  .liens-accueil { margin-top: -20px; }
}

/* ---------- Classement ---------- */

.titre-page { margin-bottom: 18px; }
.titre-page h1 { margin-bottom: 6px; }
.resume-position { font-size: 1.0625rem; margin: 0; }
.barre-classement { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.onglets { display: inline-flex; background: var(--surface); border: 1px solid var(--ligne); border-radius: 8px; padding: 3px; }
.onglets a { padding: 7px 18px; border-radius: 6px; font-weight: 650; text-decoration: none; color: var(--gris); }
.onglets a[aria-current="page"] { background: var(--gazon); color: #fff; }
.recherche input {
  font: inherit; font-size: 0.9375rem; border: 1px solid #b9c6bf; border-radius: 8px; padding: 8px 12px; min-height: 40px; width: 240px; background: #fff;
}

.classement { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.classement th { text-align: left; font-size: 0.8125rem; color: var(--gris); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--ligne); background: var(--gazon-voile); }
.classement td { padding: 9px 12px; border-bottom: 1px solid #e6ece8; vertical-align: middle; }
.classement tbody tr:last-child td { border-bottom: 0; }
.classement tr.moi td { background: var(--balle-pale); }
.classement tr.moi td:first-child { box-shadow: inset 4px 0 0 var(--balle); }
.col-rang { width: 64px; font-stretch: 75%; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.ex-aequo { color: var(--gris-clair); }
.col-evol { width: 64px; }
.col-points { width: 96px; text-align: right !important; font-stretch: 75%; font-weight: 750; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.col-pseudo { font-weight: 600; }
.col-pseudo .drapeau { margin-right: 8px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.col-pseudo { white-space: nowrap; }
/* totem du binôme : seule l'icône au bout de l'ancienne bande 141 × 14 est montrée */
.totem { display: inline-block; width: 14px; height: 14px; margin-left: 8px; background-repeat: no-repeat; background-position: right center; background-size: auto 100%; image-rendering: pixelated; vertical-align: -2px; }
.aucun-resultat { color: var(--gris); padding: 12px; }
.sous-tableau { margin-top: 12px; font-size: 0.875rem; color: var(--gris); }

.table-pronos .phrase-beber { display: block; font-size: 0.8125rem; color: var(--gris); font-weight: 400; font-style: italic; margin-top: 2px; }
.table-pronos td:nth-child(2) { white-space: nowrap; }
.prono-bon b { color: var(--ok); }
.prono-faux b { color: var(--gris); font-weight: 600; text-decoration: line-through; text-decoration-color: rgba(168, 38, 27, 0.5); }
.bilan { display: block; font-size: 0.8125rem; font-weight: 650; margin-bottom: 4px; }
.table-pronos .puce-points { display: inline-block; margin: 0 4px 4px 0; }

.fil { font-size: 0.875rem; margin-bottom: 4px; }
.titre-match { font-size: 2.25rem; margin-bottom: 4px; }
.sous-titre { color: var(--gris); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.page-moyenne > .tableau-score, .score-match .tableau-score { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 8px 12px; border-spacing: 0 6px; margin-bottom: 16px; }
.score-match-etat { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.score-match-etat .carte-etat { margin-left: 0; }
.repartition { margin-bottom: 24px; }
.page-moyenne .recherche { display: block; margin-bottom: 12px; }

/* ---------- Pied de page ---------- */

.pied { border-top: 1px solid var(--ligne); background: var(--surface); }
.pied-int { max-width: 1200px; margin: 0 auto; padding: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.875rem; color: var(--gris); }
.pied-int p { margin: 0; }
.pied-liens { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Message éphémère ---------- */

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--encre); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 100;
  max-width: min(520px, calc(100vw - 32px)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s, transform 0.2s; font-size: 0.9375rem;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Écrans moyens et petits ---------- */

@media (max-width: 1000px) {
    }

@media (max-width: 760px) {
  .entete-int { flex-wrap: wrap; gap: 0 12px; padding: 0 16px; }
  .marque { min-height: 54px; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; gap: 0; margin: 0 -8px; padding-bottom: 4px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .menu-plus { position: static; }
  .menu-plus .menu-panneau { left: 8px; right: 8px; min-width: 0; grid-template-columns: 1fr 1fr; }
  .compte-nom { display: none; }
  .compte .bouton { padding: 7px 12px; font-size: 0.875rem; }
  .lien-entete { font-size: 0.9375rem; }
  .tournoi-int { padding: 16px 16px 22px; }
  .tournoi-etat { font-size: 0.9375rem; }
  .contenu { padding: 20px 16px 48px; }
    .deux-colonnes { grid-template-columns: 1fr; }
  .recherche, .recherche input { width: 100%; }
  .barre-classement { flex-direction: column; align-items: stretch; }
  .onglets { justify-content: stretch; }
  .onglets a { flex: 1; text-align: center; }
  .col-evol { width: 44px; }
  .col-rang { width: 48px; }
  .classement th, .classement td { padding: 8px; }
  .titre-match { font-size: 1.75rem; }
  .table-pronos td:nth-child(2) { white-space: normal; }
  .table-pronos .puce-points { display: none; }
  .table-pronos .col-pseudo { white-space: normal; }
}

@media (max-width: 400px) {
  .tuile { width: 42px; height: 44px; font-size: 1.25rem; }
  .tableau-score .case { width: 30px; min-width: 30px; height: 32px; font-size: 1.0625rem; }
  .joueur-photo { width: 30px; height: 30px; }
  .compte .bouton { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}