*,*::before,*::after{box-sizing:border-box} /* ============ POLICES ============ */ /* Livrees depuis /fonts, identiques a celles de la vitrine — les deux moities du site doivent avoir le meme dessin, comme elles ont deja les memes valeurs de couleur. Avant, la page empruntait la police du systeme du visiteur : Helvetica Neue sur Mac, Arial sur Windows, SF Mono ici et Consolas la. Voir fonts/README.md. Chemins absolus : cette feuille est servie depuis /catalogue/. TeX Gyre Heros est un clone metrique d'Helvetica — Helvetica Neue appartient a Monotype et ne peut pas etre redistribuee depuis le domaine. */ @font-face{font-family:"TeX Gyre Heros";font-style:normal;font-weight:400;font-display:swap; src:url("/fonts/texgyreheros-400.woff2") format("woff2")} @font-face{font-family:"TeX Gyre Heros";font-style:normal;font-weight:700;font-display:swap; src:url("/fonts/texgyreheros-700.woff2") format("woff2")} /* Fonte variable bornee a 400-700 : un seul fichier pour les deux graisses. */ @font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400 700;font-display:swap; src:url("/fonts/robotomono-var.woff2") format("woff2")} :root{ --ink:#141210; --soft:#6E665C; --faint:#96907F; --accent:#2B211A; --sand:#FFFFFF; --espresso:#141210; --wash:rgba(20,18,16,.042); --wash2:rgba(20,18,16,.082); --hair:rgba(20,18,16,.11); --rule:rgba(20,18,16,.14); --sans:"TeX Gyre Heros","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"Roboto Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --gut:clamp(1.15rem,4vw,3.5rem); } /* Fond blanc. Le catalogue presente des pieces detourees : sur un fond sable, chaque photo posait sa propre lumiere contre la couleur du papier, et le rayon entier prenait un ton de brocante. Sur blanc l'objet est seul, et c'est la maniere dont une maison de mobilier montre son fonds — pas un decor, un fonds. `--sand` garde son nom : il ne designe plus une couleur mais LE FOND, et il sert aussi d'encre sur les boutons espresso. Le sable, l'espresso et le laiton restent la marque ; ils vivent sur le site vitrine, pas dans la salle d'exposition. */ /* `clip` rather than `hidden`: both stop a stray wide child from scrolling the page sideways, but `hidden` makes the element its own scroll container, and a scroll container above `position:sticky` kills it silently — the mobile tools bar simply scrolled away. `hidden` stays first as the fallback. */ html{overflow-x:hidden;overflow-x:clip} body{margin:0;min-height:100vh;overflow-x:hidden;overflow-x:clip; color:var(--ink);font-family:var(--sans); font-size:clamp(.9375rem,.5vw + .84rem,1rem);line-height:1.55;letter-spacing:-.005em; -webkit-font-smoothing:antialiased;background:var(--sand); display:flex;flex-direction:column} main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center} /* Le grain, reduit a un souffle. Sur le sable il faisait la matiere du papier ; sur blanc, a la meme force, il grisait toute la page — un blanc sale n'est plus un blanc. Il reste juste de quoi que l'aplat ne soit pas un ecran eteint. */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");background-size:200px 200px;opacity:.05;mix-blend-mode:multiply} img{max-width:100%;display:block} a{color:inherit} h1,h2,h3{font-weight:700;letter-spacing:-.034em;margin:0;line-height:1.05;text-wrap:balance} .wrap{width:100%;min-width:0;max-width:1320px;margin-inline:auto; padding-inline:var(--gut);position:relative;z-index:1} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em; text-transform:uppercase;color:var(--soft);margin:0} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* `.cap` est la commande generique du catalogue : elle garde sa forme pleine la ou elle est vraiment un bouton — sur la page de demande (Copier, Ouvrir dans le mail, Envoyer). Dans le BANDEAU, elle n'en est plus une : voir plus bas. La typo est celle de la page d'accueil : Helvetica grasse en capitales, 12px, chasse a .16em — exactement le reglage de `.menu-cat` dans index.html. Elle etait en monospace, ce qui faisait du catalogue un autre site des la premiere ligne. Le monospace reste la voix FONCTIONNELLE (references, cotes, categories sous les vignettes) ; il ne porte plus la navigation. */ .cap{display:inline-flex;align-items:center;gap:.5em;border:0;border-radius:999px; padding:.62em 1.15em;font-family:var(--sans);font-size:12px;font-weight:700; letter-spacing:.16em; text-transform:uppercase;text-decoration:none;cursor:pointer;color:var(--ink); background:var(--wash);transition:background .18s,color .18s,opacity .25s} .cap:hover{background:var(--wash2)} .cap.on{background:var(--espresso);color:#FFF} .cap.acc{background:var(--espresso);color:#FFF} .cap.acc:hover{background:#332F2B} /* ---- LE BANDEAU, LE MÊME QUE SUR LA VITRINE -------------------------------- Emblème et MENU à gauche, Curated Products et le cabas à droite, a fond perdu, aux retraits exacts de `#nav` dans index.html : 26px en haut, clamp(26px,4vw,60px) sur les cotes. Il etait rentre dans la colonne de 1320px, et passer de la vitrine au catalogue faisait sauter l'emblemme et les liens de plusieurs centimetres. Il reste `sticky` et non `fixed` : la planche est une page qui defile sous son bandeau, et c'est de sa hauteur mesuree (--masth) que la barre des rayons tire son `top`. Pose en haut du document, colle a 0, il est au meme endroit qu'un bandeau fixe tant que la page n'a pas bouge — et c'est l'arrivee sur la page qui devait cesser de sauter. */ .mast{position:sticky;top:0;z-index:130;display:flex;align-items:center; justify-content:space-between;gap:1.5rem;background:var(--sand); padding:26px clamp(26px,4vw,60px)} /* Pas de filet sous le bandeau. Il en portait un, la vitrine non : c'etait la derniere chose qui distinguait les deux barres. Le fond blanc du bandeau suffit a tenir les pieces qui defilent dessous. */ body.home .mast{flex:none} .nav-l,.nav-r{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)} /* L'emblemme seul, comme sur la vitrine — plus le logotype « House Morphosis. ». Deux marques de largeurs differentes aux deux bouts du site, c'est justement ce qui faisait bouger le coin haut-gauche d'une page a l'autre. */ .brand{display:block;text-decoration:none;line-height:0} /* 58x34 : exactement la taille que prend horse.png a `height:34px` sur la vitrine. L'emblemme est le meme dessin des deux cotes, il doit occuper la meme place au pixel pres — sinon le mot MENU a cote de lui ne tombe pas au meme endroit d'une page a l'autre, et c'est precisement ce qu'on corrige. */ .brand i{display:block;width:58px;height:34px; background:url("data:image/png;base64,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") left center/contain no-repeat} /* Les libelles du bandeau : 12px, gras, chasse a .16em. C'est le reglage de `.menu-cat` sur la vitrine, et c'est celui qui tient tout le haut de la page avec la rangee des rayons juste dessous — INDOOR / OUTDOOR / BATHROOM est en .05em, et une capitale de 14px serree au-dessus d'elle cassait l'accord. Le panneau du menu, lui, parle au grand corps : ce n'est pas la meme place, ce n'est pas le meme role. */ .menu-btn,.menu-cat{background:none;border:0;padding:0;cursor:pointer; font:inherit;font-family:var(--sans);font-size:12px;font-weight:700; letter-spacing:.16em;line-height:1;text-transform:uppercase;color:var(--ink); text-decoration:none;white-space:nowrap;list-style:none; background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px; transition:background-size .3s cubic-bezier(.22,1,.36,1)} .menu-btn::-webkit-details-marker{display:none} .menu-btn:hover,.menu-cat:hover, .menu-btn:focus-visible,.menu-cat:focus-visible{background-size:100% 1px} /* CLOSE est le premier element DU PANNEAU, comme sur le site de reference : on le lit en haut de la liste, au-dessus des destinations. Le bouton du bandeau s'efface pendant ce temps — il ne dit pas deux fois la meme chose. */ .menu-close{background:none;border:0;padding:0;cursor:pointer; font:inherit;font-family:var(--sans);font-size:12px;font-weight:700; letter-spacing:.16em;line-height:1;text-transform:uppercase;color:var(--ink); background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px; transition:background-size .3s cubic-bezier(.22,1,.36,1); margin-bottom:clamp(38px,7vh,84px)} .menu-close:hover,.menu-close:focus-visible{background-size:100% 1px} .sitemenu[open] .menu-btn{opacity:0;visibility:hidden} /* Le cabas : le meme signe et le meme compte que sur la vitrine. */ .menu-bag{display:inline-flex;align-items:flex-start;gap:.25em;color:var(--ink); text-decoration:none;transition:opacity .25s} .menu-bag:hover{opacity:.6} .menu-bag svg{width:21px;height:21px;display:block;flex:none;fill:none; stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round} .menu-bag .n{font-family:var(--mono);font-size:9px;font-weight:700;line-height:1; letter-spacing:0;margin-top:.2em} .menu-bag .n:empty{display:none} /* ---- LE PANNEAU, LE MÊME QUE SUR LA VITRINE -------------------------------- Une colonne pleine hauteur sur la gauche, sur le blanc de la page, et la page reste visible a droite. Pas de cadre, pas d'ombre, pas de voile teinte. LE MOUVEMENT EST UN FONDU DE 220 ms, ET RIEN D'AUTRE — releve sur la reference. Pas de glissement, pas de cascade ligne a ligne : le modele est beaucoup plus sobre qu'il n'en a l'air sur une capture, et c'est ce qui le fait passer pour cher. Ce qui porte l'evenement, c'est le mot MENU qui devient CLOSE a la meme ligne. Le decalage du haut place la premiere destination 45px sous cette ligne : l'ecart exact du modele entre sa croix et son premier lien. */ .sitemenu{position:relative} .menu-veil{position:fixed;inset:0;z-index:135;background:transparent; animation:menufade .22s ease both} .menu-panel{position:fixed;top:0;left:0;bottom:0;z-index:140; /* La colonne s'arrete juste apres le plus long des libelles — pas a une fraction de l'ecran. `max-content` la fait tenir a la largeur de son contenu, et le rembourrage de droite est exactement ce « legerement apres » : le meme retrait qu'a gauche, de sorte que le mot est pose au milieu de sa marge et non colle au bord. */ width:max-content;max-width:100vw; /* Les valeurs relevees sur le site de reference : blanc a 50%, flou de 3px. Pas 90% et 14px — a cette force la page derriere est effacee, alors que tout l'effet tient dans le fait qu'on la voit. Un demi-blanc et un souffle de flou : la colonne est une vitre depolie, pas un mur. */ background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); color:var(--ink); padding:26px clamp(26px,4vw,60px); display:flex;flex-direction:column;align-items:flex-start; overflow-y:auto;overscroll-behavior:contain; animation:menufade .22s ease both} @keyframes menufade{from{opacity:0}to{opacity:1}} /* Sans `backdrop-filter` (Firefox d'avant 103, ou le reglage desactive), un demi-blanc sans flou laisse le texte se battre avec ce qu'il y a derriere. On remonte alors l'opacite : moins beau, toujours lisible — c'est le bon ordre de priorite. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .menu-panel{background:rgba(255,255,255,.93)} } /* Les destinations : la meme voix que le bouton, au grand corps. C'est elles qui donnent le ton — le bouton n'en est que la version de bandeau. */ .menu-list{display:flex;flex-direction:column;align-items:flex-start} .menu-list a{text-decoration:none;color:inherit; font-size:clamp(21px,2.4vw,32px);font-weight:700;letter-spacing:-.01em; line-height:1.34;text-transform:uppercase; transition:opacity .15s cubic-bezier(.4,0,.2,1)} .menu-list a:hover,.menu-list a:focus-visible{opacity:.5} @media(max-width:860px){.menu-panel{width:100vw}} @media (prefers-reduced-motion:reduce){.menu-panel,.menu-veil{animation:none}} /* ---- les trois grands rayons ------------------------------------------------ INDOOR · OUTDOOR · BATHROOM, centres sous le bandeau, et rien autour : pas de pastille, pas de cadre, pas de filet sous le mot choisi. Le rayon ouvert est simplement EN GRAS. C'est la seule difference entre les deux etats et elle suffit — sur un fond blanc, une graisse se voit d'un bout a l'autre de la rangee, la ou une pastille aurait ajoute une forme a regarder. La barre va d'un bord a l'autre de l'ecran et se colle sous le bandeau : les trois rayons restent sous la main quelle que soit la longueur de la planche. La place de chaque mot est reservee A SA LARGEUR EN GRAS — c'est le doublon cache dans ::after. Sans lui, choisir un rayon elargit son mot et fait glisser toute la rangee sous le curseur. */ .rayons{position:sticky;top:var(--masth,0px);z-index:30;background:var(--sand)} .rayons-in{max-width:1320px;margin-inline:auto;padding-inline:var(--gut); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem; padding-block:clamp(.85rem,2vw,1.3rem)} .rayons-nav{grid-column:2;display:flex;justify-content:center;align-items:baseline; flex-wrap:wrap;gap:clamp(1.1rem,3vw,2.6rem)} .rayon{display:inline-block;position:relative;text-decoration:none;color:var(--ink); font-size:clamp(.75rem,.3vw + .69rem,.8125rem);letter-spacing:.05em; text-transform:uppercase;font-weight:400;opacity:.5;white-space:nowrap; transition:opacity .2s} .rayon::after{content:attr(data-label);display:block;height:0;overflow:hidden; font-weight:700;visibility:hidden;pointer-events:none} .rayon:hover{opacity:1} .rayon.on{font-weight:700;opacity:1} /* Sur une fiche produit, la famille de la piece se pose apres les rayons : la fiche dit alors ou elle se range — OUTDOOR · SOFAS — et les deux mots sont le chemin du retour. Elle sort `hidden` : c'est le script qui la nomme, et une piece dont la categorie n'appartient a aucune famille n'affiche rien plutot qu'un mot vide. */ .rayon-fam{opacity:.5;font-weight:400} .rayon-fam::before{content:"·";margin-right:.55em;opacity:.5} .rayon-fam[hidden]{display:none} /* La recherche, au bout de la barre. Sans pastille ni fond : un filet, et le filet fonce quand le champ a le curseur. Elle porte sur tout le fonds, jamais sur le seul rayon ouvert — un champ qui a l'air de couvrir le catalogue doit couvrir le catalogue. */ .search{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.55em; min-width:0;width:min(100%,13rem);margin:0; border-bottom:1px solid var(--hair);padding:.25em 0 .3em; transition:border-color .18s} .search:focus-within{border-bottom-color:var(--ink)} .search svg{width:14px;height:14px;stroke:var(--faint);fill:none;stroke-width:1.7;flex:none} .search>label{display:flex;align-items:center;flex:none;cursor:text} .search input{font:inherit;font-size:.75rem;letter-spacing:.04em;border:0;background:none; color:var(--ink);width:100%;padding:0} .search input::placeholder{color:var(--faint);text-transform:uppercase;letter-spacing:.05em} .search input:focus{outline:none} /* La croix qui vide le champ. Le navigateur en dessine une, et elle est BLEUE — la seule couleur du site qui ne vienne pas de nous. On la remplace par la notre, au trait, a l'encre noire. `appearance:none` est indispensable : sans lui le dessin natif reste par-dessus. */ .search input[type=search]::-webkit-search-cancel-button{ -webkit-appearance:none;appearance:none; width:11px;height:11px;flex:none;cursor:pointer;opacity:.45; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%23141210' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:opacity .18s} .search input[type=search]::-webkit-search-cancel-button:hover{opacity:1} @media(max-width:720px){ .rayons-in{grid-template-columns:1fr;gap:.7rem} .rayons-nav{grid-column:1} .search{grid-column:1;justify-self:stretch;width:100%} } /* ---- la planche : les familles a gauche, les pieces a droite ---------------- Une fois le rayon choisi, ses familles se deplient dans une colonne collee a gauche — Sofas, Armchairs, Coffee & Side Tables… — et la grille occupe tout le reste. La colonne suit le defilement : sur une planche de deux cents pieces, changer de famille ne doit pas demander de remonter. Les familles ne sont pas ecrites dans la page : elles sont comptees sur le catalogue reel, rayon par rayon. Une famille sans piece dans le rayon ouvert ne parait pas, et elle revient d'elle-meme le jour ou une piece y entre. */ .shelf{display:grid;gap:clamp(1.5rem,3vw,3.4rem);align-items:start; padding-top:clamp(1.3rem,2.6vw,2.2rem)} @media(min-width:900px){.shelf{grid-template-columns:12.5rem minmax(0,1fr)}} .rail{position:sticky;top:calc(var(--masth,0px) + var(--rayh,0px) + 1.3rem);min-width:0} @media(max-width:899px){.rail{position:static}} /* Le filet vertical le long de la colonne, et le segment plein en face de la famille ouverte : c'est la seule marque de la liste. */ .rail-cats{display:flex;flex-direction:column; border-left:1px solid var(--hair);padding-left:1.05rem} .rail-cats a{position:relative;display:block;text-decoration:none;color:var(--soft); font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.3; padding:.36rem 0;transition:color .18s} .rail-cats a::before{content:"";position:absolute;left:-1.05rem;margin-left:-1px; top:0;bottom:0;width:2px;background:transparent;transition:background .18s} .rail-cats a::after{content:attr(data-label);display:block;height:0;overflow:hidden; font-weight:700;visibility:hidden;pointer-events:none} .rail-cats a:hover{color:var(--ink)} .rail-cats a.on{color:var(--ink);font-weight:700} .rail-cats a.on::before{background:var(--ink)} @media(max-width:899px){ /* Sur telephone la colonne devient une ligne qu'on pousse du doigt : elle garderait sinon douze familles empilees au-dessus de la premiere piece. */ .rail-cats{flex-direction:row;gap:1.2rem;overflow-x:auto;overscroll-behavior-x:contain; border-left:0;padding-left:0;padding-bottom:.6rem; border-bottom:1px solid var(--hair);-webkit-overflow-scrolling:touch} .rail-cats a{white-space:nowrap;padding:.1rem 0} .rail-cats a::before{left:0;top:auto;bottom:-.62rem;height:2px;width:100%;margin-left:0} } /* PAS DE CHAPEAU AU-DESSUS DE LA PLANCHE. Il portait le compte des pieces puis le nom du rayon — « ( Itms. 268 ) INDOOR » — tous deux retires le 2026-09-06 : la barre des rayons juste au-dessus met deja OUTDOOR en gras, et la colonne de gauche redit ALL OUTDOOR. Trois fois le meme mot pour un seul renseignement, c'etait deux de trop. Ni `.shelfhead` ni `#shelfname` n'existent plus. */ /* ---- la meme barre, sur une fiche produit ---------------------------------- Une fiche ouverte depuis un e-mail ou depuis Google serait un cul-de-sac si le bandeau ne proposait qu'une entree vers tout le fonds : il faudrait repartir de zero pour voir une autre chaise. La barre de la planche est donc reprise ici telle quelle — memes rayons, meme recherche, meme place sous le bandeau — a ceci pres qu'elle ne filtre rien : elle emmene. Et la famille de la piece s'y ecrit, de sorte que la fiche dit ou elle se range. Elle descend AVEC le visiteur : collee sous le bandeau, elle reste sous la main jusqu'au bas de la fiche. Elle est donc posee a meme la page et n'est enveloppee dans rien — `position:sticky` ne colle qu'a l'interieur de son parent, et un parent de la hauteur de la barre ne lui laisse rien a parcourir : enveloppee, elle repartait avec la page des le premier geste. */ .rayons[data-sheet]{margin-bottom:1.5rem} /* La recherche d'une fiche est un vrai formulaire : sans grille sous les yeux il n'y a rien a filtrer au fil de la frappe, et la touche Entree emmene sur la planche avec la recherche deja faite. */ form.search{margin:0} .totop{position:fixed;right:clamp(1rem,3vw,2.2rem);bottom:clamp(1rem,3vw,2.2rem);z-index:35; width:2.7rem;height:2.7rem;border:0;border-radius:999px;background:var(--espresso); color:var(--sand);cursor:pointer;font-size:.95rem;line-height:1; box-shadow:0 14px 30px -18px rgba(28,24,19,.9); opacity:0;pointer-events:none;transform:translateY(7px); transition:opacity .25s,transform .25s,background .25s} .totop.on{opacity:1;pointer-events:auto;transform:none} .totop:hover{background:#332F2B} /* The grid, unruled. The drawn frame and the running number were the catalogue device of the first pass; Marvin dropped both — the pieces are cut out on sand and carry the page on their own, and a number that renumbers itself every time a filter changes tells a buyer nothing. Cell padding alone does the separating now. */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr)); margin-bottom:5rem} .tile{position:relative;text-decoration:none;display:flex;flex-direction:column; border-radius:.5rem;transition:background .25s} .tile:hover{background:rgba(28,24,19,.035)} .tile-media{height:13.5rem;display:flex;align-items:center;justify-content:center; padding:2rem 1.4rem 1rem} .tile-media img{max-height:100%;width:auto;object-fit:contain; transition:transform .35s cubic-bezier(.22,.68,.3,1)} .tile:hover .tile-media img{transform:scale(1.04)} .tile-label{padding:0 1.1rem 1.2rem} /* The house, above the model — the way a trade catalogue is read. It sits over the name rather than in the line of specifications below it, because it is who made the piece and not another attribute of it. */ .tile h3{font-size:1.0625rem;margin-bottom:.15rem;font-weight:400;letter-spacing:-.02em} .tile p{margin:0;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em; text-transform:uppercase;color:var(--faint)} /* Quick selection. A client assembling a shopping list should not have to open fifteen hundred sheets to do it. The button rides on the tile and becomes its own stepper the moment the piece is in: one press to add, the quantity right there afterwards. The sheet stays for anyone who wants the dimensions. This is why the tile is no longer one large : a