/* * site.css — feuille unique du site public. * * Parti pris : fond clair, très peu d'éléments, aucune image en pleine page. * Ce qui doit rester en tête après la visite, ce sont les photographies et les * titres de séries — tout le reste se tient en retrait. * * Les accents gardent la logique du cadre plomb de la note d'intention : le * rubedo signale l'image courante et rien d'autre, l'or la pièce unique. */ :root { /* Fonds — un blanc très légèrement chaud, pas un blanc d'écran */ --fond: #faf9f7; --fond-2: #f2f0ec; --filet: #e2dfda; /* Encre */ --encre: #16161a; /* texte principal */ --plomb: #6b6e75; /* texte secondaire, cartels */ --plomb-pale:#9a9ca1; /* désactivé */ /* Accents — usage strictement réglé */ --rubedo: #9c4a2f; /* image courante, focus */ --or: #8a6a2f; /* la pièce unique uniquement */ /* Les exemplaires d'une édition, et rien d'autre : vert disponible, rouge vendu. Le rouge est tenu à distance du rubedo — ils ne disent pas la même chose, ils ne doivent pas se ressembler. La croix porte le sens à elle seule ; la couleur ne fait que l'appuyer. Le site public ne montre plus de cases (seul le prochain tirage s'écrit, cf. cartel.js) : ces jetons ne servent plus qu'aux cases du back office. */ --dispo: #4f8a5b; --vendu: #b23b3b; /* Le mur de la salle, du haut (près du rail de lumière) au bas. Ni l'un ni l'autre n'est un fond de page : c'est la cimaise, et rien d'autre. */ --mur: #f6f4f0; --mur-bas: #e8e5df; /* * Type — une grotesque géométrique pour tout ce qui nomme, une romane pour * tout ce qui se lit. * * Le site est parti d'un Bodoni et d'un mono hérités d'un autre site * d'artiste. Jost — un Futura de source ouverte — remplace les deux : titres * et cartels sont désormais de la MÊME famille, distingués par le corps, la * casse et l'approche, comme sur un cartel de salle. C'est ce qui donne son * calme à la page : une seule voix pour nommer. * * Spectral reste pour les textes suivis — note d'intention, biographie : une * grotesque tient mal sur quatre paragraphes. * * Le back office, lui, garde ses fontes (cf. admin.css) : on y lit des noms * de fichiers, pas une identité. */ --display: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif; --lecture: 'Spectral', Georgia, serif; --cartel: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif; --t-xs: 0.6875rem; --t-sm: 0.8125rem; --t-base: 1rem; --t-lg: 1.1875rem; --t-xl: clamp(1.5rem, 2.6vw, 2.25rem); --t-2xl: clamp(2.25rem, 5vw, 4rem); /* 4 rem de gouttière et 75 rem (1200 px) de mesure : les deux valeurs de la maquette. Elles décident de la taille des tirages de l'accueil, qui en occupent la moitié. */ --gouttiere: clamp(1.25rem, 5vw, 4rem); --bande: clamp(3.5rem, 9vh, 7rem); --mesure: 75rem; --transition: 360ms cubic-bezier(0.22, 0.61, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* * Le geste « page précédente » du navigateur part du MÊME balayage horizontal * que la traversée du mur : sur un trackpad, aller de gauche à droite dans la * galerie faisait tressauter le bord de la page pendant que le mur glissait. * * La salle confisque donc le débordement horizontal, et elle seule — ailleurs * sur le site, ce balayage reste un raccourci utile. La classe est posée par * serie.js sur et non sur : c'est la RACINE que la fenêtre lit * pour son débordement, et passer par dépendrait d'une règle de * propagation qu'on n'a pas à supposer. */ html.salle { overscroll-behavior-x: none; } body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--lecture); font-size: var(--t-base); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--rubedo); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* * L'apparition — la seule animation de l'accueil. * * Un bloc monte d'un cheveu en arrivant à l'écran, lentement, une fois. La * classe `apparait` est posée par le script : sans JavaScript, rien n'est * jamais caché. La règle globale de `prefers-reduced-motion` ramène la durée à * zéro, et le script n'observe même pas dans ce cas. */ .apparait { opacity: 0; transform: translateY(1.25rem); transition: opacity 1100ms ease, transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--retard, 0ms); } .apparait.est-la { opacity: 1; transform: none; } /* Un titre que seuls les lecteurs d'écran et les moteurs entendent. La page d'accueil n'écrit plus le nom en grand — elle doit tout de même en porter un, et l'écrire à l'image reviendrait à répéter l'en-tête. */ .hors-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Le filet court d'une gouttière à l'autre, à l'aplomb du contenu : une simple bordure sur l'en-tête déborderait de la largeur du texte. */ .filet-page { max-width: var(--mesure); margin: 0 auto; padding: 0 var(--gouttiere); } .filet-page::before { content: ''; display: block; height: 1px; background: var(--filet); } .evitement { position: absolute; left: -9999px; top: 0; background: var(--encre); color: var(--fond); padding: 0.75rem 1rem; z-index: 100; } .evitement:focus { left: 0; } /* ------------------------------------------------------------------ */ /* Registres typographiques */ /* ------------------------------------------------------------------ */ .display { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.012em; line-height: 1.08; text-wrap: balance; margin: 0; } /* Le registre du cartel de musée : capitales espacées, chiffres alignés. */ .cartel { font-family: var(--cartel); font-size: var(--t-xs); letter-spacing: 0.15em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--plomb); } .lecture { max-width: 62ch; font-size: var(--t-lg); line-height: 1.75; color: #3a3a40; } .lecture p { margin: 0 0 1.4em; } .lecture em { color: var(--encre); font-style: italic; } /* ------------------------------------------------------------------ */ /* En-tête */ /* ------------------------------------------------------------------ */ .entete { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; max-width: var(--mesure); margin: 0 auto; padding: clamp(1.6rem, 4vh, 2.75rem) var(--gouttiere) clamp(1.4rem, 3vh, 2.25rem); } /* Le nom porte l'identité de la page à lui seul : capitales, approche large, graisse légère. C'est une signature gravée, pas un logotype. */ .entete__nom { font-family: var(--display); font-weight: 300; font-size: clamp(0.95rem, 1.4vw, 1.05rem); letter-spacing: 0.16em; text-transform: uppercase; } /* * `auto` à gauche : la navigation reste à sa place quelle que soit la longueur * du nom, plutôt que de glisser au bord opposé. * * Elle s'enroule, et ce n'est pas une précaution de principe : la quatrième * entrée (« Films ») a porté la rangée à 360 px pour 280 px disponibles sur un * écran de 320 — toute la page débordait alors vers la droite. `flex-end` pour * que la seconde ligne reste alignée à droite, avec la première. */ .entete__nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem clamp(1rem, 3vw, 2.25rem); margin-left: auto; } .entete__lien { font-family: var(--cartel); font-size: var(--t-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--plomb); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color var(--transition), border-color var(--transition); } .entete__lien:hover { color: var(--encre); } .entete__lien[aria-current='page'] { color: var(--encre); border-bottom-color: var(--rubedo); } /* L'icône n'est pas un lien de navigation : elle ne prend ni le filet du bas, ni la place d'un mot. */ .entete__insta { display: flex; padding-bottom: 0; border-bottom: 0; margin-left: -0.5rem; } /* ================================================================== */ /* ACCUEIL */ /* ================================================================== */ /* * L'accueil ne porte plus le nom en grand : il est dans l'en-tête, écrit une * fois. Ce qui ouvre la page est une photographie et le titre de sa série. Sur * le site d'un photographe, l'image entre la première. * * Trois partis sont repris du site dont celui-ci est issu, et ils sont * délibérés : * - de GROS visuels : le tirage de tête occupe la moitié de la mesure et * presque toute la hauteur de l'écran ; * - toutes les images au MÊME rapport 3/4, quitte à rogner ; * - le nom d'une série ne s'inscrit sur sa couverture qu'AU SURVOL. * Ils prennent le pas sur les habitudes du site d'origine — voir CLAUDE.md. */ .accueil { max-width: var(--mesure); margin: 0 auto; padding: 0 var(--gouttiere) var(--bande); } /* La cible du lien d'évitement : on y saute, on ne l'encadre pas. */ .accueil:focus { outline: none; } /* * Le rapport de TOUTES les images de l'accueil. * * Un seul rapport pour toute la page : c'est lui qui fait la grille, et une * grille aux hauteurs inégales ne serait plus une grille. Le prix est un * rognage — un paysage 3/2 perd la moitié de sa largeur. Il se paie au moment * du CHOIX DE COUVERTURE (`couverture` dans data.js, réglable au back office) : * une série au cadrage large se donne une couverture en hauteur. */ .accueil { --rapport: 3 / 4; } /* --- La série principale -------------------------------------------- */ .avant { padding-top: clamp(2rem, 5vh, 3rem); } /* Une règle d'auteur bat la feuille du navigateur. `.avant` n'a pas de `display` aujourd'hui ; la règle reste — la faute a déjà coûté cinq fois, cf. CLAUDE.md § pièges. */ .avant[hidden] { display: none; } /* `flex-end` : le titre s'assoit sur le bas du tirage. C'est l'aplomb de la maquette, et c'est ce qui tient la double page. */ .mise { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem clamp(1.75rem, 4vw, 3rem); } /* * La moitié de la mesure, et presque toute la hauteur de l'écran. * * `max-width` plutôt qu'un `max-height` : à rapport fixe, borner la hauteur * sans borner la largeur laisserait des bandes de fond de part et d'autre du * tirage. Le plafond est haut — il ne mord que sur un écran court, où il évite * qu'on ne voie jamais le bas de l'image. */ .mise__cadre { --haut: min(88vh, 46rem); flex: 0 1 calc(50% - 1.25rem); max-width: calc(var(--haut) * 3 / 4); aspect-ratio: var(--rapport); background: var(--fond-2); overflow: hidden; } .mise__cadre img, .mise__cadre canvas { width: 100%; height: 100%; object-fit: cover; object-position: center; /* Une pointe de désaturation au repos, la couleur pleine à l'approche : le tirage s'allume quand on va vers lui. C'est le seul traitement d'image du site, et il vient de la maquette. */ filter: saturate(0.92); transition: transform 2000ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 900ms ease; } @media (hover: hover) { .mise:hover .mise__cadre img { transform: scale(1.02); filter: saturate(1); } } .mise__texte { flex: 1 1 16rem; min-width: 0; padding-bottom: 0.5rem; } /* * Le titre de SÉRIE, en capitales et en grand, et une seule ligne de cartel * sous lui : année et procédé. Rien d'autre — pas d'accroche, pas d'effectifs, * pas de « entrer dans la série ». L'accueil montre et nomme ; c'est le seuil * de la série qui explique. */ .mise__titre { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: 0.02em; text-transform: uppercase; transition: color var(--transition); } @media (hover: hover) { .mise:hover .mise__titre { color: var(--rubedo); } } .mise__reperes { margin: 0.75rem 0 0; color: var(--plomb-pale); } @media (max-width: 47.99rem) { /* Sur un téléphone, l'image passe pleine largeur et le texte dessous. */ .mise__cadre { --haut: min(72vh, 30rem); flex: 1 1 100%; max-width: 100%; } } /* --- Les séries, en couvertures ------------------------------------- */ /* * `minmax(0, 1fr)` et non `1fr` : le minimum `auto` d'une colonne vaut son * contenu le plus long et pousse la page hors de l'écran d'un téléphone. * * Deux colonnes FIXES, jamais `auto-fit` : avec une seule série restante, une * piste qui s'effondre donnerait une couverture large de toute la mesure. */ .series { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vh, 3rem); align-items: start; margin-top: clamp(2.5rem, 7vh, 3.5rem); padding-top: clamp(2.5rem, 7vh, 3rem); border-top: 1px solid var(--filet); } /* Cf. CLAUDE.md § pièges : sans ceci, `hidden` resterait sans effet. */ .series[hidden] { display: none; } /* Sans mise en avant, la grille suit directement le filet de l'en-tête : un second filet à trois centimètres du premier ne sépare plus rien. */ .avant[hidden] + .series { margin-top: 0; padding-top: clamp(2rem, 5vh, 3rem); border-top: 0; } @media (min-width: 42rem) { .series { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vh, 3rem) clamp(1.5rem, 2.5vw, 2.5rem); } } .carte { display: block; } .carte__cadre { position: relative; width: 100%; aspect-ratio: var(--rapport); background: var(--fond-2); overflow: hidden; } .carte__cadre img, .carte__cadre canvas { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1800ms cubic-bezier(0.22, 0.61, 0.36, 1); } @media (hover: hover) { .carte:hover .carte__cadre img { transform: scale(1.03); } } /* * Le nom de la série est ÉCRIT SUR sa couverture, et il s'efface à l'approche : * on lit d'abord de quoi il s'agit, puis la photographie reste seule le temps * qu'on la regarde. Le voile qui le porte est un dégradé, pas un écran : il * assombrit le pied du tirage, jamais le sujet. * * Il n'y a rien à cacher au doigt ni à la tabulation : posé d'emblée, il n'a * pas besoin de repli — c'est l'effacement qui demande une souris, et son * absence ne retire rien. */ .carte__voile { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(1rem, 2.5vw, 1.6rem); background: linear-gradient(to top, rgba(22, 22, 26, 0.62) 0%, rgba(22, 22, 26, 0.12) 45%, rgba(22, 22, 26, 0) 75%); opacity: 1; transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1); } @media (hover: hover) { /* Une série vide garde son nom : il n'y a pas de photographie à découvrir dessous, et l'effacer ne laisserait qu'un rectangle gris sans légende. */ .carte:not(.carte--vide):hover .carte__voile { opacity: 0; } } /* À la tabulation, le nom reste : le focus n'est pas un coup d'œil, c'est une position — le lien doit dire où il mène tant qu'on est dessus. */ .carte:focus-visible .carte__voile { opacity: 1; } .carte__titre { color: var(--fond); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.15; letter-spacing: 0.07em; text-transform: uppercase; } /* * L'emplacement se tient en retrait, et son nom ne s'efface pas : il n'y a * rien à découvrir dessous. * * ⚠️ Plus aucune SÉRIE ne porte cette classe — une série sans photographie a * quitté l'accueil (cf. `dessinerSeries`). Elle ne sert plus qu'aux PROJETS * de `films.html`, qui gardent leur place en retrait parce que cette liste EST * le catalogue des projets : en retirer un le rendrait introuvable. La règle * est dans accueil.js et films.js, pas ici — la feuille ne fait que la vêtir. */ .carte--vide .carte__voile { background: none; } .carte--vide .carte__titre { color: var(--plomb); } .carte--vide .carte__cadre img, .carte--vide .carte__cadre canvas { opacity: 0.45; } /* ================================================================== */ /* FILMS */ /* ================================================================== */ /* * LA LISTE DES PROJETS — la même grille que les séries sur l'accueil : des * couvertures sur deux colonnes, le nom écrit dessus et effacé au survol. Le * site n'a qu'une seule façon de présenter un ensemble, qu'il s'agisse de * photographies ou de films, et un visiteur qui a compris l'accueil a compris * cette page. D'où la réutilisation de `.carte` telle quelle, et du rapport 3/4. * * ⚠️ Rien ne se lit ici : cliquer un projet mène à projet.html?p=. La * page a longtemps porté les affiches en 16/9 avec un bouton « Lire ». */ .projets { --rapport: 3 / 4; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vh, 3rem); align-items: start; } /* Cf. CLAUDE.md § pièges : sans ceci, `hidden` resterait sans effet. */ .projets[hidden] { display: none; } @media (min-width: 42rem) { .projets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vh, 3rem) clamp(1.5rem, 2.5vw, 2.5rem); } } .films__vide, .accueil__vide { color: var(--plomb); margin: 0; } /* * LA PAGE D'UN PROJET : les vidéos, puis les photographies. Un ordre fixe, qui * évite de mêler deux rapports dans une même grille — le 16/9 du cinéma et le * rapport variable des tirages ne font pas une grille, seulement une suite de * hauteurs qui se contredisent. * * Le lecteur de l'hébergeur ne se charge qu'au clic (cf. projet.js). Ce qu'on * voit tant qu'on n'a rien demandé est une image du dépôt, servie par le site : * aucune requête vers un tiers, aucun traceur posé d'office. */ .projet__retour { margin: 0 0 0.9rem; } .projet__reperes { margin: 0.7rem 0 0; color: var(--plomb-pale); } .projet__note { margin: 1.1rem 0 0; max-width: 52ch; color: var(--plomb); } .projet__vide { color: var(--plomb); margin: clamp(2rem, 5vh, 3rem) 0 0; } .projet__videos { display: grid; gap: clamp(2rem, 6vh, 3.5rem); margin-top: clamp(2.5rem, 7vh, 4rem); } .projet__videos[hidden] { display: none; } /* * La galerie du projet. `auto-fill` et non `auto-fit` : à deux images, on veut * deux colonnes de largeur normale, pas deux colonnes étirées sur tout l'écran. * `align-items: start` laisse chaque image à SA hauteur — c'est le prix, et le * mérite, de ne rien rogner. */ .projet__galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.5rem, 4vh, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); align-items: start; margin-top: clamp(2.5rem, 7vh, 4rem); padding-top: clamp(2.5rem, 7vh, 3rem); border-top: 1px solid var(--filet); } .projet__galerie[hidden] { display: none; } /* Sans vidéo, la galerie ouvre la page : le filet n'a rien à séparer. */ .projet__videos[hidden] + .projet__galerie { border-top: 0; padding-top: 0; } .vue { margin: 0; } /* Le cadre prend le rapport du fichier (`--ratio`, posé par le script au chargement) : la place est réservée avant l'arrivée de l'image, et RIEN N'EST ROGNÉ — on montre les photographies d'un projet, pas des vignettes. */ .vue__cadre { display: block; width: 100%; aspect-ratio: var(--ratio, 1.5); padding: 0; background: var(--fond-2); border: 0; cursor: zoom-in; overflow: hidden; } .vue__cadre img, .vue__cadre canvas { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--transition); } @media (hover: hover) { .vue__cadre:hover img { opacity: 0.88; } } .vue__legende { margin: 0.6rem 0 0; color: var(--plomb); } /* Une bande : le cadre, et sous lui le titre s'il y en a un. C'est un `

` — d'où `margin: 0`, que le navigateur pose autrement (1em 40px), et qui décalerait toutes les vidéos vers la droite. */ .film { display: block; margin: 0; } /* * Le 16/9 est le rapport du cinéma, pas celui des tirages : ici, il est celui * de l'œuvre — un film recadré en 3/4 n'est plus le film. La largeur se déduit * de la hauteur maximale, comme sur l'accueil, pour que la bande ne dépasse * jamais l'écran sans laisser de bandes noires autour de l'affiche. */ .film__cadre { --haut: min(70vh, 38rem); position: relative; width: min(100%, calc(var(--haut) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--fond-2); overflow: hidden; } .film__cadre img, .film__cadre canvas { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Le lecteur prend toute la place du cadre : il en a exactement le rapport. La vidéo déposée est en `contain` et non en `cover` : un film n'est pas toujours en 16/9, et le rogner serait le recadrer. */ .film__cadre--lecture, .film__cadre.est-en-lecture { background: var(--encre); } .film__cadre iframe, .film__cadre video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .film__cadre video { object-fit: contain; background: var(--encre); } /* Le titre d'une vidéo déposée, sous sa bande. Une vidéo d'hébergeur n'en a pas : son titre est chez lui, et le redire ici le ferait vieillir. */ .film__legende { margin: 0.7rem 0 0; color: var(--plomb); } /* * Le déclencheur recouvre l'affiche entière : sur une image de cette taille, * viser un petit bouton central serait une épreuve. Bouton ou lien selon qu'on * lit ici ou chez l'hébergeur — la feuille ne les distingue pas, seul le verbe * change. */ .film__lecture { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.9rem; /* Le voile éclaircit à peine l'image ; il est là pour que le triangle tienne sur une affiche claire, pas pour masquer la photographie. */ background: rgba(22, 22, 26, 0.2); border: 0; padding: 0; font: inherit; color: var(--fond); cursor: pointer; transition: background var(--transition); /* Une affiche peut être claire — un ciel, une page blanche — et le voile est volontairement léger. L'ombre portée tient le contraste sans qu'on ait à assombrir la photographie : c'est elle qu'on est venu voir. */ text-shadow: 0 1px 10px rgba(22, 22, 26, 0.55); } @media (hover: hover) { .film__lecture:hover { background: rgba(22, 22, 26, 0.34); } } .film__triangle { width: 4.25rem; height: 4.25rem; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; /* Le cercle est une bordure, pas du texte : `text-shadow` ne l'atteint pas. */ filter: drop-shadow(0 1px 8px rgba(22, 22, 26, 0.5)); transition: transform var(--transition); } /* Le triangle est dessiné en bordures : pas d'image à charger pour une forme de six pixels, et il suit la couleur du texte. Décalé d'un cheveu à droite, sans quoi un triangle paraît toujours trop à gauche dans son cercle. */ .film__triangle::before { content: ''; border-style: solid; border-width: 0.55rem 0 0.55rem 0.9rem; border-color: transparent transparent transparent currentColor; margin-left: 0.2rem; } @media (hover: hover) { .film__lecture:hover .film__triangle { transform: scale(1.06); } } .film__verbe { color: inherit; } .film__texte { margin-top: 1.25rem; } .film__titre { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; } .film__reperes { margin: 0.6rem 0 0; color: var(--plomb-pale); } .film__note { margin: 0.9rem 0 0; max-width: 52ch; color: var(--plomb); } /* ------------------------------------------------------------------ */ /* Pages de texte */ /* ------------------------------------------------------------------ */ .page { max-width: var(--mesure); margin: 0 auto; padding: clamp(2rem, 6vh, 4rem) var(--gouttiere) var(--bande); } .page__titre { font-size: var(--t-2xl); margin-bottom: clamp(2rem, 6vh, 3.5rem); max-width: 14ch; } .page__grille { display: grid; gap: clamp(1rem, 4vw, 3rem); grid-template-columns: 1fr; } /* Une règle d'auteur bat la feuille du navigateur : sans ceci, `hidden` sur une section de contact resterait sans effet. Cf. CLAUDE.md § pièges. */ .page__grille[hidden] { display: none; } @media (min-width: 56rem) { .page__grille { grid-template-columns: 14rem 1fr; } } .page__section + .page__section { margin-top: clamp(2.5rem, 7vh, 4rem); } .page__soustitre { font-family: var(--cartel); font-size: var(--t-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--plomb); margin: 0; padding-top: 0.55rem; border-top: 1px solid var(--filet); } .liste-nue { list-style: none; margin: 0; padding: 0; } /* minmax(0, 1fr) et non 1fr : le minimum `auto` d'une colonne vaut son contenu le plus long, et pousse la page hors de l'écran d'un téléphone. */ .def { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: 0.4rem 1.5rem; margin: 0; } .def dt { font-family: var(--cartel); font-size: var(--t-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--plomb); padding-top: 0.35em; } .def dd { margin: 0; color: #3a3a40; } .lien-souligne { border-bottom: 1px solid var(--plomb-pale); transition: border-color var(--transition), color var(--transition); } .lien-souligne:hover { border-color: var(--rubedo); color: var(--rubedo); } .a-faire { border-left: 2px solid var(--rubedo); padding: 0.75rem 0 0.75rem 1.25rem; color: var(--plomb); font-family: var(--cartel); font-size: var(--t-sm); letter-spacing: 0.03em; line-height: 1.6; } /* ------------------------------------------------------------------ */ /* Pied de page */ /* ------------------------------------------------------------------ */ .pied { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; max-width: var(--mesure); margin: 0 auto; padding: 1.75rem var(--gouttiere) 2.5rem; border-top: 1px solid var(--filet); } /* La rangée de service : la signature à gauche, l'entrée du back office à droite, sur leur propre ligne sous les mentions de l'artiste. Elles s'enroulent l'une sous l'autre quand la place manque — ⚠️ AUCUN ` ` ici : un pied insécable de 398 px avait déjà poussé le téléphone hors de l'écran (cf. CLAUDE.md § 8). */ .pied__bas { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.35rem 2rem; justify-content: space-between; align-items: baseline; } /* Les deux dans le gris le plus pâle du site : discrètes, pas cachées — on les trouve quand on les cherche. */ .pied__signature, .pied__admin { color: var(--plomb-pale); } .pied__admin { /* Elle reste à droite même enroulée sur sa propre ligne : `space-between` ne place que la première rangée, un second élément retombé irait à gauche et les deux mentions se liraient comme une liste. */ margin-left: auto; transition: color var(--transition); } .pied__admin:hover { color: var(--plomb); } /* ================================================================== */ /* VISIONNEUSE */ /* ================================================================== */ /* * Deux rangées : l'en-tête de série DANS le flux, puis la scène. L'en-tête ne * peut donc jamais recouvrir l'image — le voile sur le haut des œuvres était * un défaut constaté en production, pas une hypothèse. */ /* * LA SALLE : un mur, une lumière, et l'œuvre décollée du mur. * * Trois couches, chacune sous le seuil où on la remarquerait seule ; ensemble * elles font une pièce. L'ordre compte : * * 1. La lumière fait le mur, pas la texture. Un mur de galerie est un plâtre * mat, presque lisse — ce qui le fait lire comme surface, c'est la tombée * de la lumière. Le grain (un bruit SVG en `data:`, aucune ressource * tierce) est à 7 % : on le sent, on ne le voit pas. Plus fort, il se * battrait avec le grain des cyanotypes, qui EST leur matière. * 2. Le spot est DERRIÈRE l'œuvre, jamais dessus : une ellipse claire un peu * au-dessus du centre (la lumière vient du rail, au plafond), qui s'éteint * vers les bords. Le tirage n'est pas touché — aucun dégradé, aucun filtre * sur la photographie. On éclaire la salle, pas l'image. Fixé à la fenêtre * pendant que le mur glisse, il fait passer les œuvres dans la lumière. * 3. L'ombre (sur `.oeuvre__cadre`) dit la distance au mur — et elle suit * le parallaxe : quand le tirage penche, elle se déplace. C'est ce qui * fait d'une inclinaison un objet, et non un effet. * * `isolation: isolate` : le spot est un `::before` en `z-index: -1`, et sans * contexte d'empilement propre il passerait SOUS le mur lui-même. */ .visionneuse { height: 100svh; display: grid; grid-template-rows: auto 1fr; overflow: hidden; position: relative; isolation: isolate; --spot: 1; background: url("data:image/svg+xml;utf8,") 0 0 / 180px 180px, linear-gradient(180deg, var(--mur) 0%, var(--mur-bas) 100%); } .visionneuse::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* Un peu plus haut et plus franc depuis que le tirage porte une ombre : la lumière vient du rail, et c'est elle qui justifie que l'ombre parte vers le bas. */ background: radial-gradient(ellipse 78% 70% at 50% 34%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 70%); opacity: var(--spot); transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Sur le seuil, les vues de l'exposition et la fin, rien à éclairer : le spot s'éteint, le mur reste. */ body.est-au-seuil .visionneuse, body.est-en-exposition .visionneuse, body.est-a-la-fin .visionneuse { --spot: 0; } .scene { position: relative; min-height: 0; margin: 0; display: grid; /* En étroit, deux rangées : le mur, puis le cartel. En large, le cartel et le pavé se posent SUR le mur (cf. plus bas) et le mur prend tout. */ grid-template-rows: 1fr auto; gap: 1.25rem; padding: 0.75rem clamp(2rem, 7vw, 6rem) 1.5rem; /* Le glissement horizontal appartient au mur ; le défilement vertical de la page reste au navigateur. */ touch-action: pan-y; } /* ------------------------------------------------------------------ */ /* La cimaise : le mur, les œuvres, les cadres plomb */ /* ------------------------------------------------------------------ */ /* * Le voile clippe le mur et porte la perspective : les inclinaisons des * œuvres (parallaxe, traversée) prennent leur profondeur ici. */ .scene__voile { min-height: 0; height: 100%; overflow: hidden; position: relative; perspective: 1600px; } .mur { display: flex; height: 100%; transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Pendant que le doigt tient le mur, il suit sans inertie. */ .mur.est-tenu { transition: none; } /* * La traversée : au glissement, le mur respire légèrement — rien de plus. Le * flou de pose longue a été retiré : l'écho était joli en principe, mais il * brouillait la photographie au moment précis où on la découvre, et une œuvre * ne doit jamais être moins nette que le tirage. * * L'animation reste, et son NOM aussi : le JS retire `est-en-mouvement`, * `va-droite` et `va-gauche` sur son `animationend`. Sans elle, l'inclinaison * resterait figée de travers pour toujours. */ .mur.est-en-mouvement { animation: traversee 700ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } @keyframes traversee { 0% { opacity: 1; } 45% { opacity: 0.92; } 100% { opacity: 1; } } /* L'œuvre s'incline légèrement dans le sens du passage, comme quand on la dépasse en marchant. Retour à plat en fin de course. */ .mur.va-droite .oeuvre__accroche { --ry: 2.2deg; } .mur.va-gauche .oeuvre__accroche { --ry: -2.2deg; } /* Tout ce que porte le mur occupe un écran plein, œuvre ou texte de salle. */ .creneau { flex: 0 0 100%; min-width: 0; } .oeuvre { position: relative; display: grid; place-items: center; /* Conteneur de taille : le cadre se mesure en cqw/cqh, ce qui évite toute chaîne de pourcentages fragile (piège déjà payé). */ container-type: size; /* La marge du bas est la PLACE DE L'OMBRE : le voile clippe tout ce qui dépasse du mur, et une ombre coupée net par le bas se lit comme une ligne — c'est l'une des deux démarcations déjà payées (cf. `.oeuvre__cadre`). L'ombre porte au plus 8 % de la largeur du tirage sous lui. */ padding: 0.5rem 0 2.5rem; } .oeuvre__accroche { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1); transform-style: preserve-3d; } /* * L'emplacement de l'œuvre. * * PAS DE CADRE : ni bande, ni fond. Le tirage est posé nu sur le mur, et c'est * l'échelle et le blanc autour qui font l'accrochage. Le site d'origine * dessinait un encadrement en plomb ; il n'a rien à voir avec ce travail-ci, * et tout cadre inventé se serait mis entre le visiteur et l'image. * * L'élément reste : il porte le rapport (--ratio), posé par serie.js au * chargement, qui réserve la place exacte du tirage avant qu'il n'arrive. * * C'EST UN BOUTON (`