/** * Modales de la jauge « indice parlant » (palier-modal.js) — modale d'EPREUVE (analyse de course) et * modale de PROFIL (vue d'ensemble). Portage du prototype `prototype_indice_parlant/`. * * REGLES DE PORTAGE : * - AUCUNE couleur de palier en dur : elles viennent du PHP (sp_palier_tiers, source unique) et sont * posees en style inline (--c / --tc / degrade de piste). Le CSS ne connait que des variables. * - Thème CLAIR *et* SOMBRE : on n'utilise que les variables du site (--card/--border/--text/--muted/ * --bg). Le « voile » qui eteint la partie non atteinte de la jauge doit ASSOMBRIR en sombre (sinon il * eclaire au lieu d'eteindre) -> variable --pm-veil, redefinie sous html[data-theme="dark"]. * - Tout est scope sous .pm-* : aucun selecteur global (table/th/td) ne fuit vers le reste du site. * - Les bulles au survol sont celles de la MAISON (rev_tooltip.php, data-tip/data-tip-head, delegation * globale -> marche sur le DOM injecte). Aucun title natif. */ .pm-scope { --pm-veil: rgba(255, 255, 255, .60); --pm-veil-soft: rgba(255, 255, 255, .70); --pm-surface: var(--card, #fff); --pm-stale: #b45309; --pm-fast: #16a34a; --pm-slow: #d97706; --pm-lap: #0e9aa7; } html[data-theme="dark"] .pm-scope { --pm-veil: rgba(4, 10, 20, .66); --pm-veil-soft: rgba(4, 10, 20, .55); --pm-stale: #f59e0b; --pm-fast: #34d399; --pm-slow: #fbbf24; --pm-lap: #22d3ee; } /* ---------------------------------------------------------------- coquille (maison) */ .pm-back { position: fixed; inset: 0; background: rgba(7, 17, 33, .55); display: none; align-items: flex-start; justify-content: center; /* z-index au-dessus de la modale MT (records-modal = 1300/1400) : le drill historique -> analyse doit s'afficher PAR-DESSUS, quel que soit l'ordre de création des deux modales dans le DOM. */ padding: 5vh 16px; z-index: 1600; overflow: auto; } .pm-back.on { display: flex; } /* Plafond de hauteur = celui de TOUTES les autres modales maison (.q4-modal : max-height 90vh + scroll interne). Sans lui, celle-ci grandissait sans fin et c'est l'arrière-plan qui défilait : un ruban de 2 000 px, avec la croix de fermeture partie hors de l'écran. Le défilement est mis sur le CORPS (et pas sur la coquille) pour que la croix, positionnée sur la coquille, reste toujours là. */ .pm-modal { position: relative; width: 100%; max-width: 940px; background: var(--pm-surface); border: 1px solid var(--border, #e2e8f0); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .32); animation: pm-pop .13s ease-out; max-height: 90vh; display: flex; flex-direction: column; } @keyframes pm-pop { from { transform: translateY(8px); opacity: .6 } to { transform: none; opacity: 1 } } .pm-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border, #e2e8f0); background: var(--pm-surface); font-size: 17px; line-height: 1; cursor: pointer; color: var(--muted, #64748b); } .pm-x:hover { background: rgba(148, 163, 184, .16); color: var(--text, #0f172a); } .pm-body { padding: 16px 20px 18px; color: var(--text, #0f172a); overflow-y: auto; min-height: 0; } .pm-loading { padding: 26px 4px; color: var(--muted, #64748b); font-size: 13px; } .pm-back2 { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted, #64748b); background: transparent; border: 1px solid var(--border, #e2e8f0); border-radius: 999px; cursor: pointer; } .pm-back2:hover { background: rgba(148, 163, 184, .16); color: var(--text, #0f172a); } .pm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 34px; margin-bottom: 12px; } /* HAUT DE LA MODALE EN DEUX COLONNES (organisation Simon) — à gauche DE QUOI on parle et OÙ ça se situe (identité + jauge), à droite QUELLE COURSE on regarde (record perso, pastilles, provenance). En dessous, pleine largeur : le graphe puis le croisement. Sous 900 px, tout se réempile dans le même ordre. */ .pm-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; margin-bottom: 4px; } .pm-top-l { min-width: 0; } .pm-top-r { min-width: 0; } /* Le pavé de niveau reste en HAUT À DROITE de la modale, dégagé de la croix de fermeture. */ .pm-top-lvl { display: flex; justify-content: flex-end; padding-right: 34px; margin-bottom: 6px; min-height: 24px; } .pm-top-h { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pm-top-h .pm-n { font-size: 11px; color: var(--muted, #64748b); font-weight: 600; } .pm-sec-chart { padding-top: 8px; } @media (max-width: 899px) { .pm-top { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* Réempilé, le pavé de niveau remonterait sous la jauge : on le sort du flux visuel de la colonne. */ .pm-top-lvl { margin-top: -4px; } } .pm-kind { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--primary, #0b5cad); } .pm-title { font-weight: 800; font-size: 19px; line-height: 1.15; } .pm-sub { font-size: 12.5px; color: var(--muted, #64748b); margin-top: 3px; } .pm-sec { margin-top: 12px; border-top: 1px solid var(--border, #e2e8f0); padding-top: 11px; } .pm-sec h4 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pm-sec h4 .pm-n { font-size: 11px; color: var(--muted, #64748b); font-weight: 600; } .pm-graph { display: flex; justify-content: center; padding: 6px 0 4px; } .pm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 14px; border-top: 1px solid var(--border, #e2e8f0); padding-top: 12px; } .pm-fact { display: flex; flex-direction: column; gap: 1px; } .pm-fact .k { font-size: 11px; color: var(--muted, #64748b); } .pm-fact .v { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; } .pm-muted { color: var(--muted, #64748b); font-size: 12.5px; } .pm-lvl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #fff; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .pm-pool { font-size: 10.5px; font-weight: 800; color: #fff; border-radius: 6px; padding: 1px 5px; margin-left: 5px; } .pm-note { font-size: 12px; color: var(--muted, #64748b); background: rgba(148, 163, 184, .12); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 8px 11px; margin-bottom: 10px; } .pm-note b { color: var(--text, #0f172a); font-variant-numeric: tabular-nums; } .pm-note-warn { background: rgba(217, 119, 6, .1); border: 1px solid rgba(217, 119, 6, .3); } html[data-theme="dark"] .pm-note-warn { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); } /* ---------------------------------------------------------------- jauge : THERMOMETRE */ .pm-th { width: 100%; max-width: 400px; } .pm-th .t-wrap { position: relative; padding-top: 44px; } .pm-th .t-track { position: relative; height: 26px; border-radius: 13px; overflow: hidden; border: 1px solid var(--border, #e2e8f0); background: var(--pm-grad); } .pm-th .t-b { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--pm-veil-soft); z-index: 1; } .pm-th .t-veil { position: absolute; top: 0; bottom: 0; right: 0; background: var(--pm-veil); z-index: 2; } .pm-th .t-cur { position: absolute; top: -3px; bottom: -3px; width: 3px; transform: translateX(-50%); background: var(--tc); border-radius: 3px; box-shadow: 0 0 0 1.5px var(--pm-surface), 0 1px 3px rgba(15, 23, 42, .35); z-index: 3; } .pm-th .t-bulb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 13px; height: 13px; border-radius: 50%; background: var(--tc); border: 2px solid var(--pm-surface); } .pm-th .t-flag { position: absolute; top: 2px; left: clamp(52px, var(--pos), calc(100% - 52px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--pm-surface); border: 1.5px solid var(--tc); border-radius: 9px; padding: 3px 9px 4px; box-shadow: 0 2px 7px rgba(15, 23, 42, .13); white-space: nowrap; z-index: 4; } .pm-th .t-flag::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--tc); } /* repère RECORD sur la piste du thermomètre (fanion discret, sous le curseur de la course regardée). */ .pm-th .t-mark { position: absolute; top: -6px; bottom: -6px; width: 2px; transform: translateX(-50%); background: var(--text, #0f172a); opacity: .55; z-index: 2; cursor: help; } .pm-th .t-mark::before { content: "★"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text, #0f172a); opacity: .8; } .pm-th .t-flag-n { font-size: 11.5px; font-weight: 800; color: var(--tc); line-height: 1; } .pm-th .t-flag-p { font-size: 10px; font-weight: 600; color: var(--muted, #64748b); line-height: 1; } /* ⭐⭐ L'ECHELLE DES PALIERS — QUINCONCE ANCREE (14/08/2026). Le motif complet est dans `gThermo` (palier-modal.js) ; ici, la mecanique. 🔴 CE QUE CA REMPLACE : `display:flex` + `.t-seg{flex:1}`. Une case de flex a `min-width:auto` et REFUSE de descendre sous son mot le plus long : mesure du 14/08 sur le 50 NL 25 m, les 13 cases reclamaient 605 px dans un cadre de 400 px et 205 px sortaient a droite, PAR-DESSUS la colonne voisine. C'est ce debordement — et lui seul — qui faisait croire que l'encart « Passages de son record » venait se poser sur l'echelle. ⛔ EN POSITION ABSOLUE, une etiquette ne peut plus FORCER le cadre a grandir : le debordement n'est pas rattrape apres coup, il est rendu impossible. La hauteur, elle, est reservee par `--t-h` : la quinconce ne peut donc pas non plus deborder vers le bas sur ce qui suit. */ /* `--t-row` = le pas entre deux rangees. Il doit depasser la hauteur d'une etiquette a trois lignes (nom / seuil / temps d'entree), MESUREE a 36,9 px : en dessous, les rangees se rejoignent et on retrouve exactement le chevauchement qu'on corrige. 41 px laisse la respiration. `--t-nb` = le nombre de RANGEES (2 sur ecran normal, 3 sur telephone, cf. plus bas), et il sert a la fois a reserver la hauteur, a placer chaque rangee et a mesurer la largeur d'une etiquette : un seul nombre a changer, aucune valeur recopiee. */ .pm-th { --t-row: 41px; --t-nb: 2; } .pm-th .t-scale { position: relative; margin-top: 15px; height: calc(var(--t-nb) * var(--t-row)); } /* Chaque etiquette est ancree au MILIEU de sa bande (`left` pose par le JS) et centree dessus. `max-width` = le nombre de rangees en bandes, moins une gouttiere : deux voisines de la MEME rangee sont exactement a ce nombre de bandes l'une de l'autre, donc elles ne peuvent PAS se toucher, quelle que soit la largeur d'ecran ou le nombre de paliers servis. C'est la garantie « aucun libelle n'en recouvre un autre », et elle ne depend d'aucun reglage a la main. */ .pm-th .t-seg { --t-i: 0; position: absolute; top: calc(var(--t-i) * var(--t-row)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; max-width: calc((var(--t-nb) * 100% - 4%) / var(--t-n, 13)); } .pm-th .t-seg.t-r2 { --t-i: 1; } /* Le TRAIT DE RAPPEL : il relie l'etiquette a SA bande de la piste. Sans lui, la quinconce perdrait la seule chose que la rangee unique apportait — « ce nom va avec cette couleur ». Sa longueur suit la rangee (`--t-i`), donc elle vaut pour deux rangees comme pour trois. */ .pm-th .t-seg::before { content: ""; position: absolute; left: 50%; width: 1px; background: var(--border, #e2e8f0); top: calc(-13px - var(--t-i) * var(--t-row)); height: calc(12px + var(--t-i) * var(--t-row)); } .pm-th .t-seg.on::before { background: var(--tc); opacity: .8; } /* LES DEUX BORDS SONT COLLES AU CADRE, pas ancres. Ancrees comme les autres, la premiere et la derniere etiquette sortaient du cadre, et de combien dependait a la fois de la longueur du texte (« 22:49.74 » sur un 1500) et de la largeur d'ecran : aucun decalage fixe ne pouvait le garantir. Collees, elles ne peuvent plus en sortir A AUCUNE LARGEUR. Leur trait reste pose la ou tombe le milieu de leur bande aux largeurs usuelles ; premiere et derniere ne se confondent avec rien. */ .pm-th .t-seg.t-deb { left: 0; transform: none; align-items: flex-start; text-align: left; } .pm-th .t-seg.t-deb::before { left: 12px; } .pm-th .t-seg.t-fin { left: auto; right: 0; transform: none; align-items: flex-end; text-align: right; } .pm-th .t-seg.t-fin::before { left: auto; right: 12px; } /* `nowrap` + coupe nette : un nom court tient sur UNE ligne (sinon la hauteur de rangee ne suffit plus et les deux rangees se rejoignent). Le nom ENTIER reste dans la bulle de survol. */ .pm-th .t-seg b { max-width: 100%; font-size: 9.5px; font-weight: 600; color: var(--muted, #64748b); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-th .t-seg i { font-size: 9px; font-style: normal; color: var(--muted, #64748b); opacity: .8; white-space: nowrap; } .pm-th .t-seg .t-ref { font-size: 9.5px; color: var(--text, #0f172a); opacity: .85; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .pm-th .t-seg.on b, .pm-th .t-seg.on i { color: var(--tc); opacity: 1; font-weight: 800; } .pm-th .t-seg.on { z-index: 1; } /* ⭐ TELEPHONE — TROIS RANGEES AU LIEU DE DEUX, et c'est mesure, pas prudentiel. Sur un ecran de 320 px l'echelle ne fait plus que 258 px : deux bandes valent 40 px, or « 22:49.74 » (les temps d'entree d'un 1500) en occupe 38. Il ne reste rien, et « Nat. » touchait « Int'l ». A trois rangees, chaque etiquette dispose de trois bandes — 59 px — et la marge revient. ⛔ Rien n'est masque ni raccourci : les 13 barreaux restent tous ecrits, avec leur seuil et leur temps. Seule la hauteur du bloc augmente, et un telephone a de la hauteur. */ @media (max-width: 480px) { .pm-th { --t-nb: 3; } .pm-th .t-seg.t-r2 { --t-i: 0; } /* le decoupage en deux rangees est neutralise… */ .pm-th .t-seg.t-c2 { --t-i: 1; } /* …et celui en trois prend le relais */ .pm-th .t-seg.t-c3 { --t-i: 2; } } /* ---------------------------------------------------------------- jauge : CADRAN */ .pm-ra { width: 100%; max-width: 330px; } .pm-ra .r-g { position: relative; } .pm-ra svg { display: block; width: 100%; height: auto; } .pm-ra .r-seg { fill: none; stroke-width: 20; stroke-linecap: butt; } .pm-ra .r-sep { stroke: var(--pm-surface); stroke-width: 2; } .pm-ra .r-needle { stroke: var(--text, #0f172a); stroke-width: 4; stroke-linecap: round; } .pm-ra .r-hub { fill: var(--text, #0f172a); } .pm-ra .r-mark { fill: var(--pm-surface); stroke: var(--tc); stroke-width: 2.5; } .pm-ra .r-recmark { stroke: var(--text, #0f172a); stroke-width: 2; opacity: .4; stroke-dasharray: 3 3; } .pm-ra .r-c { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; display: flex; flex-direction: column; gap: 1px; } .pm-ra .r-tier { font-weight: 800; font-size: 15px; color: var(--tc); } .pm-ra .r-pos { font-size: 11px; font-weight: 700; color: var(--muted, #64748b); } .pm-ra .r-leg { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; margin-top: 4px; } .pm-ra .r-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted, #64748b); } .pm-ra .r-pill i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .pm-ra .r-pill.on { color: var(--text, #0f172a); font-weight: 800; } .pm-ra .r-refs { display: flex; flex-wrap: wrap; gap: 3px 10px; justify-content: center; margin-top: 8px; font-size: 10px; color: var(--muted, #64748b); } .pm-ra .r-refs b { color: var(--text, #0f172a); font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- jauge : ECHELLE */ .pm-ld { width: 100%; max-width: 380px; } .pm-ld .l-rung { position: relative; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 9px 4px 8px; background: var(--pm-surface); border: 1px solid var(--border, #e2e8f0); border-left: 3px solid var(--c); border-radius: 10px; overflow: hidden; margin-bottom: 5px; } .pm-ld .l-rung:last-child { margin-bottom: 0; } .pm-ld .l-rung > * { position: relative; z-index: 1; } .pm-ld .l-node { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: var(--c); border: 2px solid var(--c); } .pm-ld .l-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pm-ld .l-name { font-size: 12.5px; font-weight: 700; } .pm-ld .l-sub { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted, #64748b); font-variant-numeric: tabular-nums; } .pm-ld .l-sub b { font-weight: 700; color: var(--text, #0f172a); } .pm-ld .l-tag { flex: 0 0 auto; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; color: var(--muted, #64748b); background: rgba(148, 163, 184, .14); border: 1px solid var(--border, #e2e8f0); } .pm-ld .below { background: linear-gradient(90deg, rgba(148, 163, 184, .14), var(--pm-surface) 65%); } .pm-ld .above { border-style: dashed; } .pm-ld .above .l-node { background: var(--pm-surface); color: var(--c); } .pm-ld .current { border: 2px solid var(--c); border-left-width: 4px; min-height: 52px; } .pm-ld .l-fill { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: var(--fill, 0%); background: var(--c); opacity: .14; border-top: 2.5px solid var(--c); } .pm-ld .l-mark { position: absolute; right: 8px; bottom: var(--fill, 0%); z-index: 3; transform: translateY(50%); display: flex; align-items: center; gap: 5px; } .pm-ld .l-mlbl { font-size: 10px; font-weight: 800; color: var(--c); background: var(--pm-surface); border: 1.5px solid var(--c); border-radius: 999px; padding: 2px 6px; white-space: nowrap; font-variant-numeric: tabular-nums; } .pm-ld .l-mdot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 2px solid var(--pm-surface); box-shadow: 0 0 0 1.5px var(--c); } /* ---------------------------------------------------------------- fiche « temps estimé » */ .pm-est-card { background: rgba(217, 119, 6, .07); border: 1px solid rgba(217, 119, 6, .28); border-radius: 12px; padding: 12px 14px; } html[data-theme="dark"] .pm-est-card { background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .30); } .pm-est-card h4 { margin-top: 0; } .pm-est-why { margin: 0 0 8px; font-size: 12.5px; } .pm-est-how { font-size: 12.5px; margin-bottom: 8px; } .pm-est-from { margin: 4px 0 8px; padding-left: 18px; font-size: 12.5px; } .pm-est-from li { margin: 2px 0; } .pm-est-k { font-size: 11px; color: var(--muted, #64748b); font-weight: 700; } .pm-est-v { font-weight: 700; font-variant-numeric: tabular-nums; } .pm-est-line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px dashed var(--border, #e2e8f0); } .pm-est-note { font-weight: 400; color: var(--muted, #64748b); font-size: 11px; } /* La phrase qui SITUE le chrono écarté dans la fourchette (24/08/2026). Elle se lit sous la ligne « Fourchette », qu'elle cite — d'où la marge du haut. Même corps que les autres phrases de la carte ; pas d'italique : c'est un fait, pas une réserve (l'italique est réservé au pied de carte). */ .pm-est-situe { margin: 8px 0 0; font-size: 12.5px; } .pm-est-foot { margin: 8px 0 0; font-size: 11.5px; color: var(--muted, #64748b); font-style: italic; } .pm-est-tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--pm-stale); border: 1px solid var(--pm-stale); border-radius: 999px; padding: 0 5px; cursor: help; } /* ---------------------------------------------------------------- analyse de course */ .pm-splits-none { font-size: 12.5px; color: var(--muted, #64748b); background: rgba(148, 163, 184, .08); border: 1px dashed var(--border, #e2e8f0); border-radius: 10px; padding: 11px 13px; } .pm-smeta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted, #64748b); margin-bottom: 10px; } .pm-smeta b { color: var(--text, #0f172a); font-variant-numeric: tabular-nums; } .pm-laps { display: flex; align-items: flex-end; gap: 3px; height: 92px; padding: 2px 0; } /* flex-grow est posé inline = largeur ∝ distance couverte (un bloc de 2 longueurs = 2× plus large). */ .pm-lap { flex-grow: 1; flex-shrink: 1; flex-basis: 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; cursor: help; } .pm-mixed { font-size: 10px; font-weight: 700; color: var(--pm-slow); border: 1px solid var(--pm-slow); border-radius: 999px; padding: 0 5px; cursor: help; } /* Temps de réaction du relayeur : une mesure de plus dans la même ligne d'en-têtes, donc le MÊME gabarit que « temps total » / « moyenne ». Rien de particulier à styler — juste le survol. */ .pm-react { cursor: help; } /* Départ lancé : le bloc qui porte l'élan est SIGNALÉ, pas effacé — hachure discrète + note. Un défaut d'affichage sur un thème se règle ici, jamais dans le moteur. */ .pm-lance-note { font-size: 10px; font-weight: 700; color: var(--pm-muted, #888); border: 1px dashed currentColor; border-radius: 999px; padding: 0 5px; cursor: help; } .pm-lap.pm-lap-lance .b { background-image: repeating-linear-gradient(135deg, rgba(127,127,127,.28) 0 3px, transparent 3px 7px); } .pm-lap.pm-lap-lance .k { font-style: italic; opacity: .85; } /* UNE BARRE = UNE LONGUEUR. Les marques saisies À L'INTÉRIEUR en sont les COUCHES : empilées du bas (départ de la longueur) vers le haut, chacune ∝ à son temps, séparées d'un filet clair. La couleur reste celle de la LONGUEUR (rapide / lent) — les couches nuancent, elles ne recolorent pas. */ .pm-lap .b { width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--pm-lap); overflow: hidden; display: flex; flex-direction: column-reverse; } .pm-lap .b .s { width: 100%; flex: 0 0 auto; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6); } .pm-lap .b .s.alt { background: rgba(7, 17, 33, .14); } .pm-lap .b .s:first-child { box-shadow: none; } /* pas de filet sous la couche du bas */ .pm-lap.fast .b { background: var(--pm-fast); } .pm-lap.slow .b { background: var(--pm-slow); } .pm-lap .v { font-size: 8.5px; color: var(--muted, #64748b); margin-top: 3px; font-variant-numeric: tabular-nums; } .pm-lap .k { font-size: 8.5px; font-weight: 700; color: var(--muted, #64748b); opacity: .85; line-height: 1.2; white-space: nowrap; } .pm-lap:hover .b { filter: brightness(1.12); } .pm-races { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .pm-race { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border, #e2e8f0); background: var(--pm-surface); color: var(--muted, #64748b); cursor: pointer; font-variant-numeric: tabular-nums; } .pm-race:hover { background: rgba(148, 163, 184, .14); } .pm-race.on { background: var(--primary, #0b5cad); border-color: var(--primary, #0b5cad); color: #fff; } .pm-race.on .pm-rel-dot { box-shadow: 0 0 0 1.5px #fff; } /* Record perso + relation d'une course (record / avant / après) — comparaison à soi-même. */ .pm-mt-ref { font-size: 12px; color: var(--muted, #64748b); margin-bottom: 8px; } .pm-mt-ref b { color: var(--text, #0f172a); font-variant-numeric: tabular-nums; } .pm-mt-k { font-weight: 700; } .pm-rel { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; } .pm-rel.is-record { background: rgba(37, 99, 235, .14); color: #2563eb; } .pm-rel.is-before { background: rgba(148, 163, 184, .18); color: var(--muted, #64748b); } .pm-rel.is-after { background: rgba(217, 119, 6, .14); color: #b45309; } .pm-rel.is-retenu { background: rgba(15, 118, 110, .14); color: #0f766e; } html[data-theme="dark"] .pm-rel.is-retenu { color: #2dd4bf; } /* « œil » : on regarde CETTE course (mise en évidence de la perf analysée). */ .pm-eye { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--primary, #0b5cad); } .pm-ld .l-rec { color: #2563eb; background: rgba(37, 99, 235, .12); border-color: rgba(37, 99, 235, .3); } html[data-theme="dark"] .pm-rel.is-record { color: #60a5fa; } html[data-theme="dark"] .pm-rel.is-after { color: #fbbf24; } .pm-rel-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .pm-rel-dot.is-record { background: #2563eb; } .pm-rel-dot.is-before { background: #94a3b8; } .pm-rel-dot.is-after { background: #d97706; } /* ---------------------------------------------------------------- table « meilleures epreuves » */ .pm-tab { border-collapse: collapse; width: 100%; font-size: 13px; } .pm-tab th, .pm-tab td { padding: 7px 8px; border-bottom: 1px solid var(--border, #e2e8f0); text-align: left; vertical-align: middle; font-variant-numeric: tabular-nums; } .pm-tab th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #64748b); font-weight: 700; } .pm-tab td.n { text-align: right; } .pm-tab .ev { font-weight: 700; white-space: nowrap; } .pm-tab tr.clic { cursor: pointer; } .pm-tab tr.clic:hover td { background: rgba(148, 163, 184, .14); } .pm-tab .has-race { font-size: 9.5px; font-weight: 800; color: var(--primary, #0b5cad); } .pm-mini { min-width: 120px; } .pm-mini .m-t { position: relative; height: 11px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border, #e2e8f0); background: var(--pm-grad); } .pm-mini .m-v { position: absolute; top: 0; bottom: 0; right: 0; background: var(--pm-veil); } .pm-mini .m-b { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--pm-veil-soft); } .pm-mini .m-c { position: absolute; top: -2px; bottom: -2px; width: 3px; transform: translateX(-50%); border-radius: 2px; background: var(--tc); box-shadow: 0 0 0 1.5px var(--pm-surface); } .pm-tbl-wrap { overflow-x: auto; } /* ---------------------------------------------------------------- echelle multi-epreuves */ .pm-vg { display: flex; gap: 14px; } .pm-vg-scale { position: relative; width: 132px; flex: 0 0 auto; height: 268px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #e2e8f0); } .pm-vg-band { position: absolute; left: 0; right: 0; height: 20%; display: flex; align-items: center; padding-left: 8px; font-size: 9.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .28); } /* cursor:pointer doit BATTRE le [data-tip]{cursor:help} global de rev_tooltip.php (meme specificite, mais son