/* ═══════════════════════════════════════════════════════════════ site-chrome.css — the homepage header and footer, on their own. The nav bar, the mobile drawer and the site footer were written inside the homepage's style block, where nothing else needed them. The CV pages need the same chrome, so the rules live here now and are pulled in by every standalone page that is not index.html. Everything resolves against the tokens the pages already declare — --bg / --ink / --muted / --line / the font trio — plus the accent ladder from /theme.css. Nothing here hardcodes a colour a page might want to change. --maxw is read with a fallback so a page can narrow the footer to its own column without having to declare the token. ═══════════════════════════════════════════════════════════════ */ /* ───── nav ───── */ nav.top{ position:sticky;top:10px;z-index:50; display:flex;align-items:center;justify-content:space-between; width:calc(100% - 28px);max-width:var(--chrome-navw,1412px);margin:10px auto 0; padding:10px 14px 10px 18px; background:rgba(244,241,232,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(27,26,24,.12);border-radius:18px; box-shadow:0 16px 38px -32px rgba(27,26,24,.65),inset 0 1px 0 rgba(255,255,255,.55); } .logo{display:flex;align-items:center;gap:12px;font-family:var(--font-serif);font-weight:500;font-size:22px;position:relative} .logo-face{ position:relative;flex-shrink:0; width:40px;align-self:stretch; pointer-events:none; display:inline-flex; margin-right:9px; } .logo-face .mask{ /* left edge sits on the pill's own left edge, so the radius below traces the pill's bottom-left corner exactly — otherwise the shoulder paints into the notch the rounded corner leaves behind */ position:absolute; left:-15px;right:-10px; top:-38px; bottom:0; overflow:hidden; border-bottom-left-radius:14px; /* same as .logo-mk */ pointer-events:none; } .logo-face .mask img{ /* anchored to the slot side, so widening the mask leftward for the clip leaves the face itself exactly where it was */ position:absolute; right:0;bottom:0; width:61px;height:auto; filter:drop-shadow(0 3px 4px rgba(0,0,0,.38)); -webkit-user-drag:none;user-select:none; } .logo-mk{ height:44px;padding:0 16px 0 15px;border-radius:14px 17px 13px 14px; border:var(--mk-edge); /* The mark used to be near-black end to end, and the avatar's dark turtleneck dissolved into it — the face read as a head floating on nothing. It runs a dark four-hue ramp now, 137° of hue across 160px: slate blue under the face, through indigo and violet, down to a deep plum behind the wordmark. The ramp also darkens as it goes, which is the part that earns its keep twice — the lit end is where the silhouette needs a wall to stand against, the dark end is where the cream wordmark and the terracotta "s" need one to read off, and orange on violet is the better pairing anyway. Every hue is an offset from --accent-h rather than a literal, so recolouring the site rotates the whole ramp with it and the mark never falls out of family. The radial lifts the bottom-left corner, where the shoulders sit. */ background:var(--mk-ramp); color:var(--bg); display:inline-flex;align-items:center; /* Quicksand plutôt que Space Mono, mesuré le 05/09/2026 à 22 px : la hampe passe de 1,70 px à 1,35 px — c'est la police la plus légère des trois candidates — et ses terminaisons sont arrondies, exactement comme le `stroke-linecap:round` du glyphe qui termine le mot. Les deux formes viennent enfin du même geste. L'approche tombe de -.055em à -.02em : -.055 avait été réglée pour une chasse fixe de monospace, une proportionnelle s'y écrase. */ font-family:'Quicksand',var(--font-body);font-weight:400;font-size:22px;letter-spacing:-.02em;line-height:1; position:relative; text-decoration:none; overflow:visible; box-shadow:0 8px 20px -14px rgba(27,26,24,.8),inset 0 1px 0 rgba(255,255,255,.1); transition:transform .22s ease,box-shadow .22s ease; } .logo-mk:hover{transform:translateY(-1px);box-shadow:0 13px 25px -15px rgba(27,26,24,.85),inset 0 1px 0 rgba(255,255,255,.12)} .logo-mk .s{ /* Hauteur d'x mesurée à 22 px : Quicksand 11,40, Fraunces italique 9,90. Il faut donc 1,15em à Fraunces pour poser son x sur celui des autres — l'ancien 1,05em valait contre Space Mono, dont l'x était plus bas. Le poids descend de 460 à 310 : à 1,15em cela donne une hampe d'environ 1,50 px contre 1,35 px pour Quicksand. Ces 11 % de plus ne sont pas une erreur mais une compensation optique — le « s » est en terracotta sur la rampe sombre, les autres lettres en crème, et un trait moins contrasté paraît plus fin à épaisseur égale. Le décalage vertical a d'abord été ESTIMÉ à -.075em — « la boîte de 1,15em doit s'enfoncer de la moitié de son surplus » — et l'estimation était fausse de 0,55 px : le « s » flottait au-dessus de la ligne de pied. Mesuré à 22 px, bande d'x de « mir » : 41,00 → 53,00. Le « s » tenait 40,45 → 52,45, la bonne hauteur au mauvais endroit. -.050em le pose exactement sur les deux lignes. */ color:var(--accent);font-family:var(--font-serif);font-size:1.15em;font-style:italic;font-weight:310; letter-spacing:-.02em;margin-right:1px; /* Pas de translateY : `align-self:baseline` pose le « s » sur la ligne de pied de « mir » quel que soit le corps. Un décalage en em, lui, ne tenait qu'à une taille — réglé à 22 px il ratait de 1,06 px les 23 px du logo sous 900 px, parce que le centrage flex se fait dans une boîte de 44 px fixe : la lettre grandit, la boîte non, et le décalage ne suit pas. */ align-self:baseline; } .logo-mk .miro{color:var(--bg);font-weight:400;align-self:baseline} /* Le mot, centré dans la pastille. `align-self:baseline` aligne les trois éléments ENTRE EUX — c'est ce qui pose le « s » et le glyphe sur les lignes de « mir » à n'importe quel corps — mais il colle aussi le groupe au bord HAUT du conteneur, parce qu'un élément flex aligné sur la ligne de pied part du cross-start. Mesuré sur la capture : l'encre du mot occupait 8..22 dans une pastille de 44, soit 6,5 px au-dessus du centre. Avant le passage à baseline elle était centrée ; c'est donc une régression, pas un défaut d'origine. Une marge haute égale sur les trois décale le groupe entier d'autant, sans rien changer à leur alignement mutuel. Le portrait, lui, garde le `align-items:center` du conteneur et ne bouge pas. En px et non en em : la pastille fait 44 px aux DEUX corps (22 px dans la barre, 23 px sous 900 px), donc l'écart à combler est une distance fixe, pas une fraction du corps. 7 px, et pas 6,5 : la valeur a été balayée sur des captures aux deux corps. 5,5 et 6,5 font retomber le glyphe une ligne plus haut que les lettres à 23 px — l'arrondi sous-pixel tombe du mauvais côté — tandis que 6 et 7 gardent m, s et le bol sur les mêmes lignes partout. Des deux, 7 pose l'encre 0,5 px SOUS le centre plutôt que dessus, ce qui est le bon côté de l'erreur pour un mot qui n'a que des ascendantes et aucune descendante. */ .logo-mk .s, .logo-mk .miro, .logo-mk .logo-o{margin-top:7px} /* Le sélecteur porte le même préfixe `:is(...)` que la règle générique des icônes plus bas dans ce fichier. Ce n'est pas de la décoration : `:is()` prend le poids de son argument le plus fort, donc `:is(nav.top, .drawer, .site-footer) .ic` pèse (0,2,1) et l'emportait sur `.logo-mk .logo-o` à (0,2,0) — le glyphe du logo repartait à 1em et 1,7 de trait sur toutes les pages sauf l'accueil, qui n'a pas cette règle. Mesuré : 22 px au lieu de 15,75, trait 1,7 au lieu de 2,057. */ :is(nav.top, .drawer, .site-footer) .logo-mk .logo-o{ /* Le glyphe doit peser et mesurer comme un « o » de la police, pas comme une icône posée à côté. Tout est calculé, rien n'est à l'œil. Le bol du dessin occupe 19 × 16 unités du viewBox de 24 (axes des traits). Le « o » de Quicksand à 22 px fait 11,10 × 11,70 px d'encre, hampe 1,35 px. On cherche l'échelle s telle que le trait rendu vaille 1,35 : trait rendu = stroke-width × s, bol = (19 + sw) s × (16 + sw) s → s = .576, stroke-width = 2.344, largeur de boîte = 24 s = .628em. PREMIÈRE VERSION, corrigée : on avait ajusté le bol sur l'ENCRE du « o » (11,10 × 11,70) par moyenne géométrique, ce qui donnait 12,29 × 10,56. Un bol de 10,56 dans une bande d'x de 12,00 laisse 1,4 px de vide réparti en haut et en bas, et l'œil ne lit pas « un peu plus court » : il lit « c'est remonté ». C'est le seul défaut que le partage égal ne pouvait pas cacher. La contrainte qui compte n'est donc pas l'encre du « o » mais les DEUX LIGNES du mot — la ligne de pied et la ligne d'x, celles sur lesquelles m, i et r posent leurs traits plats. Mesuré à 22 px : 53,00 et 41,00, soit une bande de 12,00 — mais 12,00 est la valeur ARRONDIE que rend `actualBoundingBoxAscent` ; au balayage de pixels à 10×, la hauteur d'x de Quicksand vaut 11,40. Bâtir le bol sur 12,00 le faisait déborder d'un pixel en haut aux 23 px du logo mobile — vu sur la capture, pas déduit. On vise donc 11,70 : le débord d'un rond sur la ligne d'x, ce que fait n'importe quel « o » de fonderie. La valeur finale, 11,85, a été trouvée en lisant les PIXELS de deux captures du logo rendu, pas en calculant : 12,00 débordait d'un pixel en haut à 23 px, 11,70 en manquait un en bas à 22 px. (16 + sw)·s = 11,85 avec sw·s = 1,35 donne s = .6563, stroke-width 2.057, boîte .716em — et les deux tailles tombent alors sur les mêmes lignes. Le bol y gagne ses deux lignes et perd sur la largeur : 14,00 contre 11,10 d'encre au « o ». C'est assumé — un glyphe trop large se lit comme un parti pris de dessin, un glyphe qui flotte se lit comme un bug. Il reste d'ailleurs à 5 % de la CHASSE du « o » (13,29), donc le mot garde son pas. Pour rappel, avant toute mesure la boîte valait .85em : le bol était 45 % plus large et 18 % plus haut qu'un « o », et son trait 1,32 px contre 1,70 aux lettres — trop gros ET trop maigre à la fois. stroke-width est en unités de viewBox, donc il suit la taille du texte tout seul : à 23 px sous 900 px de large, le rapport tient sans autre règle. */ width:.716em;height:.716em;margin-left:.017em; stroke-width:2.057; /* `align-self:baseline` amène le bas de la BOÎTE sur la ligne de pied. Le bas du BOL est plus haut : il reste sous lui H × (2 − sw/2)/24 = .0298em de vide, qu'on rattrape en descendant le tout d'autant. C'est un `transform` et non une marge négative : sur un élément remplacé, Chrome prend le bas de la boîte comme ligne de pied et ignore la marge — essayé, mesuré, le bol restait 0,66 px trop haut. Tout est en em et plus rien ne dépend du centrage flex, donc le calage vaut aussi bien à 22 px qu'aux 23 px du logo sous 900 px. */ align-self:baseline;transform:translateY(.029em); color:var(--bg);overflow:visible; } .logo-mk::after{ content:"";position:absolute;right:-7px;bottom:-5px;width:15px;height:15px;border-radius:4px 5px 4px 5px; background:var(--accent); border:1px solid oklch(var(--accent-deep-lch) / .25); box-shadow:0 4px 8px -4px rgba(0,0,0,.6);transform:rotate(3deg); } .nav-r{display:flex;align-items:center;gap:20px} .nav-r a{ font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.015em; text-decoration:none;color:var(--ink-2); } .nav-r>a:not(.nav-cta){position:relative;padding:10px 0} .nav-r>a:not(.nav-cta)::after{ content:"";position:absolute;left:0;right:100%;bottom:5px;height:1px;background:var(--accent); transition:right .22s ease; } .nav-r>a:not(.nav-cta):hover::after{right:0} .nav-r a:hover{color:var(--accent)} /* The call to action is an everywhere it appears — a mail client on the homepage, the CV's own PDF on the CV — but not always inside `.nav-r`, so this rule states the whole type ramp rather than leaning on `.nav-r a` above. The appearance/cursor pair is left in place: it costs nothing, and the rule carried a