/* YardOdds — espace privé. Même palette que l'accueil. */
:root {
  --terrain: #0e3a2c; --terrain-2: #14503c; --pelouse: #1f6b47; --craie: #f4f1e8; --papier: #ebe7db;
  --poteau: #f2b632; --cuir: #8a5a2b; --encre: #12221b; --gris: #55665d; --gris-sombre: #a9c2b5; --fragile: #b8522f; --rayon: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--encre); background: var(--craie); }
a { color: var(--pelouse); }
.enveloppe { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.chargement { padding: 40px 20px; color: var(--gris); }
.discret { color: var(--gris); }
.petit { font-size: 13px; }
.surtitre { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--pelouse); }
.erreur { color: var(--fragile); font-weight: 600; margin: 8px 0 0; }
.ok { color: var(--pelouse); font-weight: 600; margin: 8px 0 0; }
.vide { color: var(--gris); background: var(--craie); border: 1px dashed #d4ccb8; border-radius: 10px; padding: 16px; margin: 0; }

.bouton { display: inline-block; background: var(--poteau); color: var(--terrain); font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer; }
.bouton.second { background: #fff; border: 1px solid #cfc7b3; color: var(--terrain); }
.bouton.danger { background: #fff; border: 1px solid var(--fragile); color: var(--fragile); }
.bouton[disabled] { opacity: .6; cursor: wait; }
.lien { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.langue { border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 13px; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--poteau); outline-offset: 2px; }
input, select { font: inherit; padding: 10px 12px; border: 1px solid #cfc7b3; border-radius: 10px; background: #fff; color: var(--encre); width: 100%; min-width: 0; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--terrain); }

/* connexion */
.auth { min-height: 100vh; display: grid; place-items: center; background: var(--terrain); padding: 24px 16px; }
.auth-carte { position: relative; width: 100%; max-width: 420px; background: var(--craie); border-radius: var(--rayon); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-carte h1 { margin: 0; font-size: 24px; color: var(--terrain); }
.auth-carte p { margin: 0; }
.auth-carte .langue { position: absolute; top: 16px; right: 16px; color: var(--terrain); border-color: #cfc7b3; }
.auth-marque { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; color: var(--terrain); }
.auth-marque b, .marque b { color: var(--poteau); }

/* coquille */
.barre { background: var(--terrain); color: #fff; }
.barre-in { display: flex; align-items: center; gap: 12px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: #fff; text-decoration: none; }
.replier { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.menu-bouton { display: none; background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 8px; font: inherit; font-size: 20px; line-height: 1; padding: 6px 11px; cursor: pointer; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1 1 auto; }
.nav button { background: transparent; border: 0; color: #fff; opacity: .8; font: inherit; font-size: 14.5px; padding: 8px 9px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.nav button.actif { opacity: 1; background: var(--terrain-2); box-shadow: inset 0 -3px 0 var(--poteau); }
.qui { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--gris-sombre); }
.qui .nom { color: #fff; font-weight: 600; }
.contenu { padding-block: 28px 56px; }
.contenu h1 { margin: 0 0 18px; color: var(--terrain); font-size: clamp(24px, 3vw, 32px); }
.panneau { background: #fff; border: 1px solid #e0dacb; border-radius: var(--rayon); padding: 20px; margin-bottom: 18px; }
.panneau h2 { margin: 0 0 10px; font-size: 19px; color: var(--terrain); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panneau h3 { font-size: 15px; margin: 16px 0 8px; }
.formulaire { display: grid; gap: 12px; max-width: 420px; }
.formulaire .bouton { justify-self: start; }

/* administration */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid #ddd6c4; }
.onglets button { background: transparent; border: 0; font: inherit; font-weight: 600; color: var(--gris); padding: 10px 14px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.onglets button.actif { color: var(--terrain); border-bottom-color: var(--poteau); }
.repere.plein { display: inline-block; margin-left: 6px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--fragile); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.pastille { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.pastille.bon { background: #e2efe6; color: var(--pelouse); }
.pastille.mal { background: #f6e3dc; color: var(--fragile); }
.pastille.neutre { background: var(--papier); color: var(--cuir); }
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.carte { border: 1px solid #e0dacb; border-left: 4px solid var(--pelouse); border-radius: 10px; padding: 12px 14px; }
.carte.mal { border-left-color: var(--fragile); background: #fdf6f3; }
.carte h3 { margin: 0 0 4px; font-size: 15px; }
.carte p { margin: 0; font-size: 14px; color: var(--gris); overflow-wrap: anywhere; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 8px 0 14px; }
.chiffres div { background: var(--craie); border-radius: 10px; padding: 12px 14px; }
.chiffres b { display: block; font-size: 24px; color: var(--terrain); }
.chiffres span { font-size: 13px; color: var(--gris); }
.table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); border-bottom: 2px solid #e0dacb; padding: 8px 10px; white-space: nowrap; }
td { border-bottom: 1px solid #eee8da; padding: 10px; vertical-align: top; }
td .discret { font-size: 13px; }
td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; }
td.actions .bouton { padding: 6px 14px; font-size: 14px; margin-right: 6px; }
td .bouton { padding: 6px 14px; font-size: 14px; }
.periode { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 12px; }
.periode { max-width: 100%; flex-wrap: wrap; }
.periode select { width: auto; max-width: 100%; min-width: 0; }
.fuseaux { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fuseaux li { background: var(--craie); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.mdp { background: #fff8e4; border: 2px solid var(--poteau); border-radius: var(--rayon); padding: 18px 20px; margin-bottom: 18px; }
.mdp p { margin: 6px 0 12px; }
.mdp-ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mdp code { font-size: 18px; background: #fff; border: 1px solid #e8d9a8; border-radius: 8px; padding: 8px 12px; user-select: all; overflow-wrap: anywhere; }

@media (max-width: 900px) { .grille { grid-template-columns: minmax(0, 1fr); } }
/* Menu replié derrière ☰ dès que la barre ne tient plus sur une ligne (0.10.5). Mesuré : avec les cinq items d'un
   utilisateur elle se replie déjà sous ~1050 px, avec les sept d'un administrateur sous ~1150 px — un seul seuil. */
@media (max-width: 1150px) {
  .barre { position: relative; }
  .barre-in { gap: 10px; flex-wrap: nowrap; }
  .menu-bouton { display: inline-flex; margin-left: auto; }
  .replier { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; flex-direction: column; align-items: stretch; gap: 8px;
    background: var(--terrain); padding: 10px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 30px rgba(0,0,0,.3); }
  .replier.ouvert { display: flex; }
  .nav { flex-direction: column; gap: 2px; width: 100%; }
  .nav button { text-align: left; font-size: 16px; padding: 11px 12px; }
  .qui { width: 100%; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
}

/* cette semaine */
.entete-semaine { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 12px; }
.entete-semaine p { margin: 0; max-width: 46em; }
.matchs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.match { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--craie); border: 1px solid #e0dacb; border-radius: 10px; padding: 10px 12px; font: inherit; cursor: pointer; color: var(--encre); }
.match.actif { border-color: var(--pelouse); box-shadow: inset 0 0 0 1px var(--pelouse); background: #fff; }
.match.tous { justify-content: center; font-weight: 700; color: var(--terrain); }
.match .equipes { font-weight: 700; }
abbr { text-decoration: none; }
.pastille.attente { background: #fff3d6; color: var(--cuir); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.puce { border: 1px solid #cfc7b3; background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--terrain); }
.puce.petite { padding: 4px 12px; }
.puce.actif { background: var(--terrain); border-color: var(--terrain); color: #fff; }
.puce.actif .etiquette { color: #ffd2c2; border-color: #ffd2c2; }
.etiquette { font-size: 11px; font-weight: 700; color: var(--fragile); border: 1px solid var(--fragile); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
td.proba { white-space: nowrap; min-width: 150px; }
.barre-p { display: inline-block; width: 70px; height: 8px; background: var(--papier); border-radius: 999px; overflow: hidden; margin-right: 8px; vertical-align: middle; }
.barre-p span { display: block; height: 100%; width: 0; background: var(--pelouse); }

/* comment ça marche (espace privé ; la page publique a son propre style) */
.guide { max-width: 820px; line-height: 1.65; }
.guide-intro { font-size: 18px; }
.guide-section h2 { margin-top: 26px; }
.guide-note { background: #fff8e4; border-left: 4px solid var(--poteau); padding: 10px 14px; border-radius: 8px; }

/* méthodologie */
.sommaire { background: #fff; border: 1px solid #e0dacb; border-radius: var(--rayon); padding: 14px 20px; margin-bottom: 18px; }
.sommaire ol { columns: 2; margin: 8px 0 0; padding-left: 20px; }
.sommaire li { margin: 2px 0; }
.methode p { max-width: 60em; }
.chaine li { margin: 6px 0; }
.formule { white-space: pre-wrap; font-family: "Cambria Math", "STIX Two Math", Georgia, serif; font-size: 17px; background: var(--craie); border-left: 4px solid var(--pelouse); border-radius: 8px; padding: 12px 16px; margin: 10px 0 14px; overflow-x: auto; line-height: 2; }
.formule var { font-style: italic; }
.formule .glose { font-family: system-ui, sans-serif; font-size: 13px; color: var(--gris); margin-left: 12px; }
table.serre td, table.serre th { padding: 6px 8px; font-size: 13px; }
.ecart { color: var(--fragile); font-weight: 700; }
@media (max-width: 700px) { .sommaire ol { columns: 1; } }

/* équipes */
.filtres { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.case { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.case input { width: 18px; height: 18px; accent-color: var(--pelouse); }
tr.groupe th { background: var(--craie); color: var(--terrain); font-size: 14px; text-transform: none; letter-spacing: 0; padding: 10px; border-bottom: 1px solid #e0dacb; }
tr.groupe .lien { margin-left: 10px; font-size: 13px; color: var(--pelouse); }
.equipe-lien { font-weight: 700; color: var(--terrain); text-decoration: none; border-bottom: 1px dotted var(--pelouse); }
.grille-equipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.equipe { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: #fff; border: 1px solid #e0dacb; border-radius: 10px; padding: 8px 10px; font: inherit; cursor: pointer; text-align: left; color: var(--encre); }
.equipe b { color: var(--terrain); }
.equipe span { font-size: 12px; color: var(--gris); }
.equipe.actif { background: var(--terrain); border-color: var(--terrain); }
.equipe.actif b, .equipe.actif span { color: #fff; }
.equipe.conge { opacity: .55; }
.entete-fiche h2 { margin-bottom: 4px; }
.entete-fiche p { margin: 0 0 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.joueurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.joueur { border: 1px solid #e0dacb; border-radius: 12px; padding: 12px 14px; background: #fff; }
.joueur h3 { margin: 0 0 8px; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.poste { font-size: 11px; font-weight: 700; letter-spacing: .06em; background: var(--craie); border: 1px solid #ddd6c4; border-radius: 6px; padding: 1px 6px; color: var(--terrain); }
table.actions-joueur th { text-align: left; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--encre); border: 0; padding: 6px 8px 6px 0; white-space: normal; vertical-align: top; width: 38%; }
table.actions-joueur td { border: 0; padding: 4px 0; }
table.actions-joueur tr + tr th, table.actions-joueur tr + tr td { border-top: 1px solid #f0ebdf; }
.seuils-joueur { display: flex; flex-wrap: wrap; gap: 6px; }
.seuil-p { display: inline-flex; flex-direction: column; align-items: flex-start; background: var(--craie); border-radius: 8px; padding: 4px 8px; min-width: 70px; }
.seuil-p small { color: var(--gris); font-size: 11px; }
.seuil-p b { font-size: 14px; color: var(--terrain); }
.seuil-p .barre-p { width: 56px; height: 5px; margin: 3px 0 0; }
.seuil-p i { font-style: normal; font-size: 11px; font-weight: 700; margin-top: 2px; }
.seuil-p i.oui { color: var(--pelouse); }
.seuil-p i.non { color: var(--fragile); }
.sans-proba { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sans-proba li { font-size: 14px; }
@media (max-width: 480px) { .joueurs { grid-template-columns: minmax(0, 1fr); } }

/* vedettes et palmarès */
.vedette { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #d9d1bd; font-size: 13px; line-height: 1.4; }
.vedette b { color: var(--terrain); }
.etoile { color: var(--poteau); }
.vedette.large { border: 0; padding: 0; margin: 0; font-size: 15px; display: inline-block; }
.vedette-fiche { background: #fff8e4; border-left: 4px solid var(--poteau); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.surtitre-mini { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--cuir); margin-bottom: 4px; }
.match .equipes .pastille { margin-left: 4px; }
.palmares { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.palme { border: 1px solid #e0dacb; border-radius: 12px; padding: 10px 12px; background: #fff; }
.palme.actif { border-color: var(--pelouse); box-shadow: inset 0 0 0 1px var(--pelouse); }
.palme-titre { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0 0 6px; font: inherit; font-weight: 700; color: var(--terrain); cursor: pointer; }
.palme ol { margin: 0; padding: 0; list-style: none; counter-reset: rang; font-size: 14px; }
.palme li { counter-increment: rang; display: grid; grid-template-columns: 1.5em minmax(0, 1fr) auto; gap: 4px; padding: 3px 0; align-items: baseline; }
.palme li::before { content: counter(rang) "."; color: var(--gris); }
.palme li > b { color: var(--terrain); white-space: nowrap; }
.palme p { margin: 0; }

/* « Cette semaine » (décision de Hugh, 11 sept. 2026) : barre de filtres fixe qui filtre toute la page, puis trois onglets */
.filtres-semaine { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; background: var(--craie); padding: 10px 0 12px; margin: 0 0 8px; border-bottom: 1px solid #e0dacb; }
.filtres-semaine label { flex: 0 1 auto; font-size: 13px; gap: 4px; }
.filtres-semaine select { width: auto; max-width: 100%; padding: 8px 10px; }
.filtres-semaine #choix-match { max-width: 24em; }
.filtres-semaine .lien { margin-bottom: 9px; }
/* fixe en haut sur un écran assez grand ; sur téléphone, elle prendrait le quart de l'écran */
@media (min-width: 700px) { .filtres-semaine { position: sticky; top: 0; z-index: 5; } }
#vue-semaine.charge ~ * { opacity: .5; transition: opacity .15s; }
.intro-semaine { margin: 4px 0 12px; max-width: 62em; }
.contexte-semaine { display: flex; gap: 8px 20px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid #e0dacb; border-left: 4px solid var(--poteau); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.contexte-semaine .match { background: transparent; border: 0; padding: 0; cursor: default; }
.contexte-semaine p { margin: 0; }
.onglets-semaine { margin-bottom: 14px; }
.onglets-semaine .compte { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--papier); color: var(--cuir); font-size: 12px; line-height: 20px; text-align: center; margin-left: 4px; }
@media (max-width: 560px) {
  .filtres-semaine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filtres-semaine label:nth-child(3) { grid-column: 1 / -1; }
  .filtres-semaine select, .filtres-semaine #choix-match { width: 100%; max-width: none; }
  .filtres-semaine .lien { grid-column: 1 / -1; justify-self: start; margin: 0; }
  .onglets-semaine { gap: 0; flex-wrap: nowrap; overflow-x: auto; }
  .onglets-semaine button { padding: 10px 6px; font-size: 13.5px; white-space: nowrap; }
  .onglets-semaine .compte { padding: 0 5px; min-width: 0; margin-left: 2px; }
}

/* logos d'équipe (chez nous) et photos de joueur (chez la NFL) — décision de Hugh, 11 sept. 2026 */
.logo-eq { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 4px; }
.logo-eq.vide { display: none; }
.equipe .logo-eq.grand { width: 34px; height: 34px; margin: 0 0 4px; }
.logo-eq.titre { width: 56px; height: 56px; margin: 0; flex: none; }
.entete-fiche { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.photo-j { display: inline-block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--papier); border: 1px solid #e0dacb; flex: none; }
.photo-j.mini { width: 24px; height: 24px; }
.photo-j.petite { width: 30px; height: 30px; }
.photo-j.moyenne { width: 40px; height: 40px; }
.photo-j.grande { width: 48px; height: 48px; }
.joueur-cel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.vedette.avec-photo { display: flex; align-items: center; gap: 10px; }
.vedette.large.avec-photo { display: inline-flex; }
.palme li { align-items: center; }
.joueur h3 { flex-wrap: nowrap; }
.joueur h3 > span { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.joueur-cel .discret { white-space: nowrap; }
#liste td { vertical-align: middle; }

/* recherche d'une équipe ou d'un joueur (décision de Hugh, 11 sept. 2026) */
.recherche { position: relative; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--terrain); flex: 1 1 16em; max-width: 24em; min-width: 0; }
.recherche input { padding: 8px 12px; }
.recherche-liste { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; min-width: 18em; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #cfc7b3; border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.14); max-height: 60vh; overflow-y: auto; font-weight: 400; color: var(--encre); }
.recherche-liste li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.recherche-liste li.actif { background: var(--craie); box-shadow: inset 3px 0 0 var(--poteau); }
.recherche-liste li.aucun { color: var(--gris); cursor: default; }
.recherche-liste .type { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cuir); }
.recherche-liste .rech-qui { min-width: 0; line-height: 1.35; }
.recherche-liste .rech-qui .poste { margin: 0 2px; }
.entete-semaine .recherche { flex: 0 1 22em; }
.surligne { outline: 3px solid var(--poteau); outline-offset: 3px; transition: outline-color .6s; }
@media (max-width: 560px) { .filtres-semaine .recherche { grid-column: 1 / -1; max-width: none; } .recherche-liste { min-width: 0; } }

/* En direct (phase 5) */
.grille-direct { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
.carte-direct { display: flex; flex-direction: column; gap: 6px; text-align: left; background: #fff; border: 1px solid #e0dacb; border-radius: 12px; padding: 12px 14px; font: inherit; color: var(--encre); cursor: pointer; }
.carte-direct:hover { border-color: var(--pelouse); }
.carte-direct.en-cours { border-color: var(--fragile); box-shadow: inset 3px 0 0 var(--fragile); }
.carte-direct .ligne-eq { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.carte-direct .ligne-eq .score { margin-left: auto; font-size: 20px; color: var(--terrain); }
.carte-direct .etat { margin-top: 2px; }
#vue-direct h2 .compte { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--papier); color: var(--cuir); font-size: 12px; line-height: 20px; text-align: center; }
.pastille.direct { background: #fbe4dd; color: var(--fragile); }
.point-direct { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fragile); margin-right: 6px; vertical-align: 1px; animation: pouls 1.6s ease-in-out infinite; }
@keyframes pouls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .point-direct { animation: none; } }
.avertissement { background: #fff8e4; border-left: 4px solid var(--poteau); border-radius: 8px; padding: 10px 14px; }
.entete-direct { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; background: #fff; border: 1px solid #e0dacb; border-radius: var(--rayon); padding: 16px 20px; margin-bottom: 18px; }
.direct-eq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.direct-eq:last-child { flex-direction: row-reverse; text-align: right; }
.direct-eq > div { display: flex; flex-direction: column; min-width: 0; }
.direct-eq b { font-size: 18px; color: var(--terrain); }
.score-grand { font-size: 38px; color: var(--terrain); margin: 0 6px; }
.direct-eq:first-child .score-grand { margin-left: auto; }
.direct-eq:last-child .score-grand { margin-right: auto; }
.direct-centre { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.grille-progression { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.carte-joueur { border: 1px solid #e0dacb; border-radius: 12px; padding: 12px 14px; background: #fff; }
.carte-joueur h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.carte-joueur h3 > span { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
table.progression { width: 100%; border-collapse: collapse; }
table.progression th { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--encre); border: 0; padding: 5px 6px 5px 0; white-space: normal; width: 34%; }
table.progression td { border: 0; padding: 5px 4px; vertical-align: middle; }
table.progression tr + tr th, table.progression tr + tr td { border-top: 1px solid #eee7d6; }
table.progression td.valeur { font-size: 20px; font-weight: 800; color: var(--terrain); text-align: center; width: 3.2em; }
.seuils-direct { display: flex; flex-wrap: wrap; gap: 4px; }
.seuil-d { font-size: 12px; background: var(--craie); border: 1px solid #e0dacb; border-radius: 999px; padding: 2px 8px; white-space: nowrap; color: var(--gris); }
.seuil-d b { color: var(--terrain); }
.seuil-d.atteint { background: #e2efe6; border-color: #9cc9ad; color: var(--pelouse); }
.filtres-direct { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin: 10px 0 4px; }
.filtres-direct .recherche { max-width: 26em; }
h3.quart { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--cuir); margin: 16px 0 6px; }
ol.jeux { list-style: none; margin: 0; padding: 0; }
.jeu { display: grid; grid-template-columns: 3.4em 4.6em minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 6px; border-bottom: 1px solid #eee7d6; font-size: 14px; }
.jeu-temps { font-variant-numeric: tabular-nums; color: var(--gris); padding-top: 1px; }
.jeu-eq { display: flex; align-items: center; gap: 2px; font-size: 12px; }
.jeu-haut { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jeu-texte { color: var(--encre); margin-top: 2px; line-height: 1.45; }
.jeu.jeu-points { background: #f1f8f3; }
.jeu.revirement { background: #fdf3ef; }
.jeu.nouveau { animation: nouveau 2.5s ease-out; }
@keyframes nouveau { from { background: #fff3c4; } to { background: transparent; } }
@media (max-width: 560px) {
  /* l'entête d'un match, compacte : les deux équipes côte à côte, le nom complet tombe (0.10.6) */
  .entete-direct { gap: 6px; padding: 12px 10px; margin-bottom: 12px; }
  .direct-eq, .direct-eq:last-child { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .direct-eq > .lien-eq, .direct-eq .lien-eq { flex-direction: column; gap: 2px; }
  .direct-eq .lien-eq > span { align-items: center; text-align: center; }
  .direct-eq .discret.petit { display: none; }
  .logo-eq.titre { width: 40px; height: 40px; }
  .score-grand, .direct-eq:first-child .score-grand, .direct-eq:last-child .score-grand { margin: 0; font-size: 28px; }
  /* les familles de jeu : une seule ligne qui défile, au lieu de trois */
  #direct-familles { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  #direct-familles .puce { white-space: nowrap; }
  .grille-progression { grid-template-columns: minmax(0, 1fr); }
  .jeu { grid-template-columns: 3em minmax(0, 1fr); }
  .jeu-eq { display: none; }
}

/* sept entrées de menu depuis « En direct » : un peu plus serré pour tenir sur une ligne */
.nav button { padding: 8px 7px; font-size: 14px; }
.qui { gap: 10px; }

/* signature (0.10.1) : en bas de chaque écran de l'espace privé, collée au bas de la fenêtre quand la page est courte */
#app { min-height: 100vh; display: flex; flex-direction: column; }
#app > .contenu { flex: 1 0 auto; width: 100%; }
.pied { background: var(--terrain); color: #fff; padding-block: 18px; }
.signature { margin: 0; font-size: 13.5px; text-align: center; color: #fff; }
.signature a { color: var(--poteau); font-weight: 700; text-decoration: none; }
.signature a:hover { text-decoration: underline; }
.auth { align-content: center; gap: 18px; flex: 1 0 auto; }
.auth .signature { color: var(--gris-sombre); }

/* fiche de joueur et liens vers les fiches (0.10.3, demande de Hugh du 13 sept. 2026) */
.vers-fiche, .lien-eq, .lien-jeu { background: none; border: 0; font: inherit; padding: 0; cursor: pointer; color: inherit; }
.vers-fiche { display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.vers-fiche:hover, .lien-eq:hover { color: var(--pelouse); text-decoration: underline; }
.joueur h3 .vers-fiche, .carte-joueur h3 .vers-fiche { flex: 1 1 auto; }
button.joueur-cel { width: 100%; }
.lien-eq { display: inline-flex; align-items: center; gap: 4px; }
.lien-jeu { color: var(--pelouse); font-weight: 600; }
.lien-jeu:hover { text-decoration: underline; }
.direct-eq > .lien-eq { gap: 12px; min-width: 0; }
.direct-eq .lien-eq > span { display: flex; flex-direction: column; min-width: 0; text-align: inherit; }
.entete-joueur { align-items: flex-start; }
.entete-joueur h2 { margin: 0 0 4px; font-size: 24px; color: var(--terrain); }
.entete-joueur p { margin: 0; }
.entete-joueur + .periode { margin: 14px 0 18px; }
.sans-chiffre { background: #fff8e4; border-left: 4px solid var(--poteau); border-radius: 8px; padding: 12px 16px; }
.sans-chiffre p { margin: 0 0 6px; }
.sans-chiffre p:last-child { margin: 0; }
.defile { overflow-x: auto; }
.matchs-joueur, .journal-joueur { width: 100%; border-collapse: collapse; }
.matchs-joueur td, .journal-joueur td, .matchs-joueur th[scope="row"], .journal-joueur th[scope="row"] { padding: 6px 10px; border-bottom: 1px solid #eee7d8; font-size: 14px; white-space: nowrap; }
.matchs-joueur th[scope="row"], .journal-joueur th[scope="row"] { text-transform: none; letter-spacing: 0; color: var(--terrain); font-size: 14px; border-bottom: 1px solid #eee7d8; }
.nb { text-align: right; font-variant-numeric: tabular-nums; }
.matchs-joueur tbody tr:hover, .journal-joueur tbody tr:hover { background: var(--craie); }
.unites { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.unites h4 { margin: 0 0 6px; font-size: 14px; color: var(--terrain); }
.unites .compte { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--papier); color: var(--cuir); font-size: 12px; line-height: 20px; text-align: center; }
.effectif { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.sans-proba li button, .effectif li button { display: inline-flex; align-items: center; gap: 6px; }
h3 .compte { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--papier); color: var(--cuir); font-size: 12px; line-height: 20px; text-align: center; }
.contenu h1 .poste.grand { font-size: 14px; vertical-align: 4px; }

/* la page d'un match en direct : la recherche au-dessus des onglets, la case des arrêts dans le panneau (0.10.6) */
.filtres-direct { margin: 14px 0 10px; }
[data-dpanneau] .case { margin-bottom: 10px; }
.onglets-semaine .compte:empty { display: none; }

/* L'aperçu d'un match (24 sept. 2026). Un utilisateur demandait « la probabilité que telle équipe gagne » ; YardOdds
   n'a pas de modèle de match, alors la page met les deux effectifs côte à côte et ne conclut pas. L'écart au-dessus
   de la moyenne du poste est la seule lecture mise en avant — la même que celle des vedettes. */
.match-boite { display: flex; flex-direction: column; }
.match-boite .match { flex: 1; width: 100%; border-radius: 10px 10px 0 0; }
.match-boite.actif .match { border-color: var(--pelouse); box-shadow: inset 0 0 0 1px var(--pelouse); background: #fff; }
.apercu-match { background: #fff; border: 1px solid #e0dacb; border-top: 0; border-radius: 0 0 10px 10px; padding: 5px 12px; text-align: right; font-size: 13px; }
.entete-rencontre { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 4px 0 10px; }
.entete-rencontre .lien-eq.grande { font-size: 20px; font-weight: 700; color: var(--terrain); }
.contre-rencontre { display: inline-flex; align-items: center; gap: 8px; }
.entete-rencontre p { width: 100%; margin: 0; }
.garde-rencontre { background: var(--craie); border-left: 3px solid var(--poteau); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.duo-rencontre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.camp-rencontre h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.camp-rencontre .forme { margin: 0 0 4px; font-size: 14px; }
.derniers { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.resultat { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--papier); color: var(--gris); white-space: nowrap; }
.resultat.v { background: rgba(31,107,71,.14); color: var(--pelouse); }
.resultat.d { background: rgba(184,82,47,.12); color: var(--fragile); }
.compte-dessus { margin: 0 0 8px; font-size: 14px; }
.compte-dessus b { font-size: 20px; color: var(--pelouse); }
.liste-rencontre { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.liste-rencontre li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) auto auto; align-items: center; gap: 8px; padding: 5px 6px; border-top: 1px solid #eee7d8; font-size: 14px; }
.liste-rencontre li:first-child { border-top: 0; }
.liste-rencontre li:hover { background: var(--craie); }
.liste-rencontre .quoi { color: var(--gris); font-size: 13px; }
.liste-rencontre .chiffres { white-space: nowrap; font-size: 13px; }
.liste-rencontre .chiffres b { color: var(--terrain); font-size: 17px; }
.liste-rencontre .ecart { min-width: 56px; text-align: right; font-weight: 700; color: var(--gris); white-space: nowrap; }
.liste-rencontre .ecart.haut { color: var(--pelouse); }
.liste-rencontre .ecart.bas { color: var(--fragile); }
@media (max-width: 860px) {
  .duo-rencontre { grid-template-columns: minmax(0, 1fr); }
  .liste-rencontre li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "qui ecart" "quoi chiffres"; row-gap: 2px; }
  .liste-rencontre li > button.joueur-cel { grid-area: qui; }
  .liste-rencontre .quoi { grid-area: quoi; }
  .liste-rencontre .chiffres { grid-area: chiffres; text-align: right; }
  .liste-rencontre .ecart { grid-area: ecart; }
}

/* Le bilan (25 sept. 2026) : la lecture du journal, semaine par semaine. Les quatre chiffres du haut, la comparaison
   annoncé/observé par tranche, la garde qui rappelle qu'on ne conclut rien avant les deux barrières, et la liste. */
.chiffres-bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 8px; }
.chiffres-bilan div { border-left: 3px solid var(--poteau); padding: 2px 0 2px 12px; }
.chiffres-bilan b { display: block; font-size: 26px; line-height: 1.15; color: var(--terrain); }
.chiffres-bilan span { font-size: 13px; color: var(--gris); }
.garde-bilan { background: #fffaf0; border-left: 3px solid var(--poteau); }
.garde-bilan p { margin: 0 0 8px; font-size: 14px; }
.garde-bilan .avancement { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.jauge { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: var(--papier); overflow: hidden; vertical-align: -1px; }
.jauge i { display: block; height: 100%; background: var(--pelouse); }
.table-tranches td, .table-bilan td { padding: 6px 10px; border-bottom: 1px solid #f0ebdf; }
.table-tranches tr:last-child td, .table-bilan tr:last-child td { border-bottom: 0; }
.table-bilan tbody tr:hover { background: var(--craie); }
@media (max-width: 760px) {
  /* les en-têtes de tranche ne tiennent pas sur 390 px : on les raccourcit et on laisse la table respirer */
  .table-tranches { table-layout: fixed; font-size: 13px; }
  .table-tranches th, .table-tranches td { padding: 6px 4px; white-space: normal; word-break: break-word; }
  .table-bilan thead { display: none; }
  .table-bilan, .table-bilan tbody, .table-bilan tr, .table-bilan td { display: block; width: 100%; }
  .table-bilan tr { border-bottom: 1px solid #e0dacb; padding: 6px 0; }
  .table-bilan td { border: 0; padding: 2px 4px; }
}