/* =================================================================== kust.fr — LE REPÈRE DU MENU 08/09/2026 · troisième version. Les deux premières ont été refusées, et elles le méritaient. ⚠️ CE QUI A ÉTÉ REFUSÉ, DEUX FOIS — ne jamais y revenir. 1. Un pied de page à trois colonnes de liens : « des menus de bourrins », étranger à un site qui vit de silence. 2. Une grande image + un mot immense en bas de CHAQUE page : le geste était juste (c'est celui de la 4e vue de l'accueil) mais répété partout il devient du remplissage. « C'est horrible d'avoir mis des images en dessous de chaque page. » LE VRAI PROBLÈME, mesuré et pas supposé : le menu ouvert est un carrousel horizontal dont chaque entrée fait 80vw. À l'ouverture on voit Accueil, Histoire, Produits — et RIEN ne dit que Portfolio et Le Klub existent, 460 px plus loin. Pire : la molette horizontale n'y fait rien (seule la verticale défile), et la barre de défilement est masquée. Voilà pourquoi « depuis les premières pages on ne peut pas trouver les pages intérieures ». Il ne manquait rien EN BAS DES PAGES : il manquait un repère DANS le menu. La réponse est celle du site lui-même : sa barre « EXPLORATION » (une ligne, une bille qui glisse, deux chevrons) dit déjà « ça continue latéralement » — mais elle n'existe que sur l'accueil et le portfolio, et elle est masquée dès que le menu s'ouvre. On en reprend le geste, réduit à l'os, à l'intérieur du menu. Une ligne, une bille, deux chevrons. Rien d'autre. Aucune image, aucune liste, aucun pied de page. =================================================================== */ .ks-repere{position:fixed;left:50%;bottom:clamp(2.2rem, 5vh, 4rem); transform:translateX(-50%); /* ⚠️ le

du site est à z-index 9999999999 (clampé par le navigateur à 2147483647) : en dessous, les entrées du menu, qui font 80vw sur 100vh, interceptaient tous les clics et les deux chevrons étaient inertes. On prend la valeur maximale, et comme le repère est ajouté en fin de , l'égalité se tranche en sa faveur. */ z-index:2147483647; display:none;align-items:center;gap:clamp(1rem, 2vw, 1.8rem); opacity:0;transition:opacity .55s ease-in .34s;pointer-events:none} body:has(.show-menu) .ks-repere{display:flex;opacity:1;pointer-events:auto} .ks-repere button{border:0;background:transparent;padding:.4rem;cursor:none; width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center; transition:transform .34s ease-in-out, opacity .34s ease} .ks-repere button:before{content:"";width:.62rem;height:.62rem; border-top:1px solid #fff;border-right:1px solid #fff;opacity:.55} .ks-repere button:first-child:before{transform:rotate(-135deg)} .ks-repere button:last-child:before{transform:rotate(45deg)} .ks-repere button:hover{transform:scale(1.35)} .ks-repere button:hover:before{opacity:1} .ks-repere button[disabled]{opacity:.18;pointer-events:none} /* la ligne et la bille — le geste de la barre EXPLORATION du site */ .ks-repere--barre{position:relative;width:clamp(7rem, 12vw, 11rem);height:1px; background:rgba(255,255,255,.22)} .ks-repere--bille{position:absolute;top:50%;left:0;width:5px;height:5px; margin-top:-2px;border-radius:50%;background:#fff;opacity:.9; transition:left .34s cubic-bezier(.16,1,.3,1)} /* le rang, dans la typographie de service du site */ .ks-repere--rang{font-family:Spectral,Palatino,serif;font-weight:200;color:#fff; font-size:.68rem;letter-spacing:.28em;opacity:.45; font-variant-numeric:tabular-nums;min-width:3.4em;text-align:center} @media (max-width:820px){ .ks-repere{gap:.8rem;bottom:2rem} .ks-repere--barre{width:5rem} } @media (prefers-reduced-motion: reduce){ .ks-repere,.ks-repere--bille,.ks-repere button{transition:none} } /* le titre que seuls les moteurs et les lecteurs d'écran lisent */ .ks-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* =================================================================== LE CURSEUR — précision, sans toucher à ce qui fait son âme 08/09/2026 Ce que le graphiste a écrit, et qu'il faut lire avant de « corriger » : au repos le curseur est un grand halo de 13vw, flou de 3 px, avec une loupe dépolie derrière lui (backdrop-filter 5px). Mais dès qu'il survole quelque chose d'interactif, SA PROPRE RÈGLE le fait passer en `filter:none`, à un tiers de sa taille et 2 px de bordure. Autrement dit : vaporeux quand on flâne, net quand on vise. L'intention est juste — elle est simplement trop lente à s'exprimer, et il manque un repère au centre. On ne retire donc AUCUN flou. On fait deux choses : 1. le resserrement passe de 200 ms linéaires à 120 ms en courbe de sortie : le curseur se pose au lieu de glisser mollement ; 2. un point de visée de 3 px apparaît AU CENTRE, et seulement quand on survole quelque chose — donc au moment exact où la règle du graphiste a déjà retiré le flou, ce qui le rend parfaitement net. Au repos, rien ne change : le halo reste seul. ⚠️ Le point est un pseudo-élément de .cursor : il hérite du `filter: blur(3px)` du parent. C'est voulu — il ne devient net que là où le site retire lui-même ce flou. =================================================================== */ /* ⚠️ La règle d'origine est `.cursor[data-astro-cid-…]`, de spécificité (0,2,0) : un simple `.cursor` (0,1,0) ne la surcharge pas et la durée restait à 200 ms. On répète la classe pour monter à (0,3,0) — c'est laid, c'est la seule façon propre de passer devant une cascade compilée qu'on ne peut pas rééditer. */ .cursor.cursor.cursor{ transition-duration:.12s; transition-timing-function:cubic-bezier(.16, 1, .3, 1); /* le halo est calculé une fois et seulement déplacé */ will-change:transform} .cursor:after{content:"";position:absolute;top:50%;left:50%; width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%; background:#fff;opacity:0;pointer-events:none; transition:opacity .12s ease} body:has(.interactable:hover) .cursor:after, body:has(.c-btn:hover) .cursor:after, body:has(.c-btn--menu:hover) .cursor:after, body:has(.navbar:hover) .cursor:after{opacity:.6} @media (prefers-reduced-motion: reduce){ .cursor,.cursor:after{transition:none} }