/* Forme — feuille unique, vanilla, comme le reste du parc. Sombre par défaut : l'application se consulte le matin et le soir, rarement en plein jour. Le thème clair suit la préférence du système. */ :root { --fond: #0f1115; --carte: #171a21; --bord: #262b36; --texte: #e6e8ec; --doux: #9aa3b2; --accent: #6ea8fe; --alerte: #e5806b; --ok: #6cc48f; /* ⚠️ Deux variables de plus, et ce n'est pas de la ceremonie : une couleur qui va bien en APLAT ne va pas forcement en TEXTE, et l'inverse. Sur la carte blanche du mode clair, `--alerte` plafonne a 2,75:1 et `--ok` a 2,11:1 — sous les 4,5:1 d'un texte lisible (mesure le 29/08/2026 ; en mode sombre elles valent 6,33 et 8,23, d'ou un defaut qui ne se voyait que la moitie du temps). Les assombrir tout court serait pire : les pastilles du protocole posent du texte #0b0d12 SUR `--ok`, et un vert fonce y ferait tomber le contraste de 9,19 a 3,6. Le meme role, deux surfaces, donc deux valeurs. */ --alerte-txt: var(--alerte); --ok-txt: var(--ok); --absent: #4a5060; /* la couleur du « pas de donnée » — jamais celle du zéro */ /* Couleurs de données. Validees par `dataviz/scripts/validate_palette.js` CONTRE LES SURFACES REELLES de l'application (carte sombre #171a21, carte claire #ffffff) et non contre une surface generique : contraste et bandes de luminosite n'ont de sens que face au fond sur lequel la marque est reellement posee. Categoriel, mode sombre : ecart CVD deutan 9,4 au pire (seuil 8), vision normale 20,9 (plancher 15), les trois au-dessus de 3:1 sur la carte. */ --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767; /* Le « hors zone » des piles de zones de FC : le temps passe SOUS le plancher de la zone 1. Ce n'est ni une sixieme zone ni une absence de donnee — d'ou un gris, et surtout PAS `--absent`, qui dit « pas de mesure ». ⚠️ Il n'a de place qu'EN BAS de la pile, et c'est mesure : a cote du rose de la zone 5, le validateur donne ΔE 0,9 en protanopie — deux parts qu'un daltonien ne separe pas. Contre le bleu de la zone 1, ΔE 17,5 en sombre, 16,2 en clair (plancher 15), et le contraste tient les 3:1 sur les deux surfaces. Le validateur signale son chroma faible : c'est l'intention, un « reste » ne se peint pas comme une categorie. */ --hors-zone: #5f6875; /* Les zones de FC : une rampe d'EFFORT, pas des identites. Vert, jaune, orange, rouge, puis le pas le plus extreme — l'ordre porte le sens, et c'est pour ca qu'elles ne prennent pas les couleurs de serie, qui disent « qui » et non « combien ». ⚠️ Le validateur du skill dataviz la REFUSE en mode categoriel (bande de luminosite, chroma) et en mode ordinal (« une seule teinte » : 122° d'ecart) — les deux a raison, ce n'est ni l'un ni l'autre. Ce qui a ete verifie est ce qui compte ici : chaque paire VOISINE a l'ecran se separe. Pire paire en vision normale 15,9 (plancher 15), pire paire en daltonisme 9,2 (seuil 8), sur la carte blanche. ⚠️ Le jaune plafonne a 2,03:1 contre le blanc — d'ou le tableau sous les barres, qui est le « relief » que le validateur exige et non un ornement. Un jaune plus sombre ferait tomber la paire jaune-orange sous le plancher : 13,8 a #c9a900. */ --zone-1: #25b56e; --zone-2: #f5da3a; --zone-3: #f28c14; --zone-4: #e33c2e; /* ⚠️ Zone 5 : NOIRE en mode clair, comme le veut la convention d'effort. Sur la carte sombre elle est impossible — un noir y contraste 1,02:1, soit un segment qu'on lit comme un trou. Le pourpre est le seul « au-delà du rouge » qui reste visible (3,08:1) et separable du rouge (ΔE 20,9). Meme role, deux surfaces, deux pas. */ --zone-5: #a03fa0; /* Rampe ordinale d'une SEULE teinte : elle encode un ORDRE (l'anciennete d'une annee), pas une identite. Du moins contraste (le plus ancien) au plus contraste (le plus recent) — dans les deux modes, ce qui inverse la luminosite mais jamais le sens de lecture. */ --rampe-1: #184f95; --rampe-2: #256abf; --rampe-3: #3987e5; --rampe-4: #6da7ec; --rampe-5: #9ec5f4; /* L'annee en cours. Seule de sa famille chromatique face a la rampe bleue : c'est ce qui la fait sortir sans qu'on ait a lire la legende. */ --accent-data: #d95926; /* Les cinq teintes des annees comparees, plus l'accent pour la plus recente. ⚠️ L'ORDRE est le mecanisme de securite, pas une preference : le validateur a refuse une premiere version ou l'accent orange suivait le vert — ΔE 3,2 en protanopie, deux lignes indistinguables pour un daltonien. Le violet a remplace le vert. Verifie sur la sequence REELLEMENT tracee, pas sur la palette de reference : ce sont les paires voisines a l'ecran qui comptent. */ --an-1: #3987e5; --an-2: #199e70; --an-3: #c98500; --an-4: #d55181; --an-5: #9085e9; /* Le faisceau : ni une serie, ni du texte — un fond de scene. Assez visible pour donner la dispersion, assez neutre pour qu'aucune de ses lignes ne se lise comme identifiee. */ --faisceau: #3a4050; } @media (prefers-color-scheme: light) { :root { --fond: #f7f8fa; --carte: #ffffff; --bord: #e2e5ea; --texte: #1a1d23; --doux: #5c6473; --absent: #c3c8d2; /* 5,21:1 et 5,40:1 sur la carte blanche — les aplats, eux, ne bougent pas. */ --alerte-txt: #c2400f; --ok-txt: #0f7a45; /* Mode clair : les memes roles, des pas CHOISIS pour la surface blanche — jamais les couleurs du mode sombre eclaircies au hasard. Categoriel : CVD deutan 9,2, vision normale 24,0. */ --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; --serie-8: #e34948; /* Un pas plus clair que le gris sombre, choisi pour la surface blanche : #949cab separait mieux (ΔE 18,1) mais tombait a 2,76:1 contre la carte. */ --hors-zone: #8a93a3; --zone-1: #12a05a; --zone-2: #d4b400; --zone-3: #e9720a; --zone-4: #c62828; --zone-5: #15181f; --rampe-1: #86b6ef; --rampe-2: #5598e7; --rampe-3: #2a78d6; --rampe-4: #1c5cab; --rampe-5: #104281; --accent-data: #eb6834; --an-1: #2a78d6; --an-2: #1baf7a; --an-3: #eda100; --an-4: #e87ba4; --an-5: #4a3aa7; --faisceau: #c8cdd8; } } * { box-sizing: border-box; } body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fond); color: var(--texte); } header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--bord); } h1 { font-size: 20px; margin: 0; letter-spacing: -0.01em; } h2 { font-size: 15px; margin: 0 0 10px; color: var(--doux); font-weight: 600; } /* ⚠️ `margin: 0 auto` autant que la largeur : `max-width` SEUL laisse le contenu collé au bord gauche, et sur un écran de 2 000 px cela donnait une colonne de 1 100 px avec 900 px de vide à droite. Les deux vont ensemble. 1 700 px et non « aucune limite » : les graphes gagnent à s'étendre, le journal et les tableaux de l'onglet État deviennent illisibles au-delà — l'œil perd la ligne entre la première et la dernière colonne. */ main { padding: 24px; max-width: 1700px; margin: 0 auto; } footer { padding: 16px 24px; color: var(--doux); font-size: 12px; } .lien { background: none; border: none; color: var(--doux); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; } /* ⚠️ `button[type=submit]` (un type + un attribut) bat `.lien` en specificite : « Se deconnecter », un submit, portait le fond bleu des boutons d'envoi sous son soulignement de lien. Visible sur chaque page depuis le debut. */ button[type=submit].lien { background: none; color: var(--doux); font-weight: 400; } button[type=submit].lien:hover { color: var(--texte); } /* ── Connexion ────────────────────────────────────────────────────────────── */ .connexion { max-width: 340px; margin: 12vh auto; padding: 0 24px; } .connexion .sous { color: var(--doux); margin-top: -8px; } .connexion form { display: grid; gap: 14px; margin-top: 24px; } .connexion label { display: grid; gap: 5px; font-size: 13px; color: var(--doux); } input, button { font: inherit; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); } button[type=submit] { background: var(--accent); color: #0b0d12; border-color: transparent; font-weight: 600; cursor: pointer; } .erreur { color: var(--alerte-txt); font-size: 13px; } /* Un ecart de chrono : « mieux » est plus rapide, donc NEGATIF. La couleur suit le sens sportif, pas le signe arithmetique. */ .mieux { color: var(--ok-txt); font-weight: 600; } .moins { color: var(--alerte-txt); font-weight: 600; } td .pastille-c { margin-right: 6px; vertical-align: middle; } /* ── Cartes ───────────────────────────────────────────────────────────────── */ .grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; } .chiffre { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; } .doux { color: var(--doux); font-size: 13px; } .attente { color: var(--doux); } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bord); } th { color: var(--doux); font-weight: 600; } /* ⚠️ `th.num` AUTANT que `td.num`. La regle ne visait que les cellules, alors que * treize en-tetes portaient deja la classe : les colonnes de chiffres etaient calees a * droite sous des titres cales a gauche, et « Meilleur » ne surplombait plus rien. Le * marquage etait la, c'est le selecteur qui ne le lisait pas — un defaut qu'aucune * relecture du HTML ne montre. */ th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; } /* Une mesure qui a DECROCHE : elle a des donnees, elle n'en recoit plus. C'est le * cas que ni un effectif ni une pastille globale ne montrent — un compteur ne baisse * jamais, et la collecte va bien par ailleurs. */ .decroche { color: var(--alerte-txt); font-size: 13px; } /* Une mesure que la base n'a JAMAIS recue : la ligne reste, estompee. La retirer * ferait disparaitre l'information la plus utile du tableau — savoir qu'une colonne * existe et n'a jamais rien porte n'est pas la meme chose que ne pas savoir. */ tr.jamais { opacity: 0.5; } /* Le vide se dit, il ne se dessine pas comme un zéro. */ .absent { color: var(--absent); font-style: italic; } .pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .pastille.ok { background: var(--ok); } .pastille.erreur { background: var(--alerte); } .pastille.inconnu { background: var(--absent); } /* ── Onglets ──────────────────────────────────────────────────────────────── */ .onglets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--bord); } .onglets button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--doux); cursor: pointer; font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 0; } .onglets button:hover { color: var(--texte); } .onglets button.actif { color: var(--texte); border-bottom-color: var(--accent); font-weight: 600; } .barre-outils { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .barre-outils label { color: var(--doux); font-size: 13px; display: flex; align-items: center; gap: 6px; } .barre-outils input[type=date] { font-size: 13px; padding: 6px 8px; } /* La barre de periode se LIT : en couleur douce sur fond clair, ses raccourcis disparaissaient presque, et un controle qu'on ne voit pas n'existe pas. */ /* Une puce d'annee est a la fois le controle ET la legende : selectionnee, elle porte la teinte exacte de sa courbe. C'est ce qui permet de retirer la legende du graphe — la meme information deux fois, c'est une fois de trop. */ .puces { display: flex; gap: 5px; flex-wrap: wrap; } .puce { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--bord); background: var(--carte); color: var(--doux); cursor: pointer; } .puce:hover { color: var(--texte); border-color: var(--doux); } .puce.actif { color: var(--texte); font-weight: 600; border-color: var(--c); box-shadow: inset 0 -3px 0 var(--c); } .barre-outils.annees { margin-top: -4px; } .periode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--texte); } /* Les raccourcis existent parce que saisir deux dates pour « les cinq dernieres annees » est une corvee que personne ne fait deux fois. */ .raccourcis { display: flex; gap: 8px; } .raccourcis .lien { text-decoration: none; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font-size: 12px; } .raccourcis .lien:hover { border-color: var(--accent); } .raccourcis .lien.actif { border-color: var(--accent); color: var(--accent); font-weight: 600; } .barre-outils .separateur { width: 1px; align-self: stretch; background: var(--bord); margin: 0 4px; } select, input { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); } /* ── Graphiques ───────────────────────────────────────────────────────────── */ /* Le SVG est dessiné aux dimensions de son hôte : `width: 100%` ne fait donc que confirmer une taille déjà juste, il ne met plus à l'échelle. */ .graphe { max-width: 100%; height: auto; display: block; } .graphe-hote { width: 100%; min-height: 60px; } /* Une carte pleine largeur autour d'un graphe volontairement plus etroit se lit comme un graphe rate. Elle se serre sur lui. */ .carte.ajustee { width: fit-content; max-width: 100%; } /* ⚠️ `.grille-h` et non `.grille` : `.grille` est DEJA le conteneur en grille des cartes de l'onglet Etat. Deux roles sous un meme nom, dans une feuille unique, se marchent dessus des qu'on touche a l'un des deux. */ .grille-h { stroke: var(--bord); stroke-width: 1; fill: none; } .axe { fill: var(--doux); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; } /* Chaque marque tire sa teinte de `--c`, pose en style inline par le trace. ⚠️ L'ANCIENNE version separait la forme (`.ligne`) de la couleur (`.s0`…`.s5`), et `.s0 { fill: #6ea8fe }` etait declaree APRES `.ligne { fill: none }`. Meme specificite, une classe chacune : la derniere l'emportait. Toutes les courbes de l'application etaient donc REMPLIES — un `` ouvert se referme tout seul pour son remplissage, d'ou les triangles et les rubans qu'on voyait sous les tracés. Une seule regle par marque, la couleur en variable : la cascade n'a plus prise. */ .ligne { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .ligne.appuyee { stroke-width: 2.75; } /* Une mesure doublee par sa tendance s'efface sans disparaitre : elle reste le fait, la tendance n'est qu'une lecture. ⚠️ `.brute` est ecrite APRES `.appuyee` — meme specificite (deux classes), donc la derniere gagne, et c'est voulu : une serie mise en avant ET lissee doit s'effacer sous sa tendance. */ .ligne.brute { stroke-width: 1.4; opacity: 0.4; } /* ⚠️ Un point tous les deux pixels : la courbe n'est plus une courbe, c'est un aplat. A 0,4 d'opacite, cinq ans d'ACWR effacaient la zone saine peinte dessous et le tunnel HRV — ce que ces cartes existent justement pour montrer. Posee APRES `.brute`, comme `.brute` l'est apres `.appuyee` : meme specificite, la derniere ecrite gagne. */ .ligne.brute.dense { stroke-width: 1; opacity: 0.16; } .ligne.tendance { stroke-width: 2.6; opacity: 0.95; } /* Le pont d'un trou : meme teinte, mais pointille et efface. Il relie ce que l'oeil veut suivre sans pretendre au meme statut que le trait plein — un segment qu'on n'a pas mesure ne doit pas peser autant qu'un segment mesure. ⚠️ Specificite 0-2-0 contre 0-1-0 pour `.ligne` : cette regle gagne quel que soit l'ordre d'ecriture, et n'a donc pas la fragilite qui avait rempli toutes les courbes de l'application. */ .ligne.pont { stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.5; } /* Le tunnel HRV : une SURFACE, pas deux courbes. Deux lignes de bornes se seraient melees a la mesure ; une bande se lit comme un decor, et ce qui compte — sortir par le bas — devient une position, pas une comparaison a faire de tete. Assez pale pour que la courbe reste au premier plan : c'est elle, la mesure. */ .tunnel { fill: var(--c); opacity: 0.14; stroke: none; } .barre { fill: var(--c); stroke: none; } /* Une part d'empilement : pas de contour, l'ecart de surface separe. */ .part { fill: var(--c); stroke: none; } .tige { stroke: var(--c); stroke-width: 2; opacity: .3; } /* Anneau a la couleur de la CARTE, pas un contour sombre : c'est la surface qui separe le point de ce qu'il croise, jamais un trait ajoute par-dessus la donnee. */ .pt { fill: var(--c); stroke: var(--carte); stroke-width: 2; } .pt.fin, .pt.gros { stroke-width: 2.5; } /* La moyenne n'est pas une graduation : le pointille dit « seuil », et l'etiquette qui la suit dit lequel. */ .reference { stroke: var(--doux); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; } /* Le texte ne porte jamais la couleur d'une serie : une teinte calibree pour une ligne de 2 px est illisible en corps 12. C'est la marque a cote qui identifie. */ /* `paint-order: stroke` peint le contour AVANT le remplissage : le trait a la couleur de la carte devient un halo derriere les lettres, et non un cerne par-dessus. C'est ce qui rend l'etiquette lisible quand elle tombe sur une courbe voisine — le cas normal des que la serie s'arrete en cours d'annee. */ .fin-libelle { fill: var(--doux); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--carte); stroke-width: 3.5px; stroke-linejoin: round; } /* Viser un disque de 8 px a la souris est un travail ; la bande entiere ne l'est pas. */ .cible { fill: #000; opacity: 0; } .legende-g { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--doux); } .legende-g span { display: flex; align-items: center; gap: 5px; } /* ⚠️ Une pastille de legende est du HTML : `fill` et `stroke`, qui sont des proprietes SVG, n'avaient AUCUN effet dessus. Les pastilles etaient donc invisibles, et la legende ne reliait plus rien a rien. */ .pastille-c { width: 14px; height: 3px; border-radius: 2px; display: inline-block; background: var(--c); } /* Un avertissement de KPI n'est pas une decoration : il dit qu'une courbe ne veut pas dire ce qu'elle semble dire. Il se lit avant le graphique, pas apres. */ .avert-kpi { border-left: 3px solid var(--alerte); background: var(--carte); color: var(--doux); font-size: 12.5px; padding: 8px 12px; margin: 0 0 12px; border-radius: 0 6px 6px 0; } /* ── Page du protocole : la seule pensee pour le TELEPHONE ───────────────────── Cibles tactiles d'au moins 44 px (la recommandation d'accessibilite tactile), une seule colonne, et rien qui demande de viser. Le reste de l'application se consulte assis ; cette page se remplit debout, apres une seance. */ header.mob, main.mob, footer.mob { max-width: 560px; margin: 0 auto; } header.mob { padding: 16px 18px; } main.mob { padding: 0 18px 40px; } footer.mob { padding: 12px 18px 28px; } .blocs { display: grid; gap: 10px; margin: 14px 0 20px; } .bloc { /* Grille et non flex : trois colonnes fixes — la lettre, le libelle, l'etat — pour que « ✓ fait » se pose a droite sans dependre de la longueur du libelle. */ display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 16px; text-align: left; cursor: pointer; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--texte); font: inherit; transition: background .12s, border-color .12s; } .bloc .lettre { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--fond); border: 1px solid var(--bord); font-size: 19px; font-weight: 700; } .bloc .quoi { font-size: 13.5px; color: var(--doux); line-height: 1.35; } /* L'etat « fait » se lit a la teinte ET au contraste du pastille : sur un ecran en plein soleil, la couleur seule ne suffit pas. */ .bloc.fait { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--carte)); } .bloc.fait .lettre { background: var(--ok); border-color: var(--ok); color: #0b0d12; } .bloc.fait .quoi { color: var(--texte); } .champ { display: grid; gap: 6px; margin: 12px 0; font-size: 13px; color: var(--doux); } .champ input[type=text], .champ input:not([type]), .champ input[type=date] { min-height: 44px; font-size: 16px; /* 16px : en deca, iOS zoome au focus */ } .champ input[type=range] { min-height: 44px; } .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } output { float: right; font-weight: 700; color: var(--texte); } button.principal { width: 100%; min-height: 48px; margin-top: 6px; background: var(--accent); color: #0b0d12; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; } /* Le bouton et son retour sur la meme ligne : un enregistrement confirme a cote du geste qui le declenche, plutot qu'un message perdu plus bas dans la page. */ .ligne-bouton { display: grid; gap: 6px; margin: 10px 0 4px; } .ligne-bouton #etat { min-height: 18px; } /* ⚠️ `align-items: stretch` et non `flex-end` : un pourcentage de hauteur se calcule sur la hauteur du PARENT, et un parent de hauteur automatique n'en donne aucune — les huit jauges sortaient donc identiques, quel que soit leur nombre de blocs. */ .assiduite { display: flex; gap: 6px; align-items: stretch; height: 110px; margin-top: 10px; } /* UNE seule regle pour la colonne d'une semaine. Elle en a eu deux quelques minutes, qui se disputaient `align-items` — le piege deja paye sur `.ligne` : quand deux endroits ont autorite sur la meme propriete, le defaut n'est dans aucun des deux, il est dans leur ordre. Le fond de piste n'est pas decoratif : une semaine a zero, sans lui, laisse un vide invisible et l'oeil compte sept colonnes la ou il y en a huit. */ .sem { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 3px; height: 100%; justify-items: center; background: color-mix(in srgb, var(--bord) 45%, transparent); border-radius: 3px 3px 0 0; } .sem .jauge { width: 100%; align-self: end; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; } .sem span { font-size: 10px; color: var(--doux); } .sem .compte { font-weight: 600; } /* Le mode d'emploi : deux lignes, une fois, en tete. Une page qu'il faut deviner se remplit mal — et celle-ci se remplit debout, en dix secondes. */ .mode-emploi { font-size: 13px; color: var(--doux); background: var(--carte); border: 1px solid var(--bord); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin: 14px 0 4px; line-height: 1.45; } .bloc .etat-bloc { font-size: 11.5px; color: var(--doux); letter-spacing: .01em; white-space: nowrap; } .bloc.fait .etat-bloc { color: var(--ok-txt); font-weight: 600; } /* Les bornes d'un curseur : « effort percu : 1 » ne veut rien dire tant qu'on ignore si le maximum est 5 ou 20. */ .champ .bornes { display: flex; justify-content: space-between; font-size: 11px; color: var(--doux); margin-top: -2px; } /* L'historique : une ligne par jour, lisible d'un pouce. */ .histo { display: grid; gap: 2px; margin-top: 8px; } /* QUATRE colonnes pour quatre elements : avec trois, la note de douleurs passait a la ligne et sortait de l'alignement des jours voisins. */ .jour-histo { display: grid; grid-template-columns: 76px auto auto 1fr; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; font-size: 13px; } .jour-histo:nth-child(odd) { background: color-mix(in srgb, var(--bord) 28%, transparent); } .jour-histo.aujourdhui { outline: 1px solid var(--accent); } .jour-histo .quand { color: var(--doux); font-size: 12px; min-width: 74px; } .jour-histo .pastilles { display: flex; gap: 3px; } .jour-histo .pastilles i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-style: normal; font-size: 11px; font-weight: 600; } .jour-histo .pastilles i.ok { background: var(--ok); color: #0b0d12; } .jour-histo .pastilles i.non { background: color-mix(in srgb, var(--bord) 55%, transparent); color: var(--absent); } .jour-histo .rpe-histo { font-size: 11.5px; color: var(--doux); white-space: nowrap; } .jour-histo .mal { font-size: 12px; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* En-tête : la page du protocole doit être atteignable depuis l'accueil — sans lien, elle existait sans que rien n'y mène. */ nav.entete { display: flex; align-items: center; gap: 16px; } .bouton-lien { color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600; border: 1px solid var(--bord); border-radius: 8px; padding: 6px 12px; } .bouton-lien:hover { border-color: var(--accent); } /* Repères business sur les graphiques. Discrets par construction : ils éclairent la courbe, ils ne la remplacent pas. */ .jalon { stroke: var(--doux); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; } .periode { fill: var(--accent); opacity: .10; } /* ── Une seance ouvrable, et ses zones de frequence cardiaque ──────────────── * Aucune classe de ligne cliquable n'existait : le journal etait un tableau mort. * Le curseur et le survol sont ce qui DIT qu'on peut cliquer — sans eux, la * fonctionnalite existe et personne ne la trouve. */ tr.ouvrable { cursor: pointer; } tr.ouvrable:hover td { background: color-mix(in srgb, var(--accent) 10%, transparent); } /* Une valeur DEDUITE, pas mesuree — ici le lieu retrouve dans le nom d'une seance. Le pointille est deja la forme que ce projet donne a « chemin de l'oeil » : c'est `.ligne.pont` sur les courbes, ou un trait plein par-dessus un vide est interdit. Meme regle, autre support — la FORME porte l'aveu, jamais la couleur seule. ⚠️ L'encre reste celle du texte normal. La passer en `--doux` aurait fait payer l'aveu par la lisibilite : on veut que ce lieu se lise, on veut seulement qu'il ne se confonde pas avec un lieu mesure. `help` parce qu'il y a quelque chose a lire au survol, et non une action a declencher. */ .deduit { border-bottom: 1px dotted var(--doux); cursor: help; } /* Le lien vers la seance chez Garmin Connect — la SOURCE, quand on veut y retourner. ⚠️ **Deux surfaces, deux poids, et c'est le nombre d'occurrences qui tranche.** Sur l'ecran d'une seance il est SEUL : il se souligne comme ses voisins « precedente » et « suivante », faute de quoi il se lit comme une etiquette et personne ne clique. Dans le Journal il y en a CENT, un par ligne : cent liens soulignes feraient une colonne qui crie plus fort que les mesures, donc la fleche s'y tait et c'est le survol de la ligne qui la designe. Meme role, deux densites, deux traitements — la meme regle que celle qui donne deux valeurs a `--alerte`. ⚠️ Le padding n'est pas de la marge : une fleche de huit pixels dans une ligne cliquable est une cible qu'on manque, et la manquer ouvre l'onglet Seance a la place. La zone de clic vaut plus que le glyphe. */ .lien-garmin { color: var(--doux); text-decoration: underline; padding: 6px 8px; border-radius: 5px; display: inline-block; line-height: 1; } /* ⚠️ Le survol va vers `--texte`, PAS vers `--accent` — et c'est mesure. En mode clair `--accent` (#6ea8fe) n'est pas redefini : il plafonne a 2,28:1 sur la carte blanche, quand `--doux` au repos en vaut 5,95. Le survol serait alors MOINS lisible que l'etat qu'il met en avant. C'est exactement le defaut qui a fait naitre `--alerte-txt` et `--ok-txt` : une couleur qui va en aplat ou en bordure ne va pas forcement en texte. Le retour visuel est donc porte par l'encre, le soulignement et la pastille. */ .lien-garmin:hover { color: var(--texte); background: var(--fond); } td .lien-garmin { text-decoration: none; } td .lien-garmin:hover { text-decoration: underline; } tr.ouvrable:hover .lien-garmin { color: var(--texte); } /* Les zones en barres horizontales proportionnelles. Horizontales et non empilees en * colonne : cinq parts dont trois sont minuscules (0,3 % en zone 4) ne se lisent qu'en * largeur, avec leur etiquette a cote. */ .zones { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .zone { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; font-size: 13px; } .zone i { white-space: nowrap; } .zone span { color: var(--doux); font-variant-numeric: tabular-nums; } /* ⚠️ `--ct` et non une couleur de texte fixe : depuis que les zones portent une rampe d'effort, la zone 5 est NOIRE en mode clair. Le `color: #0b0d12` d'avant y posait du texte noir sur du noir — le pourcentage de la zone la plus dure aurait disparu le jour ou une seance en porte une. Les zones 4 et 5 prennent donc du texte clair, les autres du sombre ; le JS pose la valeur avec la couleur du fond. */ .zone b { display: block; height: 18px; line-height: 18px; padding: 0 6px; border-radius: 4px; background: var(--c); color: var(--ct, #0b0d12); font-size: 12px; width: max(var(--part), 34px); box-sizing: border-box; } .zone i { color: var(--doux); font-style: normal; font-variant-numeric: tabular-nums; } /* Les zones cumulees d'une discipline : UNE barre segmentee par sport, sur la duree. * Horizontale et segmentee, la ou l'ecran d'une seance met une barre PAR zone : ici on * compare six disciplines entre elles, et six familles de cinq barres feraient trente * traits ou l'oeil ne retrouve plus la ligne qu'il suivait. * ⚠️ L'ecart de 2 px entre segments est pris sur la marque, pas ajoute autour : deux * aplats voisins sans respiration se lisent comme un seul. Le dernier n'en porte pas, * sinon la barre n'atteint jamais son bord droit et toutes paraissent incompletes. */ .pile-zones { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 4px; } .pz-nom { font-size: 13px; margin-bottom: 4px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .pz-nom .doux { font-size: 12px; } .pz-barre { display: flex; height: 20px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--bord) 50%, transparent); } .pz-barre i { display: block; width: var(--part); background: var(--c); border-right: 2px solid var(--carte); box-sizing: border-box; } .pz-barre i:last-child { border-right: 0; } /* Une coche de filtre au-dessus d'un tableau. La cible fait 20 px et le LIBELLE est cliquable (le