/* reSCORE — Duel coéquipiers F1 ([f1_teammates]) */
.rs-tmm{
  --ink:#0f172a; --ink-soft:#475569; --muted:#94a3b8;
  --line:#e7ebf0; --card:#fff;
  --green:#16a34a; --green-d:#15803d; --red:#e2574c;
  --accent:#003082; --f1:#e10600; --row-h:34px;
  --rsf-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.18);
  overflow:hidden; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
}
.rs-tmm *{ box-sizing:border-box }

.rs-tmm__head{
  padding:18px 22px 14px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.rs-tmm__eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.rs-tmm__title{ font-size:19px; margin:4px 0 0; font-weight:750; letter-spacing:-.01em; }
.rs-tmm__legend{ display:flex; gap:14px; font-size:11.5px; color:var(--ink-soft); }
.rs-tmm__legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }
.rs-tmm__legend .g{ background:var(--green) } .rs-tmm__legend .r{ background:var(--red) }

.rs-tmm__body{ display:flex; height:440px; }

/* ── Héro : photo immersive pleine hauteur + infos en surimpression ── */
.rs-tmm__hero{ position:relative; flex:0 0 196px; background:#11151a; overflow:hidden; }
.rs-tmm__heroimg{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
/* Héros = drapeau (SVG sélection) : fond flou plein cadre + drapeau net centré
   (« contain ») dans la moitié haute, au-dessus du dégradé/nom. */
.rs-tmm__heroflagbg{ position:absolute; inset:-12%; z-index:0; background-size:cover; background-position:center;
  filter:blur(24px) saturate(1.15) brightness(.62); transform:scale(1.18); }
.rs-tmm__heroimg--flag{ position:relative; z-index:1; object-fit:contain; object-position:center 42%;
  padding:30px 18px 134px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.rs-tmm__hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,10,12,0) 32%, rgba(8,10,12,.55) 58%, rgba(8,10,12,.92) 100%); }
.rs-tmm__heroaccent{ position:absolute; top:0; left:0; width:100%; height:4px; background:var(--f1); z-index:2; }
/* Héro « sans photo » (pilote F1) : drapeau SVG plein cadre assombri + gros
   numéro de voiture. Le numéro = matière graphique ; ombre dure couleur écurie
   pour qu'il ressorte nettement du nom (passé en label secondaire ci-dessous). */
