/* Couleurs reprises de fct_StylerOnglet_homeplayer.m :
   bleu [0.0667 0.4431 0.7451] = #1171BE, bleu clair [0.149 0.549 0.8667] = #268CDD,
   gris des tableaux [0.2196 0.2392 0.2706] = #383D45, texte secondaire [0.7 0.74 0.78] = #B3BDC7 */
:root {
  --bleu: #1171BE; --bleuclair: #268CDD; --gris: #383D45; --grisclair: #B3BDC7;
  --blanc: #fff; --vert: #6ED199; --jaune: #E8C24A; --rouge: #FF8A80;
  --barreT: #2E9CE8; --barreM: #CF7A24;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bleu); color: var(--blanc);
  font: 14px/1.35 "Segoe UI", Helvetica, Arial, sans-serif; }
h2, h3, h4 { margin: 0; }
header.barre { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  padding: 10px 16px; background: #0D5A98; }
header.barre .titre { font-weight: 700; font-size: 18px; margin-right: 8px; }
header.barre .sous { font-weight: 400; font-size: 12px; color: var(--grisclair); margin-left: 6px; }
header.barre label { display: flex; flex-direction: column; font-size: 11px; color: var(--grisclair); gap: 2px; }
header.barre select, .barre input { font: inherit; font-size: 14px; color: #111; padding: 4px 6px;
  border: 1px solid #9bc; border-radius: 4px; min-width: 150px; }
header.barre button { font: inherit; font-weight: 600; padding: 7px 16px; border: 0; border-radius: 4px;
  background: #E8C24A; color: #222; cursor: pointer; }
header.barre button:disabled { opacity: .6; cursor: progress; }
.etat { font-size: 13px; color: var(--grisclair); min-width: 120px; }
.accueil { padding: 40px 16px; text-align: center; color: var(--grisclair); }

.home { display: grid; grid-template-columns: 180px minmax(0, 1fr) 290px; gap: 14px; padding: 14px 16px; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.identite .avatar, .identite .photo { width: 150px; height: 240px; object-fit: contain; align-self: center;
  background: transparent; }
.nomposte { display: flex; gap: 10px; align-items: center; }
.numero { background: var(--bleuclair); font-size: 36px; font-weight: 700; padding: 2px 10px; border-radius: 6px; min-width: 56px; text-align: center; }
.nom { font-size: 20px; font-weight: 700; line-height: 1.1; }
.poste { font-style: italic; color: var(--grisclair); }

.tuiles { display: grid; gap: 8px; }
.tuiles.cinq { grid-template-columns: repeat(5, 1fr); }
.tuiles.six { grid-template-columns: repeat(6, 1fr); }
.identite .tuiles.cinq { grid-template-columns: 1fr 1fr; }
.tuile { background: var(--bleuclair); border-radius: 6px; padding: 6px 6px 8px; text-align: center; }
.tuile h4 { font-size: 13px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile .val { font-size: 18px; font-weight: 700; }
.tuile .gros { font-size: 24px; font-weight: 700; }
.tuile .sous { font-size: 11px; font-style: italic; color: var(--grisclair); }

.panneau { background: var(--bleu); }
.dernier .entete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dernier h2 { font-size: 24px; font-weight: 700; }
.lastmatch { font-size: 20px; }
.deuxtables { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deuxtables h3 { font-size: 14px; color: var(--grisclair); margin-bottom: 4px; }
table { width: 100%; border-collapse: collapse; background: var(--gris); font-size: 13px; }
th, td { padding: 3px 8px; text-align: left; border-bottom: 1px solid #2b2f36; }
th { color: var(--grisclair); font-weight: 600; }
td:nth-child(2), td:nth-child(3), td:nth-child(4), th:nth-child(n+2) { text-align: right; white-space: nowrap; }
td.mieux { color: var(--vert); } td.moins { color: var(--rouge); } td.egal { color: var(--jaune); }

.matchs h3 { font-size: 14px; color: var(--grisclair); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--gris); border-radius: 14px; padding: 3px 10px; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.chip .res { font-weight: 700; } .chip .res.g { color: var(--vert); } .chip .res.p { color: var(--rouge); }
.chip .meta { color: var(--grisclair); }

.radar h3, .entre h2 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.entre h2 { font-size: 18px; }
.radarzone { width: 100%; aspect-ratio: 1; }
.radarzone svg { width: 100%; height: 100%; display: block; }
.radarzone .vide { color: var(--grisclair); font-style: italic; padding: 20px; }
.mesure { margin: 8px 0 2px; }
.mesure h4 { font-size: 14px; margin-bottom: 3px; }
.barres { display: grid; grid-template-columns: 90px 1fr 50px; gap: 3px 8px; align-items: center; font-size: 12px; }
.barres .lib { white-space: nowrap; }
.barres .piste { background: rgba(255,255,255,.08); height: 14px; border-radius: 2px; position: relative;
  background-image: repeating-linear-gradient(90deg, rgba(128,128,128,.5) 0 1px, transparent 1px 25%); }
.barres .barre-v { height: 100%; border-radius: 2px; }
.barres .T { background: var(--barreT); } .barres .M { background: var(--barreM); }
.barres .borne { color: var(--grisclair); text-align: right; grid-column: 3; }
.pied { padding: 8px 16px 16px; font-size: 12px; color: var(--grisclair); }
.pied b { color: var(--blanc); }

@media (max-width: 1100px) {
  .home { grid-template-columns: 180px minmax(0, 1fr); }
  .home .droite { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; }
}
@media (max-width: 720px) {
  .home { grid-template-columns: 1fr; padding: 12px 16px; }
  .home .droite { grid-template-columns: 1fr; }
  .tuiles.cinq, .tuiles.six { grid-template-columns: repeat(3, 1fr); }
  .deuxtables { grid-template-columns: 1fr; }
  header.barre select, header.barre input { min-width: 0; }
}

/* ---- compte connecte (barre) et pages de connexion / mot de passe ---- */
header.barre .compte { margin-left: auto; font-size: 12px; color: var(--grisclair); }
header.barre .compte a { color: var(--blanc); text-decoration: none; border-bottom: 1px dotted var(--grisclair); }
.page-connexion { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.carte-connexion { background: #0D5A98; border-radius: 10px; padding: 28px 28px 18px; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.carte-connexion h1 { margin: 0; font-size: 22px; }
.carte-connexion .sous { margin: 0; font-size: 13px; color: var(--grisclair); }
.carte-connexion label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--grisclair); }
.carte-connexion input { font: inherit; font-size: 15px; color: #111; padding: 7px 9px; border: 1px solid #9bc; border-radius: 4px; }
.carte-connexion button { font: inherit; font-weight: 600; padding: 9px 16px; border: 0; border-radius: 4px;
  background: #E8C24A; color: #222; cursor: pointer; margin-top: 4px; }
.carte-connexion button:disabled { opacity: .6; cursor: progress; }
.carte-connexion .msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--rouge); }
.carte-connexion a { color: var(--blanc); }

/* =====================================================================
   Structure n° 7, choisie le 31/10/2026 : charte de toursvolleyball.com
   (bandeau marine, menu en majuscules Roboto, titres Teko, accents or et
   orange) sur le fond bleu de l'application MATLAB au lieu du fond clair.
   Ces regles viennent apres les precedentes et les surchargent.
   ===================================================================== */
:root { --marine: #002043; --marine2: #1A2240; --or: #CEB38F; --orange: #E5AB64; --tvbbleu: #0080B5; }
html, body { font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif; }
.teko, .dernier h2, .entre h2, .radar h3, .deuxtables h3, .matchs h3, .nom {
  font-family: Teko, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }

/* bandeau du site : logo, applications, compte */
.site { display: flex; align-items: center; gap: 28px; padding: 0 20px; height: 60px; background: var(--marine);
  border-bottom: 1px solid rgba(206,179,143,.35); }
.site .marque { display: flex; align-items: center; gap: 10px; color: var(--blanc); text-decoration: none;
  font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: .5px; line-height: 1; }
.site .marque img { width: 40px; height: 40px; }
.site .apps { display: flex; gap: 22px; }
.site .apps a { color: var(--blanc); text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; padding: 21px 0 19px; border-bottom: 2px solid transparent; }
.site .apps a.on { color: var(--or); border-bottom-color: var(--or); }
.site .apps a.bientot { opacity: .45; cursor: default; }
.site .apps a.bientot::after { content: " · bientôt"; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }
.site .compte { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--or); }
.site .compte a { color: var(--blanc); text-decoration: none; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; font-weight: 700; }
.site .compte a:hover { color: var(--or); }
.site .compte a.discret { opacity: .5; text-transform: none; font-weight: 400; }

/* sous-menu : les onglets, puis le contexte (joueur, dates) a droite */
.onglets { display: flex; align-items: center; gap: 4px; padding: 0 20px; min-height: 42px; background: var(--marine2); flex-wrap: wrap; }
.onglets > a { color: var(--blanc); text-decoration: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 13px 12px 11px; border-bottom: 2px solid transparent; white-space: nowrap; }
.onglets > a.on { color: var(--or); border-bottom-color: var(--or); }
.onglets > a.off { opacity: .45; cursor: default; }
.onglets .contexte { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.onglets .etat { min-width: 0; margin-right: 6px; color: var(--or); }
.btn { font: inherit; font-size: 13px; font-weight: 700; color: var(--blanc); border: 0; border-radius: 3px; padding: 6px 12px;
  text-transform: uppercase; letter-spacing: .4px; cursor: pointer; }
.btn.orange { background: var(--orange); }
.btn.bleu { background: var(--tvbbleu); text-transform: none; font-weight: 400; letter-spacing: 0; }
select.btn { appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='white'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; }
select.btn option { color: #111; background: #fff; text-transform: none; font-weight: 400; }
input.btn::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

/* contenu : fond bleu conserve, tuiles soulignees d'or, titres Teko */
.tuile { border-top: 2px solid var(--or); border-radius: 3px; }
.tuile h4 { font-weight: 400; text-transform: uppercase; font-size: 11px; letter-spacing: .4px; color: #E6ECF2; }
.numero { font-family: Teko, "Arial Narrow", Impact, sans-serif; border-radius: 3px; border-top: 2px solid var(--or); }
.nom { font-size: 24px; letter-spacing: .5px; }
.dernier h2 { font-size: 28px; }
.dernier .lastmatch { font-family: Georgia, serif; font-style: italic; color: var(--orange); font-size: 18px; }
.deuxtables h3, .matchs h3, .radar h3 { font-size: 16px; color: var(--or); font-weight: 500; }
.entre h2 { font-size: 20px; }
table { border-radius: 3px; overflow: hidden; }
th { background: var(--marine); color: var(--or); text-transform: uppercase; font-size: 11px; letter-spacing: .4px; }
.accueil { font-family: Georgia, serif; font-style: italic; color: var(--or); font-size: 16px; }
.pied { opacity: .8; }

@media (max-width: 720px) {
  .site { gap: 14px; padding: 0 12px; }
  .site .marque span { display: none; }
  .site .compte a.discret, .site .compte #qui { display: none; }
  .onglets { padding: 0 8px; }
  .onglets > a { padding: 10px 8px 8px; font-size: 11px; }
  .onglets .contexte { margin-left: 0; width: 100%; flex-wrap: wrap; }
}

/* =====================================================================
   Onglet Season ranking (31/10/2026) : propositions 02 + 04 + 05 + 06
   ===================================================================== */
.ranking { display:flex; flex-direction:column; gap:16px; padding: 14px 20px 10px; }
.ranking .bloc { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ranking .deux { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.ranking h2 { font-size: 22px; color: var(--or); font-weight: 500; }
.ranking .legende { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--grisclair); }
.ranking .legende i { display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; }
.ranking .legende .note { font-style: italic; }
.ranking .vide { color: var(--grisclair); font-style: italic; padding: 20px; }

.podium { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; align-items:end; max-width: 760px; margin: 0 auto; width: 100%; }
.podium .pl { text-align:center; background: var(--bleuclair); border-radius: 4px 4px 0 0; padding: 8px 6px 6px; border-top: 3px solid var(--or); }
.podium .pl.moi { outline: 2px solid var(--rouge); }
.podium .pl img { width: 80px; height: 128px; object-fit: contain; }
.podium .pl .nom { font-size: 20px; line-height:1; }
.podium .pl .pts { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 34px; line-height:1; color: var(--or); }
.podium .pl .rg { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 24px; color: var(--orange); line-height:1; }
.podium .pl .poste { font-size: 11px; }

table.equipe td .nm { font-weight: 700; }
table.equipe .avatar { width: 26px; height: 40px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
table.equipe tr.premier td { font-weight: 700; }
table.equipe tr.moi td { color: var(--rouge); }
table.equipe tr.moi.fond td { background: rgba(229,171,100,.16); color: #fff; }
table.equipe tr.moi.fond td:first-child { border-left: 3px solid var(--orange); }
.badge { display:inline-block; min-width:18px; padding: 0 5px; border-radius: 9px; font-size:11px; font-weight:700; text-align:center; background: rgba(255,255,255,.12); color:#fff; margin-right:3px; }
.badge.on { background: var(--or); color: var(--marine); }

.barres { display:flex; flex-direction:column; gap:5px; }
.barre { display:grid; grid-template-columns: 160px 1fr 56px; gap: 8px; align-items:center; font-size:13px; }
.barre .lib { white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.barre.moi .lib { color: var(--rouge); font-weight:700; }
.barre .piste { height: 18px; background: rgba(0,0,0,.18); border-radius:2px; display:flex; overflow:hidden; position:relative; }
.barre .q { background: var(--tvbbleu); height:100%; } .barre .b { background: var(--or); height:100%; }
.barre .val { text-align:right; font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 18px; color: var(--or); line-height:1; }
.barre.div .piste { display:block; }
.barre.div .seg { position:absolute; top:0; height:100%; }
.barre.div .seg.neg { opacity: .55; }
.barre.div .zero { position:absolute; top:-2px; bottom:-2px; width:1px; background:#fff; opacity:.7; }

.courbe svg { width:100%; height:auto; display:block; background: rgba(0,0,0,.12); border-radius:3px; }

@media (max-width: 900px) { .ranking .deux { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .ranking { padding: 10px 12px; }
  .podium .pl img { width: 56px; height: 90px; }
  .barre { grid-template-columns: 110px 1fr 48px; }
  table.equipe th:nth-child(4), table.equipe td:nth-child(4), table.equipe th:nth-child(5), table.equipe td:nth-child(5) { display:none; }
}

/* Season ranking, mise en page condensee du 31/10/2026 :
   gauche = podium + tableau (meme largeur), droite = les deux graphiques
   empiles, bas = la course. Les barres sont plus fines pour que les deux
   graphiques tiennent a la hauteur du podium et du tableau. */
.ranking .haut { display:grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 18px; align-items:start; }
.ranking .haut .droite { gap: 14px; }
.podium { max-width: none; margin: 0; }
.podium .pl img { width: 64px; height: 102px; }
.podium .pl .pts { font-size: 30px; }
table.equipe td, table.equipe th { padding: 2px 6px; }
table.equipe .avatar { width: 22px; height: 34px; margin-right: 5px; }
.ranking .barres { gap: 3px; }
.barre { grid-template-columns: 150px 1fr 50px; gap: 6px; font-size: 12px; }
.barre .piste { height: 14px; }
.barre .val { font-size: 16px; }
.ranking h2 { font-size: 20px; }
@media (max-width: 1000px) { .ranking .haut { grid-template-columns: 1fr; } }
/* Hauteur de rangee forcee : la grille prenait 36 px par barre, les deux
   graphiques debordaient sous le tableau. 20 px suffisent a 14 px de piste. */
.ranking .barre { height: 20px; overflow: hidden; }
.ranking .barre .val { line-height: 20px; }
/* Podium a marches (31/10/2026) : les trois cartes sont calees en bas, la
   marche du 1er est la plus haute. Les ex aequo au rang 1 gardent leur numero. */
.podium { align-items: end; }
.podium .pl { background: none; border-top: 0; padding: 0; display: flex; flex-direction: column; }
.podium .pl .carte { background: var(--bleuclair); border-top: 3px solid var(--or); border-radius: 4px 4px 0 0; padding: 8px 6px 6px; }
.podium .pl.moi { outline: none; }
.podium .pl.moi .carte { outline: 2px solid var(--rouge); outline-offset: -2px; }
.podium .marche { background: var(--marine); color: var(--or); font-family: Teko, "Arial Narrow", Impact, sans-serif;
  font-size: 34px; line-height: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px;
  border-top: 2px solid var(--or); }
.podium .marche.m1 { height: 72px; }
.podium .marche.m2 { height: 48px; }
.podium .marche.m3 { height: 28px; }
.podium .marche:not(.m1):not(.m2):not(.m3) { height: 28px; }
/* Les .barres du Home (Training vs Match) centrent leurs enfants ; en
   colonne flex cela retrecit chaque .barre a son contenu et la colonne 1fr
   de la piste tombe a 0 px. Sur Season ranking, les barres s'etirent. */
.ranking .barres { align-items: stretch; }
.ranking .barre { width: 100%; }
/* Rangees de 24 px, texte centre verticalement et jamais coupe (la version a
   20 px avec overflow hidden rognait les libelles selon la police). */
.ranking .barre { height: 24px; overflow: visible; align-items: center; }
.ranking .barre .lib { line-height: 24px; height: 24px; font-size: 13px; }
.ranking .barre .val { line-height: 24px; height: 24px; font-size: 18px; }
.ranking .barre .piste { height: 14px; align-self: center; }
.ranking .barres { gap: 4px; }
/* Marche du podium : le chiffre est centre et tient dans la plus petite marche. */
.podium .marche { font-size: 26px; padding-top: 0; align-items: center; }
.podium .marche.m3, .podium .marche:not(.m1):not(.m2):not(.m3) { height: 32px; }
/* Marches : la boite de ligne de Teko fait 37 px a 26 px de corps ; la plus
   petite marche fait donc 40 px et les autres suivent par paliers de 16. */
.podium .marche.m1 { height: 72px; }
.podium .marche.m2 { height: 56px; }
.podium .marche.m3, .podium .marche:not(.m1):not(.m2):not(.m3) { height: 40px; }

/* Bas de Season ranking (31/10/2026) : regles a gauche, course reduite a droite. */
.ranking .bas { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.regles { font-size: 12px; display:flex; flex-direction:column; gap: 8px; }
.regles .formule { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing:.4px; color: #fff; }
.regles .formule b { color: var(--or); }
.regles table { font-size: 12px; }
.regles table.bareme th, .regles table.bareme td { text-align: center; padding: 2px 6px; }
.regles table.bareme td:first-child, .regles table.bareme th:first-child { text-align: left; }
.regles table.bareme td.pos { color: var(--vert); } .regles table.bareme td.neg { color: var(--rouge); } .regles table.bareme td.nul { color: var(--grisclair); }
.regles table.bareme small { display:block; color: var(--grisclair); font-size: 10px; }
.regles .clubs { display:grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.regles .clubs div { background: rgba(0,0,0,.15); border-left: 2px solid var(--or); padding: 3px 8px; border-radius: 2px; }
.regles .clubs b { color: var(--or); }
.regles .note { color: var(--grisclair); font-style: italic; }
@media (max-width: 1000px) { .ranking .bas { grid-template-columns: 1fr; } }

/* =====================================================================
   Onglet Jump statistics (31/10/2026) : propositions 02 + 04 + 05 + 06
   ===================================================================== */
.sousonglets { display:flex; gap:2px; padding: 0 20px; background: rgba(0,0,0,.18); flex-wrap: wrap; }
.sousonglets > a { color: var(--blanc); text-decoration:none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 8px 10px 7px; border-bottom: 2px solid transparent; }
.sousonglets > a.on { color: var(--or); border-bottom-color: var(--or); }
.sousonglets > a.off { opacity: .45; cursor: default; }

.jumpstats { display:flex; flex-direction:column; gap:16px; padding: 14px 20px 10px; }
.jumpstats .bloc { display:flex; flex-direction:column; gap:8px; min-width:0; }
.jumpstats .deux { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items:start; }
.jumpstats h2 { font-size: 20px; color: var(--or); font-weight: 500; margin-top: 4px; }
.jumpstats .legende { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--grisclair); }
.jumpstats .legende i { display:inline-block; width:11px; height:11px; border-radius:2px; vertical-align:-1px; margin-right:4px; }
.jumpstats .note { margin: 0; font-size: 11px; color: var(--grisclair); font-style: italic; }
.jumpstats .vide { color: var(--grisclair); font-style: italic; padding: 12px; }

.jumpstats .types { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; }
.jumpstats .types .col h3 { font-size:17px; padding: 3px 8px; border-radius:3px 3px 0 0; color: var(--marine); font-weight:500; display:flex; justify-content:space-between; align-items:baseline; }
.jumpstats .types .col h3 small { font-family: Roboto, sans-serif; font-size: 11px; text-transform:none; letter-spacing:0; font-weight:400; }
.jumpstats .types .tuiles { display:grid; grid-template-columns: 1fr 1fr; gap:4px; }
.jumpstats .tuile { padding: 4px 6px; }
.jumpstats .tuile h4 { font-size:10px; margin-bottom: 2px; }
.jumpstats .tuile .v { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 24px; line-height:1; color:#fff; }
.jumpstats .tuile .v.petit { font-size: 17px; }
.jumpstats .tuile .v small { font-size: 11px; color: var(--grisclair); font-family: Roboto, sans-serif; }

.bandes { display:flex; flex-direction:column; gap:6px; }
.bandes .ligne { display:grid; grid-template-columns: 70px minmax(0, 1fr) 120px; gap:8px; align-items:center; font-size:12px; }
.bandes .piste { height: 22px; display:flex; border-radius:3px; overflow:hidden; background: rgba(0,0,0,.18); }
.bandes .piste div { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color: var(--marine); overflow:hidden; }

.dots { display:flex; flex-direction:column; gap:4px; }
.dots .l { display:grid; grid-template-columns: 130px minmax(0, 1fr) 80px; gap:8px; align-items:center; font-size:12px; }
.dots .l > span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform: capitalize; }
.dots .l small { color: var(--grisclair); }
.dots .l > span:last-child { text-align:right; font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 16px; color: var(--or); }
.dots .axe { position:relative; height: 16px; background: rgba(0,0,0,.18); border-radius:2px; }
.dots .seg { position:absolute; top:5px; height:6px; background: rgba(255,255,255,.35); border-radius:3px; }
.dots .med { position:absolute; top:2px; width:12px; height:12px; border-radius:50%; background: var(--orange); margin-left:-6px; }
.dots .mx { position:absolute; top:3px; width:3px; height:10px; background: #fff; }

.cartes { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
.carte { background: rgba(0,0,0,.15); border-left: 3px solid var(--or); border-radius:3px; padding: 6px 8px; }
.carte h4 { margin:0 0 3px; font-family: Teko, "Arial Narrow", Impact, sans-serif; text-transform:uppercase; font-size:17px; font-weight:500; color:#fff; display:flex; justify-content:space-between; }
.carte h4 small { font-family: Roboto, sans-serif; text-transform:none; font-size: 11px; color: var(--grisclair); letter-spacing:0; }
.carte .notes { display:flex; border-radius:2px; overflow:hidden; margin-bottom:4px; background: rgba(0,0,0,.2); }
.carte .notes div { font-size:9px; display:flex; align-items:center; justify-content:center; color: var(--marine); font-weight:700; overflow:hidden; white-space:nowrap; }
.carte .kv { display:grid; grid-template-columns: repeat(3, 1fr); gap:3px; font-size:11px; }
.carte .kv div { background: rgba(255,255,255,.08); border-radius:2px; padding: 2px 4px; text-align:center; }
.carte .kv b { display:block; font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 16px; line-height:1; color: var(--or); }
.carte .sous { display:grid; grid-template-columns: 90px minmax(0, 1fr); gap:6px; align-items:center; font-size:11px; margin-top:4px; text-transform: capitalize; }
.carte .sous small { color: var(--grisclair); }
.carte .sous .notes { margin:0; }

@media (max-width: 1000px) { .jumpstats .deux { grid-template-columns: 1fr; } .jumpstats .types { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .jumpstats { padding: 10px 12px; } .jumpstats .types, .cartes { grid-template-columns: 1fr; } .sousonglets { padding: 0 8px; } }

/* =====================================================================
   Sous-onglet Raw data (31/10/2026) : propositions 06 + 03
   ===================================================================== */
.sousonglets .pills { margin-left: auto; display:flex; gap:4px; align-items:center; padding: 4px 0; }
.sousonglets .pills button { font: inherit; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:#fff;
  background: rgba(255,255,255,.15); border:0; border-radius:10px; padding: 3px 10px; cursor:pointer; }
.sousonglets .pills button.on { background: var(--or); color: var(--marine); }
.jumpraw { display:flex; flex-direction:column; gap:14px; padding: 14px 20px 10px; }
.jumpraw .bloc { display:flex; flex-direction:column; gap:6px; min-width:0; }
.jumpraw h2 { font-size: 20px; color: var(--or); font-weight: 500; }
.jumpraw .legende { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--grisclair); }
.jumpraw .legende i { display:inline-block; width:11px; height:11px; border-radius:2px; vertical-align:-1px; margin-right:4px; }
.jumpraw .legende .note, .jumpraw p.note { font-style: italic; }
.jumpraw p.note { margin:0; font-size: 11px; color: var(--grisclair); }
.jumpraw .vide { color: var(--grisclair); font-style: italic; padding: 12px; }
.jumpraw svg.g { width:100%; height:auto; display:block; background: rgba(0,0,0,.12); border-radius:3px; }
@media (max-width: 720px) { .jumpraw { padding: 10px 12px; } .sousonglets .pills { margin-left: 0; width: 100%; flex-wrap: wrap; } }
/* Raw data : vignettes par seance et visionneuse */
.jumpraw .multi { display:grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:6px; }
.jumpraw .multi .s { background: rgba(0,0,0,.15); border-radius:3px; padding: 4px; cursor: zoom-in; border: 1px solid transparent; }
.jumpraw .multi .s:hover, .jumpraw .multi .s:focus { border-color: var(--or); outline: none; }
.jumpraw .multi .s h4 { margin:0 0 2px; font-size:10px; font-weight:400; color: var(--grisclair); display:flex; justify-content:space-between; }
.jumpraw .multi .s h4 b { color:#fff; }
.jumpraw .multi svg { width:100%; height: 60px; display:block; }
.visionneuse { position: fixed; inset: 0; background: rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding: 20px; z-index: 50; }
.visionneuse[hidden] { display:none; }
.visionneuse .cadre { background: var(--bleu); border-top: 3px solid var(--or); border-radius: 6px; width: min(1100px, 100%); max-height: 100%; overflow:auto; padding: 12px 16px 14px; box-shadow: 0 10px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:8px; }
.visionneuse .entete { display:flex; align-items:baseline; gap:12px; }
.visionneuse .entete h2 { font-size: 24px; color: var(--or); font-weight: 500; }
.visionneuse .entete span { color: var(--grisclair); font-size: 13px; flex: 1; }
.visionneuse .entete button { font: inherit; font-size: 22px; line-height:1; color:#fff; background: none; border:0; cursor:pointer; padding: 0 4px; }
.visionneuse svg.g { width:100%; height:auto; display:block; background: rgba(0,0,0,.15); border-radius:3px; }
.visionneuse .tuiles { display:grid; grid-template-columns: repeat(6, 1fr); gap:6px; }
.visionneuse .tuile { padding: 4px 6px; }
.visionneuse .tuile h4 { font-size: 10px; margin-bottom: 2px; }
.visionneuse .tuile .v { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 22px; line-height:1; color:#fff; }
@media (max-width: 720px) { .visionneuse { padding: 8px; } .visionneuse .tuiles { grid-template-columns: repeat(3, 1fr); } }

/* Sous-onglet Distribution (31/10/2026) : densites + histogrammes d'action ;
   reprend la mise en page de Raw data (.jumpraw) */
.jumpdist h2 small { font-family: Roboto, sans-serif; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--grisclair); font-weight: 400; }
.jumpdist .quatre { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jumpdist .quatre .vide { background: rgba(0,0,0,.12); border-radius: 3px; min-height: 120px; display:flex; align-items:center; justify-content:center; text-align:center; }
@media (max-width: 1000px) { .jumpdist .quatre { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .jumpdist .quatre { grid-template-columns: 1fr; } }

/* Sous-onglet Features (31/10/2026) : 02 + 06 + 10 ; reprend .jumpraw */
.jumpfeat .quatre { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jumpfeat .deux { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items:start; }
.jumpfeat h3 { font-size: 16px; font-weight: 500; margin: 6px 0 4px; }
.jumpfeat h3 small { font-family: Roboto, sans-serif; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--grisclair); font-weight: 400; }
.jumpfeat .tuiles { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.jumpfeat .tuile { padding: 4px 6px; }
.jumpfeat .tuile h4 { font-size: 10px; margin-bottom: 2px; }
.jumpfeat .tuile .v { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 22px; line-height: 1; color: #fff; }
.jumpfeat .tuile .v small { font-size: 11px; color: var(--grisclair); font-family: Roboto, sans-serif; }
.jumpfeat .tuile .d { font-size: 11px; font-weight: 700; margin-top: 2px; }
.jumpfeat .tuile .d small { font-weight: 400; color: var(--grisclair); }
.jumpfeat .tuile .d.haut { color: var(--vert); } .jumpfeat .tuile .d.bas { color: var(--rouge); } .jumpfeat .tuile .d.egal { color: var(--grisclair); }
@media (max-width: 1000px) { .jumpfeat .deux { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .jumpfeat .quatre { grid-template-columns: 1fr; } .jumpfeat .tuiles { grid-template-columns: 1fr 1fr; } }

/* Sous-onglet Jump load (31/10/2026) : 02 + 04 + 05 + 06 ; reprend .jumpraw */
.jumpload .deux { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items:start; }
.jumpload .sem { display:flex; flex-direction:column; gap:5px; }
.jumpload .sem .l { display:grid; grid-template-columns: 150px minmax(0, 1fr) 50px; gap:8px; align-items:center; font-size:12px; }
.jumpload .sem .l small { color: var(--grisclair); font-weight: 400; }
.jumpload .sem .piste { height: 20px; display:flex; border-radius:3px; overflow:hidden; background: rgba(0,0,0,.18); }
.jumpload .sem .piste div { display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color: var(--marine); overflow:hidden; }
.jumpload .sem .val { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 18px; color: var(--or); text-align:right; line-height:1; }
.jumpload .cal { display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap:3px; }
.jumpload .cal .j { aspect-ratio: 1.3; border-radius: 3px; background: rgba(0,0,0,.15); font-size: 10px; padding: 2px 3px; position:relative; overflow:hidden; border: 1px solid transparent; }
.jumpload .cal .j .n { position:absolute; right:3px; bottom:1px; font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 15px; color:#fff; line-height:1; }
.jumpload .cal .j .d { color: var(--grisclair); }
.jumpload .cal .e { color: var(--grisclair); font-size: 10px; text-align:center; }
@media (max-width: 1000px) { .jumpload .deux { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .jumpload .sem .l { grid-template-columns: 110px 1fr 40px; } }
/* Calendrier plus bas que la liste des semaines : cases moins hautes. */
.jumpload .cal .j { aspect-ratio: 1.8; }

/* Sous-onglet Set (31/10/2026) : 02 + 04 + 05 + 06 + 08 + 07 ; reprend .jumpraw */
.jumpsets .deux { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items:start; }
.jumpsets .cinq { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.jumpsets h2 select.petit { font-size: 12px; padding: 3px 26px 3px 8px; margin-left: 8px; vertical-align: middle; font-family: Roboto, sans-serif; letter-spacing: 0; }
.jumpsets table.grillesets { font-size: 12px; }
.jumpsets table.grillesets td.vide-c { color: var(--grisclair); }
.jumpsets table.grillesets .v { color: var(--vert); font-weight: 700; } .jumpsets table.grillesets .d { color: var(--rouge); font-weight: 700; }
.jumpsets .intens { display:flex; flex-direction:column; gap:6px; }
.jumpsets .intens .l { display:grid; grid-template-columns: 60px minmax(0, 1fr) 70px; gap:8px; align-items:center; font-size:12px; }
.jumpsets .intens .piste { height: 22px; display:flex; border-radius:3px; overflow:hidden; background: rgba(0,0,0,.18); }
.jumpsets .intens .piste div { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color: var(--marine); overflow:hidden; }
.jumpsets .intens .val { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 18px; color: var(--or); text-align:right; line-height:1; }
.jumpsets .intens .val small { font-family: Roboto, sans-serif; font-size: 10px; color: var(--grisclair); }
.jumpsets .tuiles { display:grid; gap: 8px; }
.jumpsets .tuile { padding: 6px 8px; }
.jumpsets .tuile h4 { font-size: 11px; margin-bottom: 2px; }
.jumpsets .tuile .v { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 26px; line-height: 1; color: #fff; }
.jumpsets .tuile .v small { font-size: 11px; color: var(--grisclair); font-family: Roboto, sans-serif; }
.jumpsets .tuile .d { font-size: 12px; font-weight: 700; margin-top: 3px; }
.jumpsets .tuile .d small { font-weight: 400; color: var(--grisclair); }
.jumpsets .tuile .d.haut { color: var(--vert); } .jumpsets .tuile .d.bas { color: var(--rouge); } .jumpsets .tuile .d.egal { color: var(--grisclair); }
.jumpsets .tuile .sous { font-size: 11px; color: #E6ECF2; margin-top: 3px; }
.jumpsets .tuile .sous small { color: var(--grisclair); }
@media (max-width: 1000px) { .jumpsets .deux { grid-template-columns: 1fr; } .jumpsets .cinq { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .jumpsets .cinq { grid-template-columns: 1fr 1fr; } .jumpsets .tuiles { grid-template-columns: 1fr 1fr !important; } }

/* =====================================================================
   Onglet Spiders (31/10/2026) : 02 + comparaisons 04/05 + 06 + 10
   ===================================================================== */
.sousonglets .libelle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--or); padding: 8px 6px 7px 0; }
.sousonglets .btn.petit { font-size: 11px; padding: 4px 10px; margin: 4px 2px; }
.btn.ciel { background: #1E6FB5; text-transform: none; font-weight: 400; letter-spacing: 0; }
.btn.violet { background: #7B2CBF; text-transform: none; font-weight: 400; letter-spacing: 0; }
.btn.gris { background: rgba(255,255,255,.15); text-transform: none; font-weight: 400; letter-spacing: 0; }
.spiders .deux { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items:start; }
.spiders h2 small { font-family: Roboto, sans-serif; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--grisclair); font-weight: 400; }
.spiders .radar svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.spiders table.ecarts { font-size: 12px; max-width: 520px; margin: 6px auto 0; }
.spiders .petits { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: start; }
.spiders .petits h3 { font-size: 15px; color: var(--or); font-weight: 500; text-align: center; }
.spiders .petits .radar svg { max-width: 280px; }
.spiders .legende-petits { padding-top: 24px; }
.spiders .multi { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.spiders .multi .s { background: rgba(0,0,0,.15); border-radius: 3px; padding: 6px; text-align: center; font-size: 12px; cursor: pointer; border: 1px solid transparent; }
.spiders .multi .s:hover { border-color: var(--or); }
.spiders .multi .s .v { color: var(--vert); font-weight: 700; } .spiders .multi .s .d { color: var(--rouge); font-weight: 700; }
.spiders .multi .cap { font-size: 10px; color: var(--grisclair); }
.spiders .ffgrille { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.spiders .ffgrille h3 { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.spiders .tuiles { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.spiders .tuile { padding: 6px 8px; }
.spiders .tuile h4 { font-size: 10px; margin-bottom: 2px; }
.spiders .tuile .v { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 28px; line-height: 1; color: #fff; }
.spiders .tuile .v small { font-size: 12px; color: var(--grisclair); font-family: Roboto, sans-serif; }
.spiders .tuile .sous { font-size: 11px; color: var(--grisclair); }
@media (max-width: 1000px) { .spiders .deux, .spiders .ffgrille { grid-template-columns: 1fr; } .spiders .petits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .spiders .petits { grid-template-columns: 1fr; } .spiders .tuiles { grid-template-columns: 1fr; } }

/* =====================================================================
   Onglet Goals (31/10/2026) : 02 / 05 08 09 10 / 07 / 03
   ===================================================================== */
.goals { --bronze:#CD7F32; --silver:#C0C0C0; --gold:#FFD700; --platinum:#7FD3FF; --prestige:#C77DFF; }
.goals .deux { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items:start; }
.goals h2 small { font-family: Roboto, sans-serif; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--grisclair); font-weight: 400; }
.goals h3 { font-size: 15px; color: var(--or); font-weight: 500; margin: 8px 0 4px; }
.goals .legende i.rond { border-radius: 50%; }
.goals .med { display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid; vertical-align:-3px; }
.goals .med.on { box-shadow: 0 0 6px currentColor; }
.goals .themes { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.goals .theme { background: rgba(0,0,0,.15); border-radius:4px; padding:6px 8px; border-left: 3px solid var(--or); }
.goals .theme.complet { border-left-color: var(--vert); }
.goals .theme h4 { margin:0 0 3px; font-family: Teko, "Arial Narrow", Impact, sans-serif; text-transform:uppercase; font-size:17px; font-weight:500; display:flex; justify-content:space-between; color:#fff; }
.goals .theme h4 small { font-family: Roboto, sans-serif; font-size: 11px; color: var(--grisclair); text-transform:none; }
.goals .theme .meds { display:flex; gap:4px; margin-bottom:4px; }
.goals .prog { height:6px; background: rgba(0,0,0,.25); border-radius:3px; overflow:hidden; }
.goals .prog i { display:block; height:100%; background: var(--orange); }
.goals .theme .next { font-size:11px; color:var(--grisclair); margin-top:3px; }
.goals .theme .next b { color:#fff; }
.goals .proches { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:8px; }
.goals .proches.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.goals .proche { background: rgba(0,0,0,.15); border-radius:4px; padding:6px; display:grid; grid-template-columns: 56px 1fr; gap:6px; align-items:center; font-size:11px; }
.goals .proche img { width:56px; height:76px; object-fit:contain; }
.goals .proche .lib { color:#fff; font-weight:700; line-height:1.2; }
.goals .proche .sous { color: var(--grisclair); }
.goals .proche .sous b { color:#fff; }
.goals .sansimg { width:56px; height:76px; display:flex; align-items:center; justify-content:center; font-size:9px; color: var(--grisclair); text-align:center; }
.goals .barre.eff { grid-template-columns: 170px minmax(0, 1fr) 70px; height: 22px; }
.goals .barre.eff .lib small { color: var(--grisclair); }
.goals .barre.eff.moi .lib { color: var(--rouge); font-weight: 700; }
.goals .barre.eff .val { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 17px; color: var(--or); text-align:right; line-height: 22px; }
.goals .barre.eff .val small { font-family: Roboto, sans-serif; font-size: 10px; color: var(--grisclair); }
.goals .escalier { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.goals .escalier .marches { display:flex; gap:2px; align-items:flex-end; height: 44px; }
.goals .escalier .marches i { flex:1; border-radius:2px 2px 0 0; display:block; }
.goals .escalier .t { font-size:11px; } .goals .escalier .t span { color: var(--grisclair); }
.goals .tuiles { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:6px; }
.goals .tuile { padding: 4px 6px; }
.goals .tuile h4 { font-size: 10px; margin-bottom: 2px; }
.goals .tuile .v { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 26px; line-height:1; color:#fff; }
.goals .tuile .v small { font-size: 11px; color: var(--grisclair); font-family: Roboto, sans-serif; }
.goals .cinq { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:10px; }
.goals .cinq .col h4 { margin:0 0 4px; font-family: Teko, "Arial Narrow", Impact, sans-serif; text-transform:uppercase; font-size:17px; font-weight:500; display:flex; justify-content:space-between; padding: 2px 8px; border-radius:3px; color: var(--marine); }
.goals .cinq .col ul { margin:0; padding-left:16px; font-size:12px; }
.goals .cinq .col li.ok { color: var(--vert); } .goals .cinq .col li.ko { color: #9EA5AD; }
.goals .galerie { display:grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:8px; }
.goals .galerie .v { background: rgba(0,0,0,.15); border-radius:4px; padding:4px; text-align:center; font-size:10px; }
.goals .galerie .v.ok { outline: 1px solid var(--vert); }
.goals .galerie .v img { width:100%; height:160px; object-fit:contain; display:block; }
.goals .galerie .v .lib { color:#fff; font-size:10px; line-height:1.2; height: 2.4em; overflow:hidden; margin-top:3px; }
.goals .galerie .v .deb { color: var(--vert); font-weight: 700; }
.goals .galerie .v .sous { color: var(--grisclair); }
.goals .galerie .sansimg { width:100%; height:160px; }
@media (max-width: 1000px) { .goals .deux { grid-template-columns: 1fr; } .goals .cinq { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .goals .cinq, .goals .tuiles, .goals .proches.trois { grid-template-columns: 1fr; } }
/* Goals : la synthese montre six recompenses, trois par ligne */
.goals .proches.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.goals .proche .sous b { color: #fff; }
@media (max-width: 720px) { .goals .proches.six { grid-template-columns: 1fr; } }

/* =====================================================================
   Onglet Session report (31/10/2026) : 03 « tableau de bord » + 05 « le
   terrain » + les distributions de 07 ; reprend .jumpraw. Le type (Match /
   Practice) et la seance se choisissent dans la rangee des sous-onglets.
   ===================================================================== */
.sousonglets.seances { align-items:center; gap:8px; padding: 4px 20px; }
.sousonglets.seances select.petit { font-size: 12px; padding: 4px 26px 4px 8px; font-family: Roboto, sans-serif; letter-spacing:0; max-width: 460px; }
.sousonglets.seances .fleche { font: inherit; font-size: 18px; line-height: 1; color:#fff; background: rgba(0,0,0,.2); border:0; border-radius:3px; padding: 2px 9px; cursor:pointer; }
.sousonglets.seances .fleche:disabled { opacity:.3; cursor:default; }
.sousonglets.seances .note { font-size: 11px; color: var(--grisclair); font-style: italic; margin-left:auto; }
.sessionreport .bandeau { background: var(--marine); border-radius:6px; padding: 8px 14px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.sessionreport .bandeau .type { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size:22px; text-transform:uppercase; color:var(--or); font-weight:700; }
.sessionreport .bandeau .aff { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size:22px; font-weight:700; }
.sessionreport .bandeau .aff small { color: var(--grisclair); font-size: 16px; }
.sessionreport .bandeau .score { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size:26px; padding: 0 8px; border-radius:4px; font-weight:700; }
.sessionreport .bandeau .score.won { background:#1A4A24; color: var(--vert); } .sessionreport .bandeau .score.lost { background:#4A1F1A; color: var(--rouge); }
.sessionreport .bandeau .dates, .sessionreport .bandeau .qui { color: var(--grisclair); font-size:12px; }
.sessionreport .bandeau .qui { margin-left:auto; } .sessionreport .bandeau .qui b { color:#fff; }
.sessionreport section[hidden] { display:none; }   /* sinon display:grid/flex l emporte sur hidden */
.sessionreport .deux { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items:start; }
.sessionreport .trois { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items:start; }
.sessionreport .grands { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sessionreport .grand { background: var(--bleuclair); border-top: 2px solid var(--or); border-radius:3px; padding: 6px 8px 8px; text-align:center; }
.sessionreport .grand h4 { font-family: Roboto, sans-serif; font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:.4px; color:#E6ECF2; }
.sessionreport .grand .v { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 42px; line-height:1; font-weight:700; }
.sessionreport .grand .ref { font-size:11px; color: var(--grisclair); }
.sessionreport .up { color: var(--vert); } .sessionreport .down { color: var(--rouge); } .sessionreport .egal { color: var(--grisclair); }
.sessionreport .barres { display:flex; flex-direction:column; gap:4px; align-items:stretch; }   /* .barres du Home centre ses enfants */
.sessionreport .barre { display:grid; grid-template-columns: 130px minmax(0, 1fr) 110px; gap:8px; align-items:center; font-size:12px; min-height:20px; }
.sessionreport .barre .lib { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sessionreport .barre .lib small, .sessionreport .barre .val small { color: var(--grisclair); font-size: 10px; }
.sessionreport .barre .piste { height:14px; background: rgba(0,0,0,.2); border-radius:3px; overflow:hidden; position:relative; }
.sessionreport .barre .piste i { display:block; height:100%; position:absolute; left:0; top:0; }
.sessionreport .barre .piste i.ref { background:none; border-right:2px solid #fff; width:0 !important; }
.sessionreport .barre .val { text-align:right; white-space:nowrap; }
.sessionreport .barre.moi .lib, .sessionreport .barre.moi .val { color: var(--orange); font-weight:700; }
.sessionreport .equipe .barre { grid-template-columns: 170px minmax(0, 1fr) 150px; }
.sessionreport .notes { display:grid; grid-template-columns: 110px 1fr 1fr; gap: 6px 10px; align-items:center; font-size:12px; }
.sessionreport .notes .en { font-size:10px; color: var(--grisclair); }
.sessionreport .notes small { color: var(--grisclair); }
.sessionreport .empile { display:flex; height:16px; border-radius:3px; overflow:hidden; background: rgba(0,0,0,.2); }
.sessionreport .empile i { display:block; height:100%; }
.sessionreport .sets { display:grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap:6px; }
.sessionreport .set { background: rgba(0,0,0,.15); border-radius:4px; padding:6px; text-align:center; border-top:3px solid var(--grisclair); min-width:0; }
.sessionreport .set.gagne { border-top-color: var(--vert); } .sessionreport .set.perdu { border-top-color: var(--rouge); } .sessionreport .set.echauf { border-top-color: var(--or); }
.sessionreport .set h4 { font-size:16px; font-weight:500; }
.sessionreport .set .sc { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size:24px; line-height:1; font-weight:700; }
.sessionreport .set .d { font-size:10px; color: var(--grisclair); }
.sessionreport .set .k { display:grid; grid-template-columns: 1fr auto; gap:2px 6px; font-size:11px; text-align:left; margin-top:4px; }
.sessionreport .set .k b { text-align:right; }
.sessionreport .radarbox { max-width: 360px; margin: 0 auto; }
.sessionreport .radarbox svg { width:100%; height:auto; display:block; }
.sessionreport h3 { font-size: 15px; color: var(--or); font-weight:500; margin: 6px 0 2px; }
.sessionreport .terrains { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.sessionreport .terrains .t { text-align:center; }
.sessionreport .terrains .t svg { width:100%; display:block; }
.sessionreport .terrains .t .lib { font-size:11px; color: var(--grisclair); }
.sessionreport .liste { font-size:12px; margin:0; padding-left:16px; }
.sessionreport .liste small { color: var(--grisclair); }
.sessionreport .vert { color: var(--vert); } .sessionreport .rouge { color: var(--rouge); }
@media (max-width: 1000px) { .sessionreport .deux, .sessionreport .trois { grid-template-columns: 1fr; } .sessionreport .sets { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .sessionreport .bandeau .qui { margin-left:0; } .sousonglets.seances .note { margin-left:0; width:100%; } }

/* =====================================================================
   Onglet Art gallery (01/11/2026) : proposition 03 « par theme » ; reprend
   .jumpraw et les cartes par theme de Goals. Visionneuse plein ecran.
   ===================================================================== */
.artgallery h2 { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.artgallery h2 small { font-family: Roboto, sans-serif; font-size: 12px; color: var(--grisclair); text-transform:none; letter-spacing:0; font-weight:400; }
.artgallery h2 a.petit { margin-left:auto; font-size: 11px; padding: 4px 10px; text-decoration:none; font-family: Roboto, sans-serif; letter-spacing:.3px; text-transform:uppercase; font-weight:700; }
.artgallery h2 a.petit.off { opacity:.4; cursor:default; }
.artgallery .themes { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.artgallery .theme { background: rgba(0,0,0,.15); border-radius:4px; padding: 8px 10px; border-left: 3px solid var(--or); }
.artgallery .theme.complet { border-left-color: var(--vert); }
.artgallery .theme h4 { margin:0 0 6px; font-size: 17px; font-weight:500; display:flex; justify-content:space-between; align-items:baseline; }
.artgallery .theme h4 small { font-family: Roboto, sans-serif; font-size: 11px; color: var(--grisclair); text-transform:none; letter-spacing:0; }
.artgallery .cases { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.artgallery .case { cursor:pointer; text-align:center; font-size: 10px; line-height: 1.25; border-top: 3px solid var(--grisclair); border-radius: 3px; background: rgba(0,0,0,.12); padding-bottom: 4px; min-width:0; }
.artgallery .case img { width:100%; aspect-ratio: 2 / 3; object-fit: contain; display:block; }
.artgallery .case .attente { width:100%; aspect-ratio: 2 / 3; background:#fff; display:flex; align-items:center; justify-content:center; }
.artgallery .case .attente img { width:70%; aspect-ratio:auto; }
.artgallery .case .etq { padding: 3px 4px 0; color:#fff; }
.artgallery .case .etq b.ok { color: var(--vert); }
.artgallery .case .etq small { color: var(--grisclair); }
.artgallery .case .prog { height:4px; background: rgba(0,0,0,.35); border-radius:2px; margin: 3px 0 2px; overflow:hidden; }
.artgallery .case .prog i { display:block; height:100%; background: var(--orange); }
.artgallery .case:hover { background: rgba(0,0,0,.25); }
.visionneuse { position:fixed; inset:0; background: rgba(0,0,0,.9); z-index:50; display:flex; flex-direction:column; }
.visionneuse[hidden] { display:none; }
.visionneuse .h { display:flex; gap:10px; align-items:center; padding: 10px 16px; color:#fff; font-size:13px; }
.visionneuse .h a, .visionneuse .h button { font: inherit; font-size:12px; font-weight:700; text-transform:uppercase; color:#fff; background: rgba(255,255,255,.15); border:0; border-radius:3px; padding: 6px 12px; cursor:pointer; text-decoration:none; }
.visionneuse .h a[aria-disabled="true"] { opacity:.35; pointer-events:none; }
.visionneuse .h .x { margin-left:auto; }
.visionneuse .c { flex:1; display:grid; grid-template-columns: 60px 1fr 60px; align-items:center; min-height:0; }
.visionneuse .c img { max-height: calc(100vh - 110px); max-width:100%; object-fit:contain; margin:auto; display:block; }
.visionneuse .c button { font-size:30px; background:none; border:0; color:#fff; cursor:pointer; height:100%; }
.visionneuse .f { padding: 8px 16px; color: var(--grisclair); font-size:12px; text-align:right; }
@media (max-width: 720px) { .artgallery .themes { grid-template-columns: 1fr; } .artgallery .cases { grid-template-columns: repeat(4, 1fr); } .visionneuse .c { grid-template-columns: 40px 1fr 40px; } }

/* =====================================================================
   Telephone (01/11/2026) : choix 04 « onglets defilants, contexte replie »
   + la feuille du bas de 05 (/designs/phone). Sous 720 px : bandeau de
   50 px avec la pastille joueur + periode (commun.js la fabrique), onglets
   et sous-onglets sur une rangee qui defile, le .contexte devient une
   feuille montante. Au-dessus de 720 px, rien ne change.
   ===================================================================== */
.pastille, .feuille-tete, .feuille-pied, .ombre { display: none; }
@media (max-width: 720px) {
  .site { height: 50px; gap: 10px; padding: 0 10px; }
  .site .marque img { width: 30px; height: 30px; }
  .site .apps { gap: 0; }
  .site .apps a { padding: 16px 0 14px; font-size: 12px; }
  .site .apps a.bientot { display: none; }
  .site .compte { display: none; }
  .site .pastille { display: inline-flex; margin-left: auto; align-items: center; gap: 6px; max-width: 60%; font: inherit; font-size: 11px; font-weight: 700;
    color: #fff; background: rgba(0,0,0,.3); border: 1px solid rgba(229,171,100,.6); border-radius: 18px; padding: 3px 9px 3px 3px; cursor: pointer; white-space: nowrap; }
  .site .pastille img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.1); border: 1px solid var(--orange); }
  .site .pastille .qui { text-transform: uppercase; letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; }
  .site .pastille .quand { font-weight: 400; color: var(--grisclair); }
  .site .pastille .chev { color: var(--or); }
  /* pas de mask-image ici : il masquerait aussi la feuille du bas (position:fixed dans .contexte) ; le degrade est un ::after collant */
  .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 6px; min-height: 40px; }
  .onglets::after { content: ""; position: sticky; right: 0; flex: none; width: 28px; margin-left: -28px; align-self: stretch; pointer-events: none;
    background: linear-gradient(90deg, rgba(26,34,64,0), var(--marine2)); }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets > a { padding: 12px 9px 10px; font-size: 11px; flex: none; }
  .sousonglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 6px; }
  .sousonglets::-webkit-scrollbar { display: none; }
  .sousonglets > a { flex: none; }
  .sousonglets .pills { margin-left: 8px; width: auto; flex: none; flex-wrap: nowrap; }
  .sousonglets.seances select.petit { max-width: 190px; }
  .sousonglets.seances .note { display: none; }
  /* la feuille du bas */
  .onglets .contexte { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; width: auto; background: var(--marine); border-radius: 16px 16px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 10px; flex-wrap: nowrap;
    transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -8px 30px rgba(0,0,0,.5); max-height: 85vh; overflow: auto; }
  body.ctx-ouvert .onglets .contexte { transform: none; }
  .onglets .contexte .btn, .onglets .contexte select.btn, .onglets .contexte input.btn { width: 100%; font-size: 14px; padding: 10px 12px; }
  .onglets .contexte .etat { order: 98; text-align: center; font-size: 12px; margin: 0; }
  .ombre { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; }
  body.ctx-ouvert .ombre { display: block; }
  .feuille-tete { display: flex; align-items: center; gap: 10px; position: relative; padding-top: 6px; }
  .feuille-tete .poignee { position: absolute; top: -2px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255,255,255,.3); }
  .feuille-tete b { font-family: Teko, "Arial Narrow", Impact, sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--or); margin-top: 8px; }
  .feuille-tete .fermer { margin-left: auto; margin-top: 8px; font: inherit; font-size: 26px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }
  .feuille-pied { display: flex; gap: 18px; justify-content: center; order: 99; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
  .feuille-pied a { color: var(--grisclair); text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
  main { overflow-x: hidden; }
  .ranking table.equipe th, .ranking table.equipe td { padding: 3px 4px; font-size: 11px; }
}