/* CSS structurel de Wonderland. Chargé immédiatement pour éviter tout flash brut. */ :root{ --bg:#0B0B0B; --bg-2:#101010; --gold:#D4AF37; --gold-dim:rgba(212,175,55,0.35); --gold-faint:rgba(212,175,55,0.14); --marble:#ECE9E2; --marble-dim:rgba(236,233,226,0.62); /* Le palier le plus discret qui reste lisible : 5.34:1 sur --bg, au-dessus du seuil AA de 4.5:1. En dessous, on sort de la norme — c'est un plancher, pas une nuance parmi d'autres. --marble-faint (1.30:1) ne porte donc que des filets et des fonds, jamais du texte. */ --marble-quiet:rgba(236,233,226,0.55); --marble-faint:rgba(236,233,226,0.12); --blue:#6FA8DC; /* Titres. Cinzel est une capitale lapidaire : pas de bas-de-casse réel, pas d'italique — elle ne convient qu'aux titres, jamais au texte suivi. */ --title: "Cinzel", Georgia, serif; /* Reste pour la citation, seul endroit qui demande un italique littéraire. */ --serif: "Fraunces", Georgia, serif; /* Corps de texte. Nommée d'après son rôle et non d'après sa classe : la police peut changer de famille sans que le nom devienne un mensonge. */ --body: "IBM Plex Serif", Georgia, serif; /* Manuscrite — réservée aux notes d'atelier, jamais au discours du site. Caveat : une cursive lisible, sans afféterie, qui tient à petite taille comme à grande. Elle dit « écrit de la main » sans jouer la calligraphie. */ --main: "Caveat", "Segoe Script", cursive; --mono: "IBM Plex Mono", monospace; --maxw: 980px; /* Hauteur du pied de page, qui est fixe : deux règles du hero doivent la dégager pour ne pas passer dessous. Déclarée ici pour n'exister qu'une fois — la changer suffit à réaligner tout ce qui en dépend. */ --footer-h: 37px; } *{box-sizing:border-box;} .visually-hidden{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .skip-link{ position:fixed;top:12px;left:12px;z-index:10000; padding:8px 12px;background:var(--bg);color:var(--blue); border-bottom:1px solid var(--blue); font-family:var(--mono);font-size:12px;letter-spacing:.08em; transform:translateY(-180%);transition:transform .2s ease; } .skip-link:focus{transform:none;outline:1px solid var(--blue);outline-offset:4px;} /* Le défilement assisté est piloté en JS (voir « Parcours assisté ») : laisser `smooth` ici ferait cohabiter deux moteurs d'animation sur le même axe. */ html{scroll-behavior:auto;} body{ margin:0; background:var(--bg); color:var(--marble); font-family:var(--body); font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;} ::selection{background:var(--gold-faint);color:var(--gold);} /* ---------- layout helpers ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} /* Une section vaut un écran. C'est la règle, et elle ne souffre pas d'exception : `min-height`, jamais `height`, pour qu'une section plus longue que l'écran s'allonge au lieu de se faire rogner. Une section plus courte, elle, garde du vide sous elle — et c'est voulu. Le défilement assisté avance d'une section par geste : si deux d'entre elles tenaient dans le même écran, le geste sauterait la seconde sans rien montrer. Le vide est le prix de ce repère. */ section{ position:relative;padding:150px 0 120px; min-height:100vh;min-height:100svh;box-sizing:border-box; border-bottom:1px solid var(--marble-faint); } section:last-of-type{border-bottom:none;} /* la section Parcours embarque déjà sa propre frise (haute) : son padding est réglé plus bas, avec le reste de sa tenue en un écran. */ /* Habiter : titre, plan, récit et frise composent un écran lorsque la hauteur disponible le permet. Sur un écran bas, `min-height` laisse la page grandir plutôt que de rogner le contenu. */ #habiter{ box-sizing:border-box;min-height:100vh;min-height:100svh; display:flex;align-items:stretch; padding:clamp(26px,4.5svh,46px) 0 calc(var(--footer-h) + clamp(14px,3svh,26px)); } /* Le surtitre et le titre cèdent une partie de leur air au plan : chaque pixel repris en haut est un pixel de dessin en plus, et le dessin est le propos de la section. */ #habiter .eyebrow{margin-bottom:15px;} #habiter h2{margin-bottom:12px;} /* Habiter est la seule section, avec le hero, à sortir de la largeur éditoriale (--maxw : 980px). Ce n'est pas un texte qu'on lit au fil : c'est un plan qu'on regarde, et six volets à parcourir sous lui. À 980px, le dessin tombait à 592px de large dans une section de 1425 — un timbre au milieu du noir, avec 280px de vide sous lui. Il prend désormais toute la largeur utile, et toute la hauteur que la section lui laisse. `align-items:stretch` ci-dessus est ce qui rend cette hauteur mesurable : la colonne remplit la section, et le plan s'y étire. */ #habiter>.wrap{ width:100%;max-width:1280px; display:flex;flex-direction:column;min-height:0; } .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:14px; margin-bottom:28px; } .eyebrow::after{ content:""; flex:1; height:1px; background:linear-gradient(to right, var(--gold-dim), transparent); } /* Cinzel est gravée, pas écrite : ses capitales demandent de l'air entre les lettres, là où une romane de labeur demandait qu'on les resserre. Le crénage négatif d'avant les aurait fait se toucher. Sa graisse la plus légère est 400 : demander 300 ne ferait que déclencher une graisse synthétique. */ h1,h2,h3{ font-family:var(--title); font-weight:400; color:var(--marble); margin:0 0 22px; letter-spacing:0.012em; line-height:1.24; } h2{font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:400;} h3{font-size:1.15rem;font-weight:500;color:var(--gold);} p{margin:0 0 18px;color:var(--marble-dim);font-weight:300;font-size:1.02rem;} .lede{font-size:1.18rem;color:var(--marble);max-width:640px;} .tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); border:1px solid rgba(111,168,220,0.35); border-radius:2px; padding:3px 8px; display:inline-block; } /* ---------- l'orbe perchée ---------- Il n'y a qu'une orbe. Celle du hero quitte sa colonne à mesure qu'on descend, rétrécit, et va se percher au coin haut-droit — la place que la rangée d'entrées occupait, du temps où il y avait une barre du haut. Rien n'est irréversible : remonter la ramène. Le vol est publié en `--vol` (0 dans le hero, 1 perchée) par le moteur, et `.is-perche` est posée passé la moitié du trajet. La géométrie — position et taille — est écrite en `left/top/width` et non par un `transform` : une transformation sur l'orbe en referait une couche composite, et le carré noir sur la grille du hero reviendrait (voir `.hero-doors`). Le creux garde la colonne pendant ce temps, sinon la grille du hero se refermerait sur une seule colonne dès le premier pixel de défilement. */ #hero .visual-creux{ width:120%;max-width:none;justify-self:end; aspect-ratio:1/1;pointer-events:none; } @media(max-width:860px){ #hero .visual-creux{width:min(100%, 340px);justify-self:center;margin:40px auto 0;} } /* Le bouton n'existe que perchée : dans le hero, ce sont les six portes qui servent de menu, et une boîte cliquable posée dessus les aurait toutes masquées. Il ne peint rien — il ne fait qu'attraper le pointeur. */ .orbe-menu{ position:absolute;inset:0;z-index:4; padding:0;margin:0;border:none;background:none; pointer-events:none;cursor:pointer; -webkit-tap-highlight-color:transparent; } .visual.is-perche .orbe-menu{pointer-events:auto;} .orbe-menu:focus{outline:none;} /* Le focus se marque sur le disque, pas sur la boîte carrée du bouton : l'objet est rond, son contour de focus doit l'être aussi. */ .orbe-menu::after{ content:"";position:absolute;inset:6%;border-radius:50%; border:1px solid transparent;transition:border-color .2s; } .orbe-menu:focus-visible::after{border-color:var(--gold-dim);} /* --- les sections, déployées vers le bas --- Une colonne, jamais une couronne : perchée, l'orbe est petite, et six noms disposés autour d'elle se seraient marché dessus ou seraient sortis de l'écran. La couronne existe déjà, d'ailleurs — ce sont les portes du hero, et c'est bien la même liste, dite deux fois à deux tailles. `top:100%` suit l'orbe quelle que soit sa taille : la colonne pend toujours juste sous le disque, pendant le vol comme à l'arrivée. */ .repere-liste{ list-style:none;margin:0;padding:9px 0 0; position:absolute;left:50%;top:100%;transform:translateX(-50%); text-align:center;z-index:5; visibility:hidden;transition:visibility 0s linear .42s; } .visual.is-ouvert .repere-liste{visibility:visible;transition-delay:0s;} /* Il n'y a plus de filet entre l'orbe et sa liste. Ce trait d'un pixel, incliné par la perspective du disque, se lisait comme une barre oblique posée au-dessus de « Parcours » — donc comme une première entrée, celle du hero, sur laquelle on essayait de cliquer. Or on ne revient pas au hero par le menu : c'est un parti pris, le hero est un seuil qu'on franchit une fois. Plutôt qu'un faux bouton, rien : le premier élément sous l'orbe est « Parcours ». Voir DEVELOPMENT.md § Décisions de conception. */ .repere-liste a{ display:inline-block; font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;color:var(--marble-dim);white-space:nowrap; padding:7px 10px 5px;border-bottom:1px solid transparent; /* Le menu se perche au-dessus du contenu des sections : sans fond, un nom pouvait tomber sur un titre ou un trait du plan et devenir illisible. Un aplat du fond de page à 80 % suffit à détacher la colonne sans la transformer en boîte — on voit encore ce qui passe derrière. */ background:rgba(11,11,11,.8); text-shadow:0 0 7px var(--bg), 0 0 3px var(--bg); opacity:0;transform:translateY(-7px); transition:opacity .32s ease calc(var(--i,0) * .045s), transform .32s ease calc(var(--i,0) * .045s), color .25s, border-color .25s; } .visual.is-ouvert .repere-liste a{opacity:1;transform:none;} .repere-liste a:hover, .repere-liste a:focus-visible{color:var(--gold);} .repere-liste a.active{color:var(--gold);border-color:var(--gold-dim);} /* Comprendre, dans la colonne : même mot, même place, mais gris et inerte. Il tient son rang dans la liste — l'ordre des sept sections ne change pas — et dit au clic pourquoi il ne mène nulle part. */ .repere-chantier{ display:inline-block;position:relative; font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:rgba(236,233,226,.3);white-space:nowrap; padding:7px 10px 5px;border-bottom:1px solid transparent; background:rgba(11,11,11,.8); cursor:default; } .repere-chantier:focus-visible{outline:1px solid var(--gold-dim);outline-offset:2px;} .repere-aveu{ position:absolute;left:50%;top:100%;transform:translateX(-50%); margin-top:2px;padding:2px 7px; background:rgba(11,11,11,.8); font-size:9px;letter-spacing:.12em;color:var(--gold);white-space:nowrap; opacity:0;visibility:hidden; transition:opacity .25s ease,visibility 0s linear .25s; } .repere-chantier.dit-chantier .repere-aveu{ opacity:1;visibility:visible;transition-delay:0s; } /* Au doigt, la cible passe à 44px : le corps du mot ne change pas, seule la zone de saisie s'épaissit. */ @media (pointer:coarse){ .repere-liste a{padding:14px 14px 12px;} } /* Écrans bas — un téléphone tenu en paysage. La colonne ne se déploie que vers le bas : sur 400px de haut, sept entrées à pleine cible en sortiraient. On resserre donc plutôt que de changer de sens ; la liste reste lue au même endroit, dans le même ordre. C'est un compromis assumé : la cible tactile descend sous les 44px recommandés. Une entrée un peu menue reste préférable à une entrée hors de l'écran, que rien n'atteint. */ @media (max-height:620px){ .repere-liste a{padding:6px 10px 4px;} } /* Sans JS, l'orbe ne vole pas : elle reste dans le hero, à sa place de repos, portes cliquables. La liste des sections est alors donnée ouverte sous elle — c'est la seule navigation dont dispose la page, et la septième entrée (Contact) n'a pas de porte. */ html:not(.js) .repere-liste{visibility:visible;} html:not(.js) .repere-liste a{opacity:1;transform:none;} /* Bascule en colonne : elle n'est plus commandée par une largeur d'écran arbitraire mais par l'orbe. Voir `#hero .wrap`. */ @media(max-width:860px){ #hero .wrap{grid-template-columns:1fr;gap:40px;} #hero .visual{aspect-ratio:1/1;max-width:280px;margin:40px auto 0;} } /* ---------- hero ---------- */ #hero{ min-height:100svh; display:flex;align-items:center; border-bottom:1px solid var(--marble-faint); overflow:hidden; position:relative; } #hero .grid-bg{ position:absolute;inset:0;z-index:0;opacity:.55; pointer-events:none; } /* Le hero est le seul bloc qui dépasse la largeur commune (--maxw : 980px) : deux tiers de texte, un tiers d'orbe, et le titre respire vers la droite sans jamais toucher le bord — 1280px laisse ~80px de marge sur un 1440. */ /* C'est l'orbe qui dimensionne le hero, et non l'inverse. Sa colonne ne descend jamais sous --orbe-min ; comme elle est rendue à 120 % de sa colonne, l'orbe conserve au moins 300px de côté. En deçà, c'est la colonne de texte qui cède, puis la mise en page bascule en une seule colonne — mais à aucun moment l'orbe n'est rognée. */ #hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,2fr) minmax(var(--orbe-min,250px),1fr);gap:clamp(28px,4vw,60px);align-items:center;max-width:1280px;} #hero .hero-text{min-width:0;} /* Les deux blocs s'écartent de 5 % chacun — le texte vers la gauche, l'orbe vers la droite — soit 10 % d'écart en plus. Le décalage est plafonné en pixels : à 1280px de large il ne reste que 28px de marge, et un 5 % non borné aurait poussé l'orbe hors de l'écran. */ /* Décalés par leurs marges, jamais par un `transform` : une transformation sur l'orbe en referait une couche composite, et le carré noir sur la grille reviendrait (voir `.hero-doors`). Le décalage vaut 5 %, mais il ne prend que ce que la fenêtre peut céder : la marge restante au-delà des 1280px du bloc, moins 12px de garde au bord. Sous ~1250px de large il n'y a pas la place, et il s'annule de lui-même. */ #hero .wrap{--push:min(5%, max(0px, (100vw - 1280px)/2 + 16px));} #hero .hero-text{margin-left:calc(-1 * var(--push));} /* C'est le creux qui porte le décalage, l'orbe ayant quitté le flux : sa position est calculée sur celle du creux, elle en hérite donc. */ #hero .visual-creux{margin-right:calc(-1 * var(--push));} #hero .hero-cta{ /* Mesuré depuis le haut du pied de page, et non depuis le bas de la fenêtre : celui-ci est fixe et couvrirait les 37 derniers pixels. */ position:absolute;left:50%;bottom:calc(var(--footer-h) + 26px); transform:translateX(-50%); z-index:2; overflow:hidden; } /* La jauge du seuil. Le bouton ne s'ouvre pas au premier clic : il se charge. Survoler le remplit de gauche à droite, en bleu ; la charge **reste** quand on s'en éloigne et **s'accumule** au survol suivant. Une fois pleine — une seconde de survol cumulée, le temps qu'il faut aux portes pour se ranger — le bouton devient cliquable. La jauge est un **fond du bouton**, pas un pseudo-élément posé derrière lui. La version précédente utilisait `::before { position:absolute; inset:0; z-index:-1 }`, ce qui ne tient que si le bouton crée un contexte d'empilement. Or sous 860px il repasse en `position:static` : son `z-index` n'a alors plus d'effet, le pseudo-élément s'échappe vers le premier ancêtre positionné — `#hero` — et `inset:0` lui fait couvrir **toute la section**. Un fond ne peut pas s'échapper : il est borné à la boîte, quel que soit le positionnement. `background-size` est la seule propriété animée. Elle déclenche un repaint du bouton, pas un recalcul de mise en page ; sur une boîte de cette taille c'est sans conséquence, et cela vaut mieux qu'un empilement fragile. */ #hero .hero-cta{ background-image:linear-gradient(90deg, rgba(111,168,220,.16) 0%, rgba(111,168,220,.42) 60%, rgba(111,168,220,.55) 100%); background-repeat:no-repeat; background-position:left center; background-size:calc(var(--charge, 0) * 100%) 100%; transition:background-size .12s linear, background-color .25s, color .25s; } /* Tant que la charge n'est pas pleine, le bouton se montre en attente : le curseur dit qu'il n'est pas encore prêt. */ #hero .hero-cta.is-charge{cursor:progress;} @media (prefers-reduced-motion: reduce){ /* Pas de charge à attendre quand on demande moins de mouvement : le bouton est immédiatement franchissable. */ #hero .hero-cta{transition:none;} } @media(max-width:860px){ /* En colonne unique, le bouton reprend sa place dans le flux, sous le bloc. `#hero` est un conteneur flex : sans passer en colonne, le bouton sorti du flux absolu viendrait se ranger à côté du contenu, pas dessous. */ /* Le bouton repasse dans le flux : c'est au hero de réserver la hauteur du pied de page, sinon la dernière ligne se glisse dessous. */ #hero{flex-direction:column;justify-content:center;padding-bottom:calc(var(--footer-h) + 24px);} /* La bascule en colonne unique est répétée ici, et c'est nécessaire : la grille à deux colonnes est déclarée plus bas dans la feuille, et à spécificité égale c'est la dernière qui gagne. Sans cette reprise, la tablette gardait deux colonnes et l'orbe sortait du cadre. */ #hero .wrap{width:100%;grid-template-columns:1fr;gap:40px;} #hero .hero-text{margin-left:0;} /* En colonne unique l'orbe est centrée et tient dans la colonne. Ces déclarations doivent vivre ici, après la règle de base : celle-ci pose `width:120%; max-width:none`, et sa position plus tardive dans la feuille lui faisait écraser le plafond du premier media query — l'orbe débordait alors du hero, où `overflow:hidden` la tronquait. */ #hero .visual{ width:min(100%, 340px);max-width:none; margin-left:auto;margin-right:auto; } #hero .hero-cta{position:static;left:auto;bottom:auto;transform:none;align-self:center;margin:36px 0 0;} } /* +30 % : 4.6vw → 6vw, borne haute 3.7 → 4.8rem. La contrainte qui fixe ces valeurs est « deux lignes maximum » — 4.8rem est calé sur la colonne de texte à 1280px (« Construire des / systèmes utiles. »), au-delà le titre passe à trois lignes avant d'atteindre la largeur maximale. La borne basse reste à 2.1rem : sur 375px de large, c'est déjà la taille qui fait tenir « systèmes utiles. » sur une seule ligne. L'agrandir là ne gagnerait rien, elle ferait une ligne de plus. */ #hero h1{ font-size:clamp(2.1rem,6vw,4.8rem); line-height:1.14; margin-bottom:26px; } /* Cinzel n'a pas d'italique : l'incliner ne produirait qu'une oblique synthétique, qui casse le dessin gravé des capitales. L'or suffit à détacher le mot — c'est d'ailleurs lui qu'on voyait en premier. */ #hero h1 em{ font-style:normal;color:var(--gold); } #hero p.lede{margin-bottom:38px;} .btn{ font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; display:inline-flex;align-items:center;gap:10px; background:transparent;border:1px solid var(--gold-dim);color:var(--gold); padding:14px 22px;text-decoration:none;transition:background .25s,color .25s; } .btn:hover{background:var(--gold);color:var(--bg);} .btn.secondary{border-color:rgba(236,233,226,0.3);color:var(--marble);} .btn.secondary:hover{background:var(--marble);color:var(--bg);} #hero .visual{ /* L'orbe est posée à l'écran, pas dans la grille : elle doit pouvoir voler du hero jusqu'à son perchoir, et sa colonne est tenue par le creux. `left/top/width` sont écrits par le moteur à chaque image — jamais un `transform` : celui-ci en referait une couche composite, et le carré noir sur la grille du hero reviendrait (voir `.hero-doors`). Sa largeur est aussi ce qui la dimensionne : le canvas est donc repeint à sa taille du moment, et le trait reste net à toutes les échelles. Un `scale` l'aurait rééchantillonnée. */ position:fixed;left:0;top:0;z-index:90; max-width:none;aspect-ratio:1/1;cursor:crosshair;--calm:0;--vol:0; /* On clique dans l'orbe pour lui donner de l'élan, et un clic répété est un double-clic : le navigateur y sélectionnait le bloc, qui s'allumait en surbrillance. Rien n'est à lire ici — les libellés sont décoratifs. */ user-select:none;-webkit-user-select:none; -webkit-tap-highlight-color:transparent; /* Perspective pour les anneaux CSS 3D : le compositeur macOS (CoreAnimation) rend les layers 3D à la résolution physique native — jamais de bitmap intermédiaire, jamais de rééchantillonnage. */ perspective:700px; perspective-origin:50% 50%; } /* --- Posée --- Tant que le vol n'a pas commencé, l'orbe n'est pas placée par le moteur : elle redevient un élément de la grille, et c'est le navigateur qui la fait défiler avec la page — en une seule opération, sans retard possible. ⚠️ C'est la correction d'un scintillement, pas un raffinement. Une position `fixed` recalculée en JS à partir de `scrollY` arrive toujours une image après le défilement, que le compositeur a déjà présenté : l'orbe tremblait sur place, en retard sur le texte qui l'entoure. Un objet en vol peut se permettre ce retard ; un objet immobile, non. Le creux s'efface alors, sinon la grille compterait deux colonnes de droite. Les deux bascules ont lieu dans la même image, et le passage ne se voit pas : le creux occupe exactement la boîte que l'orbe libère. C'est aussi l'état sans JS — la classe est posée dans le balisage. */ #hero .visual.est-pose{ position:relative;left:auto;top:auto;z-index:auto; width:120%;justify-self:end; margin-right:calc(-1 * var(--push)); } #hero .visual.est-pose ~ .visual-creux{display:none;} @media(max-width:860px){ #hero .visual.est-pose{ width:min(100%, 340px);justify-self:center;margin:40px auto 0; } } /* Ceinture et bretelles : si une sélection démarre malgré tout (glissé venu du texte voisin, raccourci « tout sélectionner »), elle ne peint rien — le fond du hero reste visible à travers. */ #hero .visual::selection, #hero .visual ::selection{background:transparent;} #hero .visual::-moz-selection, #hero .visual ::-moz-selection{background:transparent;} /* repère central : l'axe autour duquel toute la structure tourne. Il s'efface pendant le vol : perchée, c'est le chiffre romain de la section qui occupe le centre, et les deux s'y seraient superposés. */ .orb-center{ position:absolute;left:50%;top:50%;width:5px;height:5px; border-radius:50%;background:rgba(212,175,55,.8); transform:translate(-50%,-50%);pointer-events:none; opacity:calc(1 - min(1, var(--vol,0) * 1.6)); } /* Aucun voile sur le conteneur de l'orbe. Historique : un dégradé radial y était posé pour estomper les bords de la sphère. Même ramené à une opacité partielle, il restait un aplat couvrant un carré — donc un rectangle perceptible sur la grille du hero, puisque le dégradé est circulaire et le conteneur carré. Les anneaux qu'il servait à estomper ne sont d'ailleurs plus dessinés depuis la suppression du canvas : il ne masquait plus rien. Le conteneur est désormais intégralement transparent — seules les portes sont peintes. */ /* --- orbites --- Un seul canvas 2D pour les six orbites : chacune porte une traîne dont l'intensité décroît derrière un point actif, ce qu'un trait uniforme (SVG ou div) ne sait pas rendre sans un dégradé par anneau et par frame. Historique de rendu, deux impasses mesurées, à ne pas reprendre : des divs à `border-radius` inclinés par rotateX (rastérisés en texture puis rééchantillonnés — le trait part en halo flou), et le même trait rangé sous la couche des portes (même flou, en SVG comme en div, avec ou sans `perspective`). D'où le z-index ci-dessous. */ /* z-index: 3 — au-dessus des portes, et ce n'est pas un choix esthétique : sous leur couche, le trait est peint dans une texture de fond rééchantillonnée et devient illisible. Seul le passage au-dessus de `.hero-doors` le rend net. Les traînes sont fines et transparentes : elles ne masquent pas les portes qu'elles croisent. */ .orb-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;} /* Compteur d'images par seconde — outil de mesure. Posé contre l'orbe, sous son coin bas-droit : c'est elle qu'il mesure, et c'est là qu'on regarde quand on cherche une saccade. `position:absolute` dans `.visual`, qui est déjà positionné. Visible par défaut, masquable d'une touche (F) — le choix est mémorisé. */ .fps-meter{ position:absolute;right:0;bottom:-8px;z-index:4; font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; padding:4px 8px;border:1px solid var(--marble-faint); background:rgba(11,11,11,.72); color:var(--marble-dim);pointer-events:none;white-space:nowrap; } /* En colonne unique, l'orbe est centrée et plus petite : le compteur revient se caler en bas de l'écran plutôt que de mordre sur le texte. */ @media(max-width:860px){ .fps-meter{position:fixed;right:auto;left:12px;bottom:12px;z-index:9999;} } .fps-meter[data-etat="ok"]{color:var(--marble);} .fps-meter[data-etat="moyen"]{color:var(--gold);border-color:var(--gold-dim);} .fps-meter[data-etat="bas"]{color:var(--gold);border-color:var(--gold);} /* --- les 6 portes --- `display: contents` : le