/* ===================================================================== COULEUR D'AZUR — ACCUEIL, COUCHE CINÉMATIQUE --------------------------------------------------------------------- Cette feuille porte la mise en scène de l'accueil. Elle se charge APRÈS accueil.css et ne se bat avec elle sur aucun sélecteur : tout ce qui est écrit ici porte le préfixe `.ci-`. accueil.css continue de fournir le socle — la palette `--ac-*`, le canevas `.ac-gl`, le filet de progression — et c'est désormais tout ce qu'on lui demande. CE QUI CHANGE, ET POURQUOI. L'ancien accueil était une PILE : cinq sections de même hauteur et de même rythme, chacune avec son œil, son titre, son filet et sa colonne de texte. Chaque écran annonçait le suivant, aucun ne se passait. Une page ainsi faite se lit comme un sommaire : on la descend en diagonale. Celui-ci est un MONTAGE. Six mouvements de durées inégales, et deux principes qui ne changent pas : 1. LE DÉFILEMENT EST LE CHEF OPÉRATEUR. Presque rien n'apparaît plus « à l'entrée dans le cadre » — ce geste-là, une fois déclenché, se joue tout seul et se termine sans nous. Ici les plans sont MONTÉS SUR LA COURSE : la molette avance l'image, et elle la recule. C'est la différence entre une page qui s'anime et une page qu'on manœuvre, et c'est toute la sensation qu'on cherchait. 2. ON NE TOUCHE PAS AUX TOILES. Aucun filtre, aucune déformation, aucune distorsion de shader sur une œuvre : cette leçon-là est déjà payée (voir le long commentaire dans accueil-gl.js). La matière est mise AUTOUR — le grain du papier, les masques qui découvrent, l'inertie du travelling — jamais DEDANS. Une œuvre est toujours montrée entière, nette, à son rapport. LE PROTOCOLE DES PROGRESSIONS. `accueil-cine.js` n'écrit aucun style : il écrit un seul nombre par mouvement, `--p`, entre 0 et 1, qui dit où l'on en est dans la course de ce mouvement. Tout le dessin est ici, en CSS, en fonction de ce nombre. C'est ce qui permet de régler un plan sans rouvrir le JavaScript — et c'est ce qui fait que sans JavaScript la page tient : `--p` garde alors sa valeur par défaut, l'état de repos, et tout est visible. TROIS FILETS DE SÉCURITÉ. — Sans JavaScript : la classe `ci-on` n'est jamais posée, les états masqués ne s'appliquent pas, la page est entière et lisible. — `prefers-reduced-motion` : les courses sont annulées, les sections reprennent une hauteur normale, plus rien ne bouge. — Sans WebGL : le fond de pigment laisse la place au dégradé fixe déjà prévu par accueil.css. Rien à écrire ici. ===================================================================== */ .ac{ /* --- Le rythme du montage --------------------------------------- `--ci-marge` est la marge de page ; elle vaut volontairement la même chose que `--ac-marge` pour que les deux couches s'alignent. `--ci-course` est l'unité de temps du montage : la longueur de défilement que coûte un plan. Tout est exprimé en multiples de celle-là, de sorte qu'accélérer ou ralentir la page entière tient dans un seul nombre. */ --ci-marge:clamp(20px,5vw,110px); --ci-course:100vh; /* L'encre de la couche. On reprend la palette du papier — ce n'est pas une seconde charte, c'est la même vue de plus près. */ --ci-encre:var(--ac-encre,#0d1117); /* LE TEXTE SECONDAIRE N'EST PLUS GRIS. #333d48 est un gris d'encre fait pour du papier blanc : il y vaut 4,8:1, largement au-dessus du seuil, et il donne au texte courant la douceur qu'on attend d'un document. Sur la nappe, il n'a plus ce papier sous lui — il tombe à 1,34:1 sur les zones denses, quand l'encre pleine, elle, tient encore à 2,3. On perd la nuance de gris qui distinguait le texte courant des titres. Ce n'est pas une perte réelle : sur cette page la hiérarchie est portée par le CORPS et la GRAISSE — quarante pixels de gras contre quinze de romaine — et une nuance de gris n'y ajoutait qu'une lisibilité en moins. */ --ci-encre-2:var(--ac-encre,#0d1117); --ci-bleu:var(--ac-bleu,#004aad); --ci-papier:var(--ac-papier,#fff); --ci-trait:var(--ac-trait,rgba(13,17,23,.14)); /* La courbe du montage. Une seule, partout : deux courbes différentes dans une même page se remarquent sans qu'on sache les nommer. */ --ci-courbe:cubic-bezier(.22,1,.36,1); } /* ===================================================================== LE GRAIN — la seule matière posée sur toute la page --------------------------------------------------------------------- Sur du blanc, une page sans grain est une page en PDF : plate, sans épaisseur, et toutes les images y paraissent collées. Un bruit très faible en fusion `multiply` rend au fond son grain de papier, et c'est lui qui fait que les toiles ont l'air POSÉES dessus plutôt que détourées dedans. Il est produit par un `feTurbulence` en SVG, donc sans requête et sans fichier. Il se déplace par sauts (`steps`) et non en continu : un grain qui glisse est un voile sale, un grain qui saute est du film. L'opacité est à trois pour cent — au-delà, ce n'est plus du grain, c'est de la poussière. ===================================================================== */ .ac > .ci-grain{ /* ═══ LE DÉBORD ÉTAIT DE LA MOITIÉ DE L'ÉCRAN, POUR SEPT PIXELS ═══ `inset:-50%` faisait du grain une surface de QUATRE FOIS l'écran, composée à chaque image avec un mode de fusion, par-dessus un canevas WebGL plein cadre. Or il ne se déplace que de sept pixels dans son animation : il lui faut de quoi ne pas découvrir ses bords, pas un demi-écran de chaque côté. Vingt pixels suffisent, et l'on divise par quatre la surface à composer — sur tous les appareils, et surtout sur ceux qui n'ont pas de marge. */ position:fixed;inset:-20px;z-index:2; pointer-events:none; opacity:.032; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); background-size:220px 220px; animation:ci-grain 900ms steps(3) infinite; will-change:transform; } @keyframes ci-grain{ 0% {transform:translate3d(0,0,0)} 33% {transform:translate3d(-7px,4px,0)} 66% {transform:translate3d(5px,-6px,0)} 100%{transform:translate3d(0,0,0)} } /* ===================================================================== LES REPÈRES — où l'on en est dans le film --------------------------------------------------------------------- Une page en six mouvements dont quatre sont collants ne dit pas sa longueur : la barre de défilement devient courte, chaque plan dure, et l'on ne sait plus si l'on est au début ou à la fin. Six traits dans la marge le disent, et le trait courant s'allonge. Ce n'est pas une navigation : les traits ne sont pas cliquables et ne sont pas dans le parcours clavier — le menu du site, lui, l'est. Les ajouter au parcours obligerait à traverser six ancres muettes avant d'atteindre le premier lien utile. ===================================================================== */ .ac > .ci-reperes{ position:fixed;z-index:60; left:max(14px,calc(var(--ci-marge) * .34)); top:50%;transform:translateY(-50%); display:flex;flex-direction:column;gap:12px; pointer-events:none; opacity:0;transition:opacity .6s var(--ci-courbe) .4s; } .ci-on .ci-reperes{opacity:1} .ci-repere{ display:block;width:1px;height:26px; background:var(--ci-trait); transform-origin:50% 0; transition:background .45s var(--ci-courbe),transform .45s var(--ci-courbe); } .ci-repere.est-la{background:var(--ci-bleu);transform:scaleY(1.65)} @media (max-width:1100px){.ac > .ci-reperes{display:none}} /* ===================================================================== MOUVEMENT 00 — L'OUVERTURE --------------------------------------------------------------------- UN PLAN QUI RECULE, SUR DE LA PEINTURE. CE QUI A ÉTÉ JETÉ, ET CE QUE ÇA APPREND. Le premier écran montrait une photographie d'Antibes, avec le nom de la maison en très grand par-dessus, centré, en encre noire. Trois fautes dans une seule image, et elles s'appelaient l'une l'autre : 1. LA PHOTOGRAPHIE DISAIT « OFFICE DE TOURISME ». Une vue de remparts et de mer turquoise est belle et ne dit rien du métier. La première chose que doit montrer une galerie de peinture, c'est de la PEINTURE — pas le paysage qui l'a inspirée. On avait le sujet à la place de l'œuvre. 2. LE NOM ÉTAIT ÉCRIT DEUX FOIS. Le logo le porte déjà, en haut à gauche, sur toutes les pages. Le répéter au centre de l'écran en deux cents pixels de haut n'ajoute pas une information : cela dépense le seul écran qu'on est sûr que tout le monde regarde pour redire ce qui est déjà lisible à quarante centimètres de là. 3. LE VOILE BLANC SE VOYAIT. Il n'était là que parce que le titre était NOIR : sur une photographie claire et chargée, il fallait éclaircir le fond pour que l'encre tienne. On corrigeait donc un défaut par un autre, et le second se remarquait plus que le premier — la photo paraissait délavée en son milieu. Ces trois-là tombent ensemble dès qu'on change d'image. Sur un mur de peinture — sombre, dense, saturé — le texte passe en BLANC, et il n'y a plus rien à éclaircir : le voile du milieu disparaît, la matière reste entière. CE QUI RESTE : LE RECUL. L'image occupe l'écran entier, puis se rétracte vers une plaque centrée à mesure qu'on descend. C'est le geste qui plaisait, il ne bouge pas. LES DEUX DÉGRADÉS QUI RESTENT, ET POURQUOI EUX. Ils ne touchent plus au milieu de l'image — là où se trouve ce qu'on veut montrer — mais à ses deux bords, et chacun a une raison qui n'est pas esthétique : — EN HAUT, un dégradé vers le papier, sur un sixième de la hauteur. La barre de navigation du site est écrite en encre sombre et son logo est la version foncée ; sur un mur de peinture, l'un et l'autre disparaissent. Plutôt que de dédoubler la logique du logo pour une seule page — deux fichiers qui pilotent le même élément, c'est le conflit qu'on a déjà eu ici — on rend au haut de l'écran le fond clair qu'attend la barre. Elle n'a rien à savoir de cette page. — EN BAS, un dégradé vers l'encre, sur un tiers de la hauteur. C'est le fond du cartel. Il est dense où le texte commence et nul bien avant le milieu. ===================================================================== */ .ci-ouverture{ position:relative; /* LA COURSE A ÉTÉ RACCOURCIE DE MOITIÉ, ET C'ÉTAIT DU VIDE. Elle valait 1,6 écran : on descendait donc près de deux hauteurs de fenêtre avant que la première phrase paraisse. Or tout ce que ce mouvement a à faire est fini bien avant : le titre s'efface à 42 % de la course, le ton encre est entier à 75 %. Le reste n'était pas un temps de lecture, c'était de la molette pour rien — et c'est exactement ce qui se paie sur la page la plus regardée du site. Premier essai à 0,85 : encore trop. Le compte complet, du titre à la phrase entièrement lue, faisait près de trois écrans — parce que le temps perdu n'est pas seulement ici, il est AUSSI dans la course de la phrase, qu'il faut descendre aux trois quarts pour avoir lu ses trois lignes. On raccourcit donc les deux bouts, pas un seul. 0,45 ici : le titre s'efface, le ton encre monte, et la phrase est déjà là. Il n'y a plus un seul moment où l'écran ne montre rien. */ height:calc(100svh + var(--ci-course) * .45); /* `--p` par défaut à 1 : sans JavaScript, le plan est déjà reculé, c'est-à-dire à l'état de repos — une plaque centrée, un cartel lisible dessous. On ne montre jamais un premier écran à moitié monté. */ --p:1; } .ci-ouverture__ecran{ position:sticky;top:0; height:100svh;min-height:540px; overflow:hidden; } /* --- La plaque ------------------------------------------------------ Le rectangle d'image. Ses bords suivent `--p` : à 0 il occupe l'écran entier, à 1 il est une plaque centrée dans la page. On anime l'`inset` d'un `clip-path`, et non la taille de l'image : les pixels de la photographie ne sont jamais rééchantillonnés en cours de route, donc l'image reste nette pendant tout le geste. C'est aussi ce qui permet au navigateur de composer le plan sans repasser par la mise en page. */ .ci-plaque{ position:absolute;inset:0; clip-path:inset( calc(var(--p) * 13svh) calc(var(--p) * 19vw) calc(var(--p) * 13svh) calc(var(--p) * 19vw) ); will-change:clip-path; } .ci-plaque img{ width:100%;height:100%; object-fit:cover;object-position:center 50%; display:block; /* Le recul du plan. L'image est légèrement sur-cadrée au départ et revient à sa taille : c'est un mouvement d'appareil, pas un zoom numérique — l'échelle ne descend jamais sous 1, donc on n'invente jamais de pixel. */ transform:scale(calc(1.14 - var(--p) * .14)); transform-origin:center 50%; will-change:transform; } /* Les deux bords. Voir le long commentaire en tête de section : le haut appartient à la barre de navigation, le bas au cartel. Le milieu de l'image n'est plus touché par rien. Les deux s'effacent avec le recul : une fois la plaque posée sur le papier, la barre a repris son fond clair toute seule, et le cartel est descendu sous l'image, sur du blanc. */ .ci-plaque::after{ content:'';position:absolute;inset:0; background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 7%, rgba(255,255,255,0) 17%), linear-gradient(0deg, rgba(7,13,22,.86) 0%, rgba(7,13,22,.54) 16%, rgba(7,13,22,0) 42%); opacity:calc(1 - var(--p)); pointer-events:none; } /* --- LE CARTEL D'ACCROCHAGE ----------------------------------------- CE QUI REMPLACE LE TITRE. Le premier écran est traité comme une œuvre accrochée : il porte son CARTEL, en bas à gauche, exactement comme les toiles du travelling portent le leur. C'est le vocabulaire du site appliqué à sa propre page d'accueil — et c'est la seule forme de titre qui, ici, apprenne quelque chose. Là où le grand nom centré redisait ce que le logo dit déjà, le cartel répond aux quatre questions qu'on se pose en arrivant : qui peint, ce qu'il peint, ce qu'on peut acheter, et où l'on est. Quatre lignes, un filet, et rien de plus. Aucune n'est un argument de vente ; toutes sont vérifiables. LE NOM DE LA MAISON Y FIGURE, EN PETIT ET EN PREMIER. Il reste le titre de niveau un de la page — un document a un titre, un moteur de recherche le lit, un lecteur d'écran l'annonce — mais il est composé comme l'en-tête d'une étiquette de musée, pas comme une affiche. LE FILET PORTE UNE COULEUR DE LA PEINTURE. Le même geste que sur les cartels du travelling, où il porte la dominante de la toile. Ici il porte l'azur de la maison : c'est le seul endroit du premier écran où la couleur de marque apparaît, et il suffit. ===================================================================== */ /* ===================================================================== PLUS AUCUNE MISE EN PAGE PENDANT LE DÉFILEMENT --------------------------------------------------------------------- Le montage écrit `--p` sur six sections à chaque image. Ce qui coûte n'est pas l'écriture, c'est CE QUE LA FEUILLE EN FAIT. Le cartel du premier écran lisait `--p` dans son `bottom` : bottom: calc(clamp(40px,7svh,78px) + var(--p) * 10svh); transform: translate3d(0, calc(var(--p) * -5svh), 0); `bottom` est une propriété de MISE EN PAGE. La changer soixante fois par seconde oblige le navigateur à refaire, à chaque image, le calcul de position du bloc et de tout ce qu'il contient, puis à le repeindre. `transform`, lui, ne coûte rien : le compositeur déplace une couche déjà peinte, sur le fil graphique, sans repasser par la mise en page. Les deux termes faisaient le MÊME geste — monter le cartel pendant que le plan recule. On les fusionne donc dans le seul `transform` : 10 svh de `bottom` plus 5 svh de translation valent 15 svh de translation. Le mouvement à l'écran est identique au pixel près ; le chemin pour l'obtenir ne traverse plus la mise en page. CE QUI RESTE, ET POURQUOI. Les insets horizontaux (`left`/`right` en 19vw) ne sont pas convertis : ils RESSERRENT la boîte, ils ne la déplacent pas, et une translation ne sait pas faire cela. Ils ne concernent que les compositions « cartel » et « affiche », qui ne sont pas celles en service ; la composition « nappe » a ses deux bords fixes. Sur la page telle qu'elle est publiée, il ne reste donc aucune propriété de mise en page pilotée par `--p`. ===================================================================== */ .ci-ouverture__texte{ position:absolute;z-index:3; /* LE CARTEL SUIT LE BORD DE L'IMAGE, ET IL PART AVANT ELLE. Posé à la marge de la FENÊTRE, il ne bougeait pas pendant que la plaque se rétractait : au tiers du recul, le bord gauche de l'image lui passait au travers, et le nom du peintre se retrouvait à moitié en blanc sur du blanc. Un texte blanc n'a le droit d'exister que par-dessus l'image qui le porte. Ses deux côtés suivent donc EXACTEMENT l'ouverture du clip — mêmes 19vw et mêmes 13svh que la plaque, multipliés par la même progression. Il reste à l'intérieur du cadre quoi qu'il arrive. Et il s'efface trois fois plus vite que le plan ne recule : à un tiers de la course il n'est déjà plus là, bien avant que la plaque ne soit assez petite pour que son cartel y paraisse démesuré. Ce décalage est aussi ce qui donne la profondeur — deux plans d'un décor peint qui ne défilent pas à la même vitesse. */ left:calc(var(--ci-marge) + var(--p) * 19vw); right:calc(var(--ci-marge) + var(--p) * 19vw); bottom:clamp(64px,10svh,104px); transform:translate3d(0,calc(var(--p) * -17svh),0); opacity:calc(1 - var(--p) * 3); will-change:transform,opacity; color:#fff; } .ci-cartouche{display:block} /* L'œil du cartel : le nom de la maison. Petit, espacé, en capitales — la composition d'une étiquette, pas d'un titre. */ .ci-cartouche__maison{ display:block;margin:0 0 clamp(14px,2vh,22px); font-family:'Archivo',system-ui,sans-serif; font-size:clamp(12px,.95vw,15px);font-weight:700; letter-spacing:.34em;text-transform:uppercase; color:rgba(255,255,255,.88); } /* La ligne du peintre. C'est elle qui porte l'échelle : le nom d'un homme, pas celui d'une enseigne. */ .ci-cartouche__nom{ display:block;margin:0; font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:clamp(30px,4.6vw,76px); line-height:.94;letter-spacing:-.035em; color:#fff; /* Le nom ne se replie pas : ses deux lignes sont ÉCRITES dans le gabarit. La borne de 46 caractères du cartel, faite pour du texte courant, vaudrait ici quatre cents pixels et couperait « Jean-Jacques » sur son trait d'union — trois lignes pour deux mots, et un prénom en deux morceaux. On la lève donc pour ce bloc-là. */ max-width:none; } .ci-cartouche__nom small{ display:block;margin-top:.34em; font-family:'Playfair Display',Georgia,serif; font-style:italic;font-weight:400; font-size:clamp(16px,1.5vw,25px); line-height:1.2;letter-spacing:0; color:rgba(255,255,255,.9); } /* Le filet, puis les faits. Sur un cartel de musée, la ligne du dessous dit la technique, le format et l'année ; ici elle dit ce qu'on vend. */ .ci-cartouche__filet{ display:block;height:2px;width:54px; margin:clamp(18px,2.6vh,28px) 0 clamp(13px,1.8vh,18px); background:var(--ci-bleu); } .ci-cartouche__faits{ display:block;margin:0; /* La mesure est posée ICI et nulle part ailleurs. Sur le bloc entier, elle bornait aussi le nom du peintre — trois fois plus gros — et le coupait sur son trait d'union. Une mesure de lecture se donne au texte courant, à qui elle sert ; un nom composé en soixante pixels n'a pas de mesure de lecture. */ max-width:46ch; font-size:clamp(13px,1vw,16px);line-height:1.55; color:rgba(255,255,255,.82); } /* La fenêtre de révélation. Chaque ligne du cartel est enfermée dans un bloc qui coupe, et c'est la ligne qui monte à l'intérieur : on ne voit jamais rien dépasser. Le retard d'une ligne sur l'autre est écrit en CSS (`--r`), pas en JavaScript — une animation d'entrée n'a pas besoin d'être pilotée image par image. */ .ci-fenetre{display:block;overflow:hidden;padding:.02em 0} .ci-fenetre > *{display:block} .ci-on .ci-fenetre > *{ transform:translate3d(0,110%,0); animation:ci-monte 1.15s var(--ci-courbe) forwards; animation-delay:calc(var(--r,0) * 110ms + 120ms); } @keyframes ci-monte{to{transform:translate3d(0,0,0)}} /* --- LA SIGNATURE --------------------------------------------------- La seconde composition, au choix dans le personnalisateur. Le nom de la maison reprend la grande échelle, mais ferré en bas à gauche et en BLANC — pas centré et pas en noir. Deux différences, et c'est la seconde qui compte : en blanc sur une matière sombre, il n'y a plus rien à éclaircir derrière lui. Elle est là pour qui trouve le cartel trop discret. Elle dit moins de choses ; elle les dit plus fort. ===================================================================== */ .ci-ouverture--signature .ci-cartouche__maison{ font-size:clamp(12px,.95vw,15px); color:rgba(255,255,255,.72); margin-bottom:clamp(8px,1.2vh,14px); } .ci-ouverture--signature .ci-titre{ margin:0; font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:clamp(46px,9.6vw,168px); line-height:.84;letter-spacing:-.045em; text-transform:uppercase; color:#fff; white-space:nowrap; } .ci-ouverture--signature .ci-cartouche__filet{width:clamp(80px,12vw,180px)} .ci-ouverture--signature .ci-cartouche__faits{max-width:44ch} /* L'invite à descendre. Elle ne dit pas « défilez » : elle montre une course qui se remplit, ce qui se comprend sans mot et ne demande aucune traduction. Elle s'efface dès que la descente commence — une invite qui reste après avoir été suivie est un reproche. Elle est passée À DROITE. Au centre, elle tombait au milieu de l'image ; dans l'angle, elle ne couvre rien et se trouve là où le regard finit sa course après avoir lu le cartel. */ .ci-descente{ position:absolute;z-index:3; right:var(--ci-marge); bottom:clamp(64px,10svh,104px); /* 19vw de `right` et 13svh de `bottom` deviennent une translation : sur un bloc qui n'a ni largeur ni hauteur imposées, les deux décrivent exactement le même déplacement, pour un coût nul. */ transform:translate3d(calc(var(--p) * -19vw),calc(var(--p) * -13svh),0); display:flex;flex-direction:column;align-items:center;gap:10px; font-family:'Archivo',system-ui,sans-serif; font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase; color:rgba(255,255,255,.82); opacity:calc(1 - var(--p) * 4); pointer-events:none; } .ci-descente i{ display:block;width:1px;height:54px; background:rgba(255,255,255,.3);overflow:hidden;position:relative; } .ci-descente i::after{ content:'';position:absolute;inset:0; background:#fff; animation:ci-goutte 2.1s var(--ci-courbe) infinite; } @keyframes ci-goutte{ 0% {transform:translateY(-100%)} 60% {transform:translateY(100%)} 100%{transform:translateY(100%)} } /* ===================================================================== DEUX AUTRES COMPOSITIONS POUR LE PREMIER ÉCRAN --------------------------------------------------------------------- POURQUOI IL Y EN A PLUSIEURS, ET POURQUOI C'EST UN RÉGLAGE. Cet écran-là ne se décide pas dans un fichier : il se décide devant l'image qu'on y met. Une photographie claire et chargée avale un grand titre ; une matière sombre le porte ; du papier blanc n'en veut aucun. Les quatre compositions ci-dessous répondent chacune à un cas, et le personnalisateur laisse le choix à qui voit la page. CE QUE LES DEUX PREMIÈRES ONT RATÉ, ET CE QU'ON EN RETIENT. « Cartel » et « Signature » posent toutes deux du texte blanc SUR l'image. Elles supposent donc une image sombre, calme et nette — et la seule surface de peinture dont disposait le thème était un recadrage de quatre cents pixels, agrandi cinq fois, dominé par du rouille. Le texte tenait ; l'image, non. Deux leçons : 1. UNE COMPOSITION QUI EXIGE UNE IMAGE QU'ON N'A PAS N'EST PAS UNE COMPOSITION, C'EST UNE DETTE. Les deux qui suivent ne demandent rien d'autre que ce que le thème contient déjà. 2. LE TEXTE ET L'IMAGE N'ONT PAS À SE DISPUTER LE MÊME PIXEL. Dès qu'on les sépare — le texte sur le papier, l'image à côté — il n'y a plus ni voile à poser, ni contraste à rattraper, ni couleur de texte à choisir selon la photographie du jour. Le problème ne se résout pas : il cesse d'exister. ===================================================================== */ /* ===================================================================== COMPOSITION « DIPTYQUE » — l'image se retire, le papier s'ouvre --------------------------------------------------------------------- L'ARRIVÉE NE PORTE AUCUN TEXTE. L'écran s'ouvre sur la photographie, pleine, nette, sans marge et sans rien par-dessus : ni titre, ni voile, ni dégradé. Le nom de la maison est dans le logo, en haut à gauche, et il suffit — c'est la seule chose qu'on avait à lire en arrivant, et elle est déjà là. PUIS L'IMAGE SE RETIRE VERS LA DROITE, et le papier s'ouvre sous elle : le cartel est là, en encre noire sur blanc, il était simplement couvert. Ce n'est pas une apparition — rien ne surgit, rien ne monte en opacité. C'est un rideau qu'on tire, et le texte qu'il découvre était écrit depuis le début. Cela vaut aussi pour ce qui ne se voit pas : le titre de la page est dans le document dès la première ligne, à pleine opacité, lisible par un moteur de recherche et par un lecteur d'écran. Il n'est caché par rien d'autre qu'une image posée devant — exactement comme une affiche posée sur une table ne rend pas la table invisible. POURQUOI C'EST LA COMPOSITION LA PLUS SÛRE. Le texte ne touche jamais l'image. On peut donc y mettre n'importe quelle photographie — claire, sombre, chargée, calme — sans rien régler : il n'y a pas un pixel où les deux se disputent la lisibilité. ===================================================================== */ .ci-ouverture--diptyque .ci-ouverture__ecran{background:var(--ci-papier)} /* L'image est au-dessus du texte, et c'est tout le mécanisme. */ .ci-ouverture--diptyque .ci-plaque{ z-index:2; /* Elle se retire par la GAUCHE, vers la droite. La course s'arrête à 44vw : au-delà, la photographie deviendrait un bandeau, et un bandeau ne montre plus rien d'une côte. */ clip-path:inset(0 0 0 calc(var(--p) * 44vw)); } .ci-ouverture--diptyque .ci-plaque img{ /* Un mouvement d'appareil très court — l'image ne fait que respirer pendant qu'elle se retire. L'échelle ne descend jamais sous 1. */ transform:scale(calc(1.07 - var(--p) * .07)); } /* Aucun voile : ni en haut ni en bas. La barre de navigation garde son fond clair parce que le papier est dessous dès que l'image recule, et le texte n'est jamais sur la photographie. */ .ci-ouverture--diptyque .ci-plaque::after{opacity:0} .ci-ouverture--diptyque .ci-ouverture__texte{ z-index:1; left:var(--ci-marge);right:auto; top:50%;bottom:auto; width:min(34vw,470px); transform:translate3d(0,-50%,0); opacity:1; color:var(--ci-encre); } .ci-ouverture--diptyque .ci-cartouche__maison{color:var(--ci-encre-2)} .ci-ouverture--diptyque .ci-cartouche__nom{color:var(--ci-encre)} .ci-ouverture--diptyque .ci-cartouche__nom small{color:var(--ci-encre-2)} .ci-ouverture--diptyque .ci-cartouche__faits{color:var(--ci-encre-2);max-width:34ch} /* Le nom reprend la mesure de sa colonne : elle est étroite, et ses deux lignes sont écrites de toute façon. */ .ci-ouverture--diptyque .ci-cartouche__nom{font-size:clamp(28px,3.1vw,52px)} /* L'invite reste sur l'image, donc en blanc, et elle suit son bord gauche : elle ne se retrouve jamais sur le papier. */ .ci-ouverture--diptyque .ci-descente{ z-index:3; right:clamp(20px,2.6vw,46px); bottom:clamp(28px,5svh,54px); opacity:calc(1 - var(--p) * 2.4); } /* ===================================================================== COMPOSITION « PAPIER » — un mur de musée, rien d'autre --------------------------------------------------------------------- Pas d'image pleine page du tout. Du blanc du premier pixel, une seule pièce accrochée au tiers gauche, son cartel à droite, et beaucoup de vide autour. C'est la composition la plus silencieuse des quatre, et la seule qui ne puisse pas mal vieillir : il n'y a rien dedans qui soit une mode. ELLE RÉSOUT LE PROBLÈME DE RÉSOLUTION PAR LA MISE EN PAGE. Une image qui ne tient pas le plein écran tient très bien à quarante pour cent de large : la même photographie, réduite, redevient nette. Plutôt que d'exiger une meilleure image, la composition demande moins à celle qu'on a. Le recul du plan reste, mais inversé : l'accrochage part petit et GRANDIT un peu à mesure qu'on descend, comme si l'on s'en approchait. ===================================================================== */ .ci-ouverture--papier .ci-ouverture__ecran{ background:var(--ci-papier); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:clamp(30px,5vw,90px); padding:0 var(--ci-marge); } .ci-ouverture--papier .ci-plaque{ position:relative;inset:auto; clip-path:none; /* L'accrochage. Le rapport est celui d'une toile posée en largeur ; l'ombre est celle du travelling, pour que les deux accrochages de la page soient du même mur. */ aspect-ratio:16/10; width:100%; overflow:hidden; box-shadow:0 44px 90px -56px rgba(9,32,60,.6); transform:scale(calc(.94 + var(--p) * .06)); transform-origin:center; } .ci-ouverture--papier .ci-plaque img{transform:none} .ci-ouverture--papier .ci-plaque::after{opacity:0} .ci-ouverture--papier .ci-ouverture__texte{ position:relative; left:auto;right:auto;bottom:auto; transform:none;opacity:1; color:var(--ci-encre); } .ci-ouverture--papier .ci-cartouche__maison{color:var(--ci-encre-2)} .ci-ouverture--papier .ci-cartouche__nom{color:var(--ci-encre);font-size:clamp(28px,3.4vw,58px)} .ci-ouverture--papier .ci-cartouche__nom small{color:var(--ci-encre-2)} .ci-ouverture--papier .ci-cartouche__faits{color:var(--ci-encre-2);max-width:36ch} .ci-ouverture--papier .ci-descente{ left:var(--ci-marge);right:auto; bottom:clamp(28px,5svh,54px); color:var(--ci-encre-2); } .ci-ouverture--papier .ci-descente i{background:var(--ci-trait)} .ci-ouverture--papier .ci-descente i::after{background:var(--ci-bleu)} @media (max-width:860px){ .ci-ouverture--papier .ci-ouverture__ecran{ grid-template-columns:1fr;align-content:center;gap:clamp(22px,4vh,38px); } .ci-ouverture--papier .ci-descente{display:none} .ci-ouverture--diptyque .ci-plaque{clip-path:none} .ci-ouverture--diptyque .ci-ouverture__texte{ position:static;width:auto;transform:none; padding:clamp(24px,5vh,44px) var(--ci-marge) 0; } .ci-ouverture--diptyque .ci-ouverture__ecran{ display:grid;grid-template-rows:56svh auto;height:auto;min-height:0; } } /* ===================================================================== COMPOSITION « AFFICHE » — le grand titre, mais composé --------------------------------------------------------------------- Le nom de la maison reprend toute la largeur de l'écran. Ce qui change n'est pas la taille : c'est la COMPOSITION. CE QUI RENDAIT LE PREMIER ESSAI BANAL, POINT PAR POINT. 1. IL ÉTAIT CENTRÉ. Un bloc de texte centré sur une image est la mise en page par défaut de tout ce qui a un héros depuis dix ans. Ferré à gauche et posé en bas, le même texte devient une affiche : il a un bord d'attaque, un appui, et le vide se range d'un seul côté au lieu d'entourer le mot comme une auréole. 2. LES DEUX LIGNES AVAIENT LE MÊME CORPS. Deux lignes de même taille empilées, c'est un logotype, et un logotype à deux cents pixels n'est qu'un logotype agrandi. Ici la première ligne est petite et très interlettrée, la seconde est énorme et serrée : l'écart entre les deux EST le dessin. C'est la règle de toutes les affiches, et elle ne coûte rien. 3. IL ÉTAIT NOIR, DONC IL EXIGEAIT UN VOILE. Le voile blanc au milieu de la photographie n'était que la conséquence de ce choix-là. En blanc, le titre se pose sur le bas de l'image — qui est déjà la partie sombre de n'importe quelle vue de côte, mer et rochers — et le seul dégradé qui reste est en bas, là où il ne cache rien. 4. IL FLOTTAIT. Rien ne le tenait à la page : ni filet, ni ligne, ni alignement sur autre chose que le milieu. Le titre prend appui ici sur la marge de page — la même que tout le reste du site — et il est suivi d'un filet d'azur et d'une seule ligne de texte. C'est ce qui fait la différence entre un mot posé sur une photo et une affiche. LE TITRE OCCUPE LA LARGEUR, ET IL LA DÉBORDE UN PEU. La seconde ligne est calibrée pour venir mourir au bord droit de la page. À quelques pour cent près selon la fonte et la langue, elle dépasse ou s'arrête juste avant : les deux sont bons, et le léger débord est même ce qui dit qu'on n'a pas mesuré au millimètre. Ce qui ne serait pas bon, c'est qu'elle SE REPLIE — d'où le `nowrap`, qui n'est pas une précaution de style mais la seule chose qui interdise à la marque de se couper en deux. ===================================================================== */ /* Aucun voile au milieu : seulement le bas, pour porter le titre. Le haut garde son dégradé vers le papier, qui appartient à la barre de navigation — voir le mouvement 00. */ .ci-ouverture--affiche .ci-plaque::after{ background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.50) 7%, rgba(255,255,255,0) 17%), linear-gradient(0deg, rgba(6,12,20,.86) 0%, rgba(6,12,20,.58) 24%, rgba(6,12,20,.20) 44%, rgba(6,12,20,0) 60%); opacity:calc(1 - var(--p) * .85); } /* Sur l'image, l'azur clair — celui que le thème utilise déjà pour les liens sur fond sombre. Sur du papier, on reprendrait `--ci-bleu`. */ .ci-ouverture--affiche{--ci-titre-azur:var(--bleu-txt,#5b9cf0)} .ci-ouverture--affiche .ci-ouverture__texte{ /* Ferré à gauche sur la marge de page, posé en bas. Les deux bords suivent l'ouverture du clip, comme partout ailleurs sur ce plan : le titre ne sort jamais de l'image qui le porte. */ left:calc(var(--ci-marge) + var(--p) * 19vw); right:0; bottom:clamp(40px,7svh,78px); transform:translate3d(0,calc(var(--p) * -18svh),0); /* Il partait à 2,4 : effacé au tiers de la course, il laissait ensuite un long moment où l'écran ne montrait plus rien du tout. Sur une course raccourcie, il doit tenir plus longtemps — à 1,5 il accompagne le recul jusqu'aux deux tiers, et la phrase prend le relais sans intervalle. */ opacity:calc(1 - var(--p) * 1.5); color:#fff; } /* La première ligne : petite, très ouverte. Elle annonce, elle ne crie pas — et c'est son écart avec la suivante qui fait tout le dessin. */ .ci-affiche__haut{ display:block;margin:0 0 clamp(4px,.9vh,10px); font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:clamp(15px,3.3vw,56px); font-weight:600; letter-spacing:.42em; text-transform:uppercase; /* L'interlettre ajoute un blanc APRÈS la dernière lettre, qui décale le mot vers la droite et casse l'alignement sur la marge. On le reprend. */ text-indent:.42em;margin-left:-.42em; color:#fff; } /* La seconde : énorme, serrée, calibrée sur la largeur de la page. 9,5vw par signe est la mesure d'Archivo 700 en capitales, apostrophe comprise ; « D'AZUR » en compte six, donc environ 57vw… et le reste vient de l'interlettre négative et du débord assumé. */ .ci-affiche__bas{ display:block;margin:0; font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:clamp(64px,23.6vw,430px); line-height:.78; letter-spacing:-.055em; text-transform:uppercase; white-space:nowrap; /* LE MOT EN AZUR — ET POURQUOI CE N'EST PAS LE MÊME AZUR PARTOUT. « d'Azur » porte la couleur de la maison : c'est le seul mot de la page qui dise son nom deux fois, une fois en lettres et une fois en couleur. Mais #004aad est un bleu D'ENCRE, fait pour du papier blanc : posé sur le bas sombre d'une photographie, il devient un trou noir bleuté — au contraste, il est plus sombre que le ciel derrière lui. Le thème porte déjà les deux valeurs, et c'est le fond qui décide : l'encre sur le papier, l'azur clair sur l'image. Ce n'est pas une seconde charte, c'est la même couleur à deux lumières. */ color:var(--ci-titre-azur,#fff); /* CORRECTION OPTIQUE. Le « D » porte un approche gauche que le « C » de la ligne du dessus n'a pas : mesurés, les deux mots sont alignés ; vus, le grand paraît rentré de quelques pixels. On aligne ce qui se voit, pas ce qui se mesure — c'est la règle en typographie d'affiche, et elle vaut pour toutes les capitales rondes. */ margin-left:-.035em; } /* Le filet et la ligne de contexte. Sans eux, le titre flotte : ce sont eux qui le posent sur la page. Le filet porte l'azur de la maison — c'est le seul endroit du premier écran où la couleur de marque apparaît, et il suffit. */ .ci-affiche__pied{ display:flex;align-items:center;gap:clamp(14px,1.8vw,26px); margin-top:clamp(16px,2.4vh,30px); max-width:min(100%,calc(100% - var(--ci-marge))); } .ci-affiche__pied i{ flex:0 0 auto;display:block; width:clamp(40px,6vw,110px);height:2px; background:var(--ci-bleu); } .ci-affiche__pied span{ font-size:clamp(14px,1.1vw,19px);line-height:1.55; color:rgba(255,255,255,.88); max-width:52ch; } /* L'invite passe en haut à droite : en bas, elle tomberait dans le titre. Elle garde sa course qui se remplit, retournée. */ .ci-ouverture--affiche .ci-descente{ top:auto; right:calc(var(--ci-marge) * .5); bottom:clamp(40px,7svh,78px); transform:translate3d(calc(var(--p) * -19vw),calc(var(--p) * -13svh),0); } @media (max-width:860px){ /* Sur un téléphone, « D'AZUR » à 16vw fait quatre-vingts pixels : le mot tient, mais les deux lignes ensemble mangeraient l'écran entier. On rend au titre une taille de titre, et à la photographie sa place. */ .ci-affiche__haut{font-size:clamp(12px,3.4vw,18px);letter-spacing:.34em; text-indent:.34em;margin-left:-.34em} .ci-affiche__bas{font-size:clamp(46px,17vw,96px)} .ci-ouverture--affiche .ci-descente{display:none} .ci-affiche__pied{flex-direction:column;align-items:flex-start;gap:10px} } @media (prefers-reduced-motion:reduce){ /* Sur l'image, l'azur clair — celui que le thème utilise déjà pour les liens sur fond sombre. Sur du papier, on reprendrait `--ci-bleu`. */ .ci-ouverture--affiche{--ci-titre-azur:var(--bleu-txt,#5b9cf0)} .ci-ouverture--affiche .ci-ouverture__texte{ position:static;transform:none;opacity:1;color:var(--ci-encre); padding:clamp(24px,5vh,44px) var(--ci-marge) 0; } .ci-affiche__haut,.ci-affiche__bas{color:var(--ci-encre)} .ci-affiche__pied span{color:var(--ci-encre-2)} } /* ===================================================================== LE PAPIER N'EST PLUS BLANC (piste A) --------------------------------------------------------------------- `#ffffff` est la valeur par défaut d'un navigateur, pas une décision. Relevé sur les lauréats récents d'Awwwards, aucun ne l'emploie : Noho #F1EEE9, White Desert #E9E7E1, Illoca #FDF2DE, Lusion v3 #f0f1fa. Tous sont sur un blanc TEINTÉ, et c'est la moitié de l'impression de soin qu'on ressent sans savoir la nommer — un blanc pur est une absence de choix, un blanc chaud est une matière. Pour une galerie, la raison est en plus technique : une toile photographiée a un fond de lin, d'apprêt ou de vernis, jamais un blanc d'écran. Posée sur #ffffff, elle paraît sale ; posée sur un papier légèrement chaud, elle paraît éclairée. C'est le même effet qu'un passe-partout crème sur un encadrement, et c'est pour la même raison qu'on le fait depuis deux siècles. La valeur est posée ICI plutôt que dans accueil.css : une seule ligne à retirer pour revenir en arrière, et le reste du thème — les pages intérieures, la boutique — n'est pas touché. ===================================================================== */ .ac{ /* LA VALEUR EST UN ARBITRAGE, ET ELLE A ÉTÉ MONTÉE UNE FOIS. Le premier essai était à #f6f3ee : quatre pour cent plus sombre que le blanc, c'est-à-dire invisible — on avait le principe et aucun de ses effets. Les références relevées sont bien plus franches (White Desert #E9E7E1, Noho #F1EEE9). À #f1ede5 le papier se VOIT, sans virer au beige : la teinte reste neutre-chaude, et l'azur y gagne en saturation apparente puisqu'il n'a plus un blanc pur à côté de lui pour le rabattre. */ --ac-papier:#f1ede5; --ci-papier:#f1ede5; /* LA COULEUR EST POSÉE, PAS SEULEMENT DÉCLARÉE. Premier essai : on ne changeait que la variable `--ac-papier`, en supposant que le fond de la page la lisait. Mesuré sur la page rendue, `.ac` n'a AUCUN fond — il est transparent, et le blanc qu'on voyait venait du `body`. La variable était donc juste et n'avait aucun effet : on a regardé trois captures en croyant juger une couleur qui n'était pas appliquée. La leçon vaut au-delà de ce cas : une valeur qu'on change sans vérifier QUI la lit n'est pas un réglage, c'est une hypothèse. */ background:var(--ac-papier); } /* ===================================================================== COMPOSITION « NAPPE » — l'huile sur l'eau (piste C) --------------------------------------------------------------------- Plus de photographie du tout. Le premier écran est une nappe de pigment calculée en direct : des bandes d'interférence, comme une flaque d'essence, mais repliées sur l'accord de la maison. Le pointeur la creuse comme une loupe. Voir accueil-nappe.js pour la physique et pour les raisons. CE QUE ÇA RÈGLE, ET QUI TRAÎNAIT DEPUIS LE DÉBUT : — plus d'image à choisir, donc plus de photographie qui daterait ; — plus de voile à poser, puisque la densité de la nappe est réglée par la page et non subie d'une prise de vue ; — rien à télécharger : quatre kilo-octets de programme contre trois cents d'une photographie de héros ; — et ce n'est jamais deux fois la même image. LA NAPPE EST DENSE EN BAS ET S'ÉTEINT EN HAUT. La barre de navigation a besoin d'un fond clair — elle est écrite en encre sombre — et le titre, blanc, a besoin de densité. La composition dicte le dégradé. ===================================================================== */ /* ═══ LA NAPPE EST LE FOND DE TOUTE LA PAGE ═══ Elle était le décor du seul premier écran, en position absolue dans celui-ci. Elle est maintenant FIXE derrière le document entier, et c'est elle qui remplace l'ancienne couche de pigment (`#ac-gl`, pilotée par accueil-gl.js) — deux champs de pigment superposés sur la même page, dont un invisible sous des sections opaques, c'était un de trop. z-index 0, et le contenu est à 1 : c'est tout l'empilement. Le texte reste du HTML, net à toute densité, sélectionnable et lisible par un lecteur d'écran — aucun mot n'est jamais peint par le GPU. */ /* ═══ LE FOND EST UNE COUCHE À PART, ET C'EST CONTRE LES DÉCHIRURES ═══ Un élément `position:fixed` n'est pas automatiquement une couche du compositeur. Tant qu'il n'en est pas une, le navigateur le REPEINT dans la même surface que le contenu qui défile — et il doit alors faire coïncider, à chaque image, une couche qui bouge et une couche qui ne bouge pas. Quand les deux n'arrivent pas ensemble, on voit une bande horizontale décalée : c'est la déchirure. `translateZ(0)` force la promotion : le canevas devient sa propre surface, peinte une fois, que le compositeur pose telle quelle au-dessus du reste. Il ne participe plus au défilement, donc il ne peut plus s'en désolidariser. `backface-visibility:hidden` évite en prime le scintillement d'un demi-pixel que certains pilotes mobiles produisent sur une couche transformée. Le coût est une surface de plus en mémoire vidéo — un écran de large. Sur un fond qui occupe déjà tout l'écran et qui est redessiné par le GPU, c'est exactement la couche qu'on veut isoler. */ .ac > .ci-nappe{ position:fixed;inset:0;z-index:0; width:100%;height:100%; display:block;pointer-events:none; transform:translateZ(0); backface-visibility:hidden; } /* LE DÉGRADÉ DE SECOURS, lui aussi sur toute la page. Sans WebGL le canevas reste vide : ce dégradé reprend les mêmes bleus dans la même répartition — dense en bas, éteint en haut. Il est immobile, et c'est tout ce qui lui manque. Il s'efface dès que la nappe est peinte. */ .ac::after{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(120% 70% at 22% 96%,rgba(0,74,173,.30),transparent 62%), radial-gradient(90% 60% at 86% 88%,rgba(60,156,218,.22),transparent 58%), linear-gradient(0deg,rgba(0,58,135,.26) 0%,rgba(241,237,229,0) 72%); transition:opacity .8s ease; } .ci-nappe-on.ac::after{opacity:0} /* La plaque photographique n'a plus lieu d'être sous cette composition : c'est la nappe qui occupe le fond. On la retire du document plutôt que de la masquer — une image cachée se télécharge quand même. */ .ci-ouverture--nappe .ci-plaque{display:none} /* LE MOT EN AZUR TIENT ICI, ET C'EST CONTRE-INTUITIF. On attendait qu'un bleu de charte posé sur un fond bleu disparaisse. Il n'en est rien, et la raison est dans la nappe : elle est CLAIRE — des bleus délavés, du blanc de papier, des veines très pâles — et #004aad y est une encre dense. Ce n'est pas bleu sur bleu, c'est sombre sur clair, et le contraste de valeur est celui qui compte. C'est aussi le seul fond de toute cette série où l'on peut employer l'azur de charte sans l'éclaircir. Sur la photographie, il fallait passer par la variante claire ; ici, l'encre elle-même. */ /* L'AZUR DU TITRE SUIT LA NAPPE, QUI A CHANGÉ DE VALEUR. Tant que la nappe était claire, l'encre de charte #004aad y était une encre dense et tenait très bien — on l'avait vérifié. La nappe est maintenant composée dans le sombre : la même encre y est plus noire que le fond et disparaît. Le titre reprend donc l'azur clair, comme partout ailleurs sur fond sombre. C'est la même règle depuis le début, appliquée à un fond qui a bougé. */ /* La nappe est revenue à sa palette claire : l'encre de charte y est de nouveau une encre dense, et le titre la reprend. C'est l'état qui avait été validé sur image. */ .ci-ouverture--nappe{--ci-titre-azur:var(--ci-bleu,#004aad)} .ci-ouverture--nappe .ci-ouverture__texte{ left:var(--ci-marge); right:0; bottom:clamp(40px,7svh,78px); /* 10 svh de `bottom` + 5 svh de translation = 15 svh de translation. */ transform:translate3d(0,calc(var(--p) * -15svh),0); opacity:calc(1 - var(--p) * 2.4); color:#fff; } .ci-ouverture--nappe .ci-descente{ right:calc(var(--ci-marge) * .5); bottom:clamp(40px,7svh,78px); transform:translate3d(0,calc(var(--p) * -10svh),0); } @media (prefers-reduced-motion:reduce){ .ci-ouverture--nappe .ci-ouverture__ecran{min-height:70svh} } /* ===================================================================== MOUVEMENT 01 — LA PHRASE --------------------------------------------------------------------- Un seul écran, une seule phrase, rien d'autre : pas d'œil de section, pas de filet, pas de bouton. C'est le premier arrêt du film, et un arrêt n'a pas besoin d'être meublé. LA PHRASE SE DÉCOUVRE À LA MOLETTE, LIGNE APRÈS LIGNE. Chaque ligne a son propre seuil dans la course : la première est entièrement encrée quand la deuxième commence. Reculer la molette la recouvre. C'est ce qui distingue ce plan d'un fondu d'apparition — on ne le subit pas, on l'avance. L'ENCRE ARRIVE, ELLE NE S'OPACIFIE PAS. L'effet est obtenu par un rognage progressif posé sur une ligne noire, et par une copie pâle dessous qui tient la place. Une ligne à demi transparente est une ligne grise ; une ligne rognée est une ligne dont l'encre avance. La différence se voit immédiatement sur du texte noir — et la copie pâle fait qu'aucun mot ne bouge de place pendant que la phrase s'écrit. ===================================================================== */ .ci-phrase{ position:relative; /* 1,35 à l'origine, et les seuils d'encrage étalés sur 68 % de la course : il fallait donc descendre près d'un écran entier pour avoir lu trois lignes. L'encrage progressif est un geste, pas une épreuve de patience — on garde le geste et on le resserre. */ height:calc(100svh + var(--ci-course) * .9); --p:1; } .ci-phrase__ecran{ position:sticky;top:0; min-height:100svh; display:grid;align-content:center; padding:clamp(90px,14svh,150px) var(--ci-marge); } .ci-dit{ margin:0; max-width:19ch; font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:600; font-size:clamp(34px,6.4vw,104px); line-height:1.02;letter-spacing:-.035em; color:var(--ci-encre); } .ci-dit em{font-style:normal;color:var(--ci-bleu)} /* L'hôte tient la hauteur d'une ligne ; le fantôme et la ligne encrée s'y superposent exactement. */ .ci-l-hote{position:relative;display:block} .ci-l-fantome{ position:absolute;left:0;top:0;right:0; color:rgba(13,17,23,.11); pointer-events:none; } /* Le rognage de lecture. `--l` est le rang de la ligne, `--n` leur nombre : le seuil de chaque ligne est donc calculé, pas écrit à la main, et ajouter une ligne à la phrase ne demande aucun réglage. */ .ci-on .ci-dit .ci-l{ position:relative;display:block; /* Les trois lignes sont entièrement encrées à 48 % de la course, au lieu de 71 %. Le décalage d'une ligne sur l'autre reste lisible — c'est lui qu'on voulait — il est simplement joué plus vite. */ --seuil:calc((var(--l) / var(--n)) * .42); --avance:clamp(0,(var(--p) - var(--seuil)) / .20,1); clip-path:inset(-.2em calc(100% - var(--avance) * 100%) -.2em 0); will-change:clip-path; } /* La ligne de technique, sous la phrase. Elle arrive en dernier, une fois la phrase entièrement encrée : c'est la note de bas de plan. */ .ci-note{ margin:clamp(28px,4.5vh,58px) 0 0; max-width:44ch; padding-top:18px; border-top:1px solid var(--ci-trait); font-size:clamp(16px,1.2vw,21px);line-height:1.65; color:var(--ci-encre-2); } .ci-on .ci-note{ opacity:clamp(0,(var(--p) - .52) / .14,1); transform:translate3d(0,calc((1 - clamp(0,(var(--p) - .52) / .14,1)) * 16px),0); } /* ===================================================================== MOUVEMENT 02 — LE TRAVELLING --------------------------------------------------------------------- Le cœur de la page, et le seul plan horizontal. CE QU'IL REMPLACE. Une galerie où un cadre restait immobile au centre pendant que les toiles venaient s'y loger, la moulure se remontant autour de chacune. L'idée était juste et le résultat coûtait cher : une moulure redessinée au GPU à chaque image, pour un geste qui ne montre au fond qu'une œuvre à la fois, toujours à la même place. CE QU'IL EST. Un mur qui passe. Les toiles défilent de droite à gauche, à des tailles inégales et sur trois lignes de fuite : c'est l'inégalité qui fait le travelling — une file d'images de même taille n'est pas un mouvement de caméra, c'est un carrousel. L'INERTIE EST LA MATIÈRE DE CE PLAN. La piste ne suit pas le défilement au pixel : elle le rattrape. Quand on lance la molette, les toiles prennent un léger retard et s'inclinent dans le sens du mouvement (`--v`, la vitesse lissée) ; quand on s'arrête, elles se reposent. L'inclinaison porte sur la PISTE, jamais sur l'image : l'œuvre reste un rectangle droit, net, au rapport exact. C'est la règle de cette page, et elle ne souffre pas d'exception. ===================================================================== */ .ci-travelling{ position:relative; /* La longueur du plan suit le nombre de toiles : `--n` est écrit par PHP. Un fonds de quatre œuvres ne doit pas coûter la même course qu'un fonds de douze. */ height:calc(100svh + var(--ci-course) * var(--n,8) * .55); --p:0;--v:0; } .ci-travelling__ecran{ position:sticky;top:0; height:100svh;min-height:540px; display:flex;flex-direction:column;justify-content:center; overflow:hidden; } .ci-tete{ position:absolute;top:clamp(84px,13svh,140px);left:var(--ci-marge);right:var(--ci-marge); display:flex;align-items:baseline;justify-content:space-between;gap:24px; z-index:4;pointer-events:none; } .ci-oeil{ margin:0; font-family:'Archivo',system-ui,sans-serif; font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--ci-encre-2); } /* Le compteur. Deux chiffres et une jauge disent où l'on en est dans la salle ; sans eux, un plan collant qui dure une page et demie donne l'impression que la page est bloquée. Le rang est écrit par le JavaScript ; sans lui on lit « 01 » sur le total, ce qui reste vrai. */ .ci-compte{ margin:0;display:flex;align-items:center;gap:12px; font-family:'Archivo',system-ui,sans-serif; font-size:11px;font-weight:600;letter-spacing:.18em; color:var(--ci-encre-2);font-variant-numeric:tabular-nums; } .ci-compte b{color:var(--ci-encre);font-weight:700} .ci-compte i{display:block;width:clamp(48px,7vw,110px);height:1px;background:var(--ci-trait)} .ci-compte i s{ display:block;height:100%;background:var(--ci-bleu); transform:scaleX(var(--p));transform-origin:0 50%;text-decoration:none; } /* La piste. Elle est translatée d'un seul bloc : une transformation par image sur un élément, et non une par toile. L'inclinaison suit la vitesse, bornée par le JavaScript — une valeur aberrante venue d'un pavé tactile ne peut donc pas coucher le mur. */ .ci-piste{ display:flex;align-items:center; gap:clamp(26px,4.2vw,86px); padding:0 max(var(--ci-marge),22vw); list-style:none;margin:0; width:max-content; transform:translate3d(calc(var(--x,0) * -1px),0,0) skewX(calc(var(--v) * -1.1deg)); will-change:transform; } .ci-toile{ position:relative;flex:0 0 auto; /* Trois lignes de fuite. Le mur cesse d'être une frise et devient un accrochage. */ transform:translate3d(0,var(--dy,0),0); } .ci-toile--haut{--dy:-7svh} .ci-toile--bas{--dy:6svh} .ci-toile__vue{ display:block;position:relative; /* La hauteur est la variable, la largeur suit le rapport : c'est la seule façon qu'un panoramique et un portrait tiennent sur la même ligne sans qu'aucun ne soit rogné. */ height:var(--hh,44svh); aspect-ratio:var(--ar,1.33); background:rgba(13,17,23,.04); overflow:hidden; box-shadow:0 30px 70px -44px rgba(9,32,60,.55); } .ci-toile--grande .ci-toile__vue{--hh:58svh} .ci-toile--petite .ci-toile__vue{--hh:34svh} .ci-toile__vue img{ width:100%;height:100%; /* `cover` ici n'est pas une entorse : la case est déjà au rapport EXACT de l'œuvre (`--ar` vient de ses dimensions réelles), donc « couvrir » et « contenir » donnent le même cadrage au pixel près. `cover` évite seulement le liseré d'un demi-pixel que `contain` laisse quand le rapport tombe sur une fraction. */ object-fit:cover;display:block; } /* Le cartel. Il voyage avec sa toile — il est écrit sous elle, dans la file : jamais de doute sur l'œuvre qu'il décrit, et rien à synchroniser. C'est le seul endroit de la page où les œuvres sont cliquables, et c'est voulu : ici elles SONT la galerie, alors que le premier écran n'en était qu'une image. */ .ci-cartel{ display:block;margin-top:16px; max-width:30ch; text-decoration:none;color:inherit; } .ci-cartel b{ display:block; font-family:'Archivo',system-ui,sans-serif; font-size:clamp(15.5px,1.15vw,20px);font-weight:600; color:var(--ci-encre); } .ci-cartel i{ display:block;margin-top:3px;font-style:normal; font-size:clamp(13px,.95vw,16px);letter-spacing:.04em;color:var(--ci-encre-2); } /* LE PRIX EST EN ENCRE, PAS EN AZUR. Il portait la couleur de marque. Sur le papier c'était juste ; sur la nappe, un bleu de charte posé sur du bleu disparaît — le prix, qui est l'information la plus concrète du cartel, était la seule ligne qu'on ne pouvait pas lire. L'accent de couleur reste sur le filet, qui lui porte la dominante de la toile et n'a rien à faire lire. */ .ci-cartel em{ display:inline-block;margin-top:9px;font-style:normal; font-family:'Archivo',system-ui,sans-serif; font-size:clamp(14px,1.05vw,18px);font-weight:700;color:var(--ci-encre); } /* Le filet du cartel porte la couleur dominante de la toile : le prix se rattache ainsi à l'image et non à une fiche. Il se tire au survol — c'est le seul retour de survol du plan, et il suffit. */ .ci-cartel__filet{ display:block;height:2px;width:26px;margin-top:11px; background:var(--ac-c,var(--ci-bleu)); transform-origin:0 50%; transition:transform .55s var(--ci-courbe); } .ci-cartel:hover .ci-cartel__filet, .ci-cartel:focus-visible .ci-cartel__filet{transform:scaleX(2.6)} /* La porte de fin de travelling : une fois le mur passé, on ne remonte pas, on entre. Elle est la dernière case de la piste. */ .ci-piste__fin{ flex:0 0 auto;display:flex;flex-direction:column;justify-content:center; gap:20px;padding-left:clamp(10px,2vw,40px); } .ci-piste__fin p{ margin:0;max-width:20ch; font-family:'Archivo',system-ui,sans-serif; font-size:clamp(22px,2.4vw,38px);font-weight:600; line-height:1.08;letter-spacing:-.025em;color:var(--ci-encre); } /* ===================================================================== MOUVEMENT 03 — LES TROIS FAITS --------------------------------------------------------------------- Trois choses à savoir avant d'écrire, et trois seulement. Des FAITS, pas des arguments : chacun vérifiable, aucun superlatif. LA MISE EN SCÈNE EST UN VOLET. Les trois faits ne montent pas ensemble à l'entrée dans le cadre — trois blocs qui apparaissent en même temps ne se lisent pas, on les balaie. Ils se découvrent l'un après l'autre à la molette, par un volet qui s'ouvre du bas : le premier est entier quand le deuxième commence. C'est la même mécanique que la phrase du mouvement 01, et c'est volontaire — un film a un vocabulaire, pas un catalogue d'effets. ===================================================================== */ .ci-faits{ position:relative; height:calc(100svh + var(--ci-course) * 1.15); --p:0; } .ci-faits__ecran{ position:sticky;top:0; min-height:100svh; display:grid;align-content:center; padding:clamp(90px,14svh,150px) var(--ci-marge) clamp(50px,8svh,90px); } .ci-faits__titre{ margin:0 0 clamp(36px,6vh,76px); max-width:16ch; font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700;font-size:clamp(30px,4.6vw,74px); line-height:1;letter-spacing:-.035em; color:var(--ci-encre); } .ci-faits__titre em{font-style:normal;color:var(--ci-bleu)} .ci-faits__liste{ display:grid;gap:clamp(22px,2.6vw,46px); grid-template-columns:repeat(3,1fr); list-style:none;margin:0;padding:0; counter-reset:ci-fait; } .ci-fait{ position:relative; padding-top:22px; border-top:1px solid var(--ci-trait); } .ci-fait::before{ counter-increment:ci-fait; content:'0' counter(ci-fait); display:block;margin-bottom:14px; font-family:'Archivo',system-ui,sans-serif; font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--ci-bleu); } .ci-fait h3{ margin:0 0 10px; font-family:'Archivo',system-ui,sans-serif; font-size:clamp(20px,1.75vw,28px);font-weight:600;letter-spacing:-.015em; color:var(--ci-encre); } .ci-fait p{ margin:0;font-size:clamp(16px,1.15vw,21px);line-height:1.66; color:var(--ci-encre-2); } /* Le volet. `--l` est le rang du fait ; le seuil en découle. Le fait non encore découvert n'est pas absent : sa place est tenue et son filet est tracé. Seul son contenu monte — la page ne se réorganise jamais. */ .ci-fait__in{display:block} .ci-on .ci-fait__in{overflow:hidden} .ci-on .ci-fait__in > *{ --seuil:calc(var(--l) * .20); --avance:clamp(0,(var(--p) - var(--seuil)) / .26,1); display:block; transform:translate3d(0,calc((1 - var(--avance)) * 110%),0); opacity:var(--avance); will-change:transform; } @media (max-width:900px){ .ci-faits__liste{grid-template-columns:1fr} } /* ===================================================================== MOUVEMENT 04 — LE PEINTRE --------------------------------------------------------------------- Une double page. À gauche le portrait, à droite trois phrases et une citation. C'est la seule section de la page où quelqu'un parle à la première personne — sans elle, tout ce qui précède est écrit par un vendeur. LE PORTRAIT SE DÉCOUVRE PAR UN RIDEAU, pas par un fondu. Un rideau vertical qui monte : l'image est déjà là, entière, et c'est le papier qui se retire. Le geste dit « on découvre », le fondu dit « on charge ». Sur un portrait, la différence est celle entre une entrée en scène et une vignette qui finit de s'afficher. ===================================================================== */ .ci-peintre{ position:relative; padding:clamp(110px,18svh,220px) var(--ci-marge); --p:0; } .ci-peintre__in{ display:grid;gap:clamp(34px,5vw,96px); grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center; max-width:1560px;margin:0 auto; } .ci-portrait{margin:0;position:relative} .ci-portrait__vue{ display:block;position:relative;overflow:hidden; aspect-ratio:4/5; background:rgba(13,17,23,.04); box-shadow:0 44px 90px -58px rgba(9,32,60,.6); } .ci-portrait__vue img{width:100%;height:100%;object-fit:cover;display:block} /* Le rideau. Il couvre l'image et se retire vers le haut. Il est de la couleur du papier, donc on ne voit pas un volet passer : on voit la page s'ouvrir sur la photographie. */ .ci-on .ci-portrait__vue::after{ content:'';position:absolute;inset:0;z-index:2; background:var(--ci-papier); transform:translate3d(0,calc(clamp(0,(var(--p) - .1) / .34,1) * -101%),0); will-change:transform; } .ci-on .ci-portrait__vue img{ /* L'image avance un peu pendant que le rideau se retire : deux vitesses, donc du relief. Elle ne descend jamais sous l'échelle 1. */ transform:scale(calc(1.08 - clamp(0,(var(--p) - .1) / .34,1) * .08)); } .ci-portrait figcaption{ display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px; margin-top:16px; font-size:13px;color:var(--ci-encre-2); } .ci-portrait figcaption b{ font-family:'Archivo',system-ui,sans-serif; font-size:15px;font-weight:600;color:var(--ci-encre); } .ci-peintre__dit h2{ margin:0 0 clamp(20px,2.6vh,34px); font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700;font-size:clamp(30px,4.2vw,66px); line-height:1.02;letter-spacing:-.035em;color:var(--ci-encre); } .ci-peintre__dit h2 em{font-style:normal;color:var(--ci-bleu)} .ci-peintre__dit p{ margin:0 0 16px;max-width:52ch; font-size:clamp(16.5px,1.25vw,22px);line-height:1.7;color:var(--ci-encre-2); } .ci-peintre__dit p.ci-lead{ font-size:clamp(19px,1.55vw,26px);line-height:1.55;color:var(--ci-encre); } /* La citation. En Playfair italique : c'est la seule voix de la page, et elle n'est pas de la même main que le reste du texte. Une seule exception typographique dans un document en dit plus qu'un guillemet. */ .ci-voix{ margin:clamp(26px,3.5vh,44px) 0 clamp(26px,3.5vh,44px); padding-left:22px;border-left:2px solid var(--ci-bleu); } .ci-voix p{ margin:0 0 8px; font-family:'Playfair Display',Georgia,serif; font-style:italic;font-size:clamp(19px,1.7vw,27px);line-height:1.34; color:var(--ci-encre);max-width:34ch; } .ci-voix cite{ font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--ci-encre-2); } @media (max-width:1000px){ .ci-peintre__in{grid-template-columns:1fr} } /* ===================================================================== MOUVEMENT 05 — LA SORTIE --------------------------------------------------------------------- La page a montré ; elle peut demander. C'est ici, et nulle part avant, que le bouton d'achat a sa place — posé au tiers de la page il demandait d'acheter avant qu'on ait rien montré. DEUX PORTES, ET L'UNE EST PLUS GRANDE. Voir le catalogue est ce que la page prépare depuis le premier écran : c'est la porte large, et elle porte le compte RÉEL des œuvres, pas une formule. Écrire est la seconde, plus étroite — elle existe pour qui a une question, pas pour qui veut acheter. LE NOMBRE SE COMPTE. Le total des toiles monte de zéro à sa valeur quand la section entre. C'est le seul chiffre animé du site, et il l'est parce qu'un compteur dit « il y en a beaucoup » plus vite que n'importe quelle phrase. Sans JavaScript, il est écrit en clair dès le départ. ===================================================================== */ .ci-sortie{ position:relative; padding:clamp(100px,16svh,200px) var(--ci-marge) clamp(110px,18svh,210px); --p:0; } .ci-sortie__in{ display:grid;gap:clamp(30px,4vw,70px); grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:end; max-width:1560px;margin:0 auto; padding-top:clamp(30px,5vh,60px); border-top:1px solid var(--ci-trait); } .ci-porte h2{ margin:0 0 18px; font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700;line-height:.94;letter-spacing:-.04em; color:var(--ci-encre); } /* LE CORPS A BAISSÉ AVEC L'ARRIVÉE DU PANNEAU. À 7,4vw, « VOIR TOUTES » mesurait un peu plus que sa colonne une fois le rembourrage du verre retiré de la largeur : le titre se repliait sur TROIS lignes, dont une portant le seul mot « VOIR ». Une rupture subie, et sur le dernier écran de la page. 6,5vw le remet sur deux lignes avec de la marge. C'est la mesure qui a changé, pas le dessin : le titre reste le plus grand de la page. */ .ci-porte--large h2{font-size:clamp(34px,6.5vw,108px);text-transform:uppercase} .ci-porte--etroite h2{font-size:clamp(26px,2.8vw,44px)} .ci-porte p{ margin:0 0 26px;max-width:40ch; font-size:clamp(14px,1.05vw,17px);line-height:1.62;color:var(--ci-encre-2); } .ci-nombre{ font-variant-numeric:tabular-nums; color:var(--ci-bleu);font-weight:700; } /* Le bouton. Le bleu se déplie depuis le bas au survol : un remplissage, pas un changement de couleur — on sent le geste. Le mouvement est en `transform` sur une couche séparée, donc il ne repeint rien. */ .ci-btn{ position:relative;display:inline-flex;align-items:center;gap:.75em; padding:clamp(14px,1.15vw,20px) clamp(26px,2.3vw,40px); font-family:'Archivo',system-ui,sans-serif; font-size:clamp(13px,1vw,15px);font-weight:600;letter-spacing:.04em; text-decoration:none;overflow:hidden; /* ═══ LE BOUTON À FILET PASSE EN ENCRE ═══ Son texte et son filet portaient le bleu de charte. Sur le papier c'était juste ; sur la nappe, un bleu posé sur du bleu disparaît — le bouton « Nous écrire » n'était plus qu'un rectangle vide, et « Découvrir le peintre » pareil. Relevé sur le site en ligne, en téléphone, sur la section de sortie. L'encre le rend lisible partout, et la hiérarchie tient toujours : le bouton PLEIN reste bleu et porte l'action principale, celui à filet est secondaire. C'est la graisse du fond qui les sépare, pas leur couleur. */ border:1px solid var(--ci-encre); color:var(--ci-encre);background:transparent; transition:color .45s var(--ci-courbe); } .ci-btn::before{ content:'';position:absolute;inset:0;z-index:0; background:var(--ci-encre); transform:translate3d(0,101%,0); transition:transform .55s var(--ci-courbe); } .ci-btn > *{position:relative;z-index:1} .ci-btn:hover,.ci-btn:focus-visible{color:#fff} .ci-btn:hover::before,.ci-btn:focus-visible::before{transform:translate3d(0,0,0)} .ci-btn--plein{background:var(--ci-bleu);color:#fff} .ci-btn--plein::before{background:var(--ci-encre)} .ci-btn i{display:inline-flex;transition:transform .45s var(--ci-courbe)} .ci-btn:hover i{transform:translateX(5px)} .ci-btn svg{width:1.1em;height:1.1em} @media (max-width:900px){ .ci-sortie__in{grid-template-columns:1fr;align-items:start} } /* ===================================================================== LES PETITS ÉCRANS --------------------------------------------------------------------- Un téléphone n'a ni molette ni inertie : le défilement y est direct, au doigt, et un plan collant qui dure deux écrans y devient une page qui ne répond pas. Les courses sont donc raccourcies partout, et le travelling redevient une file qu'on pousse du doigt — un défilement horizontal natif, avec accrochage, qui est le geste que tout le monde connaît sur un téléphone. ===================================================================== */ @media (max-width:860px){ /* ═══ LA COURSE SE MESURE DANS LA MÊME UNITÉ QUE L'ÉCRAN ═══ Elle était en `vh` quand tous les écrans épinglés sont en `svh`. Sur un téléphone, ce ne sont pas la même chose : `vh` mesure la fenêtre BARRE D'ADRESSE MASQUÉE, `svh` la mesure barre visible. L'écart vaut la hauteur de cette barre, soit six à douze pour cent de l'écran. La section était donc calculée avec une règle et épinglée avec une autre : la course réelle dépassait celle qu'on avait écrite, et le plan restait épinglé un peu après la fin de son geste — un temps mort en bas de chaque mouvement, qu'on ne pouvait pas expliquer en lisant les valeurs. Une seule unité, et les deux se rejoignent. */ .ac{--ci-course:62svh} /* ═══ LES ÉCRANS COLLANTS LE REDEVIENNENT ═══ ILS AVAIENT ÉTÉ DÉCOLLÉS, ET LA RAISON ÉTAIT RÉELLE. La phrase et les trois faits étaient des écrans épinglés au contenu CENTRÉ verticalement. Sur un téléphone, ce contenu est plus haut que l'écran : centré, il déborde des DEUX côtés, et le haut passe sous l'en-tête fixe. On lisait un paragraphe barré par le logo. LA RÉPONSE ÉTAIT TROP LARGE. En supprimant la course, on a supprimé avec elle tout ce qu'elle pilote : l'encrage ligne à ligne de la phrase, le volet des trois faits. Le téléphone recevait une page correcte et muette — les mêmes mots, sans aucun des gestes. Ce n'est pas la même page en plus petit, c'est une autre page. CE QUI DÉBORDAIT ÉTAIT LE CENTRAGE, PAS L'ÉPINGLAGE. Un contenu plus haut que son cadre et centré déborde en haut ET en bas ; le même contenu aligné EN HAUT, sous une marge qui dégage l'en-tête, ne passe jamais sous le logo. On garde donc la course et l'épinglage — donc les gestes — et l'on ne corrige que l'alignement. */ .ci-phrase__ecran, .ci-faits__ecran{ /* ═══ `box-sizing` EXPLICITE, ET C'EST LUI QUI RÉGLAIT TOUT ═══ Le thème ne pose aucune remise à zéro globale (c'est écrit noir sur blanc dans pages.css). Ces écrans sont donc en `content-box` : leur `min-height:100svh` est la hauteur du CONTENU, et le remplissage s'ajoute par-dessus. Mesuré sur un viewport de 375 × 812 : hauteur de l'écran collant = 974 px, soit 812 + 97 + 65 Un écran épinglé plus haut que la fenêtre ne s'épingle pas — il glisse. Relevé au banc, son haut était à −90 px, et la phrase commençait à 8 px du bord : c'est exactement le paragraphe qui passe sous l'en-tête qu'on avait voulu corriger en supprimant la course. La course n'y était pour rien. Conséquence seconde, invisible à l'œil : le JavaScript calcule la course comme `hauteur de section − hauteur de l'écran`. Avec 974 au lieu de 812, la course perdait 162 px, soit plus du tiers. */ box-sizing:border-box; /* ═══ LE TEXTE EST RECENTRÉ, MAIS EN MODE « SÛR » ═══ Il avait été ferré en haut (`start`) pour qu'un contenu plus haut que l'écran ne déborde pas par le haut, sous l'en-tête fixe. La précaution n'a plus lieu d'être telle quelle : depuis que l'écran est en `border-box`, il fait exactement une fenêtre — 812 px mesurés sur un iPhone — et le contenu y tient, remplissage compris : phrase 255 px de contenu trois faits 662 px de contenu place offerte 674 px (812 − 97 en haut − 41 en bas) Mais « il y tient aujourd'hui » n'est pas une garantie : une phrase réécrite, un quatrième fait, une police système plus large, et l'on repasse au-dessus. `safe center` dit exactement cela au navigateur : CENTRE, et si ça déborde, reviens te ferrer en haut plutôt que de rogner des deux côtés. Le défaut ne peut donc pas revenir par une modification de texte. */ align-content:safe center; /* Le bas est resserré : à 65 px, le contenu des trois faits sortait de douze pixels sous la fenêtre (824 contre 812 mesurés), et l'écran épinglé se remettait à glisser d'autant. À 41 px il tient. */ padding-block:clamp(74px,12svh,120px) clamp(32px,5svh,64px); } /* ═══ PAS DE GRAIN SUR TÉLÉPHONE ═══ Un mode de fusion sur une couche plein cadre oblige le compositeur à traiter toute la pile à chaque image, par-dessus un shader qui occupe déjà l'écran. Sur un ordinateur c'est gratuit, sur un téléphone c'est le genre de coût qui fait tomber le défilement à trente images. Et ce qu'on perd est mince : le grain sert à casser les paliers des grands aplats, or la nappe n'en a pas — elle est faite de bruit. Il travaillait surtout sur le papier des marges. */ .ac > .ci-grain{display:none} .ci-plaque{ clip-path:inset( calc(var(--p) * 8svh) calc(var(--p) * 7vw) calc(var(--p) * 8svh) calc(var(--p) * 7vw) ); } /* Le cartel se resserre : la ligne du peintre descend, et les faits passent sous le filet sans se replier sur quatre lignes. */ .ci-ouverture__texte{bottom:clamp(48px,8svh,80px);max-width:none} .ci-cartouche__nom{font-size:clamp(26px,7.4vw,42px)} .ci-ouverture--signature .ci-titre{font-size:clamp(34px,11vw,64px)} /* L'invite passe sous le cartel : dans l'angle droit, sur un téléphone, elle touche le pouce qui tient l'appareil. */ .ci-descente{display:none} /* ═══ L'AZUR DU TITRE S'ÉCLAIRCIT SUR TÉLÉPHONE ═══ Le titre est posé en bas de l'écran, et la nappe est d'autant plus dense qu'on descend. Sur un grand écran il tombe encore dans les valeurs moyennes et l'encre de charte y tient ; sur un téléphone, où l'écran est haut et étroit, il tombe dans le plus dense — et #004aad y devient plus sombre que le fond, donc invisible. Même couleur, deux lumières : c'est la règle qu'on applique déjà partout ailleurs sur fond sombre. */ /* Le bleu de marque est gardé sur téléphone, à la demande du propriétaire. */ .ci-ouverture--nappe{--ci-bleu:#9cc7ff;--ci-titre-azur:#004aad} /* ═══ LE TRAVELLING REDEVIENT UN TRAVELLING ═══ Il était remplacé sur téléphone par un défilement horizontal natif à accrochage : un carrousel qu'on pousse du doigt. C'est un geste familière et ce n'est pas le même objet — la salle ne défile plus toute seule pendant qu'on descend, le compteur ne compte plus, la jauge ne bouge plus, et l'on peut traverser la page sans avoir vu une seule toile parce que rien n'invite à pousser de côté. Il reprend donc sa mécanique d'ordinateur : l'écran s'épingle, la piste est translatée d'un bloc par le défilement VERTICAL. C'est une seule transformation par image sur un seul élément — le coût est le même qu'un carrousel, qui translate lui aussi son contenu. LA MESURE DES TOILES, ELLE, RESTE CELLE DU TÉLÉPHONE (voir plus bas) : en largeur et non en hauteur, sinon une marine en 4:3 sort de l'écran. C'était un défaut distinct, corrigé séparément, et il n'y a aucune raison de le réintroduire ici. */ .ci-tete{top:clamp(74px,11svh,120px)} /* ═══ LA TOILE SE MESURE EN LARGEUR, PAS EN HAUTEUR ═══ Elle était dimensionnée par sa HAUTEUR — 46 % de l'écran — et sa largeur suivait son rapport. Sur un téléphone, une marine en 4:3 fait alors nettement plus large que l'écran : la première toile sortait du cadre et se collait au bord gauche, sans marge. Et comme le conteneur est un défilement à accrochage, le navigateur l'accrochait au chargement en décalant de vingt pixels — soit exactement la marge de page. Les deux défauts s'annulaient à l'affichage et l'on ne voyait qu'un seul symptôme : une image collée au bord. Mesurée en largeur, elle tient dans l'écran quel que soit son rapport, et l'accrochage la centre pour de bon. Le `scroll-padding` fait le reste : il dit au navigateur de ne pas manger la marge en accrochant. */ /* La piste garde son remplissage d'ordinateur, mais 22vw de marge de part et d'autre ne veulent rien dire sur un téléphone : la première toile arriverait déjà à moitié passée. */ .ci-piste{padding:0 max(var(--ci-marge),12vw);gap:clamp(22px,6vw,40px)} .ci-toile__vue{ --hh:auto !important; width:min(76vw,320px); height:auto; } /* Les lignes de fuite se resserrent : à sept pour cent d'un écran haut et étroit, une toile sortait par le haut du cadre épinglé. */ .ci-toile--haut{--dy:-3.5svh} .ci-toile--bas{--dy:3svh} /* La jauge revient : sur un plan épinglé qui dure une page et demie, c'est la seule chose qui dise que la page n'est pas bloquée. */ .ci-compte i{width:42px} } /* ===================================================================== MOUVEMENT RÉDUIT — le montage s'arrête, la page reste --------------------------------------------------------------------- Sous `prefers-reduced-motion`, on ne ralentit pas les animations : on les supprime, et on supprime AVEC ELLES les courses de défilement. Garder des sections de deux écrans et demi sans rien y faire bouger, c'est imposer trois molettes de vide à la personne qui a précisément demandé qu'on lui épargne le mouvement. ===================================================================== */ @media (prefers-reduced-motion:reduce){ .ci-ouverture,.ci-phrase,.ci-travelling,.ci-faits{height:auto !important} .ci-ouverture__ecran,.ci-phrase__ecran,.ci-travelling__ecran,.ci-faits__ecran{ position:static !important;height:auto !important;min-height:0 !important; padding-top:clamp(80px,12svh,140px);padding-bottom:clamp(80px,12svh,140px); overflow:visible !important; } .ci-ouverture__ecran{display:block} .ci-plaque{position:relative;clip-path:none;height:60svh} .ci-plaque img{transform:none} .ci-plaque::after{opacity:0} /* Le cartel redevient un bloc ordinaire SOUS l'image : en absolu il se poserait sur le premier ancêtre positionné, qui n'est plus l'écran une fois celui-ci décollé. Il reprend donc l'encre du papier. */ .ci-ouverture__texte{ position:static;transform:none;opacity:1; margin-top:clamp(28px,5svh,48px);max-width:none;color:var(--ci-encre); } .ci-cartouche__maison{color:var(--ci-encre-2)} .ci-cartouche__nom,.ci-ouverture--signature .ci-titre{color:var(--ci-encre)} .ci-cartouche__nom small,.ci-cartouche__faits{color:var(--ci-encre-2)} .ci-descente{display:none} .ci-grain{animation:none} .ci-tete{position:static;padding:0 var(--ci-marge);margin-bottom:26px} .ci-piste{ transform:none;width:auto;overflow-x:auto; scroll-snap-type:x mandatory;padding:0 var(--ci-marge); } .ci-toile{transform:none} .ci-on .ci-fenetre > *, .ci-on .ci-fait__in > *, .ci-on .ci-dit .ci-l{ animation:none !important;transform:none !important; opacity:1 !important;clip-path:none !important; } .ci-l-fantome{display:none} .ci-on .ci-note{opacity:1;transform:none} .ci-on .ci-portrait__vue::after{display:none} .ci-on .ci-portrait__vue img{transform:none} .ac > .ci-reperes{display:none} } /* ===================================================================== IL N'Y A PLUS DE TON ENCRE — LA MATIÈRE S'EN CHARGE --------------------------------------------------------------------- Un ton encre translucide était posé sur toute la page pour ramener la nappe dans une plage de valeurs où du texte clair tient. Il marchait, et c'était un filtre : on fabriquait une matière pour la regarder, puis on posait un verre teinté dessus. La correction a été faite en amont, dans le shader : la palette de la nappe ne passe plus par un blanc de papier, elle plafonne à un bleu d'écume. Les volutes, les veines et le sillage du curseur sont les mêmes — seules les valeurs descendent. Il n'y a donc plus rien à couvrir, et plus aucun filtre sur cette page ni sur les autres. ===================================================================== */ /* ===================================================================== LE TEXTE PASSE EN CLAIR APRÈS LE PREMIER ÉCRAN --------------------------------------------------------------------- Les cinq mouvements qui suivent le héros sont désormais posés sur de l'encre : leurs jetons de couleur s'inversent. Un seul bloc suffit parce que toute la couche `.ci-` lit ces quatre variables et ne code presque aucune couleur en dur — c'était le but en les écrivant. L'AZUR CHANGE DE VALEUR, PAS DE NATURE. #004aad est une encre faite pour du papier : sur un fond sombre elle est plus noire que lui et disparaît. L'accent passe donc à l'azur clair, celui que le thème emploie déjà pour les liens sur fond sombre. Même couleur, deux lumières — la règle est la même que pour le titre du héros. ===================================================================== */ .ci-phrase, .ci-travelling, .ci-faits, .ci-peintre, .ci-sortie{ /* LE TEXTE EST REVENU EN ENCRE SOMBRE. Il était passé en clair quand la nappe avait été assombrie pour porter du blanc sans filtre. La palette d'origine a été rendue — le fond est de nouveau clair — donc l'encre revient avec lui. Mesuré sans aucun voile, à la force de 0,30 : 5,7:1 pour le corps. */ --ci-encre:#0d1117; /* Même raison qu'en tête de feuille : plus de gris sur la nappe. */ --ci-encre-2:#0d1117; --ci-trait:rgba(13,17,23,.14); --ci-bleu:#004aad; } /* Les quelques valeurs qui n'étaient pas des jetons, et qu'il faut donc reprendre une à une. Elles sont peu nombreuses — c'est la mesure de ce que les jetons ont fait gagner. */ /* La copie pâle de la phrase : elle tenait la place en gris très clair sur du papier, il lui faut du blanc très faible sur de l'encre. */ .ci-l-fantome{color:rgba(13,17,23,.11)} /* Le fond des cases d'œuvres et du portrait, visible le temps que l'image arrive. Un gris clair y ferait un rectangle blanc qui clignote au chargement. */ .ci-toile__vue, .ci-portrait__vue{background:rgba(13,17,23,.04)} /* Les ombres portées. Sur du papier, une ombre bleutée à 55 % suffisait à décoller une toile du mur ; sur de l'encre elle ne se voit plus. On l'assombrit et on la resserre — sans quoi les toiles du travelling paraissent collées sur le fond. */ .ci-toile__vue{box-shadow:0 30px 70px -44px rgba(9,32,60,.55)} .ci-portrait__vue{box-shadow:0 44px 90px -58px rgba(9,32,60,.6)} /* Le rideau qui découvre le portrait était de la couleur du papier : sur de l'encre, il doit être de la couleur de l'encre, sinon on voit un volet blanc remonter au lieu de voir la page s'ouvrir. */ .ci-on .ci-portrait__vue::after{background:var(--ci-papier)} /* Le bouton plein. Sur papier il était bleu à texte blanc ; sur encre c'est l'inverse — un pavé clair, du texte sombre — parce qu'un bleu plein sur un fond bleu ne se détache de rien. */ /* Les boutons reprennent leur dessin sur papier : bleu plein à texte blanc, et le remplissage du survol en encre. */ .ci-btn--plein{background:var(--ci-bleu);color:#fff;border-color:var(--ci-bleu)} .ci-btn--plein::before{background:var(--ci-encre)} @media (prefers-reduced-motion:reduce){ /* Sans la nappe animée, le ton encre n'a plus de matière à tempérer : il resterait un aplat sombre sur un fond clair. On le retire, et la page reprend son encre sur papier. */ .ac::before{display:none} .ci-phrase,.ci-travelling,.ci-faits,.ci-peintre,.ci-sortie{ --ci-encre:#0d1117; /* La nappe est là sous mouvement réduit aussi — simplement immobile. Le gris y serait tout aussi illisible. */ --ci-encre-2:#0d1117; --ci-trait:rgba(13,17,23,.14); --ci-bleu:#004aad; } } /* ===================================================================== IL N'Y A RIEN ENTRE LE TEXTE ET LA NAPPE — ÉTAT DE TRAVAIL --------------------------------------------------------------------- Quatre réponses ont été écrites, essayées sur image, et retirées : 1. DILUER la nappe sous le texte (la « descente » à 0,30) — refusée : le fond redevenait presque blanc ; 2. POSER un ton encre par-dessus (le « filtre ») — refusé : filtrer une matière fabriquée pour être regardée est un aveu ; 3. DONNER au texte son propre sol (le verre, avec puis sans bords) — refusé : un plan de plus sur une page qui n'en voulait pas ; 4. FAIRE S'ÉCARTER la nappe autour du texte (le shader épargnait les bandes écrites) — refusé aussi. Aucune n'était fausse techniquement — les quatre donnaient entre 5,5 et 8,3 de contraste mesuré. Elles ont toutes été jugées laides, et c'est un verdict qui ne se discute pas avec des chiffres. L'ÉTAT ACTUEL EST DONC NU, ET IL EST ASSUMÉ COMME TEL : le texte des sections est posé sur la nappe entière, et il n'y est pas lisible — 1,34:1 pour l'encre sur les zones denses, 1,35:1 pour le blanc sur les veines pâles, contre 4,5 attendus. C'est un point d'observation, pas une livraison. CE QUI RESTE À ESSAYER, et qui ne touche ni au fond ni n'ajoute de plan : que la LETTRE porte son propre appui — une ombre très large et très faible, ou un contour d'un demi-pixel. C'est la seule piste listée qui n'ait pas encore été écrite. ===================================================================== */ /* ===================================================================== MODE SOMBRE — L'ENCRE S'INVERSE --------------------------------------------------------------------- Le thème a un interrupteur de nuit : il pose `cda-dark` sur ``, et `accueil.css` retourne déjà ses jetons (`--ac-encre` passe à #f2f2f2, `--ac-papier` à #05070b). La couche cinématique, elle, ne le suivait PAS : trois blocs plus bas dans la feuille — le socle des cinq mouvements, le papier du héros, et la variante à mouvement réduit — réécrivaient `--ci-encre` en #0d1117 EN DUR. Cette valeur gagnait, puisqu'elle vient après. Mesuré sur la page : les jetons `--ac-*` valaient bien la nuit, `--ci-encre` restait à rgb(13,17,23), et les trois faits s'écrivaient donc en noir sur une nappe devenue sombre. On ne remet pas ici les couleurs du jour en var() : ces blocs en dur existent pour des raisons mesurées, et les défaire casserait le jour pour réparer la nuit. On ajoute au contraire un dernier bloc, plus spécifique et plus bas, qui ne s'applique que la nuit. LE GRIS NE REVIENT PAS DAVANTAGE LA NUIT QUE LE JOUR. `--ci-encre-2` reprend la même valeur que `--ci-encre` : sur une nappe en mouvement, la hiérarchie est portée par le corps et la graisse, pas par une nuance de gris qu'on paie en lisibilité. ===================================================================== */ html.cda-dark .ac, html.cda-dark .ci-phrase, html.cda-dark .ci-travelling, html.cda-dark .ci-faits, html.cda-dark .ci-peintre, html.cda-dark .ci-sortie{ --ci-encre:#f2f2f2; --ci-encre-2:#f2f2f2; --ci-trait:rgba(255,255,255,.16); /* L'azur de charte est une encre faite pour du papier : la nuit, il est plus sombre que son fond. On reprend l'azur clair du thème, le même que celui des liens sur fond sombre. */ --ci-bleu:#9cc7ff; /* `--ci-papier` était posé en dur à #f1ede5 au milieu de la feuille — la seule des quatre variables que `html.cda-dark .ac` d'accueil.css ne pouvait pas atteindre, puisqu'elle ne s'appelle pas `--ac-`. Un panneau crème sous du texte blanc, c'est du texte invisible. */ --ci-papier:#05070b; } /* Même sous mouvement réduit : le bloc `prefers-reduced-motion` remet l'encre du jour, et il est plus spécifique qu'un simple sélecteur de classe. Il faut donc le reprendre à l'intérieur de la même requête. */ @media (prefers-reduced-motion:reduce){ html.cda-dark .ci-phrase, html.cda-dark .ci-travelling, html.cda-dark .ci-faits, html.cda-dark .ci-peintre, html.cda-dark .ci-sortie{ --ci-encre:#f2f2f2; --ci-encre-2:#f2f2f2; --ci-trait:rgba(255,255,255,.16); --ci-bleu:#9cc7ff; } } /* Le mot en azur du grand titre. Le jour, la nappe est claire et l'encre de charte y est dense ; la nuit, elle s'y noie. */ html.cda-dark .ci-ouverture--nappe{--ci-titre-azur:#9cc7ff} /* Les quatre valeurs qui ne sont pas des jetons, reprises une à une — ce sont les mêmes quatre que le bloc du jour reprend, retournées. */ html.cda-dark .ci-l-fantome{color:rgba(255,255,255,.10)} html.cda-dark .ci-toile__vue, html.cda-dark .ci-portrait__vue{background:rgba(255,255,255,.05)} /* Le bouton plein devient un pavé clair : son texte doit donc être sombre, et le remplissage du survol — qui prend `--ci-encre`, c'est- à-dire du blanc — appelle la même inversion. */ html.cda-dark .ci-btn--plein{color:#06121f} html.cda-dark .ci-btn:hover, html.cda-dark .ci-btn:focus-visible{color:#06121f} /* ===================================================================== LA SÉLECTION EN TOILES (refonte 2026-10) Les œuvres ne sont plus des images à plat : une épaisseur (l'ombre dure décalée), une inclinaison qui suit la vitesse du défilement (--v, posée par accueil-cine.js), une lumière qui glisse au survol (--mx, --my). Les aquarelles prennent un passe-partout : leur papier ne se perd plus dans le blanc de la nappe. ===================================================================== */ .ci-piste{perspective:1600px} .ci-toile__vue{ transform:rotateY(calc(var(--v,0) * -16deg)) skewY(calc(var(--v,0) * -1.2deg)); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s; } .ci-toile__vue::after{ content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.42),transparent 46%); mix-blend-mode:soft-light; } .ci-toile:hover .ci-toile__vue{transform:translateY(-6px) rotateY(calc(var(--v,0) * -16deg + var(--rx,0) * 1deg)) rotateX(calc(var(--ry,0) * 1deg))} .ci-toile:hover .ci-toile__vue::after{opacity:1} .ci-cartel{display:inline-block;background:rgba(247,244,238,.94);padding:10px 14px 12px;margin-top:12px} @media (prefers-reduced-motion:reduce){.ci-toile__vue{transform:none!important;transition:none}} /* Le titre fait de pigment : le texte reste dans la page, la nappe le dessine (accueil-nappe.js). */ .ci-affiche__bas.ci-mot-pigment{color:transparent} /* ===================================================================== L'ENCHAÎNEMENT PHRASE → SÉLECTION (refonte 2026-10) La phrase s'encre vite (finie à --p = 0,3), TIENT la moitié du passage pour qu'on ait le temps de la lire, puis glisse vers la gauche (--p de 0,8 à 1). La section est presque deux fois plus longue qu'avant (×2,4). La sélection est remontée pour être déjà collée à ce moment-là, et sa piste entre par la droite (--entree, posée par accueil-cine.js) : un seul mouvement horizontal, sans montée. La classe n'est posée qu'avec le mouvement actif : sinon, rien ne change. ===================================================================== */ .ci-enchaine .ci-phrase{height:calc(100svh + var(--ci-course) * 2.4)} .ci-enchaine.ci-on .ci-dit .ci-l{--seuil:calc((var(--l) / var(--n)) * .18);--avance:clamp(0,(var(--p) - var(--seuil)) / .12,1)} .ci-enchaine .ci-dit,.ci-enchaine .ci-phrase .ci-note{transform:translate3d(calc(clamp(0,(var(--p) - .8) / .2,1) * -115vw),0,0);will-change:transform} .ci-enchaine .ci-piste{transform:translate3d(calc(var(--x,0) * -1px + (1 - var(--entree,1)) * 100vw),0,0) skewX(calc(var(--v) * -1.1deg))} .ci-enchaine .ci-tete{opacity:var(--entree,1)} /* ===================================================================== LE RELIEF (refonte 2026-10) Une lumière au curseur (--lx, --ly posées par accueil-cine.js) : • les plans se décalent à des vitesses différentes — le texte devant, les grandes toiles, puis les petites, la nappe au fond ; • les ombres portées partent à l'opposé du curseur ; • les grands titres prennent une épaisseur et s'inclinent vers la lumière. ===================================================================== */ .ci-dit,.ci-faits__titre,.ci-peintre__dit h2,.ci-porte--large h2{ text-shadow:.7px .9px 0 rgba(9,32,60,0.35),1.4px 1.8px 0 rgba(9,32,60,0.28),2.1px 2.7px 0 rgba(9,32,60,0.21),2.8px 3.6px 0 rgba(9,32,60,0.14),0 22px 30px rgba(9,32,60,.26); translate:calc(var(--lx,0) * -18px) calc(var(--ly,0) * -12px); } .ci-faits__titre,.ci-peintre__dit h2,.ci-porte--large h2{transform:perspective(900px) rotateY(calc(var(--lx,0) * 6deg)) rotateX(calc(var(--ly,0) * -4deg))} .ci-enchaine .ci-dit{transform:translate3d(calc(clamp(0,(var(--p) - .8) / .2,1) * -115vw),0,0) perspective(900px) rotateY(calc(var(--lx,0) * 6deg)) rotateX(calc(var(--ly,0) * -4deg))} .ci-toile{--prof:10px;translate:calc(var(--lx,0) * var(--prof) * -1) calc(var(--ly,0) * var(--prof) * -.7)} .ci-toile--grande{--prof:15px}.ci-toile--petite{--prof:5px} /* Le passe-partout du catalogue (.ip-carte__media) : même carton, même feuillure ; l'ombre portée reste fixe (la recalculer à chaque mouvement coûtait cher). La feuillure est peinte par-dessus l'image (::before) pour creuser l'ouverture comme un vrai passe-partout. */ .ci-toile__vue{ border:clamp(10px,.9vw,14px) solid transparent; background:linear-gradient(160deg,#fbfaf6,#f1ede4) padding-box,linear-gradient(160deg,#f2eee4,#e6e0d2) border-box; box-shadow:0 34px 60px -24px rgba(9,34,62,.55); } .ci-toile__vue::before{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(24,38,56,.1),inset 0 13px 20px -12px rgba(6,20,38,.62),inset 0 -7px 15px -11px rgba(6,20,38,.38),inset 11px 0 17px -13px rgba(6,20,38,.34),inset -11px 0 17px -13px rgba(6,20,38,.34); } .ci-cartel{box-shadow:0 8px 18px -6px rgba(9,32,60,.35)} .ci-portrait{translate:calc(var(--lx,0) * -12px) calc(var(--ly,0) * -8px);filter:drop-shadow(0 26px 30px rgba(9,32,60,.35))} @media (prefers-reduced-motion:reduce){.ci-dit,.ci-faits__titre,.ci-peintre__dit h2,.ci-porte--large h2,.ci-toile,.ci-portrait{translate:none;transform:none}} /* Les trois faits sur plaque : sur le couchant (orangé, prune), le texte courant ne tenait plus. Même papier que les cartels des toiles. */ .ci-fait{ padding:22px clamp(18px,1.8vw,28px) clamp(20px,2vw,30px); background:rgba(247,244,238,.95); box-shadow:0 16px 34px -14px rgba(9,32,60,.4); } .ci-fait::before{margin-top:4px} /* Le portrait du peintre est accroché avec le cadre bleu, comme sur la page JJG (.ac2-accroche__cadre) : même moulure, même marie-louise. */ .ci-portrait__vue{ border:clamp(13px,1.5vw,26px) solid transparent; border-image:url('../media/cadre-bordure.webp') 50 stretch; padding:clamp(9px,.9vw,16px); background:linear-gradient(160deg,#fbfaf6,#efebe0); } /* LA MATIÈRE (voir accueil-cine.js) : le canvas éclairé se pose exactement sur l'image, sous la feuillure du passe-partout (::before) et le reflet (::after). */ .ci-matiere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .35s} .ci-matiere.est-pret{opacity:1} /* La nappe pleine jusqu'en haut : le pied blanc sous le titre garde une ombre douce pour rester lisible sur les veines claires. */ .ci-ouverture--nappe .ci-affiche__pied,.ci-ouverture--nappe .ci-descente{text-shadow:0 1px 12px rgba(0,22,60,.6)} /* ═══ DES ANGLES DOUX (24/10/2026) — voir pages.css ═══ Sauf le portrait du peintre, qui garde sa moulure à angle vif. */ .ci-toile__vue{border-radius:16px} .ci-toile__vue::before, .ci-toile__vue::after{border-radius:5px} .ci-cartel,.ci-note{border-radius:12px} .ci-fait{border-radius:18px} .ci-btn{border-radius:999px} .ci-sortie__in{border-radius:22px} /* Le texte du peintre sur la nappe pleine ne se lisait plus : il passe sur le même papier que les autres panneaux. */ .ci-peintre__dit{ background:rgba(247,244,238,.95); border-radius:22px; padding:clamp(24px,3vw,48px); box-shadow:0 30px 70px -36px rgba(0,20,50,.5); } /* Le bas de l'accueil : seul « Écrire » est posé sur le papier. « Voir toutes les toiles » reste à même la nappe, en blanc comme « COULEUR » en tête de page — sur le bleu de nuit de la sortie, c'est le blanc qui se lit. */ .ci-porte--etroite{ background:rgba(247,244,238,.95); border-radius:22px; padding:clamp(24px,3vw,48px); box-shadow:0 30px 70px -36px rgba(0,20,50,.5); } .ci-porte--large h2, .ci-porte--large p{color:#fff} .ci-porte--large h2{text-shadow:0 2px 0 rgba(0,22,60,.35),0 18px 34px rgba(0,22,60,.45)} .ci-porte--large p{text-shadow:0 1px 12px rgba(0,22,60,.6)} /* Les phrases courtes sont équilibrées : « format. » ne tombait plus seul sur sa ligne sous « Voir toutes les toiles ». */ .ci-porte p,.ci-fait p,.ci-cartel i{text-wrap:balance}