: il gardait la sans. Le même texte était donc composé dans deux polices selon l'écran, et « SCULPTRICE SUR BOIS » s'élargissait de 16 px au moment du fondu. */ .c-hero-h__text { font-family: "Noto Sans JP", sans-serif; } /* --- 1bis. L'écran d'entrée ------------------------------------------------ Le CSS d'origine posait le loader à `opacity: .9` : on devinait le carrousel derrière, et l'entrée n'avait aucun temps propre. On le passe en opaque — un noir de bois brûlé plein, qui tient une seconde avant de s'ouvrir sur l'œuvre. Le rideau avant le lever de rideau. */ .c-hero.js-loader { opacity: 1; } /* La marque et le nom montent en fondu pendant que le fond tient. Le contenu du rideau part invisible et ne se lève que lorsque main.js pose `.fonts-ready` sur , c'est-à-dire quand Noto est réellement chargée. Pourquoi ce verrou : sans lui, le texte s'affiche d'abord dans la police système puis bascule dans Noto. Le nom s'élargit alors de 21 px et le libellé se resserre de 17 px. Ce saut tombait à la fin du chargement — c'était le « micro-décalage ». Le rideau est justement là pour couvrir ça. On utilise une TRANSITION, pas une @keyframes. Deux tentatives avec des animations ont échoué : créée en pause puis relancée, ou attachée au moment du changement de classe, l'animation se déclarait « running » mais restait figée sur son image de départ. Une transition déclenchée par une classe est le mécanisme prévu pour ça, et elle est fiable. */ .c-hero.js-loader .c-hero-h { opacity: 0; /* .c-hero-h est déjà centré par translate(-50%, -50%) : on part d'un peu plus bas, sans casser le centrage. */ transform: translate(-50%, -44%); transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1); } html.fonts-ready .c-hero.js-loader .c-hero-h { opacity: 1; transform: translate(-50%, -50%); } /* La marque, sur l'écran d'entrée. Dans le CSS d'origine elle est minuscule (26 px) et posée en absolu, décalée de 60 px sur la gauche du titre — un reliquat de la mise en page japonaise, où elle n'était qu'un ornement. Une rotation y serait invisible. Sur le rideau, on la remet dans le flux, centrée au-dessus du nom, à une taille qui la rend lisible. Elle devient l'objet de l'entrée, pas sa marge. Le hero, lui, garde le placement d'origine : cette surcharge ne vaut que sous `.js-loader`. */ /* --- Alignement rideau / hero --------------------------------------------- Rien ne doit bouger quand le rideau s'efface. Trois choses l'en empêchaient. 1. La marque, si on la met dans le flux, allonge le bloc titre d'environ 96 px : le nom du rideau ne tombe plus à la hauteur de celui du hero. Elle reste donc EN DEHORS du flux (absolue, comme dans l'original), mais remontée au-dessus du titre au lieu d'être cachée derrière le texte. Le bloc garde ainsi exactement la hauteur qu'il a dans le hero. 2. `.c-hero-h__title` démarre à translateX(20px) et glisse vers 0 en 1 s quand `.is-loaded` arrive — pile au moment du fondu. Le titre du hero bougeait donc encore après la disparition du rideau. 3. La petite marque d'ornement du hero s'efface en glissant de -80 px sur la même seconde, ce qui ajoutait un second mouvement parasite. On neutralise 2 et 3 : l'entrée, c'est le rideau. Le hero, lui, est déjà en place. */ .c-hero .c-hero-h__title { transform: none; } /* 4. Le hero est un

, le rideau un
. `h1 { line-height: 1.5 }` se propage donc au nom dans l'un et pas dans l'autre : les deux blocs n'ont pas la même hauteur, et comme ils sont centrés par translate(-50%, -50%), tout se décale de quelques pixels au moment du fondu. On aligne les métriques du rideau sur celles du titre. / .c-hero.js-loader .c-hero-h { font-size: 1.5rem; / la taille héritée du
/ line-height: 1.5; letter-spacing: 2.24px; } / L'ornement du titre — un reliquat de la mise en page japonaise, minuscule et décalé sur le côté — ne sert plus : c'est le vrai logo qui porte l'entrée. / .c-hero .c-hero-hicon { display: none; } / --- Le logo, de l'entrée au header --------------------------------------- Plutôt que de dessiner une marque sur le rideau puis d'afficher le logo dans le header — deux objets à faire coïncider, donc deux occasions de décaler — on n'en utilise qu'un seul : LE logo. Il apparaît en grand au centre du rideau, tourne en se posant, puis monte à sa place dans le header. Ce sont des cernes de croissance : une rotation qui décélère jusqu'à l'arrêt dit le tour du tronc, là où une boucle infinie tournerait dans le vide. Les positions et l'échelle sont calculées par main.js (transform en ligne) : elles dépendent du viewport, et un calcul CSS serait fragile. Ici on ne déclare que la courbe du mouvement. / .c-site-logo { transition: transform 1.1s cubic-bezier(.22, .61, .36, 1), opacity .8s ease; } / Pendant l'entrée, le logo doit passer AU-DESSUS du rideau (z-index 400) et garder ses couleurs : le `mix-blend-mode: difference` du header le rendrait illisible sur le fond sombre. / .c-site-logo.is-entering { z-index: 410; mix-blend-mode: normal; } .c-site-logo.is-entering .c-site-logoimg { transition: none; / la rotation d'entrée est portée par le parent / } / Le logo fixe, en haut : il tourne doucement au survol. / .c-site-logoimg { transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); } .c-site-logo:hover .c-site-logoimg { transform: rotate(180deg); } / Mouvement réduit : les transitions du rideau sont ramenées à zéro par la règle globale plus bas — le contenu apparaît donc d'un coup, à sa place, ce qui est le comportement voulu. Il reste juste à neutraliser la rotation du logo. / @media (prefers-reduced-motion: reduce) { .c-site-logo:hover .c-site-logoimg { transform: none; } } / --- Le bouton « descendre », en bas du hero ------------------------------- Ce n'était pas un logo japonais : c'était un bug. Le CSS d'origine écrit `content: "next"` dans la police `swiper-icons` — l'une de celles qui n'ont jamais été fournies — et fait tourner le cercle de 90° pour que le chevron pointe vers le bas. Sans la police, le navigateur affiche littéralement le MOT « next », minuscule et à la verticale. D'où le petit gribouillis. On remet un vrai chevron (masque SVG, comme les autres icônes du site), on annule la rotation qui n'avait de sens que pour le glyphe, et on ajoute un battement lent : c'est une invitation à descendre, elle doit se voir. / .c-heroscroll-down a { font-family: inherit; transform: none; / la rotation à 90° servait à coucher le glyphe "next" / animation: scroll-hint 2.4s ease-in-out infinite; } .c-heroscroll-down a:hover { transform: scale(1.2); / l'original y remettait un rotate(90deg) / animation: none; } .c-heroscroll-down a::after { content: ""; width: 8px; height: 8px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5 12 16.5 20 8.5'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5 12 16.5 20 8.5'/%3E%3C/svg%3E") no-repeat center / contain; } @media screen and (min-width: 768px) { .c-heroscroll-down a::after { width: 11px; height: 11px; } } @keyframes scroll-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .c-heroscroll-down a { animation: none; } } / --- 2. Lisibilité du titre sur les photos -------------------------------- Le titre du hero est en blanc, posé au centre de la photo. Les œuvres éclairées (globes ambrés) sont très lumineuses en plein milieu du cadre : le blanc sur jaune tombe sous le seuil de contraste et le nom devient illisible. Un voile radial très doux, centré, rétablit le contraste sans assombrir les bords ni trahir la photo. Il rend le hero robuste à n'importe quelle image future, ce qu'un simple recadrage ne garantirait pas. / .c-hero-slider::after { content: ""; position: absolute; inset: 0; z-index: 1; / sous .c-hero-h (z-index 2), sur les slides / pointer-events: none; / n'intercepte ni les flèches ni le swipe / background: radial-gradient( ellipse 60% 45% at center, rgba(20, 14, 9, .62) 0%, rgba(20, 14, 9, .38) 55%, rgba(20, 14, 9, 0) 100% ); } / --- 3. Icônes : la gouge remplace le marteau ----------------------------- `myfont-hammer` est l'icône signature (bouton MENU, tous les boutons d'action). On garde la même diagonale que le marteau pour ne pas casser la rotation au survol définie dans common.css. / / La lame est symétrique autour de l'axe du manche (et non décalée sur un côté) : c'est ce qui distingue une gouge d'un couperet. Manche épais en bas à gauche, virole, puis lame qui file sur le même axe jusqu'au tranchant. / .myfont-hammer::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.4 10.6 13.4' stroke-width='3.8'/%3E%3Cpath d='M9.5 12.3 11.7 14.5'/%3E%3Cpath d='M10.3 11.9 19.1 3.1 20.9 4.9 12.1 13.7z'/%3E%3Cpath d='M18 4.2 19.8 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.4 10.6 13.4' stroke-width='3.8'/%3E%3Cpath d='M9.5 12.3 11.7 14.5'/%3E%3Cpath d='M10.3 11.9 19.1 3.1 20.9 4.9 12.1 13.7z'/%3E%3Cpath d='M18 4.2 19.8 6'/%3E%3C/svg%3E"); } / La marque de l'artiste : des cernes de croissance au lieu des vagues. / .myfont-aya::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='11.2' cy='12.4' rx='6' ry='6.4'/%3E%3Cellipse cx='10.6' cy='12.7' rx='3.4' ry='4'/%3E%3Cellipse cx='10.2' cy='12.9' rx='1.2' ry='1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='11.2' cy='12.4' rx='6' ry='6.4'/%3E%3Cellipse cx='10.6' cy='12.7' rx='3.4' ry='4'/%3E%3Cellipse cx='10.2' cy='12.9' rx='1.2' ry='1.6'/%3E%3C/svg%3E"); } / --- 3. Barres de défilement ----------------------------------------------- La barre native (grise, épaisse, tranchante) casse la page. On la retaille dans la matière du site : un trait fin, sans piste visible, encre sur le papier — laiton sur les fonds sombres de la modale. `scrollbar-gutter: stable` répare un défaut lié : à l'ouverture d'une fiche, le passe en `overflow:hidden`, la barre disparaît, et toute la page sautait de ~15 px vers la droite. En réservant la gouttière une fois pour toutes, la largeur du contenu ne bouge plus. Deux syntaxes coexistent : `::-webkit-scrollbar` (Chrome, Safari, Edge) donne un pouce arrondi ; Firefox n'a que les propriétés standard, sans arrondi. Les deux ne cohabitent pas — dès qu'on déclare `scrollbar-color`, Chrome bascule sur le rendu standard et ignore le nôtre. D'où le @supports, qui n'expose la version Firefox qu'aux navigateurs qui ne connaissent pas ::-webkit-scrollbar. / html { scrollbar-gutter: stable; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { / La bordure transparente + background-clip amincissent le pouce à 4 px et le décollent du bord, sans avoir à réduire la zone cliquable. / background-color: rgba(36, 28, 22, .26); background-clip: content-box; border: 3px solid transparent; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(36, 28, 22, .5); } / La modale est sur bois brûlé : le pouce y passe au laiton. / .m-modalpanel::-webkit-scrollbar-thumb { background-color: rgba(200, 162, 104, .42); } .m-modalpanel::-webkit-scrollbar-thumb:hover { background-color: rgba(200, 162, 104, .75); } @supports (scrollbar-width: thin) and (not selector(::-webkit-scrollbar)) { html { scrollbar-width: thin; scrollbar-color: rgba(36, 28, 22, .35) transparent; } .m-modalpanel { scrollbar-width: thin; scrollbar-color: rgba(200, 162, 104, .5) transparent; } } / --- Le bloc « L'artiste » ------------------------------------------------- La photo est un portrait vertical (3:4) : la feuille sculptée monte jusqu'en haut du cadre, Florence est en bas à droite. Le bloc d'origine attendait un paysage et donnait 42vw à chaque colonne — à cette largeur, le portrait fait plus de 800 px de haut et écrase la carte de texte. On resserre donc la colonne image et on rend la place au texte : la somme reste 80vw, et les deux colonnes retombent à peu près à la même hauteur. / @media screen and (min-width: 1024px) { .m-introimg-wrapper { width: 40vw; } .m-introtext { width: 44vw; } } / L'ombre bleutée du thème d'origine sur une photo à dominante bois. / .m-introimg { box-shadow: 6px 6px 28px rgba(36, 28, 22, .12); } / La signature ferme le paragraphe comme on ferme une lettre. Décorative : le nom est déjà donné en clair partout ailleurs, donc aria-hidden. / .m-introsign { margin-top: 28px; font-family: "Noto Serif JP", serif; font-size: 1.375rem; line-height: 1; color: #8a5a2b; opacity: .8; letter-spacing: .04em; } @media screen and (min-width: 1024px) { .m-introsign { margin-top: 36px; } } / --- 4. Accessibilité ------------------------------------------------------ Le site d'origine anime beaucoup (translations, zoom lent, parallaxe). On respecte les utilisateurs qui demandent moins de mouvement — c'est le point faible connu du style « motion-driven ». / @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* Les éléments animés à l'entrée doivent rester visibles, pas figés à opacity 0. */ .js-anime-translate-y, .js-anime-fade, .js-anime-group-of-works-heading { transform: none !important; opacity: 1 !important; } }