/* ============================================================================ METSENS — « LE FAIRE-PART » Le site n'est pas une page : c'est un OBJET. Un menu grand format suspendu dans le noir, qu'on feuillette. La 3D est dans l'objet et dans le tournage de la page — jamais dans le texte qu'on est en train de lire. Une page posée est immobile, plein cadre, face caméra : on lit comme sur du papier. Deux couches partagent exactement la même caméra : · le DOM, en 3D CSS (perspective: var(--P), origine 50% / var(--po)%) · un canvas WebGL, dont le shader applique la MÊME formule s = P/(P-z) Les guirlandes ne sont pas un fond : elles sont dans le même volume, et le livre flotte devant elles. ========================================================================= */ /* ---------- 1. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } img, svg, canvas { display: block; max-width: 100%; } [hidden] { display: none !important; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ---------- 2. JETONS ---------- */ :root { --bone: #EDEAE3; --bone-dim: #8B8D94; --bone-far: #55585F; --line: rgba(237,234,227,.13); --line-soft: rgba(237,234,227,.07); --cold: #5C8FA5; --amber: #F0A94C; --amber-hot: #FFDCA8; /* LA COUVERTURE. Elle etait cablee pour un fond sombre — un #0A0C11 en dur en fin de degrade la gardait noire quelle que soit l'heure. Ces jetons la rendent claire ou sombre selon la lumiere du document. */ --couv-3: #0A0C11; --couv-encre: #EDEAE3; --couv-titre: #FFDCA8; --couv-accent: #F0A94C; --couv-encre-2: #8B8D94; --couv-fort: #FFDCA8; /* les chiffres de la preuve */ --couv-fil: rgba(240,169,76,.42); --couv-fil-2: rgba(240,169,76,.16); --couv-fil-3: rgba(240,169,76,.30); --couv-haut: rgba(255,246,232,.75); --couv-bas: rgba(120,66,10,.9); --couv-voile: linear-gradient(178deg, rgba(255,205,140,.16), transparent 42%, rgba(0,0,0,.20)); /* LA CAMÉRA. Une seule valeur pilote le DOM 3D et le shader WebGL. */ --P: 1400px; --po: 47; /* origine de perspective, en % de hauteur */ --rail: clamp(6rem, 9vw, 8.5rem); --rail-x: clamp(1rem, 2.4vw, 2.2rem); --marge-rail: calc(var(--rail-x) + var(--rail) + 1.6rem); /* LE FORMAT DE PAGE. Toute la typographie est dosée en fraction de la largeur de page : le livre se compose comme un imprimé, pas comme un écran — il change de taille, jamais de proportions. */ --pw: min(calc((100vw - var(--marge-rail) * 2) / 2), calc(82svh / 1.36), 37rem); --ph: calc(var(--pw) * 1.36); --t-titre: calc(var(--pw) * .118); --t-sous: calc(var(--pw) * .066); --t-corps: calc(var(--pw) * .0378); --t-petit: calc(var(--pw) * .0335); --t-mono: calc(var(--pw) * .0232); --t-nombre: calc(var(--pw) * .142); --gut: clamp(1.15rem, 3.5vw, 3.5rem); --ease: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.65,0,.28,1); --ease-page: cubic-bezier(.58,.02,.24,1); /* Le tournage. Une seule durée et une seule courbe pour la rotation, l'élévation, le reflet et l'ombre portée — sinon les horloges se désaccordent et le geste devient saccadé. Le JS les relit ici. */ --t-tourne: 1150ms; /* LE SEUIL. Deux durées longues et deux courbes qui démarrent lentement : une porte de coffret ne claque pas, elle cède. Tout le « velours » est ici — pas un effet de plus, un temps plus long. */ /* L'ARRIVEE tient a ce seul chiffre : le temps que met le paysage a monter. La porte et le carton en decoulent, retards compris. Il etait a 2400ms — juste, mais on attendait la page. A 1400ms l'etagement se sent encore et l'accueil est la en deux secondes. */ --t-lever: 1400ms; --d-porte: calc(var(--t-lever) * .34); --d-carton: calc(var(--t-lever) * .62); --t-seuil: 1900ms; --t-plonge: 1450ms; --ease-seuil: cubic-bezier(.32,.02,.16,1); --ease-plonge: cubic-bezier(.42,.00,.14,1); --ease-tourne: cubic-bezier(.42,.02,.16,1); --f-disp: "Archivo", "Helvetica Neue", Arial, sans-serif; /* LA SERIF DE COUVERTURE. Une Didone (Bodoni, Didot) est la lettre de la place Vendome, mais c'est aussi le cas d'ecole du probleme de lisibilite : contraste extreme entre pleins et delies, empattements en cheveu. A petit corps, ou pour un oeil age, les delies disparaissent purement et simplement. Mais un Baskerville, dessine pour le texte courant, est trop GRAS a taille d'affichage. On prend donc un GARAMOND — la lettre classique francaise, celle des editions soignees : contraste modere, ni le cheveu de la Didone ni la patte du Baskerville. Sa hauteur d'x est plus petite : les corps sont remontes en consequence, et les graisses aussi — sur fond sombre, un texte clair s'amincit. Le chic vient alors de la mise en page, des filets d'or et de l'air, pas de la finesse du trait. */ --f-titre: "EB Garamond", "Garamond", "Palatino Linotype", "Georgia", serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* ========================================================================== 2 bis. LES HEURES Toute la lumière du site vient d'UNE source : la voûte. On la paramètre, et le reste suit — le vide, la brume, le papier, le voile des photos, la couleur du verre des ampoules. Une prestation = une heure. `--jour` (0 → 1) et `--ampoule` / `--verre` / `--fil` sont lus par le JS et passés au shader : le CSS reste la source unique, comme pour `--P`. À 0 les ampoules émettent (fusion additive). À 1 elles n'émettent plus : ce sont des perles de verre sur un câble, et un câble se voit parce qu'il est SOMBRE sur le ciel. ========================================================================== */ /* ---- NUIT · le cocktail dînatoire. Feutré. C'est l'heure de la maison. ---- */ :root, [data-heure="nuit"] { /* L'OMBRE DU LIVRE — COURTE, ET C'EST TOUT LE SUJET. Elle a ete retiree parce qu'a 112 px de flou elle s'escaliait en anneaux sur le ciel. Elle revient a 9 et 19 px : a cette longueur un alpha dispose de largement assez de niveaux pour rester continu, et l'objet reprend son poids sur la photo. ELLE EST BLANCHE, ET NON TEINTEE. Le raisonnement « sous un ciel bleu les ombres sont bleues » est physiquement juste, mais a l'ecran ce bleu se lisait comme un cerne. Un degrade du BLANC vers le transparent fait autre chose : ce n'est plus une ombre qui salit, c'est de la lumiere qui se repand sous l'objet. Trois teintes montees et comparees a l'angle du livre. A .55 elle eclaircissait franchement le ciel autour du livre, et un blanc pose sur du bleu se lit comme un halo BLEU : Thomas a d'abord cru que la teinte n'avait pas change. Ce n'etait pas la couleur, c'etait la quantite. PLUS TRANSPARENTE, ET PLUS LOIN — les deux ensemble. Baisser la seule opacite ne suffisait pas : une lueur plus faible PARAIT plus petite, parce que sa frange passe sous le seuil du visible. Il faut donc elargir en meme temps qu'on eclaircit. On est passe de 10 et 19 px de portee a 32 et 64, et de .28/.17 a .20/.12. LA LIMITE EST MESUREE, pas devinee : trois portees montees et le ciel amplifie au maximum sur chacune. A 48 et 96 px, les contours concentriques reapparaissent — c'est le meme defaut qui avait produit le halo. PUIS RAMENEE DE MOITIE. Meme sous la limite du banding, elle irradiait trop : le livre avait l'air pose sur une lampe. .10 et .06, portee 22 et 45 px. C'est le quatrieme reglage de cette lueur — et c'est normal : ce qui se juge ici n'est pas une valeur mais un rapport entre l'objet et la photo derriere. Ca ne se calcule pas, ca se regarde. */ --ombre-page: 0 .45rem 1.4rem rgba(255,255,255,.10), 0 1.2rem 2.8rem rgba(255,255,255,.06); --void: #07080B; --void-2: #0B0D12; --ciel: radial-gradient(120% 85% at 50% 4%, rgba(240,169,76,.11), transparent 58%), radial-gradient(100% 70% at 50% 100%, rgba(92,143,165,.07), transparent 62%); --coiffe: linear-gradient(180deg, rgba(7,8,11,.82), rgba(7,8,11,.45) 34%, transparent); /* VOILE COURT, ET C'EST LA RAISON DU HALO. Elargi a 150 % x 124 % pour proteger le menu sur une photo, il devenait un immense degrade tres faible — et un alpha de .3 etale sur sept cents pixels ne dispose pas d'assez de niveaux en 8 bits : il se decoupe en ANNEAUX CONCENTRIQUES sur un ciel lisse. C'est ce qu'on prenait pour un halo autour du livre. Une rampe COURTE ne peut pas se decouper : le voile est donc resserre sur le menu, et plus franc la ou il sert. */ /* LE VOILE EPOUSE L'EN-TETE, il ne rayonne plus depuis un coin. Il etait RADIAL et ancre en haut a gauche. Tant que l'en-tete est un rail etroit, ca marche ; des qu'il s'elargit ou s'allonge — fenetre etroite, telephone — le cercle ne couvre plus ses propres elements et le menu se perd sur la photo. Deux fois de suite j'ai essaye de le rattraper en l'agrandissant : c'est ce qui a produit les anneaux. Un degrade VERTICAL suit la boite quelle que soit sa forme, et sa rampe est courte — donc il ne peut pas se decouper. Le bord droit est adouci par le masque, en horizontal, pour la meme raison. */ --voile-rail: linear-gradient(180deg, rgba(7,8,11,.94) 0%, rgba(7,8,11,.86) 52%, rgba(7,8,11,.44) 80%, transparent 100%); --ombre-rail: 0 0 10px rgba(0,0,0,.80), 0 1px 3px rgba(0,0,0,.65); --bokeh: radial-gradient(circle, rgba(255,220,168,.30), rgba(240,169,76,.11) 45%, transparent 70%); --papier: #F2EDE3; --papier-2: #E8E1D3; --encre: #14161B; --encre-2: #55585F; --encre-3: #8A8478; --filet: rgba(20,22,27,.17); --filet-2: rgba(20,22,27,.09); --or: #A06B22; --froid-p: #3B6980; --couv: #101319; --couv-2: #191D25; --lum-page: linear-gradient(178deg, rgba(255,222,172,.42), rgba(255,230,190,.06) 38%, rgba(46,32,16,.05) 82%, rgba(46,32,16,.13)), radial-gradient(120% 78% at 50% -14%, rgba(255,236,205,.45), transparent 60%); --lum-force: .5; --voile-photo: linear-gradient(180deg, rgba(240,169,76,.20), transparent 34%, rgba(7,8,11,.30) 68%, rgba(7,8,11,.78)); --voile-vignette: linear-gradient(180deg, rgba(240,169,76,.16), rgba(26,20,12,.30)); --chrome: #EDEAE3; --chrome-dim: #8B8D94; --chrome-far: #55585F; --trait: rgba(237,234,227,.13); --trait-2: rgba(237,234,227,.07); --accent: #F0A94C; --jour: 0; --ampoule: 1.00, 0.70, 0.34; --verre: 0.10, 0.09, 0.08; --fil: 0.26, 0.19, 0.11; } /* ---- SOIR · l'accueil. Un crépuscule de Provence : le ciel tient encore la chaleur du jour, les guirlandes sont déjà allumées. C'est l'heure de la maison — pas la nuit noire, qui reste celle du cocktail. ---- */ [data-heure="soir"] { --ombre-page: 0 .45rem 1.4rem rgba(255,255,255,.10), 0 1.2rem 2.8rem rgba(255,255,255,.06); --void: #2A1C13; --void-2: #221610; --ciel: radial-gradient(150% 108% at 50% 116%, rgba(255,178,104,.62), rgba(214,124,68,.28) 46%, transparent 76%), radial-gradient(120% 78% at 16% -6%, rgba(255,206,150,.26), transparent 58%), radial-gradient(110% 82% at 86% 6%, rgba(92,84,124,.36), transparent 62%); --coiffe: linear-gradient(180deg, rgba(30,18,10,.70), rgba(30,18,10,.32) 38%, transparent); --voile-rail: linear-gradient(180deg, rgba(24,14,7,.94) 0%, rgba(24,14,7,.86) 52%, rgba(24,14,7,.44) 80%, transparent 100%); --ombre-rail: 0 0 10px rgba(0,0,0,.80), 0 1px 3px rgba(0,0,0,.65); --bokeh: radial-gradient(circle, rgba(255,226,180,.38), rgba(255,180,110,.14) 45%, transparent 70%); --papier: #F7F1E4; --papier-2: #EEE5D3; --encre: #17130E; --encre-2: #565046; --encre-3: #8E8778; --filet: rgba(23,19,14,.17); --filet-2: rgba(23,19,14,.09); --or: #9C6318; --froid-p: #4A6E72; --couv: #241A12; --couv-2: #33251A; --lum-page: linear-gradient(176deg, rgba(255,220,166,.46), rgba(255,232,196,.07) 40%, rgba(62,40,18,.05) 84%, rgba(62,40,18,.12)), radial-gradient(126% 80% at 42% -14%, rgba(255,242,216,.50), transparent 60%); --lum-force: .46; --voile-photo: linear-gradient(180deg, rgba(255,186,120,.18), transparent 36%, rgba(34,22,12,.22) 70%, rgba(34,22,12,.62)); --voile-vignette: linear-gradient(180deg, rgba(255,196,130,.14), rgba(38,26,16,.22)); --chrome: #F6EEE3; --chrome-dim: #C0A992; --chrome-far: #8F7A66; --trait: rgba(246,238,227,.16); --trait-2: rgba(246,238,227,.08); --accent: #F0A94C; --jour: 0.18; --ampoule: 1.00, 0.76, 0.42; --verre: 0.13, 0.11, 0.09; --fil: 0.24, 0.17, 0.10; } /* ---- APRÈS-MIDI · le mariage. 17 h, soleil bas, tout est doré et ouvert. --- */ [data-heure="apresmidi"] { --ombre-page: 0 .45rem 1.4rem rgba(255,255,255,.10), 0 1.2rem 2.8rem rgba(255,255,255,.06); /* UN CIEL DE PROVENCE, ET RIEN D'AUTRE. La photo en plein cadre a ete abandonnee ICI, pour deux raisons qui tiennent toutes les deux : etiree au-dela de sa definition elle etait floue, et surtout TOUTE IMAGE DETAILLEE ANNULE LA VOUTE — sur un paysage, les guirlandes ne sont plus qu'un gribouillis de points. Un ciel est le seul fond ou des lumieres tendues veulent dire quelque chose. La regle vaut DERRIERE LE LIVRE, la ou la voute est allumee. Le seuil, lui, porte une vraie photo (section 19) : devant la porte il n'y a pas encore de voute, donc rien a gribouiller. Dessine plutot que photographie : net a n'importe quelle taille, et il ne pese rien. Les valeurs restent celles relevees sur la photo de Thomas (#8ECCFE au zenith, #B4E2FE a l'horizon) ; on creuse seulement le haut, sinon le ciel est plat et n'a pas de profondeur. */ --void: #CDE7F8; --void-2: #8FC8EE; --ciel: /* Le soleil, bas et a droite. C'est lui qui fait scintiller la voute : sans source de lumiere quelque part, les ampoules n'accrochent rien. */ radial-gradient(44% 40% at 84% 90%, rgba(255,240,200,.94), rgba(255,226,168,.34) 44%, transparent 72%), /* La chaleur qui monte de la terre, juste au-dessus de l'horizon. */ radial-gradient(150% 42% at 48% 106%, rgba(255,243,220,.70), rgba(255,234,196,.20) 48%, transparent 78%), /* Le ciel lui-meme : creuse au zenith, blanchi vers le bas. */ linear-gradient(180deg, #2C7CC6 0%, #4998D6 13%, #6DB2E6 28%, #96CDF3 46%, #B8DFF9 64%, #CDE7F8 82%, #D9EDFA 100%); /* Une vignette tres douce : le regard va au centre, ou est le livre. */ /* Le zenith se ferme un peu : un ciel sans haut n'a pas de plafond. */ --coiffe: linear-gradient(180deg, rgba(20,74,124,.30), rgba(20,74,124,.10) 46%, transparent); /* Le voile du rail descend plus bas et plus fort depuis que le fond est une PHOTO : sur un feuillage clair, le menu se perdait des la deuxieme entree. La lisibilite prime — un voile qui ne couvre que le logo ne protege que le logo. */ --voile-rail: linear-gradient(180deg, rgba(247,252,255,.94) 0%, rgba(247,252,255,.86) 52%, rgba(247,252,255,.44) 80%, transparent 100%); /* Un LISERE, pas un halo : trois ombres serrees font un contour blanc autour de chaque lettre. C'est ce qui tient sur un feuillage agite, la ou une nappe diffuse se contente d'eclaircir le desordre. */ --ombre-rail: 0 0 2px rgba(255,255,255,.98), 0 0 5px rgba(255,255,255,.92), 0 0 12px rgba(255,255,255,.78), 0 1px 2px rgba(255,255,255,.8); /* Le halo derriere le livre. Sur un vide noir il CREUSE ; sur un ciel clair, creuser ne donne qu'une aureole sale. On l'inverse donc : c'est de la lumiere diffusee derriere l'objet, comme un soleil au dos d'une feuille. La separation, elle, vient de l'ombre portee du livre. */ --bokeh: radial-gradient(circle, rgba(255,252,238,.60), rgba(206,232,246,.22) 45%, transparent 70%); --papier: #FBF7EE; --papier-2: #F0EBDF; --encre: #1A2429; --encre-2: #47555C; --encre-3: #7D8C93; --filet: rgba(26,36,41,.18); --filet-2: rgba(26,36,41,.09); --or: #A8701C; --froid-p: #4C6B52; /* LA COUVERTURE. Pierre claire, encre vert-de-pin, le nom dans le bleu du ciel de la photo, la tuile romaine en accent. */ /* PLACE VENDÔME : ivoire, noir d'encre, or. Trois valeurs, pas une de plus. Le bleu et la terre cuite disaient la Provence ; ils ne disent pas le chic. Le nom reste NOIR — l'or sur or fait enseigne, l'or en filet fait gravure. */ --couv: #F7F2E7; --couv-2: #FDFBF5; --couv-3: #EDE5D4; --couv-encre: #15130E; --couv-encre-2: #6A6355; --couv-fort: #8A6A21; --couv-titre: #15130E; --couv-accent: #9A7628; --couv-fil: rgba(154,118,40,.55); --couv-fil-2: rgba(154,118,40,.22); --couv-fil-3: rgba(154,118,40,.30); --couv-haut: transparent; --couv-bas: transparent; --couv-voile: linear-gradient(178deg, rgba(255,250,236,.30), transparent 46%, rgba(28,22,10,.07)); --lum-page: linear-gradient(174deg, rgba(226,242,255,.46), rgba(250,252,255,.08) 42%, rgba(30,56,78,.04) 84%, rgba(30,56,78,.10)), radial-gradient(130% 80% at 26% -16%, rgba(248,252,255,.55), transparent 62%); --lum-force: .38; --voile-photo: linear-gradient(180deg, rgba(203,231,242,.16), transparent 40%, rgba(22,40,54,.16) 72%, rgba(22,40,54,.50)); --voile-vignette: linear-gradient(180deg, rgba(203,231,242,.12), rgba(26,48,64,.18)); --chrome: #0F2836; --chrome-dim: #2E4956; --chrome-far: #7C6046; --trait: rgba(42,27,14,.22); --trait-2: rgba(42,27,14,.11); --accent: #8A4E12; --jour: 0.80; --ampoule: 1.00, 0.86, 0.66; --verre: 0.16, 0.13, 0.11; --fil: 0.15, 0.12, 0.10; } /* ---- MATIN · le séminaire. 8 h 30, lumière franche, rasante, qui réveille. -- */ [data-heure="matin"] { --ombre-page: 0 .45rem 1.4rem rgba(255,255,255,.10), 0 1.2rem 2.8rem rgba(255,255,255,.06); --void: #7C93A6; --void-2: #63798C; --ciel: radial-gradient(140% 100% at 80% -12%, rgba(255,250,236,.92), rgba(206,226,240,.46) 40%, transparent 70%), radial-gradient(120% 80% at 8% 10%, rgba(168,196,216,.55), transparent 58%), radial-gradient(120% 78% at 50% 116%, rgba(46,68,86,.55), transparent 64%); /* Vignette allegee : a .58 le matin avait un cerne sombre tout autour du cadre et la page tirait au nocturne, alors qu'il est 8 h. Une brume de jour se voit a peine — c'est justement ce qui la rend credible. */ --coiffe: linear-gradient(180deg, rgba(244,250,255,.66), rgba(244,250,255,.28) 42%, transparent); --voile-rail: linear-gradient(180deg, rgba(246,251,255,.94) 0%, rgba(246,251,255,.86) 52%, rgba(246,251,255,.44) 80%, transparent 100%); /* Un LISERE, pas un halo : trois ombres serrees font un contour blanc autour de chaque lettre. C'est ce qui tient sur un feuillage agite, la ou une nappe diffuse se contente d'eclaircir le desordre. */ --ombre-rail: 0 0 2px rgba(255,255,255,.98), 0 0 5px rgba(255,255,255,.92), 0 0 12px rgba(255,255,255,.78), 0 1px 2px rgba(255,255,255,.8); --bokeh: radial-gradient(circle, rgba(248,252,255,.40), rgba(186,214,232,.14) 45%, transparent 70%); --papier: #F5F5F2; --papier-2: #E8E9E6; --encre: #121619; --encre-2: #51585D; --encre-3: #848C90; --filet: rgba(18,22,25,.17); --filet-2: rgba(18,22,25,.09); --or: #8A6A2E; --froid-p: #2F6480; --couv: #0F1519; --couv-2: #182027; --lum-page: linear-gradient(184deg, rgba(226,240,252,.44), rgba(240,246,252,.06) 40%, rgba(20,30,38,.05) 82%, rgba(20,30,38,.12)), radial-gradient(120% 78% at 74% -14%, rgba(255,248,228,.42), transparent 60%); --lum-force: .44; --voile-photo: linear-gradient(180deg, rgba(200,226,244,.16), transparent 38%, rgba(12,18,24,.20) 70%, rgba(12,18,24,.62)); --voile-vignette: linear-gradient(180deg, rgba(196,222,240,.12), rgba(16,22,28,.22)); --chrome: #12212C; --chrome-dim: #3B5364; --chrome-far: #5C7484; --trait: rgba(18,33,44,.22); --trait-2: rgba(18,33,44,.11); --accent: #12495E; --jour: 0.92; --ampoule: 0.92, 0.94, 1.00; --verre: 0.13, 0.15, 0.17; --fil: 0.12, 0.14, 0.16; } /* ---- MIDI · la réception privée. Zénithal, chaleureux, à table dehors. ----- */ [data-heure="midi"] { --ombre-page: 0 .45rem 1.4rem rgba(255,255,255,.10), 0 1.2rem 2.8rem rgba(255,255,255,.06); --void: #A2916F; --void-2: #877860; --ciel: radial-gradient(140% 96% at 50% -16%, rgba(255,248,224,.95), rgba(238,214,170,.46) 42%, transparent 72%), radial-gradient(110% 74% at 12% 78%, rgba(122,110,74,.50), transparent 62%), radial-gradient(110% 74% at 88% 78%, rgba(138,120,84,.46), transparent 62%); /* Meme allegement qu'au matin : a midi, un cerne brun sur les bords eteignait la lumiere qu'on venait de poser. */ --coiffe: linear-gradient(180deg, rgba(255,248,226,.64), rgba(255,248,226,.27) 42%, transparent); --voile-rail: linear-gradient(180deg, rgba(255,250,232,.94) 0%, rgba(255,250,232,.86) 52%, rgba(255,250,232,.44) 80%, transparent 100%); /* Un LISERE, pas un halo : trois ombres serrees font un contour blanc autour de chaque lettre. C'est ce qui tient sur un feuillage agite, la ou une nappe diffuse se contente d'eclaircir le desordre. */ --ombre-rail: 0 0 2px rgba(255,255,255,.98), 0 0 5px rgba(255,255,255,.92), 0 0 12px rgba(255,255,255,.78), 0 1px 2px rgba(255,255,255,.8); --bokeh: radial-gradient(circle, rgba(255,252,238,.38), rgba(226,204,158,.14) 45%, transparent 70%); --papier: #F7F1E2; --papier-2: #EDE5D2; --encre: #16130E; --encre-2: #58524A; --encre-3: #8F8878; --filet: rgba(22,19,14,.17); --filet-2: rgba(22,19,14,.09); --or: #A0701F; --froid-p: #4A7060; --couv: #1E1912; --couv-2: #2A2318; --lum-page: linear-gradient(180deg, rgba(255,238,198,.46), rgba(255,244,216,.07) 36%, rgba(58,42,20,.05) 84%, rgba(58,42,20,.12)), radial-gradient(120% 74% at 50% -12%, rgba(255,246,222,.52), transparent 58%); --lum-force: .44; --voile-photo: linear-gradient(180deg, rgba(255,226,170,.14), transparent 38%, rgba(32,26,16,.16) 70%, rgba(32,26,16,.54)); --voile-vignette: linear-gradient(180deg, rgba(255,226,170,.12), rgba(38,30,18,.18)); --chrome: #2A2211; --chrome-dim: #584A2E; --chrome-far: #7A6A47; --trait: rgba(42,34,17,.22); --trait-2: rgba(42,34,17,.11); --accent: #8A5C14; --jour: 1; --ampoule: 1.00, 0.94, 0.80; --verre: 0.15, 0.13, 0.10; --fil: 0.14, 0.12, 0.09; } /* ---------- 3. BASE ---------- */ html, body { background: var(--void); } body { font-family: var(--f-disp); font-variation-settings: "wdth" 100, "wght" 400; line-height: 1.55; color: var(--chrome); -webkit-font-smoothing: antialiased; } /* En mode livre, rien ne défile : la molette tourne les pages. */ body:not(.flat) { height: 100%; overflow: hidden; overscroll-behavior: none; } /* ---------- 4. LA SCÈNE ---------- */ .stage { position: fixed; inset: 0; z-index: 0; perspective: var(--P); perspective-origin: 50% calc(var(--po) * 1%); overflow: hidden; background: var(--ciel), var(--void); transition: background-color .9s var(--ease-page); } /* Le canevas des lumières partage la caméra de la scène. width/height explicites : sans cela le max-width:100% du reset laisse le canvas retomber sur son ratio intrinsèque (300x150). */ #voute { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* L'en-tete doit rester lisible par-dessus la voute : un voile court en haut de cadre, qui ne mange pas le volume. */ .stage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 22vh; z-index: 2; pointer-events: none; background: var(--coiffe); } /* LA BRUME EST RETIREE — c'est elle, le « halo » autour du livre. C'etait une vignette : un immense degrade radial centre sur le livre, qui assombrissait les bords du cadre pour donner de la profondeur a un fond DESSINE. Sur un ciel lisse, un degrade de cette taille ne peut pas rester continu en 8 bits : son alpha ne dispose que d'une quarantaine de niveaux sur sept cents pixels, et il se decoupe en ANNEAUX CONCENTRIQUES. C'est ce qu'on voyait autour du livre, et ce n'etait pas une lueur mais un escalier. Traque a la mesure : chaque couche eteinte a tour de role, la respiration du fond figee pour ne pas mesurer sa derive. Aucune autre n'etait en cause. Elle n'a plus d'objet de toute facon : une photographie porte sa propre chute de lumiere, elle n'a pas besoin qu'on lui en ajoute une. Le jeton --brume est parti avec elle, des cinq heures. */ /* ---------- 4 bis. LE PAYSAGE DE FOND ---------- UNE VUE PAR LA FENÊTRE, PAS UN FOND D'ÉCRAN. La photo n'occupe que la BANDE BASSE du cadre. Le haut reste le ciel dessiné — le seul fond où les guirlandes de la voûte veulent dire quelque chose : posées sur un feuillage, elles ne sont plus qu'un semis de points. C'est exactement ce qui avait fait abandonner la photo plein cadre. On ne contourne pas la règle, on lui laisse sa moitié de cadre. Le raccord se fait par un MASQUE EN DÉGRADÉ, jamais par une coupe nette : une coupe nette se lit comme un collage, et on ne voit plus qu'elle. L'élément est là sur toutes les pages, mais il ne montre rien tant qu'une page n'a pas posé --fond-scene. Sept jetons pour l'accorder page par page, parce qu'une photo de midi et une photo de nuit ne se posent pas pareil. Il est AVANT le canevas dans le DOM : la voûte doit passer devant lui, sinon on aurait des guirlandes derrière le paysage. */ .paysage { /* PLEIN CADRE. Il a ete une bande basse tant que la voute de guirlandes avait besoin d'un ciel propre au-dessus d'elle. Les guirlandes sont rentrees la nuit : la bande n'avait plus de raison d'etre, et un demi-ciel dessine sous une demi-photo se lisait pour ce que c'etait — un decor pose sur fond vert. La photo prend tout le cadre, et le ciel dessine ne sert plus que d'attente avant qu'elle charge. */ position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--fond-scene, none) 50% var(--fond-y, 50%) / cover no-repeat; filter: brightness(var(--fond-lum, .78)) saturate(var(--fond-sat, .95)) blur(var(--fond-flou, 0px)); opacity: var(--fond-force, 1); /* IL RESPIRE. Un plan fixe derriere un objet en volume se trahit tout de suite : c'est une toile peinte. Soixante-huit secondes pour un aller-retour, moins de deux pour cent d'amplitude — on ne le voit jamais bouger, on sent seulement que ce n'est pas une image morte. L'echelle de depart (1.06) donne la marge sans laquelle la derive montrerait un bord. */ transform-origin: 50% 56%; animation: fond-respire 68s var(--ease) infinite; } @keyframes fond-respire { 0% { transform: scale(1.06) translate3d(0, 0, 0); } 50% { transform: scale(1.10) translate3d(-.9%, -.7%, 0); } 100% { transform: scale(1.06) translate3d(0, 0, 0); } } /* METTRE UNE PHOTO À L'HEURE. Une prise de vue de plein midi ne devient pas un matin en baissant la lumière : c'est la COULEUR qui fait l'heure. Un voile teinté par-dessus, en fusion douce, réchauffe ou refroidit sans toucher au fichier — et se règle page par page, sans ré-encoder. Le voile est DANS le calque : le masque de la bande s'applique aux deux, la teinte s'arrête donc exactement où le paysage s'arrête. */ .paysage::after { content: ""; position: absolute; inset: 0; background: var(--fond-teinte, none); mix-blend-mode: var(--fond-fusion, soft-light); } /* ---- LES FONDS, PAGE PAR PAGE ------------------------------------------ MARIAGE · 17 h. Une allée de platanes devant un mas, soleil rasant, mur ocre, feuilles au sol. Elle a été mise en concurrence avec une arche fleurie qui avait, elle, un vrai horizon — mais une lumière voilée et neutre : il aurait fallu FABRIQUER l'heure dorée. Celle-ci l'a déjà. On ne crée pas une heure qu'on peut avoir : les deux ont été montées et comparées à l'écran, c'est celle-ci qui tient. Le cadrage bas (--fond-y: 66 %) écarte la voûte de feuillage du haut de la photo. C'était la condition : un feuillage détaillé en haut de cadre aurait avalé les guirlandes, et c'est tout le sujet. Ce qui reste, gravier, potées, bas du mas, tombe sur les deux flancs — là précisément où le livre ne masque pas. Le voile ambré ne fait pas l'heure ici, il l'appuie : la photo tire déjà chaud, on ne fait que refermer le bas. Pas de 2560 : la source ne fait que 2000 px de large et on n'agrandit jamais — une photo étirée au-delà de sa définition est floue, et c'est la première raison pour laquelle le fond photo avait été abandonné. */ [data-fond="mariage"] { --fond-scene: url("../img/f-mariage-1200.webp"); --fond-y: 62%; --fond-lum: .70; --fond-sat: 1; --fond-teinte: linear-gradient(180deg, rgba(255,200,124,.42), rgba(255,176,92,.24) 52%, rgba(64,34,8,.30)); --fond-fusion: overlay; } @media (min-width: 1100px) { [data-fond="mariage"] { --fond-scene: url("../img/f-mariage-1800.webp"); } } /* ACCUEIL · le livre principal. C'est le MEME paysage que le seuil : on pousse la porte dans la Provence, on la retrouve derriere le livre. Sans cela, la porte ouvrirait sur un autre monde — et c'etait exactement le defaut du livre noir : on quittait le plein jour pour tomber dans la nuit. Il est monte plus clair que les autres (.78 contre .70) : c'est la page d'accueil, elle doit etre la plus ouverte des cinq. */ [data-fond="accueil"] { --fond-scene: url("../img/f-accueil-1200.webp"); --fond-y: 52%; --fond-lum: .78; --fond-sat: .95; --fond-teinte: linear-gradient(180deg, rgba(255,240,206,.22), rgba(255,228,182,.08) 52%, rgba(46,34,14,.28)); --fond-fusion: overlay; } @media (min-width: 1100px) { [data-fond="accueil"] { --fond-scene: url("../img/f-accueil-1800.webp"); } } /* ENTREPRISE · 8 h. Une cour de mas VIDE, au repos, personne n'est encore arrivé : c'est ce que raconte un matin de séminaire. La lumière y est déjà haute et voilée, il suffit de la refroidir. */ [data-fond="entreprise"] { --fond-scene: url("../img/f-entreprise-1200.webp"); --fond-y: 58%; --fond-lum: .80; --fond-sat: .82; /* Bleu leger, pas glacial : a .40 la cour virait au metal et la pierre perdait sa chaleur. Un matin de Provence reste dore par en dessous. */ --fond-teinte: linear-gradient(180deg, rgba(204,226,244,.24), rgba(176,204,230,.10) 54%, rgba(18,32,50,.30)); --fond-fusion: overlay; } /* RÉCEPTION · 13 h. Une cérémonie en oliveraie : vraie lumière de midi, vrais cumulus, et un format 2:1 qui EST celui d'une bande. Rien à corriger sur l'heure — on ne fait que fermer le bas. */ [data-fond="reception"] { --fond-scene: url("../img/f-reception-1200.webp"); --fond-y: 54%; --fond-lum: .74; --fond-sat: .88; /* Cadrage haut : plus bas, les rangees de chaises arrivaient coupees au bord de l'ecran et se lisaient comme une erreur. On garde les oliviers. */ --fond-teinte: linear-gradient(180deg, rgba(255,250,232,.16), rgba(236,232,210,.06) 54%, rgba(36,38,26,.30)); --fond-fusion: overlay; } @media (min-width: 1100px) { [data-fond="reception"] { --fond-scene: url("../img/f-reception-1800.webp"); } } /* COCKTAIL · 21 h. Une bastide éclairée la nuit. La foule est pile au centre, donc derrière le livre : ce qui reste sur les flancs, ce sont les platanes, les jarres et l'allée de gravier. Toute la lumière de la photo est un LED magenta et bleu. Désaturée franchement il ne reste qu'une bouillie grise ; conservée, elle jure avec l'or de la maison. On coupe donc la saturation à moitié et on rapporte l'ambre par-dessus : le magenta redevient une lueur chaude sur le gravier, et le bleu des feuillages passe pour de la nuit. */ [data-fond="cocktail"] { --fond-scene: url("../img/f-cocktail-1200.webp"); --fond-y: 50%; --fond-lum: .62; --fond-sat: .46; --fond-teinte: linear-gradient(180deg, rgba(255,186,104,.46), rgba(255,160,74,.30) 48%, rgba(30,18,6,.44)); --fond-fusion: overlay; } @media (min-width: 1100px) { [data-fond="cocktail"] { --fond-scene: url("../img/f-cocktail-1800.webp"); } } /* À plat, la scène ne tient plus le cadre : le paysage passe en couche fixe comme la voûte, sinon il défile avec le texte et perd son horizon. */ .flat .paysage { position: fixed; } /* Quelques ampoules très proches, hors mise au point, PAR-DEVANT le livre. Le canevas WebGL est derrière l'objet ; ces trois taches referment le volume de l'autre côté. Trois éléments, aucun coût. */ .bokeh { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .bokeh i { position: absolute; display: block; border-radius: 50%; background: var(--bokeh); filter: blur(6px); animation: derive 19s var(--ease-io) infinite alternate; } .bokeh i:nth-child(1) { width: 15vw; height: 15vw; left: -4vw; top: 8vh; } .bokeh i:nth-child(2) { width: 10vw; height: 10vw; right: -2vw; top: 52vh; animation-duration: 26s; animation-delay: -8s; } .bokeh i:nth-child(3) { width: 7vw; height: 7vw; left: 12vw; bottom: -2vh; animation-duration: 22s; animation-delay: -14s; opacity: .7; } @keyframes derive { from { transform: translate3d(0,0,0) } to { transform: translate3d(2.5vw,-3vh,0) } } /* ========================================================================== 4 bis. UNE PAGE A LA FOIS — tablettes en portrait, telephones Meme livre, meme reliure, meme rotation : on cadre simplement sur une seule page et on fait glisser l'objet d'une moitie a l'autre. La page qu'on vient de lire bascule et devient la page de gauche, comme dans un vrai livre. ========================================================================== */ .mono { /* La page se dimensionne sur la HAUTEUR disponible, et prend un format large quand l'appareil est couche. */ --ph: min(82svh, 60rem); --pw: min(94vw, calc(var(--ph) * .74)); /* La typographie se dose sur la hauteur de page, avec un plancher : en dessous, ce n'est plus de la lecture. */ --t-titre: max(1.35rem, calc(var(--ph) * .082)); --t-sous: max(1.05rem, calc(var(--ph) * .050)); --t-corps: max(.92rem, calc(var(--ph) * .030)); --t-petit: max(.85rem, calc(var(--ph) * .0265)); --t-mono: max(.6rem, calc(var(--ph) * .019)); --t-nombre: max(2rem, calc(var(--ph) * .105)); } @media (orientation: landscape) { .mono { --pw: min(96vw, calc(var(--ph) * 1.24)); } } /* Sur une petite page on ne reduit plus le contenu a 60 % : on le fait DEFILER. Mieux vaut un texte lisible qu'on fait glisser qu'un texte entier illisible. Et on le dit — un degrade en pied de page annonce la suite, sinon personne ne devine qu'il reste quelque chose. */ .mono .page__flux { transform: none !important; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mono .page__flux::-webkit-scrollbar { display: none; } .mono .page__in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5em; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); background: linear-gradient(to top, var(--papier) 22%, transparent); } .mono .page__in.deborde::after { opacity: 1; } .mono .page__in.deborde .folio { opacity: 0; } /* La fleche qui dit « ca continue » */ .mono .page__in.deborde::before { content: "↓"; position: absolute; left: 50%; bottom: .5em; z-index: 3; transform: translateX(-50%); pointer-events: none; font-size: .8em; color: var(--or); animation: descend 2.2s var(--ease-io) infinite; } @keyframes descend { 0%,100% { transform: translate(-50%, 0); opacity: .45 } 50% { transform: translate(-50%, 4px); opacity: 1 } } .mono .page__in { padding: 7% 7.5% 5%; } .mono .page--rayon .page__in { padding: 6% 6% 5%; } /* La tranche n'a plus de sens quand on ne voit qu'une page. */ /* Deux ombres courtes, comme en double page : une longue rampe s'escalier sur un ciel doux. C'est CETTE regle qui s'applique en une page — et donc celle qu'on voyait faire des anneaux. */ .mono .page--r, .mono .page--v { box-shadow: var(--ombre-page), none; } /* L'objet descend : l'en-tete doit garder son air au-dessus. */ .mono .livre { margin-top: calc(var(--ph) / -2 + 1.5rem); } .mono .nav, .mono .tourner { display: none; } .mono .hdr { padding: .7rem var(--gut); } /* Le repere se pose SOUS le livre, compact, et sert de rail de progression. */ .mono .hud { left: 50%; right: auto; transform: translateX(-50%); bottom: .55rem; flex-direction: row-reverse; align-items: center; gap: .7rem; } .mono .hud::before { inset: -.5rem -1rem; border-radius: 1.2rem; } .mono .hud__tab { flex-direction: row; gap: 4px; } .mono .hud__tab button { width: 14px; } .mono .hud__tab button[aria-current="true"] { width: 22px; } .mono .hud__lab { display: none; } .mono .hud__num { font-size: .62rem; } /* LA PAGE VOISINE. Le livre fait toujours deux pages de large : quand on cadre sur une seule, l'autre reste a l'ecran, a cote. On l'eteint — sans la retirer, parce qu'elle doit reapparaitre pendant le tournage. */ .mono .page[aria-hidden="true"] > .ombre { background: var(--void); opacity: .985; transition: opacity .45s var(--ease); } /* L'INVITE A TOURNER L'APPAREIL. Le web ne peut pas imposer une orientation : on propose, on ne force pas — et la lecture en portrait marche de toute facon. */ .pivot { position: fixed; z-index: 60; left: 50%; bottom: 4.2rem; transform: translateX(-50%); display: none; align-items: center; gap: .6rem; white-space: nowrap; padding: .62rem 1rem; border-radius: 100px; background: rgba(10,9,7,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(237,234,227,.16); color: var(--bone); font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; animation: pivot-ap .6s var(--ease) both; } .mono.portrait .pivot { display: inline-flex; } @media (min-width: 46rem) { .mono.portrait .pivot { display: none; } } .pivot i { display: block; width: .62em; height: 1em; border-radius: 2px; border: 1.5px solid currentColor; font-size: 1.15em; animation: bascule 2.6s var(--ease-io) infinite; } .pivot b { font-weight: 400; opacity: .55; margin-left: .2rem; } @keyframes pivot-ap { from { opacity: 0; transform: translate(-50%, 8px); } } @keyframes bascule { 0%, 60%, 100% { transform: rotate(0) } 30% { transform: rotate(90deg) } } /* ========================================================================== 5. LE LIVRE ========================================================================== */ .livre { position: absolute; z-index: 3; left: 50%; top: calc(var(--po) * 1%); width: calc(var(--pw) * 2); height: var(--ph); margin-left: calc(var(--pw) * -1); margin-top: calc(var(--ph) / -2); transform-style: preserve-3d; /* Le doigt : horizontal pour tourner, vertical pour le navigateur. */ touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .livre img { -webkit-user-drag: none; user-drag: none; } .livre__bloc { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } /* Un halo sombre posé DERRIÈRE le livre : il décolle l'objet du champ d'ampoules et, accessoirement, éteint les guirlandes juste derrière le texte — c'est aussi une mesure de lisibilité. */ /* LE HALO A ETE RETIRE. Il servait a detacher le livre d'un fond VIDE : une nappe de lumiere posee derriere l'objet, qui creusait le noir. Sur une PHOTO il ne detache plus rien — il pose une aureole pale autour du livre et on ne voit plus qu'elle. C'est l'ombre portee de l'objet qui fait la separation, comme dans la vraie vie. Le jeton --halo est parti avec lui, des cinq heures. */ /* Une feuille = deux pages dos à dos. Deux boîtes imbriquées, une charnière chacune : la rotation sur la reliure, et l'élévation qui décolle la feuille de la pile pendant qu'elle tourne. */ .feuille { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; transform: translateZ(var(--lz, 0px)); } /* Ni transition ni animation : pendant un tournage, c'est le JS qui écrit l'angle et l'élévation image par image. C'est la seule façon de laisser le doigt piloter — une transition, une fois lancée, ne se pilote plus. Au repos, la feuille retombe sur ses variables. */ .feuille__t { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center; transform: rotateY(var(--la, 0deg)); } .page { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; background: var(--papier); color: var(--encre); font-size: var(--t-corps); line-height: 1.52; } .page--v { transform: rotateY(180deg); } /* Coins : arrondis sur la tranche, vifs sur la reliure. */ /* L'OMBRE DU LIVRE — DEUX OMBRES COURTES, PAS UNE LONGUE. C'etait « le halo moche autour du livre », et il aura fallu trois tentatives pour le trouver : ce n'etait ni le calque de lumiere que j'avais retire, ni la vignette, ni le voile du menu, ni la photo. Une ombre portee de 80 px de flou etalee sur un ciel doux se decoupe en CONTOURS CONCENTRIQUES qui epousent la forme du livre : 184 niveaux d'alpha sur 80 pixels ne suffisent pas a rester continu. Trouve en eteignant chaque couche a tour de role et en amplifiant le coin du ciel : celle-la est la seule dont l'extinction rend le ciel lisse. Deux ombres COURTES donnent la meme profondeur — une de contact, serree et franche, une de portee, plus large et plus faible — et aucune n'a de rampe assez longue pour s'escalier. */ /* Coins arrondis sur la tranche, vifs sur la reliure — et la tranche porte l'epaisseur du bloc : sans elle on regarde deux rectangles, pas un objet. */ .page--r { border-radius: 0 3px 3px 0; box-shadow: var(--ombre-page), 2px 0 0 rgba(52,44,32,.55), 3px 0 0 rgba(226,219,205,.85), 5px 0 0 rgba(52,44,32,.35), 6px 0 0 rgba(214,206,190,.7), 8px 0 0 rgba(52,44,32,.22), 9px 0 0 rgba(198,190,174,.5); } .page--v { border-radius: 3px 0 0 3px; box-shadow: var(--ombre-page), -2px 0 0 rgba(52,44,32,.55), -3px 0 0 rgba(226,219,205,.85), -5px 0 0 rgba(52,44,32,.35), -6px 0 0 rgba(214,206,190,.7), -8px 0 0 rgba(52,44,32,.22), -9px 0 0 rgba(198,190,174,.5); } /* La feuille en train de tourner n'a plus de pile derriere elle. */ .tourne .page { box-shadow: var(--ombre-page), none; } /* Une page claire posée sur un champ clair s'y noie : l'ombre portée est dosée par l'heure, pas fixée une fois pour toutes. */ [data-heure="apresmidi"] .page--r, [data-heure="midi"] .page--r, [data-heure="matin"] .page--r { box-shadow: var(--ombre-page), 2px 0 0 rgba(52,44,32,.55), 3px 0 0 rgba(226,219,205,.85), 5px 0 0 rgba(52,44,32,.35), 6px 0 0 rgba(214,206,190,.7), 8px 0 0 rgba(52,44,32,.22), 9px 0 0 rgba(198,190,174,.5); } [data-heure="apresmidi"] .page--v, [data-heure="midi"] .page--v, [data-heure="matin"] .page--v { box-shadow: var(--ombre-page), -2px 0 0 rgba(52,44,32,.55), -3px 0 0 rgba(226,219,205,.85), -5px 0 0 rgba(52,44,32,.35), -6px 0 0 rgba(214,206,190,.7), -8px 0 0 rgba(52,44,32,.22), -9px 0 0 rgba(198,190,174,.5); } [data-heure="matin"] .page--r { box-shadow: var(--ombre-page), 2px 0 0 rgba(44,52,58,.5), 3px 0 0 rgba(222,226,228,.85), 5px 0 0 rgba(44,52,58,.32), 6px 0 0 rgba(208,213,216,.7), 8px 0 0 rgba(44,52,58,.2), 9px 0 0 rgba(192,198,202,.5); } /* L'apres-midi a hérité d'une ombre BRUNE, du temps ou le fond etait dore. Etalee sur un ciel bleu, elle vire au sale — une aureole autour du livre. Sous un ciel bleu les ombres sont bleues : c'est ce que fait le ciel, il eclaire ce que le soleil n'atteint pas. ET C'EST ELLE, L'AUREOLE. La teinter ne suffisait pas : le defaut n'etait pas sa couleur mais sa LONGUEUR. Sept rem de flou, c'est 112 pixels sur lesquels un alpha de .38 ne dispose que d'une centaine de niveaux — le degrade s'escalier en contours concentriques qui epousent la forme du livre. Toutes ces ombres sont ramenees a 2,2 rem, un peu plus denses pour garder le meme poids. Trouve en eteignant chaque couche a tour de role et en amplifiant le coin du ciel : c'est la seule dont l'extinction rend le ciel lisse. */ [data-heure="apresmidi"] .page--r { box-shadow: var(--ombre-page), 2px 0 0 rgba(44,52,58,.5), 3px 0 0 rgba(222,226,228,.85), 5px 0 0 rgba(44,52,58,.32), 6px 0 0 rgba(208,213,216,.7), 8px 0 0 rgba(44,52,58,.2), 9px 0 0 rgba(192,198,202,.5); } [data-heure="apresmidi"] .page--v { box-shadow: var(--ombre-page), -2px 0 0 rgba(44,52,58,.5), -3px 0 0 rgba(222,226,228,.85), -5px 0 0 rgba(44,52,58,.32), -6px 0 0 rgba(208,213,216,.7), -8px 0 0 rgba(44,52,58,.2), -9px 0 0 rgba(192,198,202,.5); } /* ---------- 6. LA LUMIÈRE SUR LE PAPIER ---------- Les guirlandes sont au-dessus : le haut de page est chaud, le bas retombe. Et la reliure creuse une ombre. Ce sont les deux seules choses qui font qu'un aplat crème devient du papier. */ .page::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--lum-page); mix-blend-mode: multiply; opacity: var(--lum-force); } .page::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; /* grain de papier — un bruit SVG, ~200 octets, aucune requête */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .055; mix-blend-mode: multiply; } /* L'ombre de reliure, du côté de la charnière. */ .page--r > .pli { position: absolute; z-index: 4; inset: 0 auto 0 0; width: 11%; pointer-events: none; background: linear-gradient(90deg, rgba(28,24,18,.30), rgba(28,24,18,.06) 42%, transparent); } .page--v > .pli { position: absolute; z-index: 4; inset: 0 0 0 auto; width: 11%; pointer-events: none; background: linear-gradient(270deg, rgba(28,24,18,.30), rgba(28,24,18,.06) 42%, transparent); } /* Le reflet qui balaie la feuille pendant qu'elle tourne : c'est la voûte qui glisse sur le papier. Large et faible — à 95 % d'opacité en fusion `screen`, ce n'était plus un reflet mais un éclair. */ .reflet { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 12%, rgba(255,240,214,.30) 42%, rgba(255,255,255,.13) 52%, transparent 88%); mix-blend-mode: screen; } /* L'OMBRE PORTÉE DE LA FEUILLE EN VOL sur la page qu'elle découvre. C'est la seule chose qui manquait pour que le geste se lise comme physique : une page qui se soulève assombrit ce qu'il y a dessous, puis la libère. */ .ombre { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; } .page--r > .ombre { background: linear-gradient(90deg, rgba(24,16,6,.50), rgba(24,16,6,.14) 44%, transparent 80%); } .page--v > .ombre { background: linear-gradient(270deg, rgba(24,16,6,.50), rgba(24,16,6,.14) 44%, transparent 80%); } /* Pendant un tournage, la page voisine ne doit plus être éteinte : elle participe au geste. */ .mono.en-vol .page[aria-hidden="true"] > .ombre { opacity: 0; } /* ---------- 7. GABARIT DE PAGE ---------- */ .page__in { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 10.5% 9.5% 6.5%; } .page__flux { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; transform: scale(var(--fit, 1)); transform-origin: 50% 50%; } .page--haut .page__in { padding-top: 8%; } .page--haut .page__flux { justify-content: flex-start; transform-origin: 50% 0; } .folio { flex: none; display: flex; justify-content: space-between; align-items: baseline; margin-top: 5%; padding-top: .8em; border-top: 1px solid var(--filet-2); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--encre-3); } .folio b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--or); } /* ---------- 8. TYPOGRAPHIE DE PAGE ---------- */ /* Un grotesque à chasse variable. La chasse ne dépend plus de la distance — plus rien ne s'éloigne — elle sert la hiérarchie, comme en imprimé. */ .p-sur { display: inline-flex; align-items: center; gap: .7em; align-self: flex-start; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin-bottom: 1.6em; } .p-sur::before { content: ""; width: .38em; height: .38em; border-radius: 50%; background: currentColor; flex: none; } .p-sur--froid { color: var(--froid-p); } .p-titre { font-size: var(--t-titre); line-height: .92; letter-spacing: -.035em; font-variation-settings: "wdth" 88, "wght" 500; text-transform: uppercase; text-wrap: balance; } .p-sous { font-size: var(--t-sous); line-height: 1.06; letter-spacing: -.025em; font-variation-settings: "wdth" 94, "wght" 500; } .p-texte { color: var(--encre-2); max-width: 34ch; } .p-texte + .p-texte { margin-top: .9em; } .p-texte strong { color: var(--encre); font-weight: 600; } .p-texte em { font-style: normal; color: var(--or); } .filet { height: 1px; background: var(--filet); margin: 1.5em 0; } .filet--court { width: 22%; background: var(--or); height: 2px; margin: 1.3em 0; } /* ---------- 9. LA COUVERTURE ---------- */ /* ========================================================================== LA COUVERTURE EST UN LIVRE D'OR EN CUIR Reference : les livres d'or qu'on signe dans une reception. Cuir noir graine, titre a la feuille d'or, coins de laiton sur la gouttiere. ELLE NE SUIT PLUS L'HEURE DE LA PAGE. Les jetons de couverture etaient accordes a la lumiere du document — creme a l'apres-midi, pierre a midi. Un cuir noir n'a pas d'heure : c'est un objet, pas un decor. Il est donc toujours le meme, sur les cinq livres, et c'est le FOND de Provence derriere lui qui change. Le contraste entre l'objet sombre et le plein jour est exactement ce qu'on cherche. ========================================================================== */ .page--couv { --couv: #121215; --couv-2: #1B1B20; --couv-3: #08080A; --couv-encre: #EDEAE3; --couv-encre-2: #8B8D94; --couv-titre: #FFDCA8; --couv-accent: #E0A957; --couv-fort: #FFDCA8; --couv-fil: rgba(224,169,87,.44); --couv-fil-2: rgba(224,169,87,.17); --couv-fil-3: rgba(224,169,87,.32); --couv-voile: linear-gradient(178deg, rgba(255,205,140,.14), transparent 44%, rgba(0,0,0,.26)); --cuir-grain: url("../img/cuir-grain.webp"); --cuir-echelle: 78%; /* LE CUIR. Quatre couches, de la plus lointaine a la plus proche : le grain la peau elle-meme, en mosaique — pose plus bas le galbe un panneau ne recoit pas la lumiere a plat la lumiere une source haute a gauche, comme sur les photos l'assombri les bords d'un cuir sont toujours plus sombres */ background-color: var(--couv); background-image: var(--cuir-grain), radial-gradient(128% 96% at 26% 8%, rgba(255,232,192,.075), transparent 56%), radial-gradient(110% 130% at 108% 104%, rgba(0,0,0,.42), transparent 62%), linear-gradient(163deg, var(--couv-2), var(--couv) 52%, var(--couv-3)); /* Le grain est pose en OVERLAY : sa tuile est centree sur le gris moyen, donc elle ne teinte rien — seuls ses ecarts modulent le cuir dessous. Un calque en opacite, lui, aurait grise la couverture. */ background-blend-mode: overlay, normal, normal, normal; /* La tuile est grande devant la couverture — a peine plus d'un motif dans la largeur. C'est ce qui empeche de LIRE la repetition : un grain qui se repete trois fois dans le cadre n'est plus un grain, c'est un papier peint. */ background-size: var(--cuir-echelle) auto, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat; color: var(--couv-encre); } .page--couv::before { opacity: .5; mix-blend-mode: normal; background: var(--couv-voile); } /* LES COINS DE LAITON. Deux, et non quatre : ils protegent la GOUTTIERE — le bord qu'on ouvre — jamais le dos, qui n'en a pas besoin. C'est ce que fait un vrai livre d'or, et c'est ce qu'on voit sur la photo de reference. Dessines en degrades, sans image : un degrade a 135 degres coupe net a la moitie donne exactement un triangle d'angle, et sa progression donne le biseau du metal — clair sur l'arete exterieure, sombre dans le creux, puis une levre polie sur le bord interieur. Net a n'importe quelle taille, et rien a charger. */ .coins { position: absolute; inset: 0; z-index: 7; pointer-events: none; --coin: clamp(2.1rem, 7%, 4rem); /* L'ordre des teintes n'est pas decoratif. Un metal poli ne s'eclaircit pas regulierement du bord vers le creux : il porte une BANDE de lumiere — le reflet de la source — entre deux zones sombres. C'est ce retournement (sombre, clair, sombre, clair) qui separe le laiton d'un triangle jaune. Trois dosages montes et regardes de pres. */ background-image: /* haut-droite */ linear-gradient(225deg, #7A5A22 0%, #C9A052 9%, #FFF3D2 17%, #D8B268 26%, #8A6628 36%, #4A3514 44%, #A37D33 47%, #F2DCA6 48.6%, transparent 49.3%), /* bas-droite */ linear-gradient(315deg, #6E5220 0%, #BE9549 9%, #F8E9C6 17%, #CDA75F 26%, #7E5D24 36%, #412F12 44%, #977230 47%, #E8D099 48.6%, transparent 49.3%); background-size: var(--coin) var(--coin); background-position: 100% 0, 100% 100%; background-repeat: no-repeat; } /* L'ombre que le metal porte sur le cuir : c'est elle qui le decolle. */ .coins::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(225deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 34%, transparent 52%), linear-gradient(315deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 34%, transparent 52%); background-size: calc(var(--coin) * 1.16) calc(var(--coin) * 1.16); background-position: 100% 0, 100% 100%; background-repeat: no-repeat; filter: blur(2px); } /* 9 % en haut et en bas, contre 15 % et 11 % : ces marges etaient calees sur un titre compose. Le logo prend la place qu'elles rendent, et la couverture cesse de deborder sur une fenetre etroite. */ .page--couv .page__in { padding: 9% 10.5% 9%; } .page--couv .page__flux { justify-content: space-between; } /* PLACE VENDÔME. Un faire-part gravé ne crie pas : il cadre, il aère, et il met un filet d'or là où une enseigne mettrait une couleur. Le cadre se double d'un second filet plus fin, à la manière des cartons d'invitation. */ .cadre { position: absolute; inset: 6.5%; z-index: 1; border: 1px solid var(--couv-fil); pointer-events: none; } .cadre { box-shadow: 0 0 0 4px transparent, inset 0 0 0 4px transparent; } /* LE FILET A FROID — presse dans le cuir, sans or. La couverture portait un rectangle dore double d'un second filet. Deux defauts : un cadre ferme enferme le texte au lieu de le poser, et surtout la couverture porte DEJA deux metaux — la dorure du titre et le laiton des coins. Un troisieme filet dore en rajoutait la ou il fallait retirer. Un relieur, dans ce cas, presse le filet A FROID : pas de feuille, juste la matrice chaude qui creuse le cuir. Ce qu'on voit alors n'est pas un trait mais un CREUX — une arete sombre, et sa levre qui accroche la lumiere juste en dessous. C'est ce que font ici la bordure sombre et les deux ombres claires. L'ECARTEMENT compte : a 7,5 % le filet passait en travers de la ligne « TRAITEUR EVENEMENTIEL », qui commence a 9 %. Il est repousse a 5,5 %, assez loin du texte pour l'encadrer sans le toucher, assez pres du bord pour ne pas empieter sur les coins de laiton. */ .page--couv .cadre { inset: 5.5% 6.5%; border: 1px solid rgba(0,0,0,.62); box-shadow: 0 1px 0 rgba(255,236,200,.085), inset 0 1px 0 rgba(255,236,200,.05), inset 0 0 12px rgba(0,0,0,.30); } /* Le second filet en retrait n'a plus lieu d'etre : un creux n'en a pas. */ .page--couv .cadre::before, .page--couv .cadre::after { display: none; } .cadre::before, .cadre::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--couv-fil-2); } .cadre::before { top: 4px; } .cadre::after { bottom: 4px; } .page--couv .couv__mid { margin-block: 6%; } .couv__haut { font-family: var(--f-titre); font-size: calc(var(--t-mono) * .94); font-weight: 500; font-size: calc(var(--t-mono) * 1.04); letter-spacing: .24em; text-indent: .24em; /* la chasse ajoute un blanc à droite : on recentre */ text-transform: uppercase; color: var(--couv-accent); text-align: center; } .couv__mid { text-align: center; } /* LE NOM. Une Didone à sa plus grande taille optique : les déliés deviennent des cheveux, les pleins restent francs. Moins gros qu'avant et beaucoup plus chassé — le luxe n'occupe pas la place, il la ménage. Le marquage à chaud saute : c'est un procédé rustique, l'inverse de la gravure. */ .couv__mot { display: block; font-family: var(--f-titre); font-size: calc(var(--pw) * .100); line-height: 1.06; letter-spacing: .14em; text-indent: .14em; text-transform: uppercase; font-weight: 500; color: var(--couv-titre); text-shadow: none; } /* LA DORURE. Un titre a la feuille d'or n'est pas jaune : c'est un METAL, et un metal se lit a ses variations. Le degrade descend de l'or clair au bronze puis remonte — c'est le reflet de la piece, pas une teinte. L'ombre est portee par filter et non par text-shadow : avec background-clip: text, une text-shadow se dessine SOUS la lettre et deborde du decoupage. Deux ombres, une sombre en bas et une claire en haut : c'est le creux de la presse a chaud dans le cuir. */ .page--couv .couv__mot { background-image: linear-gradient(177deg, #FFF3D6 0%, #F0CD8C 22%, #C8983F 44%, #8E6520 58%, #E7C482 76%, #FBEBC4 90%, #C9A053 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.62)) drop-shadow(0 -1px 0 rgba(255,238,196,.13)); } .page--couv .couv__mot i { color: var(--couv-encre); } /* SUR L'ACCUEIL, LE NOM EST LE LOGO — pas le mot compose. Le logo est pose en MASQUE sur la meme dorure : la forme change, l'or ne bouge pas. Un aurait demande sa propre couleur et perdu le degrade de metal ; un masque garde exactement le titre a la feuille d'or qu'on avait, avec son creux de presse a chaud. Le mot reste dans le HTML a taille nulle : c'est le

de la page, il doit rester lisible par un lecteur d'ecran et par un moteur. Seulement sur l'accueil : les quatre cahiers ont leur propre titre grave — MARIAGES, ENTREPRISES — et n'ont rien a faire avec le logo. */ [data-fond="accueil"] .page--couv .couv__mot { /* DIMENSIONNE PAR LA HAUTEUR, jamais par la largeur. Regle a 66 % de large, le bloc du logo faisait 28 % de la page en hauteur la ou la ligne de texte n'en faisait que 11 : il poussait tout le reste vers le bas et « FEUILLETER » quittait sa place. Le titre etait cale sur sa taille de corps — le logo l'est sur la meme mesure. */ /* .150 — le logo commande la couverture, comme sur un vrai livre d'or. Il avait ete ramene a .090 pour une seule raison : a .106, la hauteur du titre d'origine, le contenu DEBORDAIT de la page sur une fenetre haute et etroite et « FEUILLETER » passait sous le voile de debordement. Le defaut etait la AVANT le logo — verifie en remettant le titre en texte : meme debordement, meme position au pixel pres. La place ne vient donc pas du logo mais des MARGES : la couverture en avait 15 % en haut et 11 % en bas, heritees d'un titre compose. A 9 % et 9 %, le logo gagne deux tiers de sa taille ET le debordement disparait — mesure a chaque essai, --fit reste a 1. */ height: calc(var(--pw) * .150); width: 100%; margin-inline: auto; font-size: 0; line-height: 0; letter-spacing: 0; text-indent: 0; background-clip: border-box; -webkit-background-clip: border-box; /* LE CHROME. Un metal ne se lit pas a sa teinte mais a ses variations : la rampe descend du blanc au gris de fonte puis remonte, comme la dorure a cote. Un gris plat aurait donne une decoupe, pas une piece. */ background-image: linear-gradient(177deg, #FFFFFF 0%, #E2E6EA 18%, #A7B0B8 40%, #6F787F 55%, #C9CFD5 74%, #F4F7F9 88%, #AAB2BA 100%); -webkit-mask-image: url("../img/logo-metsens.svg"); mask-image: url("../img/logo-metsens.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .couv__mot i { font-style: normal; color: var(--couv-encre); } .couv__sous { margin-top: 1.3em; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-dim); } /* LA PROMESSE. C'est elle qu'on doit lire, pas la rubrique. Elle est plus grosse que le sous-titre, composée dans la display, et elle tient en trois lignes — au-delà, ce n'est plus une accroche, c'est un paragraphe. */ .couv__accroche { margin: 1.15em auto 0; max-width: 23ch; font-family: var(--f-titre); font-size: calc(var(--pw) * .056); line-height: 1.38; letter-spacing: .002em; font-weight: 400; color: var(--couv-encre); text-wrap: balance; } /* La seconde moitié de la phrase est la chute : elle prend la couleur de la lumière, pour qu'on la lise comme un deuxième temps. */ /* LA CHUTE SUR SA PROPRE LIGNE. Laissee au fil du texte, la phrase se cassait n'importe ou et abandonnait « a pas. » seul en bas. Or ces cinq mots sont le second temps de l'accroche : leur place est une ligne a eux. Le premier membre s'equilibre alors tout seul au-dessus. */ .couv__accroche em { display: block; margin-top: .28em; font-style: italic; color: var(--couv-accent); } /* LA PREUVE. Trois arguments, un par ligne : ce qui rend la promesse crédible sans avoir à la défendre. Le chiffre porte, le reste suit. */ .couv__faits { border-top: 1px solid var(--couv-fil-3); border-bottom: 1px solid var(--couv-fil-3); padding: 1.15em 0; margin-bottom: 1.5em; display: flex; flex-direction: column; gap: .55em; } .couv__faits li { display: flex; align-items: baseline; gap: .5em; justify-content: center; font-family: var(--f-titre); font-size: calc(var(--t-mono) * 1.26); font-weight: 500; letter-spacing: .07em; text-indent: .07em; text-wrap: balance; text-transform: uppercase; color: var(--couv-encre-2); text-align: center; } .couv__faits b { letter-spacing: .06em; color: var(--couv-fort); font-weight: 600; font-variant-numeric: tabular-nums; } .couv__rule { width: 46%; height: 1px; margin: 1.45em auto; background: var(--couv-fil); position: relative; } .couv__rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; transform: rotate(45deg); background: var(--couv-accent); } .couv__bas { text-align: center; } .couv__km { display: block; font-size: calc(var(--pw) * .10); line-height: 1; letter-spacing: -.03em; font-variation-settings: "wdth" 78, "wght" 300; color: var(--couv-encre); text-shadow: none; } .couv__km sup { font-family: var(--f-mono); font-size: .28em; color: var(--couv-accent); vertical-align: super; margin-left: .2em; } /* Une plage (30–500) n'est pas une valeur avec unité : ni exposant, ni décalage. */ .couv__km--plage { font-size: calc(var(--pw) * .082); letter-spacing: -.02em; } .couv__km--plage i { font-style: normal; color: var(--couv-accent); margin: 0 .12em; font-variation-settings: "wdth" 62, "wght" 200; } .couv__lab { display: block; margin-top: .7em; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-far); } .couv__ouvrir { margin-top: 1.9em; display: inline-flex; align-items: center; gap: .75em; font-family: var(--f-titre); font-size: calc(var(--t-mono) * 1.24); font-weight: 600; letter-spacing: .17em; text-indent: .17em; text-transform: uppercase; color: var(--couv-accent); } .couv__ouvrir i { font-style: normal; animation: pousse 2.4s var(--ease-io) infinite; } @keyframes pousse { 0%,100% { transform: translateX(0); opacity: .5 } 50% { transform: translateX(5px); opacity: 1 } } /* Le dos, dernière page : même carton, presque rien dessus. */ .page--dos { background: linear-gradient(163deg, var(--couv-3), var(--couv)); color: var(--couv-encre-2); } .page--dos::before { opacity: .4; mix-blend-mode: normal; background: linear-gradient(178deg, rgba(255,205,140,.10), transparent 40%); } .page--dos .page__flux { justify-content: center; text-align: center; gap: 1.2em; } .page--dos .couv__mot { font-size: calc(var(--pw) * .07); color: var(--couv-encre-2); text-shadow: none; } /* ---------- 10. PAGE PHOTO (pleine page, à fond perdu) ---------- */ .page--photo .page__in { padding: 0; } .page--photo .page__flux { justify-content: stretch; transform: none; } .pleine { position: relative; flex: 1; overflow: hidden; background: var(--void-2); } .pleine img { width: 100%; height: 100%; object-fit: cover; } /* UNE PHOTO DE GROUPE NE SE RECADRE PAS. Vingt personnes alignées dans un cliché en largeur : un cadrage « cover » sur une page portrait en couperait le tiers gauche et le tiers droit — six ou sept personnes. On la pose donc EN BANDE, à sa propre proportion, centrée dans la hauteur, comme une planche dans un livre. Le reste de la page est le carton de la couverture : la photo est imprimée SUR le livre, elle n'y est pas collée. Le voile ambré saute aussi : il est là pour fondre un paysage dans la lumière de la voûte, pas pour assombrir des visages. */ .pleine--groupe { display: grid; place-items: center; background: var(--couv); } .pleine--groupe img { width: 100%; height: auto; object-fit: contain; } .pleine--groupe::after { content: none; } /* Éclairées par la voûte, donc ambrées — pas neutres. */ .pleine::after { content: ""; position: absolute; inset: 0; background: var(--voile-photo); } .pleine figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 9% 9.5% 8%; display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; color: var(--bone); } .pleine figcaption b { font-size: var(--t-sous); line-height: 1; letter-spacing: -.02em; font-variation-settings: "wdth" 92, "wght" 600; text-shadow: 0 1px 10px rgba(0,0,0,.55); } /* La légende se pose sur une photo, pas sur un aplat : de jour comme de nuit elle a besoin de sa propre ombre pour tenir. */ .pleine figcaption span { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber-hot); white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.7); } /* ---------- 11. LES CHIFFRES ---------- */ .mesures { display: grid; grid-template-columns: 1fr 1fr; gap: 8% 6%; } .mesure b { display: block; font-size: var(--t-nombre); line-height: .86; letter-spacing: -.045em; font-variation-settings: "wdth" 80, "wght" 300; font-variant-numeric: tabular-nums; } .mesure b sup { font-size: .3em; color: var(--or); font-family: var(--f-mono); vertical-align: super; margin-left: .12em; } .mesure span { display: block; margin-top: .55em; padding-top: .55em; border-top: 1px solid var(--filet-2); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); } /* ---------- 12. LA CARTE — les prestations, listées comme un menu ---------- */ .carte { display: flex; flex-direction: column; } .carte li + li { border-top: 1px solid var(--filet-2); } .carte a { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0 1.1em; align-items: baseline; padding: .82em .2em .92em; transition: background-color .4s var(--ease), padding-left .4s var(--ease); } .carte a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--or); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); } .carte a:hover { background: rgba(160,107,34,.06); padding-left: 1em; } .carte a:hover::before { transform: scaleY(1); transform-origin: top; } .carte .n { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--or); } .carte h3 { font-size: var(--t-sous); line-height: 1.05; letter-spacing: -.02em; font-variation-settings: "wdth" 94, "wght" 600; } .carte p { grid-column: 2 / 4; margin-top: .3em; font-size: var(--t-petit); line-height: 1.42; color: var(--encre-2); } .carte .go { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--encre-3); transition: transform .45s var(--ease), color .4s; } .carte a:hover .go { transform: translate(3px,-3px); color: var(--or); } /* ---------- 13. LE RAYON — radar du territoire ---------- Les lieux sont placés à leur AZIMUT et leur DISTANCE réels depuis l'atelier d'Allauch. Ce n'est pas une illustration, c'est un relevé. */ .page--rayon { background: linear-gradient(170deg, #12151C, #0B0D12); color: var(--bone); } .page--rayon::before { opacity: .45; mix-blend-mode: normal; background: linear-gradient(178deg, rgba(255,205,140,.13), transparent 40%, rgba(0,0,0,.4)); } .page--rayon .p-sur { color: var(--amber); } .page--rayon .p-texte { color: var(--bone-dim); max-width: 30ch; } .page--rayon .page__in { padding: 8% 8% 6%; } .page--rayon .p-sur { margin-bottom: 1.1em; } .page--rayon .rayon__plot { margin-block: auto; } .page--rayon .p-texte strong { color: var(--bone); } .page--rayon .filet { background: var(--line); } .rayon__plot { position: relative; width: 100%; max-width: 100%; aspect-ratio: 1; margin-inline: auto; touch-action: none; cursor: grab; } .rayon__plot:active { cursor: grabbing; } .rayon__plot canvas { width: 100%; height: 100%; } .rayon__hint { margin-top: 1.1em; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); } .rayon__hint a { border-bottom: 1px solid var(--filet); transition: color .3s, border-color .3s; } .rayon__hint a:hover { color: var(--or); border-color: currentColor; } .page--rayon .rayon__hint { text-align: center; color: var(--bone-far); white-space: nowrap; } .rayon__read { border-top: 1px solid var(--filet); padding-top: .8em; margin-top: 1.1em; } .rayon__read h3 { font-size: var(--t-sous); line-height: 1.05; letter-spacing: -.022em; font-variation-settings: "wdth" 94, "wght" 600; } .rayon__read .meta { display: flex; gap: 1.6em; margin-top: .6em; } .rayon__read .meta span { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); font-variant-numeric: tabular-nums; } .rayon__read .meta b { display: block; margin-top: .25em; color: var(--or); font-size: calc(var(--pw) * .042); font-weight: 400; letter-spacing: 0; text-transform: none; } .rayon__thumb { position: relative; width: 100%; aspect-ratio: 2.15/1; overflow: hidden; margin-top: .9em; background: var(--papier-2); border: 1px solid var(--filet-2); } /* Les vignettes sont des photos de plein jour : on les ramene sous la lumiere des guirlandes, sinon elles trouent la page. */ .rayon__thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--voile-vignette); mix-blend-mode: multiply; } .rayon__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); } .rayon__thumb img.on { opacity: 1; } /* La même donnée au clavier et au lecteur d'écran : un canevas ne peut pas être le seul chemin vers l'information. */ .rayon-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .85em; margin-top: 1.1em; border-top: 1px solid var(--filet-2); } .rayon-list li { min-width: 0; } @media (max-width: 34rem) { .rayon-list { grid-template-columns: 1fr; } } .rayon-list button, .rayon-list a { width: 100%; text-align: left; padding: .34em .1em; display: flex; justify-content: space-between; align-items: baseline; gap: .45em; border-bottom: 1px solid var(--filet-2); color: var(--encre-2); transition: color .3s, border-color .3s; } .rayon-list button span, .rayon-list a span { font-size: var(--t-petit); font-variation-settings: "wdth" 88, "wght" 500; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rayon-list button em, .rayon-list a em { font-family: var(--f-mono); font-style: normal; font-size: var(--t-mono); color: var(--encre-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .rayon-list button:hover, .rayon-list a:hover { color: var(--encre); } .rayon-list button[aria-pressed="true"] { color: var(--or); border-color: rgba(160,107,34,.5); } .rayon-list button[aria-pressed="true"] em { color: var(--or); } /* ---------- 13 bis. LES QUESTIONS ---------- Sur du papier on ne replie rien : pas d'accordéon, on compose plus serré. */ .faq dt { margin-top: 1.05em; font-size: var(--t-petit); letter-spacing: -.005em; font-variation-settings: "wdth" 92, "wght" 600; } .faq dt:first-of-type { margin-top: .2em; } .faq dd { margin-top: .3em; padding-bottom: .95em; border-bottom: 1px solid var(--filet-2); font-size: var(--t-petit); line-height: 1.45; color: var(--encre-2); } .faq dd:last-of-type { border-bottom: 0; padding-bottom: 0; } /* ---------- 14. CONTACT ---------- */ .actions { display: flex; flex-wrap: wrap; gap: .7em; margin-top: 1.6em; } .btn { display: inline-flex; align-items: center; gap: .8em; padding: .95em 1.5em; border-radius: 100px; position: relative; overflow: hidden; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--filet); color: var(--encre); isolation: isolate; transition: color .4s var(--ease), border-color .4s var(--ease); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--encre); transform: translateY(101%); transition: transform .5s var(--ease); } .btn:hover { color: var(--papier); border-color: var(--encre); } .btn:hover::before { transform: none; } .btn--hot { background: var(--encre); color: var(--papier); border-color: var(--encre); } .btn--hot::before { background: var(--or); } .btn--hot:hover { color: var(--papier); border-color: var(--or); } .adresse { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--filet-2); display: flex; flex-direction: column; gap: .45em; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--encre-3); } /* ---------- 14 bis. LE CHOIX DE L'OCCASION ---------- Quatre entrées, quatre heures. Ce sont des CARTES, pas des lignes de menu : une ligne de texte avec une petite flèche se lit comme du texte, et on ne clique pas sur du texte. Vignette, badge d'heure, titre, et une pastille fléchée pleine — l'affordance doit être impossible à rater. */ .occs { display: flex; flex-direction: column; gap: .42em; } .occ a { display: flex; align-items: center; gap: .75em; padding: .5em .6em; border-radius: 4px; border: 1px solid var(--filet); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(0,0,0,.015)); transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .occ a:hover, .occ a:focus-visible { border-color: var(--pastille); transform: translateX(4px); box-shadow: 0 .5rem 1.5rem rgba(24,16,6,.15); } .occ__vue { width: 2.9em; height: 2.9em; flex: none; border-radius: 3px; object-fit: cover; filter: saturate(.92); } .occ__txt { flex: 1; min-width: 0; } .occ__h { display: inline-block; margin-right: .55em; vertical-align: .06em; font-family: var(--f-mono); font-size: calc(var(--t-mono) * .88); letter-spacing: .12em; font-weight: 400; color: var(--pastille); } .occ h3 { font-size: calc(var(--pw) * .052); line-height: 1.06; letter-spacing: -.022em; font-variation-settings: "wdth" 92, "wght" 600; } .occ em { display: block; margin-top: .1em; font-style: normal; font-size: var(--t-petit); line-height: 1.3; color: var(--encre-2); } /* La pastille : pleine, contrastée, fléchée. C'est elle qui dit « on clique ». */ .occ__go { flex: none; width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center; font-size: .92em; background: var(--encre); color: var(--papier); transition: background-color .35s, transform .35s var(--ease); } .occ a:hover .occ__go { background: var(--pastille); transform: translateX(3px); } .occ--nuit { --pastille: #B07A24; } .occ--apresmidi { --pastille: #B0621E; } .occ--matin { --pastille: #3A6E8E; } .occ--midi { --pastille: #9C7318; } @media (max-width: 34rem) { .flat .occ em { display: none; } } /* Dernière de couverture : la même liste, mais sur du carton. */ .rayon-list--dos { grid-template-columns: 1fr; gap: 0; text-align: left; } .rayon-list--dos a { color: var(--bone-dim); border-color: var(--line-soft); } .rayon-list--dos a:hover { color: var(--amber); } .rayon-list--dos em { color: var(--bone-far); text-transform: lowercase; } /* ========================================================================== 14 ter. LE DEVIS — composer, puis se retourner pour signer Une carte détachée du livre. On compose l'événement sur une face ; elle pivote sur elle-même et présente son dos, où l'on donne ses coordonnées. Le balayage impose la même durée et la même courbe que le tournage de page : c'est le même objet, il ne doit pas bouger autrement. ========================================================================== */ .devis[open] { display: block; } .devis:focus, .devis:focus-visible { outline: none; } .devis { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100%; height: 100%; background: transparent; overflow: hidden; } .devis::backdrop { background: rgba(6,5,4,.55); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); opacity: 0; animation: voile .5s var(--ease) forwards; } @keyframes voile { to { opacity: 1; } } .devis__cadre { position: fixed; inset: 0; display: grid; place-items: center; padding: clamp(.8rem, 3vw, 2rem); perspective: 1700px; } .devis__bloc { position: relative; width: min(94vw, 41rem); transform-style: preserve-3d; /* La charniere est sur l'arete gauche, comme celle d'une page du livre. Le JS ecrit la rotation image par image ; ici on ne garde que l'etat de repos et la hauteur, qui elle se transitionne. */ transform-origin: 0% 50%; transform: rotateY(0deg); transition: height .55s var(--ease); animation: devis-entre .55s var(--ease) backwards; } @keyframes devis-entre { from { opacity: 0; transform: translateY(14px) scale(.965); } } /* ECRAN LARGE MAIS COURT — une Surface avec sa barre d'onglets, un portable a faible hauteur. La carte n'a aucune raison de rester etroite pendant que son contenu deborde en hauteur : la moitie de l'ecran ne sert a rien et un ascenseur apparait pour quelques pixels. On lui donne donc la largeur disponible ; les puces se rangent sur moins de lignes et la carte tient. */ @media (min-width: 54rem) and (max-height: 47rem) { .devis__bloc { width: min(94vw, 58rem); } .devis__face { padding-block: clamp(1rem, 2.6vw, 1.7rem); } /* Deux colonnes : a gauche l'evenement, a droite les formules — c'est la liste la plus haute, elle occupe donc sa colonne a elle seule. */ .devis__grille { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.7rem; align-items: start; } .devis__grille .champ--occ { grid-column: 1; grid-row: 1; } .devis__grille .duo { grid-column: 1; grid-row: 2; } .devis__grille .champ--lieu { grid-column: 1; grid-row: 3; } .devis__grille .champ--form { grid-column: 2; grid-row: 1 / span 3; } /* Le verso suit la meme logique : les coordonnees a gauche, le mot libre a droite, ou il peut respirer sur toute la hauteur. */ .devis__grille--b .duo { grid-column: 1; grid-row: 1; } .devis__grille--b .champ--tel { grid-column: 1; grid-row: 2; } .devis__grille--b .champ--mot { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; } .devis__grille--b .champ--mot textarea { flex: 1; min-height: 6.5rem; } } /* PLUS COURT ENCORE. Deux colonnes ne suffisent plus : on resserre le pas. On ne CACHE rien — un formulaire ampute est pire qu'un formulaire dense. */ @media (max-height: 38rem), (max-width: 34rem) { .devis h2 { font-size: clamp(1.15rem, 3vw, 1.5rem); } .devis__sous { margin-top: .35rem; font-size: .82rem; line-height: 1.35; } .devis__tete { margin-bottom: .2rem; } .puce span { padding: .34rem .64rem; font-size: .78rem; } .devis .puces { gap: .34rem; } .devis .champ { margin-top: .62rem; } .devis .champ > span { margin-bottom: .22rem; } .devis__face { padding-block: clamp(.9rem, 2.2vw, 1.4rem); } } /* Une largeur exacte de translation ramene la carte dans son empreinte : sans elle, pivoter sur l'arete emporterait la fenetre hors du cadre. */ .devis__bloc.verso { transform: translateX(100%) rotateY(-180deg); } .devis__face { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; backface-visibility: hidden; border-radius: 4px; background: var(--papier); color: var(--encre); padding: clamp(1.3rem, 3.4vw, 2.3rem) clamp(1.3rem, 3.6vw, 2.6rem); /* L'ombre s'ouvre quand la feuille quitte le plan : --vol vaut 0 au repos et 1 au plus fort du geste, ecrit par le JS. */ box-shadow: 0 calc(2.6rem + var(--vol, 0) * 2.4rem) calc(6rem + var(--vol, 0) * 3.2rem) rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.05); } .devis__face--b { transform: rotateY(180deg); } /* Le meme reflet que sur une page en vol : c'est lui qui dit « papier » plutot que « carton ». Selecteur enfant, sinon .devis__face > * lui reprendrait sa position absolue. */ .devis__face > .devis__reflet { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; border-radius: 4px; mix-blend-mode: screen; background: linear-gradient(100deg, transparent 12%, rgba(255,240,214,.30) 42%, rgba(255,255,255,.13) 52%, transparent 88%); } /* La même lumière que sur une page du livre : la carte vient du même objet. */ .devis__face::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--lum-page); mix-blend-mode: multiply; opacity: var(--lum-force); } .devis__face > * { position: relative; z-index: 1; } .devis__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .devis__pas { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or); } .devis h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.04; letter-spacing: -.025em; font-variation-settings: "wdth" 92, "wght" 600; } .devis__sous { margin-top: .5rem; font-size: .92rem; line-height: 1.5; color: var(--encre-2); } .devis__fermer { position: absolute; top: .7rem; right: .8rem; z-index: 2; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; color: var(--encre-3); transition: color .3s, background-color .3s; } .devis__fermer:hover { color: var(--encre); background: rgba(0,0,0,.06); } .champ { display: block; margin-top: 1.05rem; } .champ > span { display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-3); margin-bottom: .35rem; } .champ input, .champ textarea { width: 100%; font: inherit; font-size: .98rem; color: var(--encre); background: transparent; border: 0; border-bottom: 1px solid var(--filet); padding: .42rem 0; border-radius: 0; transition: border-color .3s; } .champ textarea { resize: vertical; min-height: 3.4em; line-height: 1.5; } .champ input:focus, .champ textarea:focus { outline: none; border-color: var(--or); } .champ input::placeholder, .champ textarea::placeholder { color: var(--encre-3); opacity: .7; } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; } @media (max-width: 32rem) { .duo { grid-template-columns: 1fr; } } .puces { display: flex; flex-wrap: wrap; gap: .45rem; } .puce { position: relative; display: inline-flex; } .puce input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .puce span { display: inline-block; padding: .48rem .85rem; border-radius: 100px; border: 1px solid var(--filet); font-size: .84rem; line-height: 1.2; transition: background-color .3s, color .3s, border-color .3s; } .puce input:checked + span { background: var(--encre); color: var(--papier); border-color: var(--encre); } .puce input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; } .puce:hover span { border-color: var(--encre-3); } .devis__pied { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--filet-2); } .devis__retour { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); transition: color .3s; } .devis__retour:hover { color: var(--encre); } .devis__err { margin-top: .9rem; font-size: .84rem; color: #A03A1E; min-height: 1.2em; } .devis__recap { margin-top: .3rem; font-size: .8rem; line-height: 1.5; color: var(--encre-2); padding: .8rem 0 0; border-top: 1px solid var(--filet-2); } .devis__recap b { font-variation-settings: "wdth" 92, "wght" 600; color: var(--encre); } .devis__merci { text-align: center; padding: 1.4rem 0 .6rem; } .devis__merci .marque { font-size: 2.4rem; line-height: 1; color: var(--or); } .devis .btn { font-size: .68rem; } /* ========================================================================== 15. LES COMMANDES — tourner les pages ========================================================================== */ /* LES BOUTONS DE PAGE — du cristal fume, comme le carton du seuil. Ils etaient deux ronds gris a 62 % d'opacite : on ne les voyait pas, et quand on les voyait ils faisaient tache. Depuis que les fonds sont des PHOTOS, un gris translucide n'a plus aucun sol — il flotte sur un ciel blanc comme sur un feuillage noir, et se perd sur les deux. Ils reprennent donc le vocabulaire pose sur le seuil : une paroi de verre, une levre claire, une lueur chaude au pied. FUME et non transparent, parce que ceux-la doivent tenir sur n'importe quelle photo. Le chevron est DESSINE, pas ecrit : deux bords a 45 degres restent nets a toutes les tailles, la ou le caractere « fleche » d'une police varie d'une machine a l'autre — et souvent en dessine une mauvaise. */ .tourner { position: fixed; z-index: 45; top: 50%; margin-top: -1.9rem; width: 3.8rem; height: 3.8rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer; /* Le caractere « fleche » du HTML est toujours la, reduit a rien par font-size: 0 — mais un noeud de texte reste un element de grille, et il poussait le chevron d'un demi-cran vers le haut. On sort donc le chevron du flux et on le centre a la main. */ position: fixed; display: block; font-size: 0; color: rgba(255,238,206,.88); background: linear-gradient(168deg, rgba(34,25,13,.56), rgba(20,15,8,.40) 46%, rgba(28,20,10,.60)); -webkit-backdrop-filter: blur(11px) saturate(1.12); backdrop-filter: blur(11px) saturate(1.12); box-shadow: inset 0 0 0 1px rgba(255,226,178,.42), inset 0 1.5px 1px -1px rgba(255,255,255,.52), inset 0 -3px 6px -3px rgba(255,206,132,.42), 0 .7rem 1.9rem rgba(0,0,0,.36); transition: color .45s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease), opacity .35s var(--ease); } /* Le decalage lateral n'est pas un tatonnement : l'encre d'un chevron n'est pas au centre de sa boite. Deux bords sur quatre, donc un centre de masse a un quart de la boite — apres rotation de 45 degres, l'ecart devient purement horizontal et vaut S x racine(2) / 4, soit .205rem pour S = .58rem. */ .tourner::before { content: ""; position: absolute; left: 50%; top: 50%; width: .58rem; height: .58rem; border: 1.6px solid currentColor; border-right: 0; border-bottom: 0; transform: translate(-50%, -50%) rotate(-45deg) translate(.205rem, .205rem); } .tourner--suiv::before { transform: translate(-50%, -50%) rotate(135deg) translate(.205rem, .205rem); } .tourner--prec { left: max(.7rem, calc(50% - var(--pw) - 4.6rem)); } .tourner--suiv { right: max(.7rem, calc(50% - var(--pw) - 4.6rem)); } .tourner:hover, .tourner:focus-visible { color: var(--amber-hot); outline: none; background: linear-gradient(168deg, rgba(46,33,17,.62), rgba(28,20,10,.46) 46%, rgba(38,26,12,.66)); box-shadow: inset 0 0 0 1px rgba(255,236,198,.72), inset 0 1.5px 1px -1px rgba(255,255,255,.78), inset 0 -3px 7px -3px rgba(255,206,132,.62), 0 .95rem 2.6rem rgba(0,0,0,.42), 0 0 2.2rem rgba(240,169,76,.20); } .tourner--prec:hover, .tourner--prec:focus-visible { transform: translateX(-5px) scale(1.04); } .tourner--suiv:hover, .tourner--suiv:focus-visible { transform: translateX(5px) scale(1.04); } /* Eteint plutot qu'absent : un bouton qui disparait laisse croire qu'on est bloque, un bouton eteint dit qu'il n'y a plus rien de ce cote. */ .tourner[disabled] { opacity: .22; pointer-events: none; } @media (max-width: 46rem) { .tourner { display: none; } } /* Le repère de lecture : où en est-on dans le livre. Cliquable — c'est aussi la table des matières. */ .hud { position: fixed; z-index: 40; left: var(--gut); bottom: 1.3rem; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .55rem; } /* Le repere flotte au-dessus de n'importe quoi — un ciel clair ici, un angle sombre la. On lui donne son propre sol plutot que de parier sur le fond. */ .hud::before { content: ""; position: absolute; inset: -.85rem -1.6rem -.75rem -1.2rem; z-index: -1; border-radius: 1.6rem; background: rgba(10,9,7,.40); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .hud > * { position: relative; } .hud__tab { display: flex; flex-direction: row; gap: 6px; } .hud__tab button { display: block; width: 22px; height: 3px; background: rgba(237,234,227,.22); transition: background-color .4s, width .4s var(--ease); } .hud__tab button:hover { background: rgba(237,234,227,.6); width: 30px; } .hud__tab button[aria-current="true"] { background: var(--amber); width: 34px; box-shadow: 0 0 10px rgba(240,169,76,.6); } .hud__num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--bone); } .hud__num i { font-style: normal; color: rgba(237,234,227,.45); } .hud__lab { display: block; margin-top: .2rem; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(237,234,227,.55); } @media (max-width: 46rem) { .hud { display: none; } } /* ---------- 16. EN-TÊTE ---------- */ .hdr { /* L'OMBRE PORTEE FAIT LE TRAVAIL QUE LE VOILE NE PEUT PLUS FAIRE. Le voile du rail a ete resserre parce qu'etale il se decoupait en anneaux sur un ciel lisse. Resserre, il ne protege plus le bas du menu : sur un feuillage clair, « LE DEROULE » disparaissait. Une ombre portee sur le texte n'a pas ce defaut — elle ne couvre que quelques pixels autour de chaque lettre, donc aucune rampe assez longue pour se decouper. Halo clair sous un texte sombre aux heures de jour, halo sombre sous un texte clair la nuit : c'est le jeton --ombre-rail qui suit l'heure. */ text-shadow: var(--ombre-rail); position: fixed; z-index: 50; left: var(--rail-x); top: clamp(1.1rem, 2.6vh, 2.1rem); width: var(--rail); display: flex; flex-direction: column; align-items: stretch; gap: 1.05rem; } .hdr::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -1.6rem -3.4rem -3.2rem -3.2rem; background: var(--voile-rail); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); /* Le masque ne reprend plus le voile : il ne fait que fondre le BORD DROIT, que le degrade vertical laisserait net. */ -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent 100%); mask-image: linear-gradient(90deg, #000 58%, transparent 100%); } .hdr > * { position: relative; } [data-heure="nuit"] .hdr, [data-heure="soir"] .hdr { text-shadow: var(--ombre-rail); } [data-heure="matin"] .hdr, [data-heure="midi"] .hdr, [data-heure="apresmidi"] .hdr { text-shadow: var(--ombre-rail); } .hdr .cta-devis { text-shadow: none; } .brand { display: block; min-height: 2.6rem; } .brand__img { width: 100%; max-width: 9.5rem; height: auto; } [data-heure="matin"] .brand__img, [data-heure="midi"] .brand__img, [data-heure="apresmidi"] .brand__img { filter: invert(1) opacity(.88); } .brand__mot { font-variation-settings: "wdth" 112, "wght" 700; font-size: 1.05rem; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } .cta-devis { display: block; width: 100%; text-align: center; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; padding: .72rem .6rem; border-radius: 100px; background: var(--accent); color: var(--void); border: 1px solid var(--accent); transition: background-color .35s var(--ease), color .35s, transform .35s var(--ease), box-shadow .35s var(--ease); } .cta-devis:hover, .cta-devis:focus-visible { transform: translateY(-1px); box-shadow: 0 .6rem 1.6rem color-mix(in srgb, var(--accent) 38%, transparent); } [data-heure="matin"] .cta-devis, [data-heure="midi"] .cta-devis, [data-heure="apresmidi"] .cta-devis { color: var(--papier); } .nav { display: flex; flex-direction: column; } .nav a, .nav button { position: relative; display: block; text-align: left; padding: .42rem 0 .42rem 1.05rem; font-family: var(--f-mono); font-size: .655rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; color: var(--chrome-dim); color: color-mix(in srgb, var(--chrome) 55%, var(--chrome-dim)); transition: color .3s, padding-left .35s var(--ease); } .nav a::before, .nav button::before { content: ""; position: absolute; left: 0; top: .95em; width: .62rem; height: 1px; background: currentColor; opacity: .4; transform: scaleX(.5); transform-origin: left; transition: transform .4s var(--ease), opacity .3s; } .nav a:hover, .nav button:hover { color: var(--chrome); padding-left: 1.35rem; } .nav a:hover::before, .nav button:hover::before { transform: scaleX(1); opacity: 1; } .nav [aria-current="true"] { color: var(--accent); } .nav [aria-current="true"]::before { transform: scaleX(1.7); opacity: 1; } .mono .hdr, .flat .hdr { left: 0; right: 0; top: 0; width: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem var(--gut); } .mono .brand__img, .flat .brand__img { max-width: 7.4rem; } .mono .cta-devis, .flat .cta-devis { width: auto; padding: .58rem 1.05rem; } .flat .nav { flex-direction: row; gap: clamp(.9rem, 2vw, 2rem); } .flat .nav a { padding: .3rem 0 .3rem 1.05rem; } .flat .nav { order: 2; } .flat .cta-devis { order: 3; } @media (max-width: 52rem) { .flat .nav { display: none; } } /* ---------- 16 bis. D'UN CAHIER À L'AUTRE ---------- Passer de l'accueil à une prestation change de document ET d'heure. Sans rien, c'est un flash blanc. Avec ceci, les deux pages se fondent — et le changement de lumière devient le sujet de la transition. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .62s; animation-timing-function: cubic-bezier(.4,0,.2,1); } ::view-transition-old(root) { animation-name: sortie; } ::view-transition-new(root) { animation-name: entree; } @keyframes sortie { to { opacity: 0; transform: scale(1.015); } } @keyframes entree { from { opacity: 0; transform: scale(.988); } } /* ---------- 17. OUVERTURE ---------- */ /* L'ATTENTE EST MUETTE. Le voile sert a une chose : ne pas montrer le livre avant qu'il soit monte. Ca, c'est utile. Il affichait en plus le nom de la page en tres gros, dans une police qui n'est PAS celle du logo, et une barre de progression. Deux secondes de generique avant une maison qu'on n'a pas encore ouverte : on annoncait le site au lieu de le donner. Il ne reste que la nuit, puis le seuil qui parait dessus en 1,4 s. Le noir du voile est celui du fond : personne ne voit la bascule, on voit seulement le logo arriver. */ /* LE VOILE NE TOUCHE JAMAIS AU DOIGT. C'est lui qui a tue le tactile sur les quatre cahiers. Il couvre le viewport entier a z-index 999, et il n'avait AUCUN pointer-events : il ne cessait d'intercepter qu'a l'instant ou `visibility: hidden` se posait, c'est-a-dire A LA FIN d'une transition. Or les deux proprietes ne voyagent pas par le meme chemin. `opacity` est une propriete de COMPOSITEUR : elle s'anime sur l'autre fil, et le voile disparait a l'oeil quoi qu'il arrive. `visibility` demande le FIL PRINCIPAL pour se poser a l'arrivee. Sur une tablette les deux se desolidarisent : on ne voit plus rien, et la couche est toujours la, a manger chaque tap. Rien de ce qui est dessous ne repond — ni le glisser, ni les fleches, ni les liens. index.html n'a pas de voile (le seuil fait deja l'opaque) : c'est exactement la seule page ou le tactile marchait encore. Le voile n'a jamais eu besoin de recevoir un pointeur. On le lui retire, et la panne devient impossible quoi que fasse la transition. */ .boot { position: fixed; inset: 0; z-index: 999; background: var(--void); pointer-events: none; transition: opacity .8s var(--ease), visibility .8s; } .boot.off { opacity: 0; visibility: hidden; } /* ========================================================================== 19. LE SEUIL — la porte du coffret On n'entre pas dans une maison par une page d'accueil : on pousse une porte. Le logo tient lieu de battants, il s'ouvre en deux et on passe au travers. Le seuil pose SON fond à lui : une vraie photo de Provence, en plein jour. C'est le seul endroit du site où une image détaillée ne coûte rien, parce que devant la porte il n'y a pas encore de voûte — donc aucune guirlande à réduire en gribouillis de points. On la traverse, et la maison derrière reste nocturne. Tout le réglage tient dans quatre constantes, en tête du fichier. Les durées sont longues et les courbes démarrent lentement pour glisser longtemps : une porte de coffret ne claque pas, elle cède. C'est ça, le velours — pas un effet de plus, un temps plus long et une accélération qu'on ne sent jamais. ========================================================================== */ .seuil { position: fixed; inset: 0; z-index: 200; /* LE SEUIL EST OPAQUE DES LE PREMIER PIXEL PEINT, et c'est vital. Sans ce fond, il ne peint rien : pendant les 2,4 s ou le paysage monte de 0 a 1, on voyait le LIVRE et l'EN-TETE au travers — la page nue, avant d'arriver sur l'accueil. C'est exactement le travail que faisait l'ancien voile noir ; en le retirant, on avait retire la seule chose qui couvrait la page. Il est pose en CSS et non par le JS : il doit tenir avant que la moindre ligne de script s'execute. Et il tombe des qu'on ouvre — a cet instant le paysage est encore plein, donc il n'y a aucun clignotement. */ background-color: var(--void); /* LE SEUIL A SA PROPRE LUMIERE, ET ELLE NE DEPEND PAS DE L'HEURE. Il heritait des jetons de la COUVERTURE, qui sont accordes au papier du livre : a l'apres-midi, un bronze sombre (#9A7628) fait pour du creme. Sur une photo voilee, ce bronze s'eteint. Or le seuil est TOUJOURS sombre, quelle que soit l'heure de la page qui suit — ses ors sont donc clairs, et fixes. */ --couv-accent: #FFC97C; --couv-fil: rgba(255,201,124,.48); --couv-fil-2: rgba(255,201,124,.20); --couv-fil-3: rgba(255,201,124,.32); display: grid; place-items: center; padding: clamp(1.2rem, 5vw, 3rem); perspective: 1500px; perspective-origin: 50% 46%; } /* L'ARRIVEE — LE JOUR MONTE DE LA NUIT. Avant : un panneau noir couvrait tout, puis se levait d'un bloc et la page etait la. Un rideau qu'on tire, et on voyait le rideau. Maintenant les pieces arrivent dans l'ordre ou on les regarderait : le paysage, puis la porte, puis le carton. Chacune attend que la precedente soit posee. Rien n'apparait : tout se leve. Le fondu du paysage dure 2,4 s et son echelle 3,6 s. Ce decalage est tout le sujet : une image qui finit d'avancer apres avoir fini de paraitre se lit comme un plan qui se pose. Les deux ensemble, ca ne serait qu'un zoom. Rien ne demarre avant que la photo soit chargee — le JS pose .pret. Un fondu commence sur une image absente montre un trou noir puis un a-coup. */ @keyframes seuil-parait { from { opacity: 0; transform: translateY(1.15rem); } } /* Un voile qui creuse le centre : le regard va à la porte, pas aux guirlandes. Il s'efface dès que la porte s'ouvre. */ .seuil::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* Deux couches, et chacune a un travail. Le rond creuse le centre pour que le logo clair se detache du feuillage — LA LISIBILITE PASSE AVANT LE SOLEIL. Le bandeau cadre le haut et le bas, sinon la photo touche les bords et l'ecran ressemble a un fond d'ecran, pas a une scene. On reste volontairement en dessous du voile d'avant (.72) : a cette valeur-la, le plein jour tournait au crepuscule. */ background: radial-gradient(66% 58% at 50% 46%, rgba(10,12,16,.62), rgba(10,12,16,.30) 56%, transparent 84%), linear-gradient(180deg, rgba(8,10,14,.34), rgba(8,10,14,.08) 36%, rgba(8,10,14,.40)); transition: opacity var(--t-seuil) var(--ease-seuil); } /* ---- LE PAYSAGE -------------------------------------------------------- */ /* La Provence en vrai, et non plus un ciel dessine. Trois largeurs, choisies au format de la fenetre : on ne sert pas 2560 px a un telephone. */ .seuil__paysage { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--void) url("../img/f-accueil-1200.webp") 50% 52% / cover no-repeat; filter: brightness(1); opacity: 0; transform: scale(1.055); /* L'echelle met 1,7 fois plus longtemps que le fondu : c'est ce decalage qui fait un plan qui se pose, et non une image qui apparait. */ transition: opacity var(--t-lever) var(--ease-seuil), transform calc(var(--t-lever) * 1.7) var(--ease-seuil); } .pret .seuil__paysage { opacity: 1; transform: none; } /* Deux largeurs. Pas de 2560 : la source n'en fait que 2390 et on n'agrandit jamais. */ @media (min-width: 1100px) { .seuil__paysage { background-image: url("../img/f-accueil-1800.webp"); } } /* La scene : les pieces du seuil, et le volume qui les porte. preserve-3d est INDISPENSABLE — sans lui le plongeon n'a pas de profondeur, et la transition ici est ce qui empeche le plongeon d'etre une coupe seche. */ .seuil__scene { position: relative; display: flex; flex-direction: column; align-items: center; /* Ecarte : le filet du haut du cartouche frolait la descendante du S. Un carton grave a besoin de sa marge, sinon il se lit comme un sous-titre colle au logo. */ gap: clamp(3.1rem, 7.5vh, 5.6rem); transform-style: preserve-3d; transition: transform var(--t-plonge) var(--ease-plonge), opacity var(--t-plonge) var(--ease-plonge); } /* ---- LES BATTANTS ------------------------------------------------------ */ .seuil__porte { position: relative; /* Plus petit qu'avant (66vw / 44rem) : le trace est vectorise depuis un PNG, et au-dela de cette taille les arrondis montrent leurs facettes. */ width: min(54vw, 35rem); aspect-ratio: 1521 / 645; transform-style: preserve-3d; } .seuil__battant { position: absolute; top: 0; height: 100%; width: 50%; background-image: url("../img/logo-metsens.svg"); background-repeat: no-repeat; /* Deux fois la largeur du battant = une fois celle de la porte : chaque moitié montre sa moitié du logo, et les deux se rejoignent au pixel. */ background-size: 200% 100%; backface-visibility: hidden; transition: transform var(--t-seuil) var(--ease-seuil), filter var(--t-seuil) var(--ease-seuil); will-change: transform; } /* La charnière est sur l'arête EXTÉRIEURE : les arêtes intérieures viennent vers l'œil, comme deux portes qu'on tire à soi. */ .seuil__battant--g { left: 0; background-position: left center; transform-origin: left center; } .seuil__battant--d { right: 0; background-position: right center; transform-origin: right center; } /* LE JOUR. C'est lui qui fait le coffret, et c'est lui qu'on traverse : une lame de lumière chaude naît entre les battants, s'élargit, déborde, puis nous passe dessus. Sans ce temps-là, les deux moitiés du logo ne font que glisser sur la page — on n'ouvre rien. */ .seuil__jour { position: absolute; left: 50%; top: 50%; z-index: -1; width: 6px; height: 132%; transform: translate(-50%, -50%); /* Radial et non lineaire : un degrade lineaire floute reste un RECTANGLE flou, et ca se voit. Une ellipse s'eteint sur tous ses bords a la fois. */ background: radial-gradient(48% 44% at 50% 50%, rgba(255,248,228,1), rgba(255,230,182,.78) 38%, rgba(255,210,142,.28) 66%, transparent 86%); opacity: 0; filter: blur(3px); } .seuil.ouvre .seuil__jour { animation: seuil-jour var(--t-seuil) var(--ease-seuil) forwards; } @keyframes seuil-jour { 0% { opacity: 0; width: 6px; filter: blur(3px); } 26% { opacity: 1; width: 11%; filter: blur(9px); } 60% { opacity: .95; width: 82%; filter: blur(34px); } 100% { opacity: 0; width: 200%; filter: blur(78px); } } /* LE LOGO EST UNE PORTE, DONC IL SE CLIQUE. Le JS ecoutait deja le clic sur les battants — mais RIEN NE LE DISAIT. Un visiteur qui voit un logo fendu en deux et un carton en dessous cliquera sur le logo : c'est le geste evident. Il faut donc que ca reponde, et que ca se voie AVANT le clic. Le survol fait naitre une lame de lumiere a la jointure : la porte annonce ce qu'il y a derriere avant qu'on la pousse. C'est la meme lumiere qui jaillira, en plus petit. Le :not(.ouvre) n'est pas un ornement. Sans lui, la main est encore sur le logo au moment du clic : la duree de survol (.55 s) resterait accrochee aux battants et la porte s'ouvrirait en une demi-seconde au lieu de 1,9 s. Tout le velours y passait. */ .seuil__porte { cursor: pointer; } .seuil:not(.ouvre) .seuil__porte:hover .seuil__battant { filter: brightness(1.13); transition-duration: .55s; } .seuil__jour { transition: opacity .8s var(--ease), width .8s var(--ease), filter .8s var(--ease); } .seuil:not(.ouvre) .seuil__porte:hover .seuil__jour { opacity: .52; width: 13px; filter: blur(7px); } /* Survoler le logo allume aussi le cartouche : c'est la meme porte, il n'y a pas deux boutons. */ .seuil__scene:has(.seuil__porte:hover) .seuil__entrer::after { opacity: 1; } /* La porte, puis le carton. Ils sont caches par defaut : sans cela on les verrait une fraction de seconde avant que le JS pose .pret. */ .seuil__porte, .seuil__entrer { opacity: 0; } .pret .seuil__porte { opacity: 1; animation: seuil-parait calc(var(--t-lever) * .95) var(--ease-seuil) var(--d-porte) backwards; } .pret .seuil__entrer { opacity: 1; animation: seuil-parait calc(var(--t-lever) * .88) var(--ease-seuil) var(--d-carton) backwards; } .seuil__entrer { position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; cursor: pointer; padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(2rem, 5vw, 3.6rem); border: 0; /* TOUT TIENT DANS LE FOND DE L'ÉLÉMENT, et c'est voulu. Un calque en retrait (z-index négatif, backdrop-filter) passe derrière la scène 3D du seuil et disparaît — essayé, vérifié en image, le verre fumé n'était nulle part. Trois couches empilées sur l'élément lui-même ne peuvent pas se perdre. De haut en bas : le filet du haut, le filet du bas, puis le verre. Les deux filets S'ÉTEIGNENT avant d'arriver au bord — un trait qui ne rejoint pas son voisin se lit comme une gravure, quatre traits qui se rejoignent se lisent comme un cadre de formulaire. Le verre déborde de la carte (130 % x 165 %) pour n'avoir aucune arête : un rectangle net ressemble à une vignette collée, un halo ressemble à de la lumière. Et il est BRUN, pas noir : sur une photo de Provence, un gris pur sonne le plastique. */ background-image: linear-gradient(90deg, transparent 0%, rgba(240,169,76,.34) 20%, rgba(255,220,168,.66) 50%, rgba(240,169,76,.34) 80%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(240,169,76,.24) 20%, rgba(255,220,168,.48) 50%, rgba(240,169,76,.24) 80%, transparent 100%), radial-gradient(closest-side, rgba(26,18,10,.90), rgba(20,14,8,.62) 46%, rgba(16,11,6,.24) 72%, transparent 88%); background-size: 100% 1px, 100% 1px, 132% 168%; background-position: 0 0, 0 100%, 50% 50%; background-repeat: no-repeat; transition: transform .9s var(--ease), opacity .55s var(--ease); } /* Les mêmes filets en or vif, éteints au repos : ce sont eux qui s'allument au survol. Une image de fond ne sait pas se fondre, une opacité si. */ .seuil__entrer::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: linear-gradient(90deg, transparent 0%, rgba(255,220,168,.66) 18%, var(--amber-hot) 50%, rgba(255,220,168,.66) 82%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(240,169,76,.52) 18%, var(--amber) 50%, rgba(240,169,76,.52) 82%, transparent 100%); background-size: 100% 1px, 100% 1px; background-position: 0 0, 0 100%; background-repeat: no-repeat; transition: opacity .7s var(--ease); } /* La lueur chaude qui s'ouvre au survol, derrière le texte. Elle ne remplace pas le verre : elle s'ajoute, et seulement quand la main arrive. */ .seuil__entrer::before { content: ""; position: absolute; inset: -6% -8%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(240,169,76,.20), rgba(240,169,76,.07) 50%, transparent 80%); transition: opacity .8s var(--ease); } .seuil__entrer:hover, .seuil__entrer:focus-visible { transform: translateY(-3px); outline: none; } .seuil__entrer:hover::after, .seuil__entrer:focus-visible::after { opacity: 1; } .seuil__entrer:hover::before, .seuil__entrer:focus-visible::before { opacity: 1; } /* Le texte passe devant les deux calques. */ .seuil__sur, .seuil__filet, .seuil__cta { position: relative; z-index: 1; } /* LA MAISON D'ABORD, LE CLIC ENSUITE. C'etait l'inverse : « Cliquez pour entrer » etait la ligne la plus grosse du carton, et ce qu'on vend — un traiteur gastronomique en Provence depuis 2009 — passait en tout petit au-dessus. On criait la manoeuvre et on chuchotait la maison. L'interlettrage descend de .2em a .12em : a cette taille-la, une capitale trop espacee se lit lettre par lettre au lieu de se lire d'un coup. La lisibilite prime. */ .seuil__sur { font-family: var(--f-titre); font-weight: 500; font-size: clamp(.95rem, 2.1vw, 1.3rem); letter-spacing: .12em; text-indent: .12em; text-transform: uppercase; line-height: 1.7; color: var(--couv-accent); /* Une ombre portee plutot qu'un fond : elle detache le texte du feuillage sans assombrir la photo d'un pixel de plus. */ text-shadow: 0 1px 14px rgba(12,8,2,.62), 0 0 3px rgba(12,8,2,.42); } /* Le filet du milieu s'eteint lui aussi a ses extremites : le meme geste que les deux grands, en plus court. */ .seuil__filet { display: block; width: 4.6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--couv-fil) 26%, rgba(240,169,76,.55) 50%, var(--couv-fil) 74%, transparent); } /* LA BULLE DE CRISTAL. La phrase est prise dans un verre — celui d'une reception. Pas un contour : une PAROI, qu'on ne voit qu'a ses reflets. Quatre couches, et chacune est un fait optique, pas un ornement : le galbe un rayon genereux mais pas un stade : un verre a du ventre, une gelule n'en a pas ; la levre un filet clair tout autour, plus vif en haut la ou la lumiere frappe la tranche ; le reflet une nappe claire en haut a gauche, hors du cadre : c'est la fenetre qui se reflete dans la paroi ; le pied la lumiere s'accumule au bas d'un verre, jamais au milieu. Et la refraction : le paysage derriere est FLOUTE ET ECLAIRCI par la traversee. Sans elle on a un autocollant translucide ; avec, on a du verre. PAS DE FLECHE. Un chevron est un signe de plus ; la surbrillance est le mot lui-meme qui repond. On n'indique pas une direction, on invite a entrer. La bulle repond aussi quand la souris est sur le LOGO : c'est la meme porte, il ne doit pas y avoir un endroit qui s'allume et un autre qui reste froid. */ .seuil__cta { position: relative; display: block; padding: .8rem 1.95rem .88rem; border-radius: 2.6rem; background: linear-gradient(168deg, rgba(255,254,250,.22), rgba(255,252,246,.08) 46%, rgba(255,248,236,.16)); /* C'EST LA REFRACTION QUI FAIT LE VERRE, PAS LE CONTOUR. A brightness 1.09 la bulle se lisait comme un jeton brun : l'interieur etait aussi sombre que le voile autour. Un verre se voit parce que ce qu'on regarde AU TRAVERS est plus clair et deplace. Trois dosages ont ete montes et regardes de pres ; celui-ci est le premier ou l'oeil dit « verre ». */ -webkit-backdrop-filter: blur(14px) brightness(2.2) saturate(1.15); backdrop-filter: blur(14px) brightness(2.2) saturate(1.15); box-shadow: inset 0 0 0 1px rgba(255,254,248,.60), inset 0 2px 1px -1px rgba(255,255,255,.92), inset 0 -3px 6px -3px rgba(255,216,160,.66), 0 1rem 2.6rem rgba(0,0,0,.38); transition: color .45s var(--ease), text-shadow .45s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease); } /* Le reflet de la paroi. Il deborde par le haut : une source hors cadre se lit comme une fenetre, une source dans le cadre comme une tache. */ .seuil__cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(122% 72% at 26% -24%, rgba(255,255,255,.34), transparent 62%); transition: opacity .6s var(--ease); } /* Le pied du verre. */ .seuil__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(86% 56% at 50% 118%, rgba(255,214,150,.22), transparent 64%); } .seuil__entrer:hover .seuil__cta, .seuil__entrer:focus-visible .seuil__cta, .seuil__scene:has(.seuil__porte:hover) .seuil__cta { color: var(--amber-hot); text-shadow: 0 0 1.5rem rgba(255,220,168,.42); background: linear-gradient(168deg, rgba(255,250,238,.30), rgba(255,246,228,.12) 46%, rgba(255,238,206,.24)); box-shadow: inset 0 0 0 1px rgba(255,236,198,.78), inset 0 2px 1px -1px rgba(255,255,255,1), inset 0 -3px 7px -3px rgba(255,206,132,.80), 0 1.15rem 3rem rgba(0,0,0,.40); } /* Le clic passe en second — mais reste le plus CLAIR des deux : c'est lui l'action, et ce qui est cliquable doit se voir comme cliquable. Il est plus petit que la maison, pas plus discret. */ .seuil__cta { font-family: var(--f-titre); font-weight: 500; font-size: clamp(.82rem, 1.55vw, .98rem); letter-spacing: .06em; text-indent: .06em; line-height: 1.45; color: var(--bone); } .seuil__mot { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; color: var(--chrome-far); transition: color .6s var(--ease); } .seuil__entrer:hover .seuil__mot, .seuil__entrer:focus-visible .seuil__mot { color: var(--amber); } /* ---- ON ENTRE ---------------------------------------------------------- */ /* Le fond opaque tombe, sans transition : le paysage le remplace a l'image pres. Avec une transition, on verrait le noir passer sous une photo encore pleine — un voile gris d'une demi-seconde. */ .seuil.ouvre { background-color: transparent; } /* Le bouton part le premier : il n'a rien à faire dans le plongeon. */ .seuil.ouvre .seuil__entrer { opacity: 0; transform: translateY(6px); pointer-events: none; } .seuil.ouvre::before { opacity: 0; } /* LE PAYSAGE BAISSE, PUIS S'EFFACE. Premiere version : le voile s'effacait a l'ouverture et le paysage restait en plein soleil. La lame de lumiere ne se voyait plus DU TOUT — de l'or sur un ciel bleu ne brille pas. On ouvrait une porte devant rien. Une lumiere n'existe que sur du sombre. Le jour baisse donc pendant que la porte s'ouvre, plus vite qu'elle (.62) pour que la lame ait ou briller quand elle arrive ; puis le paysage s'efface pendant le plongeon, avec le meme retard que la scene. On sort du soleil et on entre dans la maison d'un seul geste. C'est aussi ce que fait l'oeil devant une fente lumineuse : il se ferme sur le reste. */ .seuil.ouvre .seuil__paysage { filter: brightness(.22); opacity: 0; /* La sortie redeclare SES temps : le jour baisse pendant que la porte s'ouvre, puis le paysage s'efface pendant le plongeon. Sans cela on ressortirait avec les 2,4 s de l'arrivee, et le plongeon trainerait. */ transition: filter calc(var(--t-seuil) * .62) var(--ease-seuil), opacity var(--t-plonge) var(--ease-plonge); transition-delay: 0s, calc(var(--t-seuil) * .30); } /* « On tire vers soi » : les battants ne pivotent pas sur place, ils AVANCENT en pivotant. Sans ce translateZ, on voit deux moitiés tourner ; avec, on voit deux portes qu'on ouvre. */ .seuil.ouvre .seuil__battant--g { transform: translateZ(150px) rotateY(-86deg); filter: brightness(.5); } .seuil.ouvre .seuil__battant--d { transform: translateZ(150px) rotateY(86deg); filter: brightness(.5); } /* LE PLONGEON. La scène grandit et passe l'œil : on ne regarde plus la porte, on la traverse. Elle part en retard sur les battants — on ouvre d'abord, on entre ensuite. */ .seuil.ouvre .seuil__scene { transform: translateZ(560px) scale(1.06); opacity: 0; transition-delay: calc(var(--t-seuil) * .30); } .seuil.partie { opacity: 0; visibility: hidden; pointer-events: none; } /* LE LIVRE ATTEND DERRIÈRE LA LUMIÈRE, et il attend VRAIMENT : le délai est ce qui sépare une porte qui s'ouvre d'un fondu enchaîné. Sans lui, le livre est déjà lisible quand les battants s'écartent, et les deux moitiés du logo ne font plus que flotter par-dessus le texte. Le délai ne vaut qu'à l'entrée : à la fermeture, tout doit disparaître sur-le-champ. */ .livre, .hdr, .hud, .tourner, .pivot { transition: opacity var(--t-plonge) var(--ease-plonge); transition-delay: calc(var(--t-seuil) * .46); } .livre { transition: opacity var(--t-plonge) var(--ease-plonge), transform var(--t-plonge) var(--ease-plonge); transition-delay: calc(var(--t-seuil) * .46); } /* L'invite « tournez l'appareil » concerne le livre : elle n'a rien a faire devant la porte. */ .seuil-ferme .livre, .seuil-ferme .hdr, .seuil-ferme .hud, .seuil-ferme .tourner, .seuil-ferme .pivot { opacity: 0; pointer-events: none; transition-delay: 0s; } .seuil-ferme .livre { transform: scale(.94); transition-delay: 0s; } /* ========================================================================== 18. REPLIS Deux niveaux distincts : .flat le livre se déplie en une page verticale (mobile, mouvement réduit, pas de JS — le HTML sort avec .flat, le JS l'enlève) .no-gl on retire aussi la voûte Sur mobile on garde donc l'atmosphère, on abandonne seulement l'objet : feuilleter au doigt sur 375 px ne donne rien de lisible. ========================================================================== */ .flat { --pw: min(92vw, 34rem); /* A plat, la page n'est plus un imprime a l'echelle : la typographie reprend une mesure d'ecran, sinon le mono tombe a 8 px sur un telephone. */ --t-titre: clamp(2rem, 8.5vw, 3.1rem); --t-sous: clamp(1.3rem, 5.4vw, 1.85rem); --t-corps: clamp(1rem, 3.7vw, 1.08rem); --t-petit: clamp(.92rem, 3.4vw, 1rem); --t-mono: .68rem; --t-nombre: clamp(2.3rem, 11vw, 3.4rem); } .flat .stage { position: static; perspective: none; overflow: visible; background: transparent; } .flat .bokeh, .flat .tourner, .flat .hud, .flat .reflet, .flat .pli, .flat .cadre, .flat .couv__ouvrir { display: none; } .flat .livre { position: static; inset: auto; width: auto; height: auto; margin: 0; transform-style: flat; display: block; padding-block: 4.5rem 3rem; } .flat .livre__bloc { position: static; transform: none !important; transform-style: flat; } .flat .feuille, .flat .feuille__t { position: static; width: auto; height: auto; transform: none !important; transform-style: flat; transition: none; } .flat .page { position: relative; inset: auto; width: min(92vw, 34rem); margin: 0 auto 1.6rem; height: auto; backface-visibility: visible; border-radius: 3px; /* Meme raison qu'ailleurs : deux rampes courtes plutot qu'une longue. */ box-shadow: var(--ombre-page), none; } .flat .page::before, .flat .page::after { border-radius: 3px; } .flat .page--v { transform: none; } .flat .page__in { position: static; min-height: calc(var(--pw) * 1.1); padding: 2.2rem 1.9rem 1.4rem; } .flat .page__flux { transform: none !important; } .flat .page--photo .page__in { min-height: 0; padding: 0; } .flat .pleine { aspect-ratio: 4/5; } .flat .rayon__plot { max-width: 26rem; } /* La scène n'étant plus fixée, le fond et la voûte passent en couches fixes sous le contenu, qui est remonté d'un cran. */ body.flat { background: var(--void); overflow-x: hidden; } body.flat::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 6%, rgba(240,169,76,.13), transparent 55%), radial-gradient(100% 70% at 50% 100%, rgba(92,143,165,.08), transparent 60%); } .flat #voute { position: fixed; inset: 0; z-index: 1; } .flat .livre { position: relative; inset: auto; z-index: 2; } .no-gl #voute { display: none; } /* UNE GUIRLANDE N'A DE SENS QU'ALLUMEE, DONC LA NUIT. A 8 h, 13 h et 17 h, un cable d'ampoules eteintes ne raconte rien : il ajoute un semis de points gris sur un ciel de jour, et il tire toute la page vers le nocturne. La voute reste sur les deux heures ou elle brille — l'accueil et le cocktail dinatoire — et disparait ailleurs. Le JS cesse aussi de la dessiner : ce qui ne se voit pas n'a pas a occuper le processeur graphique. */ html:not([data-heure="nuit"]) #voute { display: none; } /* Les trois ampoules hors mise au point, devant le livre, sont le meme vocabulaire : elles s'en vont avec la voute. En plein jour elles ne se lisent plus comme des lumieres mais comme des taches sur l'objectif. */ html:not([data-heure="nuit"]) .bokeh { display: none; } /* Le système peut demander « moins d'animation », et on l'écoute — SAUF si l'utilisateur a explicitement demandé le livre (?3d=1, ou le basculeur de l'en-tête). Sans cette exception, on lui donnait un livre dont les pages basculaient d'un coup : le pire des deux mondes. Le JS pose `.anime` dès qu'il monte l'objet. */ @media (prefers-reduced-motion: reduce) { body:not(.anime), body:not(.anime) *, body:not(.anime) *::before, body:not(.anime) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } body:not(.anime) .devis__bloc { transition: none; animation: none; } .anime .bokeh i, .anime .couv__ouvrir i, .anime .pivot i, .anime .page__in.deborde::before { animation: none !important; } } /* ========================================================================== LES APPAREILS TACTILES PAIENT LE COMPOSITEUR, PAS LE PROCESSEUR Sur tablette, le site est devenu injouable : le tactile semblait mort. Il ne l'etait pas — ni touch-action ni le code du glisser n'ont change d'une ligne, verifie contre la version d'avant. C'est la PAGE qui ne repondait plus, parce qu'on lui demandait trop a chaque image : un calque plein ecran qui respire en permanence, donc recompose sans jamais s'arreter ; trois flous d'arriere-plan — la bulle du seuil, les boutons de page, le voile du menu — dont chacun oblige le navigateur a relire ce qu'il y a DERRIERE avant de peindre. Sur un ecran de bureau ca ne se voit pas. Sur un iPad, ca suffit a figer la main. On coupe donc les deux la ou le doigt sert : le paysage se fige a son echelle de repos, et les verres gardent leur degrade et leur levre mais perdent la refraction. On perd un raffinement, on rend l'objet. ========================================================================== */ /* `any-pointer: coarse` EST LA CONDITION QUI MANQUAIT. `(hover: none)` et `(pointer: coarse)` decrivent le pointeur PRINCIPAL. Une Surface avec son clavier rabattu annonce un pointeur FIN — donc rien de ce qui suit ne s'y appliquait, alors que c'est justement une machine qu'on touche du doigt. `any-pointer: coarse` repond oui des qu'un ecran tactile existe, clavier branche ou non. */ @media (hover: none), (pointer: coarse), (any-pointer: coarse) { .paysage { animation: none; transform: scale(1.06); } /* .pivot manquait a l'appel : un verre depoli FIXE, pose devant le livre, avec une animation infinie dedans. Le navigateur doit relire tout ce qu'il y a derriere a chaque image, sans jamais s'arreter. */ .seuil__cta, .tourner, .hdr::before, .hud::before, .seuil__entrer::before, .pivot { -webkit-backdrop-filter: none; backdrop-filter: none; } .pivot i { animation: none; } /* Sans refraction, la bulle a besoin d'un fond a elle pour rester lisible. */ .seuil__cta { background-color: rgba(24,18,10,.42); } } /* ========================================================================== ?nu=1 — LA PAGE NUE, POUR TRANCHER Ce n'est pas un reglage, c'est un banc d'essai. Il coupe D'UN COUP tout ce qui coute cher a peindre : chaque flou, chaque verre depoli, le filtre du paysage, toutes les animations. Rien d'autre ne bouge — meme structure, memes couleurs, meme mise en page. Il existe parce qu'une mesure faite sur un autre appareil ne prouve rien. La seule question qui tranche est : SUR CETTE TABLETTE-LA, la meme page repond-elle sans les effets ? Si oui, c'est la peinture. Si non, ce n'est pas la peinture, et on cherche ailleurs sans y revenir. ========================================================================== */ .nu .paysage { filter: none; animation: none; transform: none; } .nu .bokeh { display: none; } .nu .seuil__cta, .nu .tourner, .nu .hdr::before, .nu .hud::before, .nu .seuil__entrer::before, .nu .pivot, .nu .devis::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .nu .seuil__cta { background-color: rgba(24,18,10,.42); } .nu *, .nu *::before, .nu *::after { filter: none !important; animation: none !important; will-change: auto !important; } /* Le grain et les voiles plein cadre s'en vont aussi : ils forcent une couche de plus a composer par-dessus toute la page. */ .nu body::after, .nu .grain, .nu .vignette { display: none !important; } /* ---------- 19. ACCESSIBILITÉ ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .page :focus-visible { outline-color: var(--or); } .skip { position: absolute; left: -9999px; z-index: 200; padding: 1rem 1.4rem; background: var(--accent); color: var(--papier); } .skip:focus { left: 1rem; top: 1rem; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }