/* Bertrande. LE CHAMP GRADUE. Trois couches, une regle chacune, et rien d'autre : 1. le CHAMP : une trame graduee fixe couvre la fenetre, le contenu glisse dessus ; 2. l'ENCRE : tout ce qui NOMME une donnee (bandeau de site, en-tete de colonne) est reserve en blanc dans un pave d'encre pleine ; 3. la COTE : tout ce qui EST une donnee reste nu sur le champ, et chaque nombre d'une colonne chiffree porte sous lui sa position sur l'echelle reelle de toutes les valeurs publiees du meme parametre. Aucun trait de ce fichier n'est decoratif : la trame est une graduation, la barre d'en-tete est une couverture comptee, la cote est une valeur publiee. Clair et sombre tenus tous les deux, l'utilisateur systeme decide. */ :root{ /* Le pas de la graduation. Tout espacement du fichier en est un multiple entier : la regularite se VOIT au lieu de se supposer. */ --pas:8px; /* graduation mineure */ --pas-fort:64px; /* graduation majeure : 8 mineures */ --r:.125rem; /* un seul rayon, et il ne sert qu'aux controles manipules */ /* Six tailles, pas vingt et une. */ --t1:.6875rem; --t2:.8125rem; --t3:.9375rem; --t4:1rem; --t5:1.1875rem; --t6:1.5rem; /* Couleurs. Chaque couple encre / fond est calcule par tests/lint_couleurs.py sur le fond REEL de l'element, et le lint echoue sous le seuil. --grid et --grid-major sont des hex PLEINS et non des alphas : la couleur composite sous une graduation est donc connue exactement, et le contraste du texte qui la traverse se calcule. */ --bg:#faf9f6; --fg:#16171a; --muted:#585a55; --faint:#616259; --line:#a49f91; --line-strong:#96907f; --card:#ffffff; --grid:#eeebe1; --grid-major:#e5e1d3; /* Sur papier clair, l'aurore est une chaleur, pas une lueur : elle reste au seuil du visible pour ne pas laver le texte. */ --aurore:rgba(18,86,107,.15); --aurore-2:rgba(122,92,46,.10); /* L'echelle des cotes. Elle porte du sens, donc elle vise 3:1 et non le seuil des filets : sans la piste, le tiret n'a plus d'etendue. */ --track:#807a69; --accent:#7a5c2e; --accent-soft:#f2ead9; /* L'accent editorial et l'encre qui porte de la donnee sont deux choses. */ --data:#12566b; --up:#8a2f22; --down:#0f5d63; --warn:#7a4f0f; /* Le pave d'encre. Surface de contraste maximal : bandeau de site, releve, en-tete de tableau. En sombre il s'inverse, la regle ne change pas. */ --ink:#16171a; --ink-fg:#faf9f6; --ink-dim:#a9a79c; --ink-line:#4e5054; --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono",Menlo,Consolas, "DejaVu Sans Mono","Liberation Mono",monospace; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } :root:not([data-theme="light"]){} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0d0e0f; --fg:#e6e8e6; --muted:#9aa09c; --faint:#8b918d; --line:#565e60; --line-strong:#5a615f; --card:#15181a; --grid:#161a1b; --grid-major:#1e2325; --aurore:rgba(87,201,187,.15); --aurore-2:rgba(217,177,105,.09); --aurore:rgba(87,201,187,.15); --aurore-2:rgba(217,177,105,.09); --track:#6a7370; --accent:#d9b169; --accent-soft:#241d10; --data:#57c9bb; --up:#ef8b72; --down:#4fcbba; --warn:#e0a63a; --ink:#e6e8e6; --ink-fg:#0d0e0f; --ink-dim:#4d5150; --ink-line:#9aa09b; } } :root[data-theme="dark"]{ --bg:#0d0e0f; --fg:#e6e8e6; --muted:#9aa09c; --faint:#8b918d; --line:#565e60; --line-strong:#5a615f; --card:#15181a; --grid:#161a1b; --grid-major:#1e2325; --track:#6a7370; --accent:#d9b169; --accent-soft:#241d10; --data:#57c9bb; --up:#ef8b72; --down:#4fcbba; --warn:#e0a63a; --ink:#e6e8e6; --ink-fg:#0d0e0f; --ink-dim:#4d5150; --ink-line:#9aa09b; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* Le site entier en chasse fixe. Un registre est une sortie d'appareil, pas un magazine, et la chasse fixe le dit sans avoir a l'ecrire. La pile est celle du SYSTEME, jamais « Courier New » nomme : cette police-la n'est installee que sur une partie des machines, elle y est fine et pauvre a l'ecran, et ailleurs elle retombe sur autre chose. Nommer la famille rendrait le resultat different sur chaque poste ; demander « la meilleure chasse fixe d'ici » le rend bon partout. Verifie sur ce serveur : « Courier New » y retombe deja sur Liberation Mono. La mesure passe en ch et non en rem : une ligne se lit a environ 68 signes, et en chasse fixe cette regle se calcule exactement. */ body{margin:0;background:var(--bg);color:var(--fg);font:15.5px/1.62 var(--mono); -webkit-font-smoothing:antialiased;letter-spacing:-.005em} /* ============================================================ COUCHE 1. LE CHAMP GRADUE Filets d'un pixel tous les 8 px, renforces tous les 64 px, peints par quatre degrades sur un pseudo-element en position fixe. Il NE DEFILE PAS : le contenu glisse dessus comme un trace sur l'ecran d'un appareil. Cout : 0 octet d'actif, 0 requete, 0 image, 0 JS, et aucune repeinture au defilement puisque la couche est composee une fois. ============================================================ */ /* L'AURORE. Un halo radial qui descend du bord haut, sous la trame graduee. Le principe est emprunte aux fonds de 2026 ; la couleur vient de notre propre palette, ou --data est deja l'encre qui porte de la donnee. Un indigo jurerait avec un accent chaud. Elle est PEINTE SOUS LA TRAME, jamais par-dessus : la graduation reste l'element de tete, l'aurore ne fait que lui donner de la profondeur. Et elle s'arrete haut, la ou le texte courant ne passe pas encore, pour que le contraste calcule sur --bg reste vrai la ou il compte. Le composite au point le plus dense est verifie par tests/lint_couleurs.py. docs/15 D83. */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-color:var(--bg); background-image: repeating-linear-gradient(90deg,var(--grid-major) 0 1px,transparent 1px var(--pas-fort)), repeating-linear-gradient(180deg,var(--grid-major) 0 1px,transparent 1px var(--pas-fort)), repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px var(--pas)), repeating-linear-gradient(180deg,var(--grid) 0 1px,transparent 1px var(--pas)), /* Deux halos, l'un centre et l'autre decale, pour que la lumiere ne soit pas symetrique : une symetrie parfaite se lit comme un gabarit. Le centre est pose SOUS la bande d'encre, qui couvre les deux cents premiers pixels : plus haut, le halo etait a son plus dense la ou personne ne le voyait. Mesure a la pipette, a 210 px du haut : #0f1415 avec un centre a -12 %, #1b2b28 avec celui-ci. */ radial-gradient(110% 60% at 50% 20%,var(--aurore) 0%,transparent 62%), radial-gradient(65% 40% at 84% 14%,var(--aurore-2) 0%,transparent 70%)} /* Le filet lumineux, pose sous la bande d'encre. Il ne recouvre aucun texte, donc il ne coute rien au contraste, et c'est lui qui donne l'heure : un halo qui teinte le fond est bride par la lisibilite, une ligne ne l'est pas. */ .readout::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent 0%,var(--data) 22%,var(--accent) 52%, var(--data) 74%,transparent 100%);opacity:.75} .readout{position:relative} .wrap{max-width:64rem;margin:0 auto;padding:0 1.25rem} .skip{position:absolute;left:-9999px} .skip:focus{left:1rem;top:1rem;background:var(--card);color:var(--fg);padding:.85rem 1rem; z-index:60;min-height:44px;display:flex;align-items:center; border:2px solid var(--accent);border-radius:0} a{color:var(--accent);text-underline-offset:.18em} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* Chrome rend focalisable au clavier tout conteneur qui defile SANS enfant focalisable : deux tableaux du site sont dans ce cas au pouce (le tarif conditionnel d'une fiche, la table des niveaux de source). Sans cette regle ils heritent du contour par defaut, invisible sur fond sombre. Le defaut est anterieur a cette passe, il est repare ici. */ .scroll:focus{outline:3px solid var(--accent);outline-offset:-3px} /* Une ancre doit s'arreter SOUS le bandeau colle. Mesure : 105,0 px de 390 a 1920 px, sur les six pages testees ; 7rem (112 px) laisse la marge. */ :target,tbody tr:target{scroll-margin-top:7rem} /* ============================================================ COUCHE 2. L'ENCRE : LE BANDEAU DE SITE Ce qui nomme est reserve en blanc dans l'encre. C'est la meme regle que pour l'en-tete de tableau plus bas, ce qui en fait un systeme et non un decor. ============================================================ */ header.site{background:var(--ink);color:var(--ink-fg);position:sticky;top:0;z-index:20} .bar{display:flex;align-items:center;gap:1rem;min-height:3rem;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink-fg); font:700 var(--t3)/1 var(--mono);letter-spacing:.02em;min-height:44px} .brand-name{text-transform:uppercase;letter-spacing:.1em} .brand-mark{width:1.5rem;height:1.5rem;color:var(--ink-fg);flex:none} /* Le pave d'encre inverse le logo : sans cela, ses barres interieures, peintes en var(--bg), disparaitraient sur un carre de la meme couleur. Le rayon tombe a zero, en CSS pour ne pas toucher au gabarit ; Safari < 15 l'ignore et reste arrondi. */ .brand-mark rect{rx:0} .brand-mark g rect,.brand-mark circle{fill:var(--ink)} .brand-mark path{stroke:var(--ink-fg)} .kbtn{display:inline-flex;align-items:center;gap:.45rem;background:transparent; color:var(--ink-fg);border:1px solid var(--ink-line);border-radius:0;padding:.5rem .7rem; font:600 var(--t1)/1 var(--mono);text-transform:uppercase;letter-spacing:.1em; cursor:pointer;margin-left:auto;min-height:44px} /* Sans JavaScript ce bouton n'ouvre rien : la feuille actuelle le rendait visible quand meme, parce que display:inline-flex bat [hidden] de la feuille du navigateur. */ .kbtn[hidden]{display:none} .kbtn:hover{background:var(--ink-fg);color:var(--ink)} .kbtn:hover kbd{color:var(--ink);border-color:var(--ink)} .kbtn:focus-visible{outline-color:var(--ink-fg)} kbd{font:var(--t1)/1 var(--mono);background:transparent;border:1px solid var(--ink-line); border-radius:0;padding:.1em .35em;color:var(--ink-dim)} /* La reglette d'onglets prend sa propre ligne sans toucher au gabarit : elle reste dans .bar, mais sa base de flex vaut 100 %. Elle ne replie JAMAIS (une seconde rangee d'un ou deux onglets, filets compris, se lit comme un defaut) : elle defile partout ou elle ne tient pas. */ /* La navigation, a DEUX NIVEAUX depuis le 02/09/2026. Elle etait une reglette unique de douze onglets qui defilait horizontalement, prevue pour 888 px de contenu. Douze entrees aux libelles longs la faisaient deborder a toutes les tailles, et le degrade de bord cachait la moitie des pages : une navigation dont on ne voit pas les entrees n'est pas une navigation, c'est une liste. Le premier niveau porte les quatre choses qu'un visiteur fait en arrivant : voir les donnees, obtenir une reponse, verifier un prix, savoir ce qui a bouge. Le second porte le reste, groupe et nomme, en plus petit. La hierarchie est dans la taille et dans le poids, pas dans un menu qui se deplie : rien ici ne depend d'un script. */ /* min-width:0 n'est pas cosmetique, c'est ce qui empeche le site entier de deborder. Ce nav est un item flex de .bar. Avant la refonte du 02/09 il portait lui-meme overflow-x:auto, ce qui mettait sa taille minimale automatique a zero. En descendant ce overflow vers .navrow, j'ai emporte la protection sans la remplacer : sa taille minimale est redevenue sa largeur min-content, soit les 890 px de la rangee la plus large, et ce nombre est devenu le plancher du DOCUMENT. Mesure : scrollWidth 890 pour clientWidth 412, tout le site rendu a 46 % de sa taille, et les onglets de droite peints hors du pave d'encre, en blanc sur blanc. Ne pas retirer. */ header nav{display:flex;flex-direction:row;align-items:stretch;flex:1 0 100%;order:2; margin:0;gap:0;min-width:0; border-top:1px solid var(--ink-line);margin-inline:-1.25rem;padding-inline:1.25rem} /* UNE SEULE RANGEE, plus une porte. Mesure du 02/09/2026 a 412 px, hauteur de l'en-tete et premier pixel de contenu : deux rangees, debordement corrige 128 px contenu a 302 5 liens sur 12 hors ecran deux rangees a 13 px 130 px contenu a 304 6 sur 8 hors ecran une rangee plus porte 105 px contenu a 279 AUCUN hors ecran Douze onglets dans 412 px est une erreur de categorie : un site de mille pages ne s'indexe pas dans une reglette. La porte est un
NATIF : elle s'ouvre sans script, verifie scripts desactives. Son panneau est en position:absolute et RECOUVRE au lieu de pousser, donc le haut du contenu ne bouge pas d'un pixel, porte ouverte ou fermee. Le test du 26/08, qui interdit de repousser le contenu sous la ligne de flottaison, est donc tenu dans son intention et pas seulement dans sa lettre. */ /* position:relative a ete RETIRE de cette regle le 03/09/2026, et ne doit pas revenir. overflow-x:auto fait calculer overflow-y en auto (CSS Overflow 3 : un axe non visible transforme le visible de l'autre axe en auto), donc cette boite ROGNE sur 44 px de haut. Tant qu'elle etait aussi positionnee, elle etait le bloc conteneur du panneau absolu de la porte : le panneau, pose a top:100%, tombait exactement sur le bord bas du rognage. Mesure du 03/09/2026 : rectangle 984 x 459 px annonce par getBoundingClientRect, intersection reelle avec la zone visible 984 x 0 px, 0 pixel repeint sous y=105, 0 des 8 liens atteignable par elementFromPoint, a 412 comme a 1920 px. La porte est maintenant SOEUR de cette rangee, donc plus aucun descendant absolu ici ; position:relative n'aurait plus d'effet, mais le retirer ferme le piege pour de bon. */ header .navrow{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;min-width:0; flex:1 1 auto;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;scrollbar-width:none} header .navrow::-webkit-scrollbar{display:none} /* L'indice de debordement est un FOND, jamais un masque. Un mask-image touche l'alpha du TEXTE : il peut faire tomber n'importe quel couple a 1:1 sans que lint_couleurs.py s'en apercoive, puisque le lint compare des jetons et non des pixels. Mesure du 02/09 : « What moved » finissait a 379,7 px sous un fondu commence a 349,6, alpha 0,01, contraste 1,02:1. C'etait le « MOVE » ampute de la capture, sur une rangee qui ne defilait meme pas. */ header nav{position:relative} /* Depuis le 03/09/2026 cet indice est un ITEM de la rangee