.rs-tmm__flagfield{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  filter:brightness(.42) saturate(1.2); }
.rs-tmm__bignum{ position:absolute; top:45%; left:50%; transform:translate(-50%,-50%) skewX(-7deg); z-index:1;
  font-family:var(--rsf-mono); font-style:italic; font-weight:800; font-size:132px; line-height:.8;
  letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums; pointer-events:none;
  text-shadow:5px 6px 0 var(--team,#e10600), 0 10px 26px rgba(0,0,0,.55); }
.rs-tmm__bignum.is-w2{ font-size:104px; }
.rs-tmm__bignum.is-glyph{ font-style:normal; font-size:96px; letter-spacing:0; }
.rs-tmm__hero--num .rs-tmm__name{ font-size:15px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:rgba(255,255,255,.95); }
/* Étoiles palmarès (titres de champion du monde) — haut-gauche du héros */
/* Palmarès : étoiles or (titres) · argent (finales perdues) · bronze (3es),
   en ligne (wrap si nombreuses), avec les années des TITRES listées dessous.
   Année de chaque sacre au survol de l'étoile (title). */
.rs-tmm__palmares{ position:absolute; top:10px; left:11px; right:10px; z-index:3; }
.rs-tmm__stars{ display:flex; flex-wrap:wrap; align-items:center; gap:1px 2px; font-size:15px; line-height:1; pointer-events:auto; }
.rs-tmm__staryears{ display:block; margin-top:3px; font-size:9.5px; font-weight:700; line-height:1.3; letter-spacing:.01em; color:#ffe08a; text-shadow:0 1px 2px rgba(0,0,0,.78); pointer-events:none; }
.rs-tmm__star{ cursor:help; text-shadow:0 1px 3px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.55); }
.rs-tmm__star--gold{ color:#FFCB05; }
.rs-tmm__star--silver{ color:#d6dbe6; }
.rs-tmm__star--bronze{ color:#d98e4f; }
.rs-tmm__heroinfo{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 16px 15px; color:#fff; }
.rs-tmm__heroinfo .rs-tmm__name{ font-size:21px; font-weight:800; line-height:1.05; letter-spacing:-.01em; color:#fff; }
/* Rang FIFA (sélections) : pastille en HAUT À DROITE du héros (le nom occupe
   toute la largeur en bas → on place le rang à droite, sans débordement). */
.rs-tmm__hero .rs-tmm__fifa{ position:absolute; top:50%; right:10px; transform:translateY(-50%); z-index:3;
  font-size:10.5px; font-weight:700; line-height:1; padding:4px 9px; border-radius:999px;
  background:rgba(0,0,0,.5); color:#fff; letter-spacing:.02em; backdrop-filter:blur(3px);
  box-shadow:0 1px 4px rgba(0,0,0,.35); white-space:nowrap; }
.rs-tmm__hero .rs-tmm__fifa b{ font-weight:900; }
.rs-tmm__heroinfo .rs-tmm__sub{ font-size:11.5px; color:rgba(255,255,255,.9); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-weight:700; }
.rs-tmm__substr{ font-weight:700; }
.rs-tmm__total{ font-weight:800; color:#fff; }
.rs-tmm__flag{ font-size:15px; line-height:1; }
.rs-tmm__avgs{ display:flex; gap:10px; margin-top:13px; }
.rs-tmm__avg{ flex:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; padding:7px 9px; }
.rs-tmm__avg b{ display:block; font-family:var(--rsf-mono); font-size:22px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; color:#fff; letter-spacing:-.02em; }
.rs-tmm__avg b small{ font-size:12px; font-weight:700; }
.rs-tmm__avg span{ font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.rs-tmm__avg--good b{ color:#5ee79b; }
.rs-tmm__avg--bad b{ color:#ff8a82; }
/* Box « Nulles » : ambre neutre, harmonisé avec le jaune des jauges. */
.rs-tmm__avg--draw b{ color:#f5c451; }

/* ── Jauges : pills arrondies espacées, défilantes ── */
.rs-tmm__gauges{ flex:1; min-width:0; display:flex; flex-direction:column; padding:15px 16px 15px 18px; }
.rs-tmm__scroll{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scroll-behavior:smooth; }
.rs-tmm__scroll::-webkit-scrollbar{ width:7px; }
.rs-tmm__scroll::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:7px; }
.rs-tmm__cols,
.rs-tmm__stack{ display:grid; grid-template-columns:1fr 1fr 104px; gap:0 10px; }
.rs-tmm__gauges--single .rs-tmm__cols,
.rs-tmm__gauges--single .rs-tmm__stack{ grid-template-columns:1fr 104px; }
.rs-tmm__cols{ align-items:end; margin-bottom:8px; }
.rs-tmm__cols .h{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* en-têtes cliquables : tri par % / par nom (re-clic inverse) */
.rs-tmm__sort{
  appearance:none; background:none; border:0; padding:2px 0; margin:0; font:inherit; cursor:pointer;
  color:var(--muted); text-align:left; display:inline-flex; align-items:center; gap:3px;
  transition:color .12s; white-space:nowrap;
}
.rs-tmm__sort:hover{ color:var(--ink); }
.rs-tmm__sort.is-sorted{ color:var(--f1, var(--ink)); }
.rs-tmm__sortarrow{ font-size:8px; line-height:1; opacity:0; }
.rs-tmm__sort.is-sorted .rs-tmm__sortarrow{ opacity:.9; }
.rs-tmm__sort.is-asc  .rs-tmm__sortarrow::before{ content:"\25B2"; }  /* ▲ */
.rs-tmm__sort.is-desc .rs-tmm__sortarrow::before{ content:"\25BC"; }  /* ▼ */

/* tooltip rapide du nom complet (façon title=, sans latence) */
.rs-tmm-tip{
  position:fixed; z-index:9999; display:none; pointer-events:none;
  max-width:240px; padding:5px 9px; border-radius:7px;
  background:#11151a; color:#fff; font-size:12px; font-weight:600; line-height:1.25;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.5); opacity:0; transition:opacity .08s ease;
  white-space:nowrap;
}
.rs-tmm-tip.is-on{ opacity:1; }

/* colonnes alignées rangée par rangée : même hauteur de ligne + même gap */
.rs-tmm__col,
.rs-tmm__namecol{ display:flex; flex-direction:column; gap:8px; }
.rs-tmm__namecol .rs-tmm__tm{
  display:flex; flex-direction:column; justify-content:center; height:var(--row-h);
  font-size:12px; font-weight:700; line-height:1.12; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rs-tmm__tmname{ display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-tmm__tm small{ font-weight:500; color:var(--muted); font-size:10px; }

/* jauge basse : % en mono au-dessus, piste fine en dessous */
.rs-tmm__bar{ height:var(--row-h); display:flex; flex-direction:column; justify-content:center; gap:5px; }
.rs-tmm__pct{
  font-family:var(--rsf-mono); font-size:12.5px; font-weight:700; line-height:1;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; justify-content:space-between; gap:6px;
}
/* nombre de rencontres, calé à droite de la jauge, entre parenthèses */
.rs-tmm__n{ font-size:10px; font-weight:600; color:var(--muted); letter-spacing:0; }
.rs-tmm__bar--empty .rs-tmm__pct{ color:var(--muted); }
.rs-tmm__track{
  position:relative; height:7px; border-radius:99px; overflow:hidden;
  /* Reste de la piste = défaites : même rouge que la légende (--red). */
  background:var(--red,#e2574c);
}
.rs-tmm__bar--empty .rs-tmm__track{ background:#eef1f5; }
.rs-tmm__fill{
  position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--green-d),var(--green));
  border-radius:99px; transition:width .8s cubic-bezier(.22,1,.36,1);
}
.rs-tmm__bar:hover .rs-tmm__fill{ filter:brightness(1.06); }
/* Segment « nuls » (jaune ambré) empilé entre les victoires (vert) et les
   défaites (reste de la piste). `left` posé en inline, largeur animée. */
.rs-tmm__draw{
  position:absolute; top:0; bottom:0; z-index:1;
  background:linear-gradient(90deg,var(--draw-d,#dca10f),var(--draw,#f2bd3a));
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
.rs-tmm__bar:hover .rs-tmm__draw{ filter:brightness(1.05); }

/* « Focus l'autre carte » : dans un duel de 2-3 participants, la ligne de la
   confrontation directe (l'adversaire affiché dans une autre carte) est
   surlignée et centrée dans la liste. Pastille teintée par carte (accent). */
.rs-tmm__bar.is-focus,
.rs-tmm__namecol .rs-tmm__tm.is-focus{
  position:relative;
  border-radius:9px;
  padding-left:8px; padding-right:8px;
  margin-left:-8px; margin-right:-8px;
  background:color-mix(in srgb, var(--accent,#003082) 12%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent,#003082) 30%, transparent);
}
.rs-tmm__bar.is-focus::before{
  content:""; position:absolute; left:-8px; top:6px; bottom:6px; width:3px;
  border-radius:99px; background:var(--accent,#003082);
}
.rs-tmm__bar.is-focus .rs-tmm__pct{ color:var(--accent,#003082); font-weight:800; }
.rs-tmm__tm.is-focus .rs-tmm__tmname{ color:var(--accent,#003082); font-weight:800; }

/* Bouton « Plus » : pagine la liste vers le bas (et seul moyen de défiler sur mobile) */
.rs-tmm__more{
  flex:0 0 auto; margin:8px auto 0; align-items:center; justify-content:center; gap:5px;
  height:27px; padding:0 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:rgba(120,120,120,.10); color:var(--ink-soft);
  font:inherit; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:none; transition:background .12s, transform .12s;
}
.rs-tmm__more:not([hidden]){ display:inline-flex; }
.rs-tmm__more:hover{ background:rgba(120,120,120,.18); }
.rs-tmm__more:active{ transform:translateY(1px); }
.rs-tmm__more svg{ width:13px; height:13px; }

.rs-tmm__foot{ padding:11px 22px 16px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); }

/* Mobile : pas de scroll vertical sur la colonne de jauges → navigation via « Plus ». */
@media (max-width:680px){
  .rs-tmm__scroll{ overflow-y:hidden; }
}

/* Toggle métrique (page Duels) : masque la colonne Course ou Qualif des cartes */
#f1-duel-app.rs-duel--no-quali .rs-tmm__cols,
#f1-duel-app.rs-duel--no-quali .rs-tmm__stack{ grid-template-columns:1fr 104px; }
#f1-duel-app.rs-duel--no-quali .rs-tmm__col:nth-of-type(2),
#f1-duel-app.rs-duel--no-quali .rs-tmm__cols .h:nth-of-type(2),
#f1-duel-app.rs-duel--no-quali .rs-tmm__avg--quali{ display:none; }
#f1-duel-app.rs-duel--no-course .rs-tmm__cols,
#f1-duel-app.rs-duel--no-course .rs-tmm__stack{ grid-template-columns:1fr 104px; }
#f1-duel-app.rs-duel--no-course .rs-tmm__col:nth-of-type(1),
#f1-duel-app.rs-duel--no-course .rs-tmm__cols .h:nth-of-type(1),
#f1-duel-app.rs-duel--no-course .rs-tmm__avg--course{ display:none; }

@media (max-width:680px){
  .rs-tmm__body{ height:420px; }
  .rs-tmm__hero{ flex-basis:150px; }
  .rs-tmm__heroinfo{ padding:12px 12px 12px; }
  .rs-tmm__heroinfo .rs-tmm__name{ font-size:18px; }
}
@media (prefers-reduced-motion:reduce){ .rs-tmm__fill{ transition:none; } }