depuis l'ajout du lien d'évitement : le sélecteur doit accepter les deux niveaux, sinon les sections perdent leur contexte d'empilement et le sommaire latéral disparaît. */ :is(body.project, body.project > main) > :is(section, nav, footer), .pj-hero .wrap{position:relative;z-index:2} /* Chaque halo n'existe que dans sa fenêtre de lecture : il monte à partir de --a, redescend jusqu'à --b, et le suivant prend le relais. --peak plafonne son intensité, volontairement basse. */ .hblob,#haze::after{ position:absolute;border-radius:50%; /* Un dégradé, pas un flou. Le rendu est le même, mais `filter:blur()` sur un calque fixe qui couvre tout l'écran oblige le navigateur à garder une couche composite en permanence sous le pointeur, et le curseur ne se met alors à jour que sur les bords des éléments. */ filter:none; background:radial-gradient(closest-side, color-mix(in srgb,var(--pc) 90%,transparent) 0%, color-mix(in srgb,var(--pc) 52%,transparent) 40%, transparent 74%); opacity:calc(var(--peak) * min( clamp(0,(var(--sp) - var(--a)) * 4,1), clamp(0,(var(--b) - var(--sp)) * 4,1))); transition:opacity .6s linear; } /* haut de page, bord haut-gauche */ .pb-1{--a:-.10;--b:.30;--peak:.42; width:82vw;height:82vw;top:-30vw;left:-30vw} /* première relance, bord droit */ .pb-2{--a:.22;--b:.56;--peak:.30; width:68vw;height:68vw;top:-6vh;right:-34vw} /* milieu de lecture, bord gauche */ .pb-3{--a:.48;--b:.80;--peak:.28; width:66vw;height:66vw;bottom:-22vh;left:-32vw} /* fin de page, bord droit, le plus discret des quatre */ #haze::after{content:"";--a:.72;--b:1.10;--peak:.26; width:70vw;height:70vw;bottom:-28vh;right:-36vw} /* sans animation : les quatre halos restent posés, faiblement */ @media (prefers-reduced-motion:reduce){ .hblob,#haze::after{opacity:calc(var(--peak) * .55);transition:none} } @media (max-width:820px){ .pb-1{width:150vw;height:150vw;top:-52vw;left:-70vw} .pb-2{width:135vw;height:135vw;right:-70vw} .pb-3{width:135vw;height:135vw;left:-70vw} #haze::after{width:140vw;height:140vw;right:-72vw} } .pj-hero .wrap{position:relative;z-index:2} .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px);width:100%} .pj-crumb{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--on-night-soft);text-decoration:none;margin-bottom:26px;transition:color .2s} .pj-crumb:hover{color:var(--on-night)} .pj-crumb b{color:var(--pc-ink);font-weight:500} .pj-tag{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 14px;border-radius:999px;color:var(--pci,var(--pc-ink));background:color-mix(in srgb,var(--pc) 12%,transparent);margin-bottom:22px} /* sur téléphone, un libellé long passait sur deux lignes : la page affiche alors la version courte portée par data-court */ @media (max-width:700px){ .pj-tag[data-court]{font-size:0;white-space:nowrap} .pj-tag[data-court]::before{content:attr(data-court); font-size:12.5px;letter-spacing:.1em;font-weight:600} } .pj-title{font-family:var(--title-font),serif;font-weight:400;font-size:clamp(46px,9vw,120px);line-height:.95;letter-spacing:-.03em;max-width:14ch} .pj-title em{font-style:italic} .pj-lead{font-size:clamp(17px,2.1vw,23px);line-height:1.5;color:var(--on-night-soft);max-width:52ch;margin-top:28px} .pj-meta{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px);margin-top:40px;padding-top:26px;border-top:1px solid var(--night-line)} .pj-meta div{font-size:13px;color:var(--on-night-faint);letter-spacing:.03em} .pj-meta b{display:block;margin-top:6px;font-size:15px;font-weight:500;color:var(--on-night);letter-spacing:0} /* ===== Sections ===== */ .pj-section{max-width:1180px;margin:0 auto;padding:clamp(60px,11vh,130px) clamp(20px,5vw,64px) 0} /* « narrow » ne sert plus à rien depuis que la colonne de texte a sa propre mesure : le garder à 820 rendait la colonne plus étroite dans ces sections-là, et le bord gauche ne coïncidait plus. */ .pj-section.narrow{max-width:1180px} /* Une seule mesure pour tout le texte suivi, centrée sur la page comme les images. Sans ça, une section étroite (820) et une section pleine (1180) n'ont pas le même bord gauche, et le texte paraît décalé par rapport aux visuels. Les lignes restent ferrées à gauche. */ :root{--measure:min(100%,760px)} .pj-eyebrow,.pj-h2,.pj-prose,.pj-steps,.pj-chips,.pj-facts,.pj-lead-para, .pj-section > blockquote.pj-quote{max-width:var(--measure);margin-inline:auto} .pj-step p{max-width:none} /* l'oeil de section : un point de couleur, une réglure, le titre */ .pj-eyebrow{display:flex;align-items:center;gap:11px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--pc-ink);margin-bottom:22px;font-weight:600} .pj-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pc);flex:0 0 auto} .pj-eyebrow::after{content:"";width:26px;height:1.5px;border-radius:2px;background:color-mix(in srgb,var(--pc) 45%,transparent)} .pj-h2{font-family:var(--title-font),serif;font-weight:400;font-size:clamp(30px,5vw,58px);line-height:1.02;letter-spacing:-.02em;margin-bottom:30px} .pj-h2 em{font-style:italic} .pj-prose{max-width:var(--measure)} .pj-prose p{font-size:clamp(16px,1.35vw,18px);line-height:1.72;color:var(--on-night-soft);margin-bottom:1.2em} .pj-prose p strong{color:var(--on-night);font-weight:500} .pj-lead-para p{font-size:clamp(18px,1.7vw,22px);line-height:1.6;color:var(--on-night)} /* Pastilles de rôle */ .pj-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} /* Étiquettes, pas boutons : ni bord ni forme de gélule, pour qu'on ne les confonde pas avec le sélecteur de versions, seul vrai contrôle. */ .pj-chips span{font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600; padding:7px 13px;border-radius:7px;color:var(--on-night-soft); background:color-mix(in srgb,var(--pc) 11%,transparent)} /* ===== Figures / placeholders visuels ===== Les captures d'écran sont posées sur une carte blanche : c'est elle qui les met en avant. Les schémas au trait, eux, restent à même le crème, et c'est ce contraste qui donne le rythme de la page. */ .pj-figure{margin-top:clamp(30px,5vw,56px)} /* Les blocs visuels n'ont qu'une marge haute et la prose n'en a pas : une légende suivie d'un paragraphe se lisait comme sa première ligne. On rend à la prose l'air qu'elle prend déjà après les autres blocs. */ .pj-figure + .pj-prose, .ef-figs + .pj-prose{margin-top:clamp(30px,5vw,56px)} .pj-figure:has(img), .pj-figure:has(iframe){ background:#FFFFFF; border:1px solid color-mix(in srgb,var(--pc) 12%,rgba(28,28,38,.05)); border-radius:24px; padding:clamp(24px,4vw,58px); box-shadow:var(--pj-card); margin-top:clamp(40px,6vw,80px); } /* la capture nue : pas de carte blanche autour, l'image occupe toute la largeur de sa figure et porte sa propre ombre. Pour les écrans qui ont déjà leur fond, la carte ne faisait que les rétrécir. */ .pj-figure.nu:has(img){background:none;border:0;border-radius:0;padding:0; box-shadow:none;margin-top:clamp(30px,5vw,56px)} .pj-figure.nu img{border-radius:14px; box-shadow:0 18px 44px -18px color-mix(in srgb,var(--pc) 20%,rgba(18,26,32,.30))} /* une planche détourée flotte déjà : ni coins ni ombre à lui donner */ .pj-figure.nu.libre img{border-radius:0;box-shadow:none} /* la grille resserrée : pour des écrans mobiles, qui n'ont pas besoin de toute la largeur d'une colonne de grille classique */ .ef-figs.serre{grid-template-columns:repeat(auto-fit,minmax(200px,300px));justify-content:center} /* deux par deux : quatre captures denses valent mieux en deux rangées qu'en un rang de quatre, où l'on ne lit plus rien */ .ef-figs.duo{grid-template-columns:repeat(2,1fr)} @media (max-width:640px){.ef-figs.duo{grid-template-columns:1fr}} /* quatre écrans mobiles sur une seule ligne */ .ef-figs.quatre{grid-template-columns:repeat(4,1fr)} @media (max-width:820px){.ef-figs.quatre{grid-template-columns:repeat(2,1fr)}} /* Les huit visuels de la FAQ. Ils formaient une seule grappe de huit en fin de section : on lisait le texte, puis on regardait la galerie, sans que l'un serve l'autre. Ils sont maintenant en deux séries, chacune posée sur la phrase qu'elle illustre, et chacune son propre carrousel de zoom : les quatre étapes de qualification et les quatre univers n'ont rien à se dire. */ .ef-faq{margin-top:clamp(30px,5vw,56px)} /* Glissée entre deux paragraphes d'un même pas, la série a besoin d'air des deux côtés : sans marge basse, la phrase suivante se collait à la dernière légende. */ .pj-step > .ef-faq{margin-bottom:clamp(30px,5vw,56px)} .ef-faq > .ef-figs{margin-top:0;column-gap:20px;row-gap:24px} /* la légende respire sous son visuel : collée, elle se lisait comme une ligne du visuel lui-même */ .ef-faq .pj-figure figcaption{margin-top:16px;font-size:13px} .pj-figure.full{margin-left:0;margin-right:0} .pj-figure.full:has(img){padding:clamp(24px,4vw,58px)} .pj-figure figcaption{margin-top:14px;font-family:var(--title-font),serif;font-style:italic;font-size:14.5px;color:var(--on-night-faint);text-align:center} /* Une image posée directement dans une figure (visuel d'ouverture) : sans cette règle elle s'affiche à sa taille réelle et déborde. */ /* le zoom glisse un .zoomable-box autour de l'image quand la figure porte aussi une légende : la règle doit suivre l'image dans son enveloppe, sinon elle reprend sa largeur d'attribut et déborde de l'écran */ .pj-figure > img, .pj-figure > .zoomable-box > img{display:block;width:100%;height:auto;border-radius:12px} .pj-figure > .zoomable-box{display:block} /* Trio de figures côte à côte (ex. 3 versions testées) */ /* ===== Bloc décision (process) ===== */ /* le blanc étant réservé aux visuels, le récit se sépare par des réglures */ .pj-steps{margin-top:clamp(30px,5vw,50px);display:grid;gap:0} .pj-step{border-top:1px solid var(--night-line);padding:clamp(24px,3vw,34px) 0} .pj-step .lbl{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--pc-ink);font-weight:600;margin-bottom:12px} .pj-step p{font-size:clamp(15px,1.3vw,17.5px);line-height:1.7;color:var(--on-night-soft)} /* Deux paragraphes d'un même pas se touchaient : la remise à zéro globale des marges leur enlevait toute respiration et les deux se lisaient comme un seul bloc compact. C'est ce qui donnait l'effet de mur. */ .pj-step p + p{margin-top:1.2em} .pj-step p strong{color:var(--on-night);font-weight:500} /* ===== Schéma MID (HTML responsive : → en desktop, ↓ en mobile) ===== */ .mid-schema{display:flex;align-items:flex-start;justify-content:center;gap:clamp(12px,2.5vw,26px);margin-top:clamp(24px,4vw,40px)} .ms-col{flex:1;min-width:0;max-width:250px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px} .ms-label{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-faint);font-weight:600} .ms-note{font-size:13.5px;color:var(--on-night-faint);font-style:italic} .ms-field{width:100%;max-width:220px;padding:15px 18px;border:1px solid var(--night-line);border-radius:12px;background:#FFFFFF;font-size:15px;font-weight:500;color:var(--on-night);text-align:left} .ms-field::after{content:"";display:inline-block;width:2px;height:1em;background:var(--pc);margin-left:6px;vertical-align:middle;animation:msblink 1s step-end infinite} @keyframes msblink{0%,100%{opacity:1}50%{opacity:0}} .ms-chips{display:flex;flex-direction:column;gap:9px;width:100%;max-width:250px} /* Les pistes explorées : chacune est une tentative qui n'a rien donné. La croix passe en tête de ligne, dans une pastille pleine, et le libellé se lit barré : on comprend « essayé, sans succès » d'un coup d'œil. (Avant : un dégradé pâle et une croix minuscule collée à droite, qu'on ne voyait pas.) */ .ms-chips span{display:flex;align-items:center;gap:11px; padding:10px 14px;border-radius:11px;text-align:left; border:1px solid color-mix(in srgb,var(--stop) 22%,transparent); background:color-mix(in srgb,var(--stop) 6%,#fff); font-size:14.5px;line-height:1.3;color:var(--on-night-soft); text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--stop) 45%,transparent); text-decoration-thickness:1px} /* la pastille pleine, et la croix blanche dessus. En tracé, et non en glyphe : un caractère ne tombe jamais pile au centre d'un rond. */ .ms-chips span::before{content:"";flex:0 0 18px;width:18px;height:18px;border-radius:50%; background:var(--stop) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9'/%3E%3C/svg%3E") center/10px no-repeat} /* la flèche se cale sur la première ligne de contenu, pas sur le milieu de la colonne la plus haute */ .ms-arrow{flex:0 0 auto;align-self:flex-start;margin-top:52px;color:var(--on-night-faint)} .ms-arrow svg{width:26px;height:26px;display:block;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* le ticket de caisse : papier clair, bord dentelé, MID surligné */ .ms-ticket{width:100%;max-width:200px;background:#FFFFFF;color:#1c1c26;border-radius:8px 8px 0 0;padding:16px 16px 24px;border:1px solid rgba(28,28,38,.12);box-shadow:0 12px 28px rgba(28,28,38,.12);text-align:center; clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),93.75% 100%,87.5% calc(100% - 9px),81.25% 100%,75% calc(100% - 9px),68.75% 100%,62.5% calc(100% - 9px),56.25% 100%,50% calc(100% - 9px),43.75% 100%,37.5% calc(100% - 9px),31.25% 100%,25% calc(100% - 9px),18.75% 100%,12.5% calc(100% - 9px),6.25% 100%,0 calc(100% - 9px))} .ms-ticket .t1{font-size:13px;font-weight:600;margin-bottom:10px} .ms-ticket .bar{height:5px;border-radius:3px;background:rgba(28,28,38,.12);margin:6px auto} .ms-ticket .bar.short{width:62%} .ms-ticket .mid{margin-top:12px;font-size:13px;font-weight:600;display:inline-block;padding:3px 9px;border-radius:6px;background:color-mix(in srgb,var(--pc) 26%,white);border:1px dashed var(--pc-ink)} /* apparition en cascade avec le système .rv de la page */ .mid-schema>*{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)} .rv.in .mid-schema>*{opacity:1;transform:none} @media (max-width:820px){ .mid-schema{flex-direction:column;align-items:center;gap:12px} .ms-col{max-width:300px} .ms-arrow{align-self:center;margin-top:0} .ms-arrow svg{transform:rotate(90deg)} } @media (prefers-reduced-motion:reduce){ .mid-schema>*{opacity:1;transform:none;transition:none} .ms-field::after{animation:none} } /* ===== Comparatif A / B (le test de novembre 2023) ===== Deux colonnes, quatre cartes de même taille. Le comparatif se lit en travers et non de haut en bas : sur chaque rangée, la même étape des deux versions. Numéroter les étapes dans la légende suffit à dire le moment, et évite une colonne de repères qui prendrait de la largeur aux captures. Plus aucune annotation posée sur l'image : ce qu'elles disaient est passé en légende, sous l'écran concerné. Trois bulles flottantes se recouvraient, et à 420 px de large on ne lisait de toute façon aucune des interfaces qu'elles désignaient. */ .cmp{--b:#8B5CF6;max-width:1320px;margin:0 auto; display:grid;grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px) clamp(24px,3.4vw,44px);align-items:start} .cmp figure{margin:0} .cmp img{display:block;width:100%;height:auto;border-radius:8px; border:1px solid rgba(28,28,38,.10); box-shadow:0 14px 34px color-mix(in srgb,var(--pc) 18%,rgba(28,28,38,.10))} /* l'entête de chaque colonne : la version, puis ce qu'elle tente */ .cmp-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; padding-bottom:12px;border-bottom:1px solid var(--night-line); font-family:var(--title-font),serif;font-size:clamp(16px,1.5vw,19px);color:var(--on-night)} .cmp-tag{display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-family:var(--body-font),sans-serif;font-size:12px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-soft)} .cmp-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--pc)} /* la version B porte sa propre couleur : deux teintes valent mieux qu'un libellé pour dire, d'un coup d'œil, de quelle colonne on parle */ .cmp-tag.b::before{background:var(--b)} .cmp figcaption{margin-top:11px;font-size:14px;line-height:1.5;color:var(--on-night-soft)} .cmp figcaption b{color:var(--on-night);font-weight:500} /* les deux constats sur la version B : en points, pas en bulles */ .cmp-pt{display:block;position:relative;margin-top:8px;padding-left:14px; font-size:13.5px;line-height:1.5;color:var(--on-night)} .cmp-pt::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px; background:color-mix(in srgb,var(--pc) 65%,transparent)} .cmp-verdict{max-width:62ch;margin:clamp(28px,4vw,44px) auto 0;text-align:center; font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.65;color:var(--on-night-soft)} .cmp-verdict strong{color:var(--on-night);font-weight:500} /* les cartes arrivent l'une après l'autre, dans l'ordre de lecture */ .rv .cmp figure{opacity:0;transform:translateY(12px); transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)} .rv.in .cmp figure{opacity:1;transform:none} .rv.in .cmp figure:nth-of-type(2){transition-delay:.09s} .rv.in .cmp figure:nth-of-type(3){transition-delay:.18s} .rv.in .cmp figure:nth-of-type(4){transition-delay:.27s} @media (max-width:900px){ /* une colonne : la version A en entier, puis la version B */ .cmp{grid-template-columns:1fr} .cmp-tete:nth-of-type(2){margin-top:clamp(24px,4vw,40px)} } @media (prefers-reduced-motion:reduce){ .rv .cmp figure{opacity:1;transform:none;transition:none} } /* ===== Trajectoire de l'aide : trois versions, du disponible à l'obligatoire ===== */ /* Trois chapitres l'un sous l'autre : la date, le titre et le constat à gauche, l'écran en grand à droite. En trois colonnes, les écrans devenaient des vignettes illisibles. La version finale montre d'abord les trois temps du carrousel, puis l'aide fixée. */ .trj{display:flex;flex-direction:column;gap:clamp(34px,5vw,60px)} .trj-b{display:grid;grid-template-columns:minmax(215px,.72fr) 2fr; column-gap:clamp(26px,4vw,56px);align-items:center; opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)} .rv.in .trj-b{opacity:1;transform:none} .trj-side{display:flex;flex-direction:column;gap:9px;align-items:flex-start} .trj-visu{display:flex;flex-direction:column;gap:10px;min-width:0} .trj-media{position:relative} .trj img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(28,28,38,.10);box-shadow:0 12px 30px color-mix(in srgb,var(--pc) 16%,rgba(28,28,38,.08))} /* les trois versions se lisent aussi bien : ce qui les distingue, c'est la date et le constat, pas un voile */ .trj-dim img{opacity:1} .trj-date{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--on-night-faint)} .trj-lbl{font-family:var(--title-font),serif;font-size:clamp(18px,1.8vw,23px);line-height:1.3;color:var(--on-night)} .trj-dim .trj-lbl{color:var(--on-night-soft)} .trj-txt{font-size:14px;line-height:1.6;color:var(--on-night-soft);margin:0} /* les trois temps du carrousel sur la même ligne, au-dessus de l'aide fixée */ /* La version finale est le dénouement de la section, et c'est elle qu'on voyait le moins : les trois temps du carrousel tenaient sur un sixième de la page. Ce bloc-là prend donc toute la largeur, le texte au-dessus, les trois écrans numérotés en dessous, puis l'écran d'arrivée en grand. */ .trj-b.final{grid-template-columns:1fr;row-gap:clamp(18px,2.6vw,30px);align-items:start} .trj-b.final .trj-side{max-width:var(--measure)} .trj-b.final .trj-visu{gap:clamp(12px,1.8vw,20px)} .trj-eye{margin:0;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--pc-ink)} /* la chute et la légende se lisent ferrées à gauche, comme le reste du texte : le centré flottait au milieu de la carte */ /* La chute de la trajectoire : c'est la phrase qui referme les trois versions, pas un paragraphe de plus. Elle passe donc en Fraunces, centrée, détachée par un filet et par de l'air, à la taille d'un sous-titre. La note sur le design system, elle, descend d'un cran : c'est une précision technique, pas un argument, et elle se lit comme une note de bas de figure. */ /* La chute et sa note forment un bloc, centré dans le blanc qui reste sous la séquence : autant d'air au-dessus qu'en dessous, sinon le texte paraît tomber au fond de la carte. */ .trj-chute{max-width:34ch;margin:clamp(40px,5.5vw,64px) auto 0; font-family:var(--title-font),serif;font-weight:400; font-size:clamp(20px,2.4vw,28px);line-height:1.28;letter-spacing:-.01em; text-align:center;color:var(--on-night);text-wrap:balance} .pj-figure:has(.trj) > figcaption{max-width:none; margin:clamp(18px,2.4vw,26px) 0 clamp(14px,2.4vw,26px); text-align:center;font-size:14px;color:var(--on-night-faint)} @media (max-width:700px){ .trj-chute{max-width:none;font-size:clamp(19px,5.2vw,23px)} } @media (max-width:900px){ .trj{gap:38px} .trj-b{grid-template-columns:1fr;row-gap:14px} } @media (prefers-reduced-motion:reduce){ .trj-b{opacity:1;transform:none;transition:none} } /* ===== Citation (verbatim de test) : pleine largeur, centrée ===== */ .pj-quote{margin:clamp(44px,7vw,80px) 0 0;font-family:var(--title-font),serif;font-style:italic;font-size:clamp(21px,2.8vw,32px);line-height:1.45;color:var(--on-night);text-align:center} .pj-quote::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--pc);margin:0 auto 24px} .pj-quote cite{display:block;margin-top:14px;font-family:var(--body-font),sans-serif;font-style:normal;font-size:13px;color:var(--on-night-faint)} /* ===== Behind the work · un panneau de verre ===== Deux halos très dilués dans la couleur du projet, et par-dessus un panneau dépoli qui les floute et les sature. La page se referme comme elle s'ouvre, le hero ayant lui aussi ses halos. ⚠️ Les halos ne sont PAS posés sur le fond de .pj-behind : un dégradé ne peut pas déborder de son élément et se couperait net sur les bords. D'où le calque ::before, large comme la fenêtre et débordant en haut et en bas, pour que la lumière ait la place de s'éteindre. Sa largeur est plafonnée à 100vw, donc il n'ajoute jamais de défilement latéral. */ .pj-behind{max-width:1180px;margin:clamp(70px,12vh,140px) auto 0;padding:0 clamp(20px,5vw,64px); position:relative;isolation:isolate} .pj-behind::before{ content:"";position:absolute;z-index:0;pointer-events:none; top:-160px;bottom:-180px;left:50%;margin-left:-50vw;width:100vw; background: radial-gradient(circle 360px at 27% 41%, color-mix(in srgb,var(--pc) 10%,transparent) 0%,transparent 70%), radial-gradient(circle 340px at 67% 53%, color-mix(in srgb,var(--pc) 8%,transparent) 0%,transparent 70%)} .pj-behind__box{ position:relative;z-index:1; background:rgba(255,255,255,.37); -webkit-backdrop-filter:blur(30px) saturate(155%); backdrop-filter:blur(30px) saturate(155%); border:1px solid rgba(255,255,255,.8); border-radius:26px; padding:clamp(34px,5.5vw,68px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 30px 60px -30px color-mix(in srgb,var(--pc) 20%,rgba(18,26,32,.26)), 0 2px 10px rgba(28,28,38,.04)} /* Sans verre dépoli, un panneau à 37 % laisserait le texte flotter sur le crème : on le rend opaque. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .pj-behind__box{background:rgba(255,255,255,.86)} } .pj-behind__box h2{font-family:var(--title-font),serif;font-weight:400;font-size:clamp(26px,4vw,44px);margin-bottom:24px} .pj-behind__box p{font-size:clamp(15px,1.3vw,17.5px);line-height:1.72;color:var(--on-night-soft);margin-bottom:1.1em} .pj-behind__box p:last-child{margin-bottom:0} /* Sur Affiliation, le bloc n'a pas de titre : sa première phrase en est un. « J'ai longtemps cru qu'il fallait mieux écrire le tutoriel du MID » est le seul endroit du site où une page s'ouvre sur un aveu, et un intitulé posé au-dessus ne ferait que l'annoncer une deuxième fois. Elle prend donc la taille et l'interligne d'un titre, dans la police des titres. */ .pj-behind__box .ouvre{font-family:var(--title-font),serif;font-weight:400; font-size:clamp(21px,2.5vw,30px);line-height:1.26;letter-spacing:-.015em; color:var(--on-night);margin-bottom:1.15em;text-wrap:pretty} /* ===== Sous-nav de fin de page ===== */ /* Après l'encart de fin, le rail respire un peu plus : le panneau de verre et ses halos ont besoin de finir avant que la liste commence. */ .pj-behind + .pj-subnav{margin-top:calc(clamp(60px,10vh,110px) + 54px)} .pj-subnav{max-width:1180px;margin:clamp(60px,10vh,110px) auto 0;padding:clamp(30px,5vw,48px) clamp(20px,5vw,64px) clamp(70px,10vh,110px);border-top:1px solid var(--night-line)} /* nav de fin : carte projet précédent / suivant */ /* retour direct à la liste des projets */ /* ===== Révélation au scroll ===== */ .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .7s cubic-bezier(.2,.8,.2,1)} .rv.in{opacity:1;transform:none} /* Le hero est toujours au-dessus de la ligne de flottaison : il s'affiche à coup sûr, avec une entrée douce au chargement (indépendante du scroll, pour éviter tout effet « fantôme »). */ .pj-hero .rv{opacity:1;transform:none;animation:pj-hero-in .8s cubic-bezier(.2,.8,.2,1) both} .pj-hero .pj-crumb{animation-delay:.05s} .pj-hero .pj-tag{animation-delay:.12s} .pj-hero .pj-title{animation-delay:.18s} .pj-hero .pj-lead{animation-delay:.28s} .pj-hero .pj-meta{animation-delay:.38s} @keyframes pj-hero-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* Le hero tient tout l'écran. Sans indice en bas, on ne devine pas qu'un récit commence en dessous, et le blanc passe pour un oubli. Même souris que sur l'accueil, en clair sur le fond de nuit. */ .pj-scroll{position:absolute;bottom:clamp(16px,3.5vh,34px);left:50%;z-index:2; display:flex;flex-direction:column;align-items:center;gap:9px; animation:pj-hero-in .8s .95s both} .pj-scroll .mouse{width:22px;height:34px;border:1.5px solid var(--on-night-faint);border-radius:12px;position:relative} .pj-scroll .mouse::after{content:"";position:absolute;top:6px;left:50%;width:3px;height:6px;border-radius:2px; background:var(--on-night-faint);animation:pj-sc 1.7s ease-in-out infinite} @keyframes pj-sc{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}} @media (prefers-reduced-motion:reduce){.pj-scroll .mouse::after{animation:none;opacity:.8;transform:translateX(-50%)}} @media (max-width:600px){.pj-scroll{display:none}} /* ===== Avant / Après (curseur à glisser) ===== */ .ba-wrap{margin-top:clamp(30px,5vw,56px)} .ba{position:relative;width:100%;aspect-ratio:1500/1066;border-radius:14px;overflow:hidden;border:1px solid rgba(28,28,38,.10);cursor:ew-resize;user-select:none;background:#fff} .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none} /* Le curseur est un input range natif, invisible mais posé sur toute l'image : il apporte le clavier (flèches) et le glisser, et `pan-y` laisse le doigt faire défiler la page verticalement au lieu de rester prisonnier du slider. */ .ba__range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;padding:0;opacity:0; -webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y} .ba__range::-webkit-slider-runnable-track{height:100%;background:transparent} .ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:46px;border:0;border-radius:50%;background:transparent} .ba__range::-moz-range-track{height:100%;background:transparent} .ba__range::-moz-range-thumb{width:46px;height:46px;border:0;border-radius:50%;background:transparent} /* le focus clavier se voit sur la poignée, pas sur l'input transparent */ .ba__range:focus-visible ~ .ba__handle .ba__grip{outline:3px solid #fff;outline-offset:3px} .ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))} .ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--pc);transform:translateX(-50%);pointer-events:none} .ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--pc);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(28,28,38,.28)} .ba__grip svg{width:22px;height:22px;fill:#fff} .ba__tag{position:absolute;top:14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--on-night);border:1px solid rgba(28,28,38,.08);box-shadow:0 6px 18px rgba(28,28,38,.12);pointer-events:none} .ba__tag--before{left:14px} .ba__tag--after{right:14px} .ba-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} .ba-legend span{font-size:14.5px;color:var(--on-night-soft);border:1px solid var(--night-line);border-radius:999px;padding:8px 15px} .ba-legend b{color:var(--pc-ink);font-weight:600} /* ===== Vue d'ensemble des écrans (éventail desktop / carrousel mobile) ===== Composant transparent, sans texte (titres gérés par la section). Images : assets/merchant/. JS dans projet.js. */ /* La vue d'ensemble arrive juste après le hero : c'est elle qui paie le scroll, elle ne doit pas se faire attendre derrière deux cents pixels de vide. */ /* L'éventail déborde à gauche et à droite, c'est voulu. En haut, non : il passait sous la barre fixe et se faisait couper par le bord de la fenêtre, ce qui se lit comme un accident. On lui rend l'air qu'il faut pour que le bord supérieur des écrans reste dans la page. */ .pj-hero + .pj-section:has(.em-overview){padding-top:clamp(96px,13vh,152px)} /* Le conteneur prend toute la largeur de la fenêtre et rogne ce qui dépasse : l'éventail garde son écartement, ses écrans de bord sont coupés net par le bord de l'écran, et la page ne défile plus sur le côté. `clip` et non `hidden` : `hidden` créerait un conteneur de défilement, ce qui casserait les `position:sticky` de la page. */ .em-overview{position:relative;margin-top:clamp(8px,1.6vw,20px); width:100vw;margin-left:calc(50% - 50vw);overflow-x:clip} /* Desktop : éventail interactif */ .em-fan{position:relative;z-index:2;width:min(1050px,96vw);height:520px;margin:0 auto;display:flex;align-items:center;justify-content:center; translate:var(--fan-shift,0) 0} .em-screen{position:absolute;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform} /* L'éventail cache la moitié de chaque écran. Au survol, celui qu'on vise passe devant et se redresse : on voit enfin ce qu'il y a dessus sans avoir à ouvrir le zoom. */ .em-screen.avant{z-index:30!important} .em-frame{overflow:hidden;background:#fff} .em-frame.em-desktop{border-radius:12px;box-shadow:0 22px 54px color-mix(in srgb,var(--pc) 20%,rgba(28,28,38,.14))} /* plus de bezel noir : le même trait fin que les mobiles de Connexion */ .em-frame.em-mobile{border-radius:22px;border:1px solid rgba(28,28,38,.12);box-shadow:0 20px 48px rgba(28,28,38,.22)} .em-bar{height:26px;background:#eef;display:flex;align-items:center;gap:5px;padding:0 10px} .em-dot{width:8px;height:8px;border-radius:50%} .em-dot.r{background:#ff5f57}.em-dot.y{background:#ffbd2e}.em-dot.g{background:#28c840} .em-frame img{display:block;width:100%;height:auto} /* Mobile : carrousel horizontal */ .em-carou-wrap{display:none} @media (max-width:820px){ .em-fan{display:none} .em-carou-wrap{display:flex;flex-direction:column;width:100vw;margin-left:calc(50% - 50vw)} /* un conteneur en overflow-x rogne aussi ce qui dépasse en hauteur : la marge intérieure réserve la place de l'ombre portée. */ .em-carou{position:relative;z-index:2;display:flex;align-items:center;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:30px 24px 52px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .em-carou::-webkit-scrollbar{display:none} .em-cslide{scroll-snap-align:center;flex:0 0 auto} /* Une seule hauteur pour tout le carrousel : les téléphones ne dominent plus les captures desktop. Ce sont les largeurs qui suivent le ratio de chaque écran, pas l'inverse. */ .em-carou{--emh:min(46vh,306px);--embar:30px} .em-cframe{overflow:hidden;background:#fff;height:var(--emh);box-sizing:border-box} .em-cmobile{border-radius:24px;border:1px solid rgba(28,28,38,.12);box-shadow:0 18px 40px rgba(28,28,38,.22)} .em-cmobile img{height:100%;width:auto;display:block} .em-cdesktop{border-radius:12px;box-shadow:0 18px 40px rgba(28,28,38,.18);width:auto;display:flex;flex-direction:column} .em-cbar{flex:0 0 var(--embar);box-sizing:border-box} .em-cdesktop img{height:calc(var(--emh) - var(--embar));width:auto;display:block;background:#fff} .em-cbar{height:24px;background:#eef;display:flex;align-items:center;gap:5px;padding:0 9px;flex:0 0 auto} .em-cdot{width:7px;height:7px;border-radius:50%} .em-cdot.r{background:#ff5f57}.em-cdot.y{background:#ffbd2e}.em-cdot.g{background:#28c840} .em-dots{display:flex;gap:8px;justify-content:center;margin-top:16px} .em-dots span{width:8px;height:8px;border-radius:50%;background:rgba(28,28,38,.20);transition:.3s} .em-dots span.on{background:#5DCAA5;width:22px;border-radius:5px} } /* ===== Prototype interactif embarqué (épinglé) ===== */ /* Le prototype du portail reprend exactement l'habillage de celui de Connexion : une carte bordée, une barre en tête avec l'invite et le sélecteur de taille, la scène, puis le pied d'explication. */ .pj-proto-card .cx-proto-bar{border-bottom:1px solid var(--night-line)} .pj-proto-card .pj-proto-frame{background:transparent} .pj-proto-pin{position:relative;margin-top:clamp(30px,5vw,56px)} .pj-proto-sticky{position:sticky;top:72px} /* pastille « notification » : invite au clic, disparaît au 1er clic */ @keyframes badgepulse{0%{transform:scale(.5);opacity:.8}80%,100%{transform:scale(1.6);opacity:0}} .pj-proto-frame{width:100%;height:690px;border:0;display:block;background:transparent;overflow:hidden} .pj-proto-hint{margin:0;padding:14px 2px 0;border-top:1px solid var(--night-line);color:var(--on-night-faint);font-size:13px} .pj-proto-spacer{height:38vh;pointer-events:none} /* ===== Responsive ===== */ @media (max-width:820px){ .pj-figure.full{margin-left:0;margin-right:0;padding:0} .pj-title{font-size:clamp(40px,12vw,68px)} /* le hero occupe (presque) tout l'écran, contenu centré verticalement */ .pj-hero{min-height:100vh;min-height:100svh;padding:clamp(64px,11vh,92px) 0 34px;align-items:center} .pj-lead{margin-top:20px} .pj-meta{margin-top:30px;padding-top:22px} /* respirations resserrées : moins de vide entre textes et visuels */ .pj-section{padding-top:52px} .pj-eyebrow{margin-bottom:16px} .pj-h2{margin-bottom:22px} .pj-steps{margin-top:26px} .ba-wrap{margin-top:26px} .pj-figure{margin-top:24px} .pj-proto-pin{margin-top:26px} .pj-proto-spacer{height:16vh} .pj-chips{margin-top:24px} .pj-behind{margin-top:56px} .pj-subnav{margin-top:46px;padding-bottom:64px} /* la règle desktop est plus spécifique, il faut la reprendre ici */ .pj-behind + .pj-subnav{margin-top:100px} } @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .pj-hero .rv{animation:none} } /* ===== Schémas : le mouvement d'apparition, partagé par tous les schémas ===== Les blocs s'assemblent une fois, à l'arrivée du schéma dans l'écran, puis se taisent. Le système reprend le .rv/.rv.in des pages projet. */ .cx-fi{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease} .rv.in .cx-fi{opacity:1;transform:none} /* la seconde moitié du schéma démarre à .62s : le lecteur qui défile normalement voit le film en entier au lieu d'arriver au milieu */ .rv.in .cx-d1{transition-delay:.05s}.rv.in .cx-d2{transition-delay:.14s}.rv.in .cx-d3{transition-delay:.24s} .rv.in .cx-d4{transition-delay:.34s}.rv.in .cx-d5{transition-delay:.62s}.rv.in .cx-d6{transition-delay:.72s} .rv.in .cx-d7{transition-delay:.82s}.rv.in .cx-d8{transition-delay:.92s}.rv.in .cx-d9{transition-delay:1.05s} .rv.in .cx-dblock{transition-delay:.62s} .cx-replay{margin-top:16px;text-align:right} .cx-replay button{background:none;border:1px solid var(--night-line);color:var(--on-night-faint);font:inherit;font-size:13px;padding:7px 16px;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s} .cx-replay button:hover{border-color:var(--pc);color:var(--on-night)} .cx-replay button:focus-visible{outline:2px solid var(--pc);outline-offset:3px} @media (prefers-reduced-motion:reduce){ .cx-fi{opacity:1;transform:none;transition:none} } /* ===== Connexion : le hub en prototype interactif (on clique dans l'écran réel) ===== */ /* le prototype porte déjà son cadre : pas de carte blanche par-dessus */ /* Les captures qui portent déjà leur propre cadre et leur propre ombre n'ont pas besoin d'une carte blanche derrière : c'était un cadre autour d'objets déjà encadrés. On la garde pour les compositions annotées, qui ont besoin d'un fond pour tenir ensemble. */ .pj-figure:has(.cx-proto), .pj-figure:has(.parade), .pj-figure:has(.gal){background:none;border:0;box-shadow:none;padding:0} .pj-figure:has(.parade) > figcaption, .pj-figure:has(.gal) > figcaption{padding:0} /* sans carte blanche, la légende collait au prototype */ .pj-figure:has(.cx-proto) > figcaption{margin-top:26px} /* L'écran porte déjà son propre cadre : un second cadre autour donnait une boîte dans une boîte. On garde la barre et le pied, rattachés par un filet, mais plus de bordure, plus d'ombre, plus de fond. */ .cx-proto{margin-top:clamp(30px,5vw,56px)} .cx-proto-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 2px 14px;border-bottom:1px solid var(--night-line)} /* L'invite au clic : c'est la seule chose qui dit que ce bloc n'est pas une image. Elle était écrite en 12px gris, au ras de la barre, et on passait à côté. Elle devient une pastille dans la couleur du projet, avec son point qui bat, et elle ne se retire qu'une fois qu'on a effectivement cliqué. */ .cx-proto-cue{display:inline-flex;align-items:center;gap:10px; padding:9px 16px 9px 14px;border-radius:999px; font-size:13px;font-weight:600;letter-spacing:.005em;color:var(--pci,var(--pc-ink)); /* 12 % et pas 14 : c'est le taux sur lequel les --ci-* sont étalonnées, au-delà le fond mange le texte de quelques centièmes. */ background:color-mix(in srgb,var(--pc) 12%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 32%,transparent) inset; transition:opacity .4s ease,background .4s ease} .cx-proto-cue::before{content:"";flex:0 0 9px;width:9px;height:9px;border-radius:50%; background:var(--pc);animation:cxpulse 2.2s ease-out infinite} /* tant qu'on n'a pas touché, le prototype porte un liseré de la couleur du projet : de loin, il se distingue des captures qui l'entourent */ .cx-proto:not(.touched) .cx-proto-stage, .pj-proto-card:not(.touched) .pj-proto-frame{ box-shadow:0 0 0 2px color-mix(in srgb,var(--pc) 26%,transparent); border-radius:14px;transition:box-shadow .5s ease} .cx-proto.touched .cx-proto-cue, .pj-proto-card.touched .cx-proto-cue{opacity:.45;background:transparent;box-shadow:none} .cx-proto.touched .cx-proto-cue::before, .pj-proto-card.touched .cx-proto-cue::before{animation:none} @keyframes cxpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pc) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} /* À l'arrivée dans l'écran, la pastille bat trois fois. Le point qui respire en continu ne suffisait pas : on le prenait pour un détail de décor. Trois battements de la pastille entière, et c'est tout. */ .cx-proto.flash .cx-proto-cue, .pj-proto-card.flash .cx-proto-cue{animation:cuewink 1.1s ease-in-out 3} @keyframes cuewink{ 0%,100%{background:color-mix(in srgb,var(--pc) 14%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 32%,transparent) inset} 50%{background:color-mix(in srgb,var(--pc) 32%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 62%,transparent) inset, 0 0 0 6px color-mix(in srgb,var(--pc) 11%,transparent)} } /* le toggle desktop/mobile */ /* Même sélecteur segmenté que les galeries : une seule forme de contrôle sur tout le site, gouttière creuse et pastille blanche en relief. */ /* Sous 700 px, la vue « Desktop » du prototype est une page entière ramenée à 340 px : une texture, pas un écran. Le prototype se met donc en vue mobile et le sélecteur disparaît, puisqu'il n'a plus qu'un choix à offrir. C'est js/projet.js qui impose la vue, ici on ne fait que cacher le sélecteur. */ @media (max-width:700px){ .cx-proto > .cx-proto-bar .cx-vt, .pj-proto-card .cx-vt{display:none} } .cx-vt{display:flex;gap:2px;padding:4px;border-radius:999px; background:color-mix(in srgb,var(--on-night) 6%,transparent); border:1px solid var(--night-line);box-shadow:inset 0 1px 2px rgba(28,28,38,.05)} .cx-vt button{background:transparent;border:0;color:var(--on-night-faint);font:inherit;font-size:13px; white-space:nowrap;padding:7px 16px;border-radius:999px;cursor:pointer; transition:background .22s ease,color .22s ease,box-shadow .22s ease} .cx-vt button:hover{color:var(--on-night)} .cx-vt button[aria-pressed=true]{background:#fff;color:var(--pc-ink);font-weight:600; box-shadow:0 1px 3px rgba(28,28,38,.16),0 0 0 1px rgba(28,28,38,.04)} .cx-vt button:focus-visible{outline:2px solid var(--pc);outline-offset:2px} /* la scène : l'écran réel, non recadré */ .cx-proto-stage{position:relative;padding:clamp(16px,3vw,30px) 0;display:flex;justify-content:center} .cx-vp{position:relative;width:100%;display:none} .cx-proto[data-view=desktop] .cx-vp-d{display:block} .cx-proto[data-view=mobile] .cx-vp-m{display:flex;justify-content:center} /* La capture est un recadrage d'une page plus large : les formes colorées du fond y sont tranchées net sur les deux bords. On les laisse se dissoudre sur une trentaine de pixels plutôt que de les couper au couteau. Le jour où la capture sera réexportée en pleine largeur, ces deux lignes sautent. */ .cx-shot{display:block;width:100%;height:auto;border-radius:10px; box-shadow:0 14px 34px color-mix(in srgb,var(--pc) 18%,rgba(28,28,38,.10)); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%)} .cx-phone{position:relative;width:min(300px,82%)} .cx-shot-m{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 20px 46px color-mix(in srgb,var(--pc) 22%,rgba(28,28,38,.12))} /* zones cliquables posées sur les vrais onglets / le sélecteur */ .cx-hot{position:absolute;border:0;background:transparent;padding:0;border-radius:11px;cursor:pointer;-webkit-tap-highlight-color:transparent} .cx-hot::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid transparent;background:transparent;transition:border-color .2s,background .2s} .cx-hot:hover::after,.cx-hot:focus-visible::after{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent)} .cx-hot:focus-visible{outline:none} .cx-hot.on::after{border-color:color-mix(in srgb,var(--pc) 50%,transparent)} /* flash de découverte : on souligne les onglets une fois à l'entrée */ .cx-proto.flash .cx-vp-d .cx-hot::after,.cx-proto.flash .cx-hot-sel::after{animation:cxhot 1.3s ease} @keyframes cxhot{0%,100%{border-color:transparent;background:transparent}30%,65%{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 15%,transparent)}} /* le menu déroulant mobile, qui s'ouvre au clic sur le sélecteur */ .cx-menu{position:absolute;left:10%;right:10%;top:16.4%;z-index:6;background:#fff;border-radius:14px;padding:6px;border:1px solid rgba(15,20,36,.08);box-shadow:0 22px 54px rgba(15,20,36,.3);display:flex;flex-direction:column;gap:2px} .cx-menu button{appearance:none;border:0;background:none;text-align:left;font:inherit;font-size:15px;font-weight:500;color:#1a2233;padding:12px 14px;border-radius:9px;cursor:pointer;transition:background .18s} .cx-menu button:hover{background:rgba(76,110,245,.09)} .cx-menu button[aria-selected=true]{background:color-mix(in srgb,var(--pc) 15%,transparent);color:var(--pc-ink)} .cx-menu button:focus-visible{outline:2px solid var(--pc);outline-offset:1px} .cx-proto .cx-hint{padding:14px 2px 0;border-top:1px solid var(--night-line);color:var(--on-night-faint);font-size:13px} @media (prefers-reduced-motion:reduce){ .cx-proto-cue::before{animation:none} .cx-proto.flash .cx-proto-cue, .pj-proto-card.flash .cx-proto-cue{animation:none} .cx-proto.flash .cx-vp-d .cx-hot::after,.cx-proto.flash .cx-hot-sel::after{animation:none} } /* ===== Connexion : le parcours de réinitialisation (filmstrip d'écrans réels) ===== */ /* Le carrousel d'écrans occupe toute la largeur de sa carte : le seul retrait est le pas d'avance avant le premier écran et après le dernier. La marge haute et basse, elle, laisse vivre l'ombre portée (un conteneur qui défile rogne aussi ce qui dépasse en hauteur). */ /* En pleine page, comme le défilé d'Affiliation : plus de carte blanche, la bande traverse l'écran et se ferre sur la colonne de texte. */ .pj-figure:has(.cx-reset){background:none;border:0;box-shadow:none; padding:0;width:100vw;margin-left:calc(50% - 50vw)} .pj-figure:has(.cx-reset) > figcaption{padding:0 clamp(24px,4vw,58px)} .cx-reset{display:flex;align-items:flex-start;gap:clamp(30px,4.5vw,56px);overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:22px var(--band-pad) 46px;scroll-padding-inline:var(--band-pad);margin-top:clamp(30px,5vw,56px)} .cx-reset > figure{flex:0 0 auto;margin:0;display:flex;flex-direction:column;align-items:center;scroll-snap-align:center;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)} .rv.in .cx-reset > figure{opacity:1;transform:none} .rv.in .cx-reset > figure:nth-child(2){transition-delay:.12s} .rv.in .cx-reset > figure:nth-child(3){transition-delay:.24s} .rv.in .cx-reset > figure:nth-child(4){transition-delay:.36s} .rv.in .cx-reset > figure:nth-child(5){transition-delay:.48s} .rv.in .cx-reset > figure:nth-child(6){transition-delay:.60s} .cx-shot-wrap{position:relative;height:clamp(190px,23vw,272px)} .cx-shot-wrap img{height:100%;width:auto;display:block;border-radius:11px;border:1px solid rgba(28,28,38,.10);box-shadow:0 14px 34px color-mix(in srgb,var(--pc) 18%,rgba(28,28,38,.10));background:#fff} .cx-step{position:absolute;top:-11px;left:-11px;width:27px;height:27px;border-radius:50%;background:var(--pc-ink);color:#fff;font-size:13px;font-weight:600;display:grid;place-items:center;box-shadow:0 5px 14px rgba(28,28,38,.20);z-index:2} /* la flèche entre les écrans, centrée sur la hauteur de l'image */ .cx-reset > figure:not(:last-child) .cx-shot-wrap::after{content:"→";position:absolute;top:50%;right:calc(-1 * clamp(30px,4.5vw,56px) / 2);transform:translate(50%,-50%);font-size:22px;color:color-mix(in srgb,var(--pc) 72%,transparent);pointer-events:none} /* Après l'écran de lien expiré, on ne passe pas tout droit à la suite : il faut retourner dans sa boîte mail et suivre le nouveau lien. La flèche pleine deviendrait un mensonge, on met donc un trait pointillé. */ .cx-reset > figure.detour .cx-shot-wrap::after{ content:"";width:clamp(30px,4.5vw,56px);height:2px;border-radius:2px; right:calc(-1 * clamp(30px,4.5vw,56px));transform:translateY(-50%); background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--pc) 62%,transparent) 0 5px,transparent 5px 10px)} .cx-reset figcaption{margin-top:15px;max-width:250px;font-size:13.5px;line-height:1.5;color:var(--on-night-soft);text-align:center} .cx-reset figcaption b{display:block;margin-bottom:3px;color:var(--on-night);font-weight:600} @media (prefers-reduced-motion:reduce){.cx-reset > figure{opacity:1;transform:none;transition:none}} /* ===== Le sommaire des pages projet : un rail de progression dans la marge ===== Les jalons tombent au prorata de la longueur réelle de chaque partie, si bien que le déséquilibre se voit au lieu d'être lissé. Le rail s'arrête au dernier jalon : rien ne traîne en dessous. Il n'apparaît qu'une fois entré dans le corps du récit, pour ne jamais montrer un état « rien de choisi », et il n'existe pas en mobile, où la marge n'existe pas. ===== Edenred France (ef-) : page overview 3 ans / 4 plateformes ===== */ .pj-toc{display:none} @media (min-width:900px){ body.project nav.pj-toc{display:block;position:fixed;top:50%;z-index:4; left:clamp(14px,2.2vw,40px);width:9px;height:var(--pj-toc-h,240px); transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .4s ease} body.project nav.pj-toc.on-air{opacity:1;pointer-events:auto} /* le rail, et la part déjà lue */ .pj-rail{position:absolute;left:3.5px;top:0;bottom:0;width:2px;border-radius:2px; background:color-mix(in srgb,var(--on-night) 13%,transparent)} .pj-rail i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px; background:var(--pc);transition:height .1s linear} /* les jalons : posés par projet.js à leur hauteur réelle */ .pj-toc a{position:absolute;left:0;display:flex;align-items:center;gap:12px;height:18px; transform:translateY(-50%);text-decoration:none;white-space:nowrap} .pj-toc a > i{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--cream); box-shadow:0 0 0 2px color-mix(in srgb,var(--on-night) 24%,transparent) inset; transition:background .25s ease,box-shadow .25s ease} .pj-toc a.done > i{background:var(--pc);box-shadow:0 0 0 2px var(--pc) inset} .pj-toc a.on > i{background:var(--pc); box-shadow:0 0 0 2px var(--pc) inset,0 0 0 4px color-mix(in srgb,var(--pc) 24%,transparent)} .pj-toc a:hover > i{box-shadow:0 0 0 2px var(--pc) inset} .pj-toc a span{font-size:13px;letter-spacing:.02em;color:var(--on-night-faint); transition:color .25s ease} .pj-toc a.on span{color:var(--on-night);font-weight:600} .pj-toc a:hover span{color:var(--on-night)} .pj-toc a:focus-visible > i{outline:2px solid var(--pc);outline-offset:4px} } /* Entre 900 et 1300 px la marge ne peut plus porter les noms sans mordre sur le texte : le rail se réduit à ses jalons, et le nom revient au survol. */ @media (min-width:900px) and (max-width:1299px){ .pj-toc a span{position:absolute;left:20px;top:50%; transform:translateY(-50%) translateX(-4px); background:#fff;padding:6px 11px;border-radius:999px;font-weight:600;color:var(--on-night); box-shadow:0 8px 22px -10px rgba(18,26,32,.34),0 0 0 1px rgba(28,28,38,.05); opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease} .pj-toc a:hover span,.pj-toc a:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)} } @media (prefers-reduced-motion:reduce){ .pj-toc,.pj-toc a > i,.pj-toc a span,.pj-rail i{transition:none} } /* les libellés de rôle et de moment fort suivent la colonne de lecture, comme le texte suivi des autres pages */ .narrow-txt{max-width:var(--measure);margin-inline:auto} .ef-role{font-style:italic;color:var(--on-night-faint);font-size:14px;margin:-16px auto 24px} /* Le petit titre qui ouvre un moment du récit. Trois choses ont été apprises dessus, dans cet ordre. 1. En flex, le libellé et la suite faisaient deux colonnes : sur petit écran la phrase se serrait à côté du titre au lieu de passer dessous. Le texte est redevenu du texte. 2. Le filet du haut appartient au moment, pas au bloc qui suit. Posé sous lui, il coupait le titre de ce qu'il annonce et l'œil le rattachait au visuel d'au-dessus. 3. Il se lisait quand même comme une légende, et pour trois raisons qui se cumulaient : un corps de 14,5 px, donc plus petit que le texte qu'il annonce ; la police du corps, alors que tous les autres titres de ces pages passent en serif ; et le trait posé DEVANT la ligne, ce qui est la signature d'une légende de figure. Il reprend donc les trois marques de titre des .wk-h3 : police de titre, un corps au-dessus du texte courant, et le trait au-dessus plutôt que devant. Le passe en italique dans la couleur du projet, comme les des autres titres. La marge basse de 12 px ne sert que là où le bloc suivant n'en a pas (un paragraphe suit à zéro et se collait au titre) : ailleurs elle fusionne avec la marge du bloc suivant et ne change rien. */ .ef-moment{display:block; border-top:1px solid var(--night-line);padding-top:clamp(24px,3.2vw,33px); margin:clamp(40px,5.5vw,60px) auto 12px; font-family:var(--title-font),serif;font-weight:400; font-size:clamp(20px,2.1vw,26px);line-height:1.14;letter-spacing:-.012em; color:var(--on-night)} .ef-moment + .pj-steps{margin-top:0} .ef-moment + .pj-steps > .pj-step:first-child{border-top:0;padding-top:14px} .ef-moment::before{content:"";display:block; width:30px;height:2px;margin:0 0 15px;background:var(--pc);border-radius:2px} .ef-moment b{color:var(--pc-ink);font-weight:400;font-style:italic} .ef-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:clamp(30px,5vw,56px)} /* Dans une grille, la marge haute d'une figure ne se fond pas dans celle de la grille : elle ouvrait un vide au-dessus de la première rangée et doublait l'écart entre les rangées. La règle « nu » étant plus spécifique, il faut la nommer pour la désarmer. */ .ef-figs .pj-figure, .ef-figs .pj-figure.nu:has(img){margin-top:0} @media (max-width:600px){.ef-role{margin-top:-8px}} /* liens dans le corps de texte des pages projet */ .pj-prose a{color:var(--pc-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--pc) 45%,transparent);transition:border-color .2s,color .2s} .pj-prose a:hover{border-color:var(--pc-ink);color:var(--on-night)} /* ===== Bandeau de faits (méthode d'un test, en un coup d'œil) ===== */ /* Les chiffres clés, alignés en colonnes plutôt qu'au fil du texte. En flex-wrap, des valeurs de largeurs très différentes produisaient des rangées en escalier, avec des trous entre les colonnes d'une ligne à l'autre ; la grille leur donne le même pas et un filet commun au-dessus. */ .pj-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:clamp(18px,2.4vw,26px);list-style:none; margin-top:clamp(26px,4vw,40px);padding:clamp(20px,3vw,26px) 0 0; border-top:1px solid var(--night-line)} .pj-facts li{display:flex;flex-direction:column;gap:6px;min-width:0; font-size:13.5px;line-height:1.4;letter-spacing:.02em;color:var(--on-night-faint)} .pj-facts b{font-family:var(--title-font),serif;font-weight:400; font-size:clamp(19px,2vw,25px);line-height:1.05;color:var(--on-night);letter-spacing:-.01em} @media (max-width:820px){ .pj-facts{grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:20px 16px} } /* ============================================================ Galerie d'écrans · une seule scène qu'on parcourt Remplace les empilements en oblique : on choisit un écran, il s'affiche en grand, et sa légende suit. Le mobile, quand il existe, se pose à côté, à plat. ============================================================ */ .gal{display:flex;flex-direction:column;gap:clamp(16px,2.4vw,26px)} /* Deux colonnes : le grand écran prend la place qui reste, le mobile garde sa largeur propre. En flex simple, les deux additionnaient leurs largeurs et sortaient de la carte. */ /* Arrivé au bout d'une bande, un geste horizontal de plus faisait reculer le navigateur d'une page. Le débordement reste dans la bande. */ .parade,.cx-reset,.zoom-frame,.gal-stage{overscroll-behavior-x:contain} .gal-stage{display:grid;grid-template-columns:1fr auto;align-items:end;gap:clamp(12px,2vw,26px);min-height:0} .gal-img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(28,28,38,.10); box-shadow:0 16px 40px color-mix(in srgb,var(--pc) 18%,rgba(28,28,38,.10));transition:opacity .25s ease} .gal.swap .gal-img{opacity:0} /* Sélecteur segmenté · une seule pastille glisse d'un segment à l'autre. Les anciennes puces séparées se lisaient comme des étiquettes mortes ; un segment posé dans une gouttière se lit comme un bouton. */ .gal-tabs{display:flex;justify-content:center;margin:0 auto; width:max-content;max-width:100%; padding:4px;border-radius:999px;gap:2px; background:color-mix(in srgb,var(--on-night) 6%,transparent); border:1px solid var(--night-line); box-shadow:inset 0 1px 2px rgba(28,28,38,.05); overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} .gal-tabs::-webkit-scrollbar{display:none} .gal-tabs button{font:inherit;font-size:14.5px;white-space:nowrap;color:var(--on-night-faint); background:transparent;border:0;border-radius:999px;padding:9px 20px;cursor:pointer; transition:background .22s ease,color .22s ease,box-shadow .22s ease} .gal-tabs button:hover{color:var(--on-night)} .gal-tabs button:focus-visible{outline:2px solid var(--pc);outline-offset:2px} .gal-tabs button[aria-selected=true]{background:#fff;color:var(--pc-ink);font-weight:600; box-shadow:0 1px 3px rgba(28,28,38,.16),0 0 0 1px rgba(28,28,38,.04)} /* Le libellé posé en tête d'une figure. Sans lui, une bande d'images dans une carte blanche commence par un vide qui se lit comme un titre manquant. Partagé par les galeries et les bandes défilantes. */ .gal-kicker,.fig-kicker{text-align:center;font-size:13px;letter-spacing:.13em;text-transform:uppercase; font-weight:600;color:var(--pc-ink);margin:0 0 -6px} .fig-kicker{margin:0 0 clamp(14px,2vw,22px)} .pj-figure:has(.parade) > .fig-kicker{padding:0 clamp(24px,4vw,58px)} /* hauteur réservée : la carte ne doit pas sauter quand la légende passe d'une ligne à deux */ .gal-cap{max-width:64ch;min-height:3.2em;margin:0 auto;text-align:center;font-size:14.5px;line-height:1.6;color:var(--on-night-soft)} @media (max-width:820px){ .gal-stage{grid-template-columns:1fr;justify-items:center} .gal-tabs{max-width:100%;justify-content:flex-start} .gal-tabs button{font-size:13.5px;padding:8px 14px} } @media (prefers-reduced-motion:reduce){.gal-img{transition:none}} /* ============================================================ Ouverture de page projet · le diptyque de verre Posée juste au-dessus d'« En bref ». À gauche l'écran de la première décision, à droite celui de la seconde, ou une main de trois écrans mobiles. Une carte de verre par décision, qui déborde de son côté : elle dit l'enjeu en une phrase, pour qu'on sache en trois secondes ce qu'on va lire. Tout s'assemble à l'apparition puis se tait, aucune boucle. ============================================================ */ .pj-figure:has(.opener){background:none;border:0;box-shadow:none;padding:0;margin-top:0} .opener{position:relative;margin:0 auto;padding:clamp(52px,7vw,96px) 0} .opener-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:44px} .opener-glow i{position:absolute;border-radius:50%;filter:blur(120px);display:block} .opener-glow i:nth-child(1){width:48%;aspect-ratio:1;left:2%;top:-16%; background:radial-gradient(circle,color-mix(in srgb,var(--pc) 38%,transparent),transparent 62%)} .opener-glow i:nth-child(2){width:44%;aspect-ratio:1;right:4%;bottom:-14%; background:radial-gradient(circle,#8b7dfb33,transparent 64%)} .opener-glow i:nth-child(3){width:28%;aspect-ratio:1;left:40%;top:-12%; background:radial-gradient(circle,#4aa8ff2b,transparent 66%)} /* la main de trois écrans mobiles : celui du milieu devant *//* la carte de verre : le numéro de décision, le titre, l'enjeu */ @media (max-width:820px){ /* le flou coûte trop cher sur petit écran : les cartes passent sous les écrans, en opaque, et gardent leur ordre de lecture. */ .opener{padding:clamp(28px,7vw,46px) 0} } /* --- variante « volée » (Connexion) : tout est de travers, mais pas au hasard. L'écran penche à gauche, les trois mobiles s'ouvrent en éventail de plus en plus incliné, celui du milieu bondit devant, et les cartes de verre tiennent les diagonales opposées. Le diptyque au-dessus reste la version de Design System. --- *//* le halo respire sur toute la largeur de l'écran : plus de coin qui rogne le dégradé (on garde le cadre arrondi en mobile, pour structurer) *//* Et il se dissout aussi en haut et en bas : `overflow:hidden` tranchait les taches au ras du bloc, ce qui dessinait deux lignes horizontales nettes au-dessus et au-dessous de la scène. Le fondu du masque les remplace, quelle que soit la taille des taches. */ /* la ligne d'annonce, même dessin que les libellés de figures */ /* l'assemblage : l'écran se pose, le mobile du milieu monte, les deux autres s'ouvrent en éventail depuis le centre, puis les cartes glissent de leurs diagonales. Une seule fois, puis tout se tait. */ /* les cartes passent au premier plan : la volée des mobiles ne doit jamais recouvrir la décision 2 */ @media (max-width:820px){ /* la volée garde ses angles : l'écran penché en haut, les trois mobiles en rang dessous, les cartes reprennent les diagonales en opaque (le flou coûte trop cher ici). */ } @media (max-width:560px){ /* la scène devient trop petite pour des cartes posées dessus : l'écran penché, les trois mobiles en rang, puis les cartes en flux, comme sur le diptyque. Les angles restent, en plus doux. */ } /* ============================================================ Scène de fin · l'écran d'inspiration Les plaques de verre de la première version : dessinées, pas capturées, donc réellement translucides, et le halo passe au travers. Le fond est la coque du portail livrée vide, posée en retrait. Comme elle est vide, aucun chiffre ne peut faire doublon. Tous les blocs SORTENT de la coque : les chiffres en haut, la courbe par la droite et par le bas, le survol entièrement dehors, les barres en biais par le coin. Les échelles ne se correspondent pas d'un bloc à l'autre : on doit lire les chiffres, et comprendre que ce n'est pas une capture mais une mise en scène. TOUT est dimensionné en cqw, c'est-à-dire en pourcentage de la largeur du cadre : positions, textes, marges, rayons, ombres, flou. La scène est donc rigoureusement la même à toutes les tailles, elle ne fait que rapetisser. C'est ce qui remplace la mise en page mobile séparée, qui ne convainquait pas. ============================================================ */ .pj-figure:has(.glass){background:none;border:0;box-shadow:none;padding:0;overflow:visible} .pj-figure:has(.glass) > figcaption{margin-top:clamp(22px,3vw,38px);max-width:70ch;margin-inline:auto} .glass{position:relative;margin:0 auto;padding:clamp(20px,3vw,40px) 0} .glass-glow{position:absolute;inset:clamp(-10px,-1.4vw,-22px); pointer-events:none;overflow:hidden;border-radius:44px} .glass-glow i{position:absolute;border-radius:50%;filter:blur(110px);display:block} .glass-glow i:nth-child(1){width:62%;aspect-ratio:1;left:-24%;top:-40%;filter:blur(130px); background:radial-gradient(circle,color-mix(in srgb,var(--pc) 52%,transparent),transparent 66%)} .glass-glow i:nth-child(2){width:58%;aspect-ratio:1;right:-14%;bottom:-32%; background:radial-gradient(circle,#8b7dfb55,transparent 68%)} .glass-glow i:nth-child(3){width:36%;aspect-ratio:1;left:36%;top:-26%; background:radial-gradient(circle,#4aa8ff40,transparent 70%)} /* Le cadre : largeur des autres visuels de la page. `container-type` est ce qui donne son sens au cqw de tout ce qui suit. */ .glass-deck{position:relative;width:100%;margin:0 auto;aspect-ratio:1460/1120; container-type:inline-size} /* la coque, en retrait : c'est le décor, montré tel quel, sans voile */ .glass-screen{position:absolute;left:5%;top:5%;width:76%;aspect-ratio:1460/900; border-radius:1.8cqw;overflow:hidden; box-shadow:0 4.75cqw 8.6cqw -4.4cqw rgba(18,26,32,.38),0 0 0 1px rgba(255,255,255,.5); opacity:0;transform:translateY(16px); transition:opacity .8s ease,transform .9s cubic-bezier(.16,.9,.3,1)} .glass-shell{display:block;width:100%;height:100%;object-fit:cover;object-position:top left} .rv.in .glass-screen{opacity:1;transform:none} /* les barres, glissées derrière en biais : le troisième plan */ .glass-back{position:absolute;left:26%;top:55%;width:70%;height:auto;display:block;z-index:2; border-radius:1.7cqw;opacity:0;transform:rotate(2.4deg); transition:opacity .9s ease .1s} .rv.in .glass-back{opacity:.94} /* la courbe, sur sa plaque : elle sort du cadre à droite et en bas */ .glass-main{position:absolute;left:12%;top:27%;width:74%;z-index:3; border-radius:2cqw;overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.60),rgba(255,255,255,.36)); -webkit-backdrop-filter:blur(2.47cqw) saturate(190%);backdrop-filter:blur(2.47cqw) saturate(190%); box-shadow:0 5.7cqw 10.5cqw -4.4cqw rgba(18,26,32,.42), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5); opacity:0;transform:translateY(16px); transition:opacity .8s ease,transform .9s cubic-bezier(.16,.9,.3,1)} .glass-main img{display:block;width:100%;height:auto} .rv.in .glass-main{opacity:1;transform:none} /* Les plaques : dessinées, donc réellement translucides. C'est ce qui les distingue d'une image de verre, surtout à cheval sur un bord. */ .glass-pane{position:absolute;z-index:4;border-radius:1.9cqw;overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.42)); -webkit-backdrop-filter:blur(2.47cqw) saturate(190%);backdrop-filter:blur(2.47cqw) saturate(190%); box-shadow:0 2.66cqw 5.13cqw -1.71cqw rgba(18,26,32,.34), inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.55); opacity:0;transform:translateY(22px) scale(.96); transition:opacity .8s ease,transform 1s cubic-bezier(.16,.9,.3,1)} /* le reflet, figé : une bande claire en diagonale, sous le texte */ .glass-pane::before{content:"";position:absolute;left:-30%;top:-70%;width:80%;height:200%; transform:rotate(22deg);pointer-events:none; background:linear-gradient(to right,rgba(255,255,255,.55),rgba(255,255,255,0))} .glass-pane>*{position:relative} .rv.in .glass-pane{opacity:1;transform:none} .glass-lab{display:flex;align-items:center;gap:.9cqw;font-size:1.32cqw;font-weight:600; color:rgba(28,28,38,.66);margin-bottom:.5cqw;white-space:nowrap} .glass-lab span{width:1.65cqw;aspect-ratio:1;border-radius:34%;flex:0 0 auto; background:linear-gradient(140deg,#7b61ff,#4aa8ff);box-shadow:0 .19cqw .57cqw rgba(123,97,255,.4)} .glass-val{font-size:2.6cqw;font-weight:600;color:#111524;letter-spacing:-.015em; font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap} /* Les trois chiffres, en haut : positions reprises de la maquette de ML. Transactions le plus haut, puis Revenues qui sort par la gauche de la coque, puis Average basket, descendu à sa demande. */ .gp-rev{left:1.7%;top:20%;padding:1.95cqw 2.5cqw;border-radius:2.1cqw; box-shadow:0 4.18cqw 7.22cqw -2.09cqw rgba(18,26,32,.44), inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.65)} .gp-rev .glass-val{font-size:3.3cqw} .gp-trans{left:38%;top:17%;padding:1.6cqw 2.1cqw} .gp-basket{left:62%;top:23.5%;padding:1.6cqw 2.1cqw} /* le survol est entièrement hors de la coque : c'est lui qui dit le plus clairement qu'on n'est pas dans une capture */ .gp-tip{right:2%;top:37%;padding:1.55cqw 1.9cqw} .gp-tip .gp-month{font-size:1.22cqw;font-weight:700;color:rgba(28,28,38,.62); margin-bottom:.68cqw;text-align:center;letter-spacing:.04em} .gp-tip .gp-row{display:flex;align-items:center;justify-content:space-between; gap:2.5cqw;font-size:1.27cqw;color:#111524;padding:.3cqw 0;white-space:nowrap} .gp-tip .gp-row i{width:.88cqw;aspect-ratio:1;border-radius:50%; display:inline-block;margin-right:.85cqw} /* Parallaxe · les plans se décalent pendant qu'on descend. `--gp` va de -1 à 1 (voir projet.js) et n'est publiée que pendant le défilement. On agit sur `translate`, propriété distincte de `transform` déjà pris par l'apparition : les deux se composent. Les écarts sont en cqw, donc proportionnels eux aussi. */ .glass-screen{translate:0 calc(var(--gp,0) * 1.7cqw)} .glass-back{translate:0 calc(var(--gp,0) * .95cqw)} .glass-main{translate:0 calc(var(--gp,0) * -1.33cqw)} .glass-pane{translate:0 calc(var(--gp,0) * -2.85cqw)} .gp-tip{translate:0 calc(var(--gp,0) * -4.28cqw)} .rv.in .glass-main{transition-delay:.28s} .rv.in .glass-back{transition-delay:.4s} .rv.in .gp-rev{transition-delay:.55s} .rv.in .gp-trans{transition-delay:.67s} .rv.in .gp-basket{transition-delay:.79s} .rv.in .gp-tip{transition-delay:.98s} @media (prefers-reduced-motion:reduce){ .glass-screen,.glass-main,.glass-pane{opacity:1;transform:none;transition:none} .glass-screen,.glass-back,.glass-main,.glass-pane,.gp-tip{translate:none} .glass-back{opacity:.94} } /* ============================================================ Défilé d'écrans mobile · le parcours entier, à la suite La bande avance toute seule pendant qu'on descend la page (voir projet.js), et se pousse aussi à la main. ============================================================ */ /* Le défilé va d'un bord à l'autre de sa carte : le seul retrait est le pas d'avance avant le premier écran et après le dernier. La marge haute et basse laisse vivre l'ombre portée, qu'un conteneur qui défile rogne sinon de tous les côtés. */ /* La bande sort de la grille et traverse l'écran d'un bord à l'autre. Les écrans gardent leur taille : l'immersion vient de la largeur, pas du grossissement. */ .pj-figure:has(.parade){padding-left:0;padding-right:0;width:100vw;margin-left:calc(50% - 50vw)} .pj-figure:has(.parade) > figcaption{padding:0 clamp(24px,4vw,58px)} /* Le pas d'avance des bandes d'écrans : le premier écran est ferré sur le bord gauche de la colonne de texte, le dernier s'arrête sur son bord droit. On ne peut pas faire défiler au-delà. */ :root{--band-pad:max(clamp(20px,5vw,64px),calc((100% - 760px)/2))} .parade{display:flex;align-items:flex-start;gap:clamp(14px,2vw,26px);overflow-x:auto;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;padding:22px var(--band-pad) 46px;scroll-padding-inline:var(--band-pad);scrollbar-width:thin} /* Le nom de la page se lit au-dessus de sa capture, dans la même italique que les légendes du centre d'aide juste au-dessus : deux séries d'écrans qui se suivent se légendent de la même façon. */ .parade > figure{flex:0 0 auto;margin:0;width:clamp(150px,17vw,196px);scroll-snap-align:center; display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:12px} .parade img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(28,28,38,.10); box-shadow:0 12px 30px color-mix(in srgb,var(--pc) 18%,rgba(28,28,38,.10))} .parade figcaption{text-align:center;font-size:13px;line-height:1.4;margin:0} .parade figcaption b{display:block;font-weight:400} /* Les pages du site se rangent sous les écrans du centre d'aide : deux séries d'écrans qui se suivent doivent commencer et finir au même endroit. On les ferre donc sur le bord de la grille des visuels, et non plus sur celui, plus rentré, de la colonne de texte. */ .parade{--band-pad:calc(max(0px,(100% - 1180px)/2) + clamp(20px,5vw,64px))} @media (max-width:820px){ .parade > figure{width:clamp(132px,42vw,168px)} } /* ============================================================ Schémas en blocs (dia-) : la version responsive des schémas. Les anciens schémas étaient des SVG à coordonnées fixes : sous 820px ils débordaient et il fallait les faire défiler à la main. Ceux-ci sont faits de vraies boîtes de texte, alignées en ligne quand il y a la place et empilées en colonne quand il n'y en a plus. Rien à faire défiler, et le texte reste lisible partout. Les teintes sont volontairement froides et voisines : elles servent à distinguer des rôles, jamais à dire qu'une chose est réussie, risquée ou fausse. Le vert, l'orange et le rouge sont réservés aux vraies notions d'état, qui n'existent pas ici. ============================================================ */ .ef-dia{margin-top:clamp(30px,5vw,56px)} .ef-dia .dia{ /* Les libellés des schémas ne prennent jamais la teinte brute : sur leur propre fond teinté, le cyan tombait à 1,9:1. Ils passent tous par color-mix(... 50%, #0E1424), qui tient 4,8:1 sur le fond et 5,6 sur le crème, quelle que soit la teinte. */ --d1:76,110,245; /* bleu */ --d2:124,102,210; /* violet */ --d3:4,186,210; /* cyan */ --d4:230,73,128; /* rose : ce qui est commun aux trois, à part */ --dia-line:rgba(28,28,38,.3); /* les traits de liaison : plus lisibles qu'une bordure */ display:flex;flex-direction:column;gap:clamp(20px,2.6vw,30px)} .dia-eye{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:var(--on-night-faint);margin-bottom:14px} .dia-rule{height:1px;background:var(--night-line)} .dia-note{font-size:13.5px;color:var(--on-night-soft);line-height:1.45;margin:12px 0 0;text-align:center} .dia-block{min-width:0} /* ---- la brique de base : une carte ---- */ .dia-c{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0; padding:14px 16px;border-radius:12px;border:1px solid var(--night-line); background:rgba(28,28,38,.035);text-align:center} .dia-c b{font-size:14.5px;font-weight:500;color:var(--on-night);line-height:1.3} .dia-c span{font-size:13.5px;color:var(--on-night-soft);line-height:1.35} .dia-c.tint{border-color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424);background:rgba(var(--h),.1)} .dia-c.tint b{color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424)} .dia-c.plain{background:#fff;border-color:rgba(28,28,38,.16)} /* l'aboutissement d'un schéma : la teinte du chemin qui y mène, en plus dense, avec un filet plus marqué. Un aplat noir se lisait comme un bouton d'action. */ .dia-c.key{border:1.5px solid rgba(var(--h),.7);background:rgba(var(--h),.18)} .dia-c.key b{font-weight:600;color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424)} .dia-c.key span{color:var(--on-night-soft)} /* ---- une file : en ligne s'il y a la place, en colonne sinon ---- */ .dia-flow{display:flex;align-items:stretch;min-width:0} /* face à une pile ou à un cadre, une carte simple ne doit pas s'étirer sur toute la hauteur : elle se cale au milieu, à sa hauteur naturelle */ /* face au cadre, la flèche se cale sur son titre : centrée, elle semblait désigner la carte du milieu au lieu du cadre entier */ .dia-flow:has(.dia-box){align-items:flex-start} .dia-flow:has(.dia-box) > .dia-c{margin-top:10px} .dia-flow:has(.dia-box) > .dia-arr{align-self:flex-start;margin-top:32px} .dia-flow > .dia-c{flex:1 1 0} /* la flèche entre deux cartes : un trait et une pointe */ .dia-arr{flex:0 0 auto;align-self:center;position:relative; width:clamp(18px,2.4vw,34px);height:1.3px;background:var(--dia-line)} .dia-arr::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px; border-top:1.3px solid var(--dia-line);border-right:1.3px solid var(--dia-line); transform:translate(1px,-50%) rotate(45deg)} /* le dernier maillon d'une file peut porter ce qui en découle, juste dessous : l'aboutissement pend sous l'étape qui le produit, et non sous la file entière */ /* les cartes de la file s'alignent en haut, l'aboutissement pend sous la dernière ; les flèches se recalent sur la hauteur d'une carte simple */ .dia-flow.dia-hangs{align-items:flex-start} .dia-flow.dia-hangs > .dia-arr{align-self:flex-start;margin-top:23px} .dia-last{display:flex;flex-direction:column;flex:1.5 1 0;min-width:0} /* ---- le raccord vertical sous une file ---- */ /* ---- trois colonnes public → plateforme ---- */ .dia-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);min-width:0} .dia-col{display:flex;flex-direction:column} .dia-col .dia-c{flex:1} /* la flèche verticale interne à une colonne */ .dia-down{position:relative;height:30px;flex:0 0 auto} .dia-down::before{content:"";position:absolute;left:50%;top:0;bottom:7px;width:1.3px; background:var(--dia-line);transform:translateX(-50%)} .dia-down::after{content:"";position:absolute;left:50%;bottom:5px;width:6px;height:6px; border-right:1.3px solid var(--dia-line);border-bottom:1.3px solid var(--dia-line); transform:translateX(-50%) rotate(45deg)} /* ---- le peigne qui rassemble les trois colonnes vers le point commun ---- */ .dia-join{position:relative;height:64px;display:grid; grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)} .dia-join i{display:block;width:1.1px;height:22px;background:var(--dia-line);margin-inline:auto} .dia-join::before{content:"";position:absolute;top:22px;left:calc(16.6% - 4px);right:calc(16.6% - 4px); height:1.1px;background:var(--dia-line)} .dia-join::after{content:"";position:absolute;left:50%;top:22px;width:1.3px;height:42px; background:var(--dia-line);transform:translateX(-50%)} .dia-hub{max-width:620px;margin-inline:auto;width:100%} /* ---- la boucle : le parcours qui revient à son point de départ ---- */ /* dessinée sous la file, en U : elle descend à droite, traverse, remonte à gauche */ .dia-loop{position:relative;height:32px;margin:10px 11.5% 34px; border:1.6px solid rgba(var(--h),.5);border-top:0;border-radius:0 0 14px 14px} .dia-loop::after{content:"";position:absolute;left:-1px;top:-1px;width:7px;height:7px; border-top:1.6px solid rgba(var(--h),.5);border-left:1.6px solid rgba(var(--h),.5); transform:translate(-3px,0) rotate(45deg)} .dia-loop b{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);white-space:nowrap; font-size:13.5px;font-weight:500;color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424)} /* ---- son contraire : la ligne qui continue et ne revient pas ---- */ .dia-onward{position:relative;height:0;margin:26px 11.5% 34px; border-top:1.6px solid rgba(var(--h),.5)} .dia-onward::after{content:"";position:absolute;right:-1px;top:-1px;width:7px;height:7px; border-top:1.6px solid rgba(var(--h),.5);border-right:1.6px solid rgba(var(--h),.5); transform:translate(3px,-50%) rotate(45deg)} .dia-onward b{position:absolute;left:50%;top:0;transform:translate(-50%,10px);white-space:nowrap; font-size:13.5px;font-weight:500;color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424)} /* la version repliée : un jalon de bout de file, pour la boucle comme pour la ligne */ .dia-return{display:none;align-items:center;gap:10px;justify-content:center; padding:11px 16px;border-radius:12px;border:1px dashed rgba(var(--h),.5); font-size:13.5px;color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424);text-align:center;line-height:1.35} .dia-return em{font-style:normal;font-size:15px;line-height:1} /* ---- une carte évoquée mais jamais atteinte : le trait pointillé ---- */ .dia-c.ghost{border-style:dashed;border-color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424);background:transparent} .dia-c.ghost b{color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424)} /* ---- deux ou trois volets côte à côte : avant / après, ou avant / constat / après ---- */ .dia-vs,.dia-tri{display:grid;gap:clamp(22px,3vw,40px);align-items:start;min-width:0} .dia-tri{grid-template-columns:1fr .8fr 1.15fr} .dia-side,.dia-mid{display:flex;flex-direction:column;min-width:0} /* Avant / après : les deux volets partagent leurs trois rangées (titre, schéma, légende). Les légendes démarrent donc exactement à la même hauteur des deux côtés, et chaque schéma se centre dans la rangée qui leur est commune, au lieu de coller sous son titre. */ .dia-vs{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;align-items:stretch} .dia-vs > .dia-side{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;row-gap:0} .dia-vs > .dia-side > .dia-fan, .dia-vs > .dia-side > .dia-flow{align-self:center} .dia-vs > .dia-side > .dia-note{align-self:start;padding-top:16px} @supports not (grid-template-rows: subgrid){ .dia-vs > .dia-side{display:flex;flex-direction:column} .dia-vs > .dia-side > .dia-fan, .dia-vs > .dia-side > .dia-flow{margin-block:auto} .dia-vs > .dia-side > .dia-note{margin-top:auto} } .dia-lbl{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--on-night);margin-bottom:10px} /* Dans le schéma en trois colonnes, les titres n'ont pas la même longueur. On leur réserve la même hauteur, sinon la colonne la plus bavarde décale tout ce qui la suit. */ .dia-tri > * > .dia-lbl:first-child{min-height:2.7em} @media (max-width:820px){.dia-tri > * > .dia-lbl:first-child{min-height:0}} /* ---- une pile de cartes serrées (les trois portes) ---- */ /* ---- la même pile, mais tenue dans un cadre : elles ne sont plus cloisonnées ---- */ .dia-box{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-width:0; padding:12px;border-radius:15px;border:1px solid rgba(var(--h),.34);background:rgba(var(--h),.07)} .dia-box .dia-note{margin-top:2px} /* ---- un départ unique et plusieurs destinations : une voie par destination, pour que chaque flèche désigne vraiment celle qu'elle vise ---- */ .dia-fan{display:flex;align-items:center;min-width:0} .dia-fan > .dia-c{flex:0 0 auto;align-self:center;max-width:44%} .dia-lanes{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-width:0} .dia-lane{display:flex;align-items:center;min-width:0} .dia-lane > .dia-c{flex:1 1 0} /* la voie que personne n'emprunte : l'espace de la flèche est réservé, vide */ .dia-void{flex:0 0 auto;width:clamp(18px,2.4vw,34px)} /* le tronc commun : il montre que les trois voies partent bien du même point */ /* ---- les routes du départ unique, en vraies lignes ---- Le tronc et ses petites flèches détachées se lisaient mal : rien ne reliait le marchand à ce qui lui arrive. Deux lignes continues partent maintenant de sa carte : la pleine rejoint l'Espace Client (le chemin réellement pris, pointe au bout), la pointillée meurt sur une croix avant l'Espace Marchand (le chemin jamais trouvé). L'application des salariés n'a pas de ligne : personne ne va vers elle. Le SVG s'étire avec la colonne (preserveAspectRatio none), le trait garde son épaisseur (non-scaling-stroke). */ .dia-routes{flex:0 0 auto;align-self:stretch;width:clamp(44px,6vw,80px);position:relative} .dia-routes svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block} .dia-routes .rt{fill:none;stroke:var(--dia-line);stroke-width:1.5;vector-effect:non-scaling-stroke; stroke-linecap:round} .dia-routes .rt.no{stroke-dasharray:4 5} /* la pointe, posée au bout de la ligne pleine */ .dia-routes .fin{position:absolute;right:0;top:16.6%;width:7px;height:7px; border-top:1.5px solid var(--dia-line);border-right:1.5px solid var(--dia-line); transform:translate(1px,-54%) rotate(45deg)} /* la croix, posée au milieu de la ligne pointillée : la route est barrée, pas simplement interrompue */ .dia-routes .croix{position:absolute;left:42%;top:67%;width:13px;height:13px; transform:translate(-50%,-50%)} .dia-routes .croix::before,.dia-routes .croix::after{content:"";position:absolute;left:0;top:50%; width:13px;height:1.8px;border-radius:2px;background:rgba(var(--h),.85)} .dia-routes .croix::before{transform:rotate(45deg)} .dia-routes .croix::after{transform:rotate(-45deg)} /* les routes remplacent les flèches de voie sur grand écran */ .dia-fan .dia-lane .dia-arr,.dia-fan .dia-lane .dia-void{display:none} /* la tentative qui n'aboutit pas : trait pointillé et barre en travers */ .dia-arr.no{background:none; background-image:repeating-linear-gradient(90deg,var(--dia-line) 0 4px,transparent 4px 8px)} .dia-arr.no::before{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.7px; border-radius:2px;background:rgba(var(--h),.85);transform:translate(-50%,-50%) rotate(-54deg)} /* ---- à l'intérieur du cadre : on circule d'un espace à l'autre ---- */ .dia-box-top{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase; font-weight:600;color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424);padding:2px 2px 4px} .dia-swap{display:flex;align-items:center;justify-content:center;gap:9px; font-size:13px;line-height:1;color:color-mix(in srgb,rgb(var(--h)) 50%,#0E1424)} .dia-swap::before,.dia-swap::after{content:"";flex:1;height:1px;background:rgba(var(--h),.32)} /* ---- une file de rangées « blocage → sortie », alignées en colonnes ---- */ .dia-rows{display:flex;flex-direction:column;gap:12px} .dia-row{display:grid;grid-template-columns:minmax(0,.95fr) auto minmax(0,1.7fr);align-items:stretch;min-width:0} .dia-row .dia-flow{min-width:0} /* ---- une maquette d'écran réduite à sa hiérarchie ---- */ .dia-screen{border-radius:14px;border:1px solid rgba(var(--h),.34);background:rgba(var(--h),.05); padding:0 12px 12px;display:flex;flex-direction:column;gap:10px;min-width:0} .dia-screen-top{margin:0 -12px 2px;padding:9px 14px;border-radius:13px 13px 0 0; background:rgba(var(--h),.11);font-size:13px;color:var(--on-night-soft)} .dia-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .dia-tiles span{display:grid;place-items:center;padding:16px 4px;border-radius:9px; font-size:13px;color:var(--on-night);background:rgba(var(--h),.16);border:1px solid rgba(var(--h),.42)} /* ---- ce que les gens citent d'eux-mêmes : des pastilles, pas des cartes ---- */ .dia-pills{display:flex;flex-direction:column;gap:9px} .dia-pills span{padding:9px 16px;border-radius:999px;text-align:center;font-size:13.5px; color:var(--on-night);background:rgba(var(--h),.13);border:1px solid rgba(var(--h),.45)} /* le jalon de bout de file s'affiche à toutes les largeurs quand il porte l'idée principale du schéma, et pas seulement le repli mobile */ .dia-return.always{display:flex} /* ---- la pile de lignes qui figure une liste ---- */ .dia-bars{display:flex;flex-direction:column;gap:6px;margin-top:8px} .dia-bars i{display:block;height:9px;border-radius:3px;background:rgba(var(--h),.24)} /* ---- point de départ commun d'un embranchement ---- */ /* ============================================================ Le repli. Sous 780px tout ce qui était en ligne passe en colonne. ============================================================ */ @media (max-width:780px){ .dia-flow{flex-direction:column} /* en colonne, align-items pilote la largeur : les cartes doivent reprendre toute la mesure, sinon elles se recroquevillent à gauche */ .dia-flow.dia-hangs{align-items:stretch} .dia-flow.dia-hangs > .dia-arr{align-self:center;margin-top:0} .dia-last{flex:0 0 auto} .dia-flow > .dia-c{flex:0 0 auto} .dia-arr{width:1.3px;height:24px;margin-inline:auto} .dia-arr::after{right:50%;top:auto;bottom:0; transform:translate(50%,1px) rotate(135deg)} .dia-cols{grid-template-columns:1fr;gap:34px} /* empilés, les volets n'ont plus de rangées à partager */ .dia-vs{display:flex;flex-direction:column;gap:30px} .dia-vs > .dia-side{display:flex;flex-direction:column} .dia-vs > .dia-side > .dia-note{padding-top:0} .dia-tri{grid-template-columns:1fr;gap:30px} /* les voies passent sous le départ : la flèche pivote comme les autres */ .dia-fan{flex-direction:column;align-items:stretch} .dia-fan > .dia-c{max-width:none;margin-bottom:6px} .dia-lane{flex-direction:column;align-items:stretch} .dia-lane > .dia-c{flex:0 0 auto} .dia-lanes{gap:16px} .dia-void, .dia-routes{display:none} /* en colonne, les voies retrouvent leurs flèches verticales */ .dia-fan .dia-lane .dia-arr{display:block} .dia-flow:has(.dia-box){align-items:stretch} .dia-flow:has(.dia-box) > .dia-c{margin-top:0} .dia-flow:has(.dia-box) > .dia-arr{align-self:center;margin-top:0} .dia-row{grid-template-columns:1fr} /* le peigne n'a plus de sens quand les colonnes sont empilées : la carte commune se pose simplement après, séparée par du blanc */ .dia-join{display:none} .dia-hub{margin-top:34px} /* la boucle en U ne tient plus : elle devient un jalon de retour */ .dia-loop,.dia-onward{display:none} .dia-return{display:flex;margin-top:16px} .dia-c{padding:13px 14px} } /* ============================================================ Le rail des projets · bas de page (remplace les cartes précédent / suivant). Les autres projets seulement, réduits à leur nom : pas de visuel, pas de filet, pas de mot-clé. Les titres se centrent dans la hauteur, tous à la même place d'une carte à l'autre, et la couleur du projet n'arrive qu'au survol. « Retour à l'accueil » se pose centré sous le rail. ============================================================ */ .rail-lbl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600; color:var(--on-night-faint);margin-bottom:18px} /* la réserve absorbe les ombres, les marges négatives ramènent le rail au bord du texte */ /* ⚠️ overflow-x:auto découpe AUSSI ce qui dépasse en hauteur : l'ombre des cartes descend de 44 px au repos et de 53 px au survol (la carte se soulève de 3 px et son ombre grandit), et 40 px de marge la coupaient net. On réserve 58 px, et la marge négative rend au bloc la hauteur qu'on vient de lui ajouter. */ .rail{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;padding:14px 20px 58px; margin-inline:-20px;margin-bottom:-18px; scroll-snap-type:x proximity;scroll-padding:0 20px; -webkit-overflow-scrolling:touch;scrollbar-width:none} .rail::-webkit-scrollbar{display:none} .rail-c{flex:0 0 auto;width:min(250px,74vw);min-height:96px;scroll-snap-align:start; display:flex;flex-direction:column;justify-content:center;text-decoration:none; border-radius:16px;padding:24px 26px; background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75); box-shadow:0 14px 30px rgba(28,28,38,.10),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:transform .25s,box-shadow .25s,background .25s} .rail-c .n{display:block;font-family:var(--title-font),serif;font-weight:400; font-size:19px;line-height:1.2;color:var(--on-night);transition:color .25s} /* ---- la suite logique de la lecture ---- Le rail part du projet suivant : la première carte est donc toujours celle qu'on lirait ensuite, et l'ordre de lecture devient l'ordre du parcours. Elle porte en plus sa couleur, en fond et en libellé, pour qu'on n'ait pas à choisir. */ .rail-c.suite{background:color-mix(in srgb,var(--dot) 11%,rgba(255,255,255,.72)); border-color:color-mix(in srgb,var(--dot) 26%,rgba(255,255,255,.75)); box-shadow:0 14px 30px color-mix(in srgb,var(--dot) 16%,rgba(28,28,38,.10)), inset 0 1px 0 rgba(255,255,255,.9)} /* le libellé prend la couleur du projet, dans sa version encrée : un `color-mix` unique donnait un ton presque noir sur les teintes claires et restait illisible sur le jaune (voir --ci-* dans base.css) */ .rail-c.suite .k{display:block;margin-bottom:9px;font-size:12px;letter-spacing:.13em; text-transform:uppercase;font-weight:700;color:var(--dotink,var(--dot))} @media (hover:hover){ .rail-c.suite:hover{background:color-mix(in srgb,var(--dot) 15%,rgba(255,255,255,.8))} } @media (hover:hover){ .rail-c:hover{transform:translateY(-3px);background:rgba(255,255,255,.72); box-shadow:0 18px 38px rgba(28,28,38,.13),inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px color-mix(in srgb,var(--dot) 35%,transparent)} .rail-c:hover .n{color:color-mix(in srgb,var(--dot) 55%,var(--on-night))} } .rail-c:focus-visible{outline:2px solid var(--dot);outline-offset:3px} .rail-retour{display:flex;justify-content:center;margin-top:6px} .rail-retour a{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500; color:var(--on-night-soft);text-decoration:none;padding:8px 6px;transition:color .25s,gap .25s} .rail-retour a:hover{color:var(--on-night);gap:12px} /* ---- petit écran ---- Le rail qui défile à l'horizontale n'a pas de sens ici : il cache des projets derrière le bord et demande un geste pour rien. Les cartes s'empilent donc, la suite en tête, et tout est visible d'un coup. */ @media (max-width:640px){ .rail{display:flex;flex-direction:column;gap:10px;overflow:visible; padding:12px 0 26px;margin-inline:0} .rail-c{width:auto;min-height:0;padding:16px 18px;scroll-snap-align:none} .rail-c .n{font-size:17px} .rail-c.suite{padding:19px 20px} .rail-c.suite .n{font-size:19px} .rail-c.suite .k{margin-bottom:7px} /* au doigt, c'est l'appui qui répond, pas le survol */ .rail-c:active{transform:scale(.99)} } @media (prefers-reduced-motion:reduce){ .rail-c{transition:none} } /* ============================================================ L'OUVERTURE · le vrai parcours au scroll, les treize écrans La frise porte les étapes ; chaque cran de scroll avance d'un écran, plusieurs écrans vivant sous une même étape. ============================================================ */ /* ~75vh de scroll par écran : au trackpad, un geste ne saute plus deux écrans et on peut s'arrêter où l'on veut */ /* 6 écrans à 70vh, plus une avance. C'était 7 écrans à 80vh : l'ouverture demandait 4 500 px de défilement avant le premier mot d'analyse. */ /* Six écrans, 60vh de défilement chacun. À 435vh (72vh par écran) il fallait presque quatre écrans de haut avant le premier mot d'analyse, sur la page qui porte le mieux le propos. On resserre le pas, on ne retire rien. */ .sy{position:relative;height:360vh} .sy-stage{position:sticky;top:0;height:100vh;height:100svh; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(14px,2.6vh,26px);padding:92px clamp(16px,4vw,48px) 24px;overflow:hidden} /* le titre de la scène pousse aussi : la scène reste centrée entre les deux */ .sy-kick{font-size:13px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--pc-ink); margin-top:auto} /* La frise : les étapes reliées par un fil qui se remplit. Elle se clique : chaque point, gros ou petit, emmène à son écran. Le fil est borné par le script au premier et au dernier point, il ne déborde plus dans les marges. */ .sy-frise{position:relative;display:flex;justify-content:space-between; width:min(860px,100%);padding:0 6px} /* Le centre du fil doit tomber sur le centre des pastilles, qui font 13 px de haut et se posent en tête de colonne : leur centre est donc à 6,5 px. Le fil était à 8 px, et tous les ronds paraissaient légèrement remontés. */ .sy-fil{position:absolute;top:5.5px;height:2px;border-radius:2px; background:color-mix(in srgb,var(--on-night) 12%,transparent)} .sy-fil i{position:absolute;inset:0;border-radius:2px;transform-origin:left; background:var(--pc);transform:scaleX(var(--p,0))} /* les petits points des écrans intermédiaires, posés SUR le fil */ /* Un écran de plus dans une étape déjà commencée. Même langage que les grandes pastilles, fond blanc et anneau, mais en 9 px : on comprend que c'est la même nature de repère, à un rang en dessous. */ .sy-pt{position:absolute;top:50%;width:9px;height:9px;border-radius:50%; transform:translate(-50%,-50%);background:#fff; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-night) 26%,transparent); border:0;padding:0;cursor:pointer; transition:background .3s,box-shadow .3s,transform .3s} .sy-pt::after{content:"";position:absolute;inset:-8px} /* la cible du doigt */ .sy-pt.done{background:var(--pc);box-shadow:inset 0 0 0 1.5px var(--pc)} .sy-pt.act{transform:translate(-50%,-50%) scale(1.35);background:#fff; box-shadow:0 0 0 2px var(--pc)} @media (hover:hover){ .sy-pt:hover{transform:translate(-50%,-50%) scale(1.45)} } .sy-et{position:relative;z-index:1;flex:0 1 auto;display:flex;flex-direction:column;align-items:center;gap:9px; font-size:12.5px;line-height:1.25;color:var(--on-night-faint);text-align:center;max-width:11ch; cursor:pointer;-webkit-tap-highlight-color:transparent} .sy-et i{width:13px;height:13px;border-radius:50%;background:#fff; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--on-night) 26%,transparent); transition:box-shadow .3s,background .3s,transform .3s} .sy-et.done i{background:var(--pc);box-shadow:inset 0 0 0 2px var(--pc)} .sy-et.act{color:var(--on-night);font-weight:600} /* Une étape que le parcours traverse sans qu'on en montre l'écran. Le point creux laissait voir le fil au travers et faisait tache : on le remplace par un point plus petit et plus clair, posé sur le fil comme les autres. On lit « étape mineure », pas « case vide ». La frise dit toujours six étapes, elle ne promet pas six captures. */ .sy-et.sans{cursor:default;font-size:11.5px} /* La boîte garde ses 13 px, sinon le point remonterait par rapport au fil : c'est le dessin à l'intérieur qui rétrécit. Sans anneau, pour se distinguer d'un repère sur lequel on peut cliquer. Le rond est opaque (mélangé au blanc et non à du transparent) : sinon le fil se voyait au travers. Et il prend la couleur du projet en même temps que le fil, sinon un point gris resté seul sur un trait coloré tire l'œil vers ce qu'on ne peut pas cliquer. */ .sy-et.sans i{background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--on-night) 26%,#fff) 0 3.5px,transparent 3.5px); box-shadow:none} .sy-et.sans.done i{background:radial-gradient(circle at 50% 50%, var(--pc) 0 3.5px,transparent 3.5px)} .sy-et.sans:hover i{transform:none} /* l'étape courante : un cœur plein et un halo doux, plus d'anneau épais */ .sy-et.act i{background:var(--pc);box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--pc), 0 0 0 9px color-mix(in srgb,var(--pc) 14%,transparent)} @media (hover:hover){ .sy-et:hover{color:var(--on-night)} .sy-et:not(.act):hover i{transform:scale(1.2)} } /* le MID : il n'est pas une étape comme les autres, il porte sa couleur. Mais seulement tant que le blocage est à l'écran : la dernière étape porte aussi l'écran de confirmation, et le parcours ne doit pas se terminer sur un point rouge. */ .sy.bloque .sy-et.etmid.act i{background:var(--stop);box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--stop), 0 0 0 9px color-mix(in srgb,var(--stop) 14%,transparent)} .sy.bloque .sy-et.etmid.act{color:var(--stop-ink)} .sy-et.etmid.done i{background:var(--stop);box-shadow:inset 0 0 0 2px var(--stop)} /* une fois le parcours terminé, le point du blocage repasse au vert : il a été franchi, c'est tout le propos de la page. */ .sy.fini .sy-et.etmid.act i{background:var(--pc);box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--pc), 0 0 0 9px color-mix(in srgb,var(--pc) 14%,transparent)} .sy.fini .sy-et.etmid.act{color:var(--pcg,var(--pc))} /* l'écran du moment. Le changement est un fondu croisé : l'écran qui part reste en place et s'efface, celui qui arrive se pose dessus avec un très léger zoom. Rien ne saute, rien ne glisse. */ /* --dec : le décalage du téléphone vers la gauche. Remis à zéro : il est plus juste de centrer le mobile, la carte flottant à sa droite. */ /* L'air libre se partage en quatre parts égales par les marges auto : au-dessus du titre, entre la frise et le téléphone, entre le téléphone et l'invitation, sous l'invitation. Le bloc titre + frise est donc centré dans sa zone, l'invitation dans la sienne, et le titre ne remonte jamais sous la barre du haut. */ .sy-scene{position:relative;flex:0 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;--dec:0px; margin-block:auto} /* flex:0 0 auto : dans une fenêtre basse, le téléphone gardait sa hauteur fixe mais la carte le comprimait à zéro */ /* le ratio exact des captures (750x1544) : à 375/772 il restait une fraction de pixel de jeu, et `contain` laissait un liseré blanc */ .sy-phone{position:relative;flex:0 0 auto;height:min(64vh,620px);aspect-ratio:750/1544;max-width:82vw; transform:translateX(calc(var(--dec) * -1));cursor:zoom-in} /* la loupe : le seul indice que l'écran s'agrandit, indispensable au doigt */ .sy-loupe{position:absolute;right:10px;bottom:10px;z-index:2;width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c26' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 20 20M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E") center/17px no-repeat; box-shadow:0 6px 18px rgba(28,28,38,.16);pointer-events:none} /* `cover`, et non `contain` : avec box-sizing:border-box, le filet de 1px rogne la boîte de contenu, dont le ratio ne tombe plus tout à fait sur celui de la capture. `contain` traduisait cet écart en un liseré blanc d'un pixel en haut et en bas. */ .sy-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center; border-radius:18px;background:#fff;border:1px solid rgba(28,28,38,.10); box-shadow:0 24px 54px -18px color-mix(in srgb,var(--pc) 30%,rgba(28,28,38,.18)); opacity:0;transform:scale(.985); transition:opacity .55s cubic-bezier(.3,.6,.3,1),transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .4s} .sy-phone img.on{opacity:1;transform:none;z-index:1} /* Au MID, l'écran reste un écran : l'anneau orange autour du téléphone faisait état d'erreur. C'est la frise et la carte qui disent le moment, pas le visuel. */ /* le titre et le sous-titre de l'écran : une carte de verre, décalée sur le bord de l'écran, à cheval dessus */ /* La carte est ancrée par le haut et garde une hauteur stable : le numéro, le titre (deux lignes réservées) et la description tombent au même endroit d'un écran à l'autre, rien ne bouge. */ .sy-dit{position:absolute;left:calc(50% - var(--dec) + min(28vh,270px)*375/772 + 30px);top:calc(50% - 104px); width:min(300px,32vw);min-height:182px; background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.75); box-shadow:0 18px 44px rgba(28,28,38,.14),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-radius:16px;padding:32px 24px 16px; opacity:0;transition:opacity .4s ease .08s} .sy-dit.on{opacity:1} /* le numéro de l'étape : une simple indication, sous le titre en importance. C'est la description qui porte la voix. */ .sy-num{display:block;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase; font-weight:600;color:var(--on-night-faint);margin-bottom:8px} /* le moment du MID : il se dit dans la ligne du numéro, en orange, sans rien déplacer */ .sy-num em{font-style:normal;font-weight:700;color:var(--stop-ink)} /* le titre : la place de deux lignes est réservée, il ne pousse jamais la description */ .sy-titre{display:flex;align-items:flex-start;gap:9px; font-family:var(--title-font),serif;font-weight:400; font-size:clamp(19px,2vw,25px);line-height:1.15;color:var(--on-night)} .sy-titre b{font-weight:400} /* la description seulement : un « .sy-dit span » générique écraserait la ligne de titre en flex et le badge de succès */ .sy-dit .dit-t{display:block;margin-top:7px;font-size:14.5px;line-height:1.55;color:var(--on-night-soft)} /* ---- l'arrivée : le succès se dessine à côté de « Terminé » ---- Sobre : un petit cercle qui se trace, puis la coche, avec un léger ressort. Il vit dans la ligne du titre : rien ne se réserve ni ne se décale sur les autres écrans. */ .sy-dit span.sy-ok{display:none;flex:0 0 auto;width:24px;height:24px;margin:2px 0 0} .sy-ok svg{display:block;width:100%;height:100%;fill:none;stroke:var(--pc); stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sy-ok .c{stroke-dasharray:82;stroke-dashoffset:82} .sy-ok .v{stroke-dasharray:20;stroke-dashoffset:20} .sy.fini .sy-dit span.sy-ok{display:block;animation:sy-ok-pose .5s cubic-bezier(.3,1.3,.5,1) both} .sy.fini .sy-ok .c{animation:sy-ok-trace .55s cubic-bezier(.4,.2,.2,1) .1s forwards} .sy.fini .sy-ok .v{animation:sy-ok-trace .35s cubic-bezier(.4,.2,.2,1) .58s forwards} @keyframes sy-ok-pose{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}} @keyframes sy-ok-trace{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){ .sy.fini .sy-ok{animation:none} .sy.fini .sy-ok .c,.sy.fini .sy-ok .v{animation:none;stroke-dashoffset:0} } @media (max-width:900px){ /* la carte passe sous le téléphone : la scène s'empile, sans décalage */ .sy-scene{flex-direction:column;gap:12px;--dec:0px} .sy-dit{position:static;transform:none;width:min(520px,100%);text-align:center; padding:13px 18px;margin-top:2px;min-height:0} .sy-titre{justify-content:center;min-height:0} .sy-titre{font-size:17px} .sy-dit .dit-t{margin-top:4px;font-size:13px} .sy-phone{height:min(50vh,470px)} .sy-et{max-width:8ch;font-size:11.5px} } /* L'invitation : le picto à gauche de la phrase. Elle est poussée vers le bas de l'écran, à égale distance du visuel et du bord. */ .sy-hint{font-size:13px;color:var(--on-night-faint);display:flex;align-items:center;gap:9px; margin-bottom:auto} .sy-hint::before{content:"";width:16px;height:26px;border:1.5px solid var(--on-night-faint); border-radius:9px;display:block;background: linear-gradient(var(--on-night-faint),var(--on-night-faint)) center 6px/2px 5px no-repeat} @media (prefers-reduced-motion:reduce){ .sy-phone img,.sy-et i,.sy-dit{transition:none} } /* ============================================================ Le carnet d'observations (Affiliation, décision 1) Une colonne par étape, deux couches : le constat du dépouillement en haut, la décision qu'il a nourrie en bas. Tout est droit et agrégé ; la sévérité se lit à la pastille et au poids de la carte. ============================================================ */ .essai{max-width:760px;margin:0 auto} /* le carnet prend toute la mesure de la page : à 760px, les notes passaient à la ligne tous les deux mots et prenaient toute la hauteur */ .essai.obs{max-width:1080px} .essai-head{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-night-faint); font-weight:600;margin:0 0 18px;text-align:center} /* --- Idée 5 · le carnet d'observations, approfondi ---------------- Une colonne par étape et deux couches : le constat du dépouillement en haut, la décision qu'il a nourrie en bas. Tout est droit, aligné, agrégé ; la sévérité se lit à la pastille et au poids de la carte, pas à une inclinaison. --- */ .obs{border:1px solid var(--night-line);border-radius:16px;background:rgba(255,255,255,.55); padding:clamp(18px,3vw,28px)} .obs-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.4vw,14px)} .obs-col{display:grid;grid-template-rows:subgrid;grid-row:span 3;min-width:0} @supports not (grid-template-rows: subgrid){ .obs-col{display:flex;flex-direction:column;gap:10px} } /* l'entête : le nom de l'étape seul, sans filet. La pastille de sévérité vit à cheval sur la carte du constat, elle ne prend plus de ligne à elle. */ .obs-tete{padding-bottom:11px} .obs-tete b{display:block;font-size:13px;line-height:1.25;text-align:center;font-weight:600; color:var(--on-night);text-wrap:balance} .obs-col.colmid .obs-tete b{color:var(--stop-ink);font-weight:700} /* le rond de sévérité, à cheval sur le bord haut du constat */ .obs-note{position:relative} .obs-note::before{content:"";position:absolute;left:50%;top:0;width:10px;height:10px; border-radius:50%;transform:translate(-50%,-50%); background:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-night) 30%,transparent), 0 0 0 3px var(--cream)} .obs-col.hes .obs-note::before{background:color-mix(in srgb,var(--pc) 60%,#fff); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pc) 60%,transparent),0 0 0 3px var(--cream)} .obs-col.colmid .obs-note::before{background:var(--stop); box-shadow:0 0 0 3px var(--cream)} /* le constat */ .obs-note{border-radius:11px;padding:13px 15px;font-size:13.5px;line-height:1.5; background:color-mix(in srgb,var(--pc) 8%,#fff); border:1px solid color-mix(in srgb,var(--pc) 22%,transparent); color:var(--on-night-soft); opacity:0;translate:0 8px;transition:opacity .5s ease var(--d,0s),translate .55s cubic-bezier(.2,.8,.3,1) var(--d,0s)} .rv.in .obs-note{opacity:1;translate:0 0} .obs-note b{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; font-weight:700;color:var(--pc-ink);margin-bottom:5px} .obs-note.ras{background:transparent;border-style:dashed; border-color:color-mix(in srgb,var(--on-night) 16%,transparent);color:var(--on-night-faint)} .obs-note.ras b{color:var(--on-night-faint)} .obs-note.stop{background:color-mix(in srgb,var(--stop) 10%,#fff); border-color:color-mix(in srgb,var(--stop) 45%,transparent);color:var(--on-night)} .obs-note.stop b{color:var(--stop-ink)} /* la décision née du constat : la deuxième couche du carnet */ .obs-dec{margin-top:10px;border-radius:11px;padding:12px 15px;font-size:13.5px;line-height:1.45; background:var(--pci,color-mix(in srgb,var(--pc) 82%,#1c1c26));color:#fff; opacity:0;translate:0 8px;transition:opacity .5s ease var(--d,0s),translate .55s cubic-bezier(.2,.8,.3,1) var(--d,0s)} .rv.in .obs-dec{opacity:1;translate:0 0} .obs-dec b{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; font-weight:700;color:rgba(255,255,255,.85);margin-bottom:5px} .obs-dec.stop{background:color-mix(in srgb,var(--stop) 60%,#1c1c26)} /* la légende, sous la grille */ .obs-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:20px; font-size:12.5px;color:var(--on-night-faint)} .obs-leg span{display:inline-flex;align-items:center;gap:7px} .obs-leg i{width:9px;height:9px;border-radius:50%;flex:0 0 auto; background:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-night) 30%,transparent)} .obs-leg .l-hes i{background:color-mix(in srgb,var(--pc) 60%,#fff); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pc) 60%,transparent)} .obs-leg .l-stop i{background:var(--stop);box-shadow:none} @media (max-width:700px){ .obs-grid{grid-template-columns:repeat(2,1fr)} .obs-col{grid-row:auto;display:flex;flex-direction:column} } @media (prefers-reduced-motion:reduce){ .obs-note,.obs-dec{transition:none;opacity:1;translate:0 0} } /* ============================================================ Le mur par plateformes, pleine largeur, coupé net. Aucun bloc blanc, aucun voile, aucune ombre de bord. Les colonnes coulissent au scroll (--p posé par le script), les grandes cartes de verre sont épinglées sur une grille miroir et ne bougent pas. L'espace marchand a maintenant ses visuels. ============================================================ */ .murw{position:relative;width:100vw;margin-left:calc(50% - 50vw); margin-top:clamp(34px,5vw,60px); height:clamp(480px,54vw,660px);overflow:hidden} .murw-scene{position:absolute;inset:-22% 0;display:grid; grid-template-columns:var(--cols); gap:clamp(20px,3vw,44px);padding:0 clamp(18px,2.6vw,40px)} .murw-col{display:flex;flex-direction:column;gap:clamp(22px,3.2vw,46px);min-width:0; padding-top:var(--haut,0px); transform:translateY(calc((var(--p,.5) - .5) * var(--v,140px)));will-change:transform} .murw-col img{display:block;width:100%;height:auto;border-radius:12px; border:1px solid rgba(28,28,38,.08);background:#fff; /* le voile : les captures reculent d'un cran pour que les cartes passent devant, sans perdre leurs couleurs */ opacity:.88;filter:saturate(.88)} /* la grille d'épinglage : la même grille que la scène, mais immobile */ .murw-pins{position:absolute;inset:0;z-index:2;display:grid; grid-template-columns:var(--cols);gap:clamp(20px,3vw,44px); padding:0 clamp(18px,2.6vw,40px);pointer-events:none} .murw-pins > div{position:relative;min-width:0} /* la grande carte de verre, en quinconce sur sa colonne */ .murw-carte{position:absolute;left:50%;top:var(--top,50%);transform:translate(-50%,-50%); width:min(280px,30vw);max-width:calc(100% + 20px);text-align:center; padding:clamp(24px,3vw,36px) clamp(22px,2.6vw,32px);border-radius:18px; background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.82); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); box-shadow:0 26px 60px rgba(28,28,38,.2),inset 0 1px 0 rgba(255,255,255,.95)} .murw-carte b{display:block;font-family:var(--title-font),serif;font-weight:400; font-size:clamp(23px,2.7vw,33px);line-height:1.1;color:var(--on-night)} .murw-carte span{display:block;margin-top:9px;font-size:13px;line-height:1.45;color:var(--on-night-soft)} /* ---- la fenêtre : pleine hauteur, collée à ce qui précède ---- Le mur occupe tout l'écran et la page semble trouée : on regarde une couche qui vit derrière elle. */ .murw.plein{height:100vh;height:100svh;margin-top:34px} /* La rupture du haut et du bas : c'est la découpe elle-même qui s'arrondit, donc la vraie page (halos compris) apparaît dans les angles et l'ombre de ses bords se pose sur le mur. Des bandes crème opaques donneraient le même dessin mais masqueraient le fond. */ .murw.fen{border-radius:clamp(24px,3.4vw,38px); box-shadow:inset 0 14px 28px -10px rgba(28,28,38,.26), inset 0 -14px 28px -10px rgba(28,28,38,.26)} /* deux écrans mobiles côte à côte : une rangée dans la colonne */ .murw-duo{display:flex;gap:clamp(12px,1.6vw,20px)} .murw-duo img{flex:1;min-width:0} /* une capture pleine hauteur glissée dans une paire se recadre au format d'un écran, pour ne pas écraser sa voisine */ .murw-duo img.crop{aspect-ratio:750/1624} /* Les pages du site font quatre fois la hauteur d'une FAQ : sans recadrage, elles occupent la colonne entière et les FAQ passent en un clin d'œil. On n'en garde donc que le haut. */ .murw-col img.crop{aspect-ratio:640/860;object-fit:cover;object-position:top center} /* Les deux colonnes du mobile ne servent qu'en dessous de 900px. Leur course est posée ici et non en style en ligne : sur un écran étroit, les captures desktop sont très basses et une course de 260px vidait la colonne par le haut. */ .murw-col.mob{display:none} .murw-col.mob-a{--v:-170px} .murw-col.mob-b{--v:150px;--haut:50px} /* ---- Le mur ne doit jamais se vider ---- Les colonnes coulissent jusqu'à 420px : sur un écran plus haut que large, une colonne trop courte laisse un trou en haut ou en bas. Chaque colonne porte donc six à huit visuels distincts (plus de répétition : on voyait deux fois la même page), et la réserve passe de 30 à 42% pour couvrir la course entière. */ .murw.plein .murw-scene{inset:-42% 0} @media (max-width:900px){ /* Deux colonnes seulement, mais qui mélangent les visuels clés des quatre plateformes : quatre colonnes étroites rendaient chaque capture illisible. Ce sont les cartes empilées qui nomment les quatre produits. */ .murw-scene{grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,18px)} .murw-scene > .murw-col:not(.mob){display:none} .murw-col.mob{display:flex} .murw-col{gap:clamp(10px,2vw,18px)} /* les cartes quittent la grille et s'empilent au centre */ .murw-pins{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(10px,2.2vh,20px);padding:6vh clamp(18px,6vw,40px)} .murw-pins > div{position:static;width:100%;max-width:320px} .murw-carte{position:static;transform:none;width:100%;max-width:none; padding:14px 18px;border-radius:14px; display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 10px;text-align:center} /* le nom ne se coupe jamais en deux : c'est le descriptif qui passe à la ligne s'il le faut */ .murw-carte b{font-size:19px;white-space:nowrap} .murw-carte span{margin-top:0;font-size:13px} } @media (max-width:520px){ /* au plus étroit, le nom seul : le descriptif passerait à la ligne */ .murw-carte span{display:none} .murw-carte{justify-content:center} } @media (prefers-reduced-motion:reduce){ .murw-col{transform:none} } /* ============================================================ LA SCÈNE DE CONNEXION (page Connexion) Premier écran du défilé de récupération : une carte de connexion jouée, à la taille d'une popin. Le clic sur « mot de passe oublié » allume les écrans réels qui suivent. ============================================================ */ .scn .cx-shot-wrap{height:clamp(200px,24vw,290px)} .scn-mini{height:100%;aspect-ratio:1/.98;container-type:size; background:#fff;border-radius:11px;border:1px solid rgba(28,28,38,.10); box-shadow:0 14px 34px color-mix(in srgb,var(--pc) 18%,rgba(28,28,38,.10))} /* ⚠️ les unités cqh écrites SUR le conteneur mesurent son ancêtre : le contenu vit donc dans un enfant, qui interroge bien la carte */ .scn-mini-in{height:100%;display:flex;flex-direction:column;padding:6.5cqh 7cqh} .scn-mini.shake{animation:scn-shake .5s ease} @keyframes scn-shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-9px)} 40%{transform:translateX(7px)}62%{transform:translateX(-5px)}82%{transform:translateX(2px)}} .scn-mini h3{margin:0;font-family:var(--title-font),serif;font-weight:400; font-size:8cqh;line-height:1.1;color:#0E1424} .scn-mini .st{margin:1cqh 0 0;font-size:4cqh;line-height:1.3;color:rgba(28,28,38,.62)} .scn-lbl{display:block;margin:5cqh 0 1.6cqh;font-size:3.7cqh;font-weight:600; letter-spacing:.03em;color:rgba(28,28,38,.66)} .scn-field{display:flex;align-items:center;height:11cqh;padding:0 3.4cqh; border:1.5px solid #DCDFE8;border-radius:2.6cqh;background:#fff; font-size:4.1cqh;color:#0E1424;overflow:hidden; transition:border-color .3s,box-shadow .3s} .scn-field .txt{white-space:nowrap} .scn-field.focus{border-color:var(--pc);box-shadow:0 0 0 .8cqh color-mix(in srgb,var(--pc) 16%,transparent)} .scn-field.bad{border-color:#E8724A} .scn-field .caret{width:1.5px;height:5cqh;margin-left:1px;background:var(--pc);opacity:0} .scn-field.focus .caret{opacity:1;animation:scn-caret 1s steps(2) infinite} @keyframes scn-caret{0%{opacity:1}50%{opacity:0}} .scn-field .dots{letter-spacing:.8cqh;font-size:5cqh;line-height:1} .scn-err{margin:2.6cqh 0 0;padding:2.2cqh 2.6cqh;border-radius:2cqh; background:#FDEFE9;border-left:2px solid #E8724A; font-size:3.5cqh;line-height:1.25;font-weight:500;color:#B14A28; opacity:0;transition:opacity .4s} .scn-err.on{opacity:1} .scn-btn{margin-top:auto;height:12cqh;border:0;border-radius:3cqh; background:#131A2C;color:#fff;font:600 4.4cqh/1 var(--body-font),sans-serif; cursor:pointer;transition:transform .18s} .scn-btn.press{transform:scale(.96)} .scn-forgot{position:relative;display:table;margin:3.4cqh auto 0; font-size:3.9cqh;font-weight:600;color:var(--pc-ink);text-decoration:none;cursor:pointer} .scn-forgot::after{content:"";position:absolute;left:0;right:0;bottom:-.6cqh;height:1.4px; background:var(--pc-ink);transform:scaleX(0);transform-origin:left;transition:transform .35s} .scn-forgot.hi::after{transform:scaleX(1)} .scn-forgot.hi{animation:scn-pulse 1s ease 2} @keyframes scn-pulse{0%,100%{text-shadow:none} 50%{text-shadow:0 0 1.6cqh color-mix(in srgb,var(--pc) 55%,transparent)}} .scn-forgot.clic{animation:scn-clic .35s ease} @keyframes scn-clic{0%{transform:scale(1)}50%{transform:scale(.93)}100%{transform:scale(1)}} /* la scène ouvre la file : pas de numéro, mais la même flèche de liaison */ .scn-fig .cx-shot-wrap::after{content:"→";position:absolute;top:50%; right:calc(-1 * clamp(30px,4.5vw,56px) / 2);transform:translate(50%,-50%); font-size:22px;color:color-mix(in srgb,var(--pc) 72%,transparent);pointer-events:none} .scn-go{display:block;margin-top:6px;font-size:12.5px;font-weight:700; letter-spacing:.02em;color:var(--pc-ink); opacity:0;translate:-6px 0;transition:opacity .5s,translate .5s} .scn-go.on{opacity:1;translate:0 0} .scn-replay,.scn-skip{display:table;margin:9px auto 0;cursor:pointer} .scn-replay{font:600 12px/1 var(--body-font),sans-serif;color:var(--pc-ink); background:#fff;border:1px solid color-mix(in srgb,var(--pc) 38%,transparent); border-radius:999px;padding:7px 13px;transition:background .3s} .scn-replay:hover{background:color-mix(in srgb,var(--pc) 8%,white)} .scn-skip{display:none;font:600 12px/1 var(--body-font),sans-serif; color:var(--on-night-soft);background:none;border:0;padding:6px 4px; text-decoration:underline;text-underline-offset:3px} .scn-skip:hover{color:var(--pc-ink)} .scn.playing .scn-skip{display:table} .scn.playing .scn-replay{display:none} /* les écrans réels attendent le clic de la scène */ .scn .cx-reset > figure:not(.scn-fig){transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)} .scn:not(.lit) .cx-reset > figure:not(.scn-fig){opacity:.2;transform:none} @media (prefers-reduced-motion:reduce){ .scn-mini.shake{animation:none} .scn:not(.lit) .cx-reset > figure:not(.scn-fig){opacity:1} } /* ============================================================ LE MUR DES IMPASSES (ouverture de la page Connexion) Le plan arrive très couché et éteint, se redresse en traversant l'écran, passe de face, puis bascule de l'autre côté en s'en allant. Une seule progression (la traversée), et surtout DEUX éléments animés au lieu de quatorze : c'est ce qui rend le mouvement fluide. ============================================================ */ /* le débordement latéral est coupé, donc la marge basse doit laisser passer l'ombre portée des captures, sinon elle est tranchée net */ .mur{position:relative;overflow:hidden; padding:clamp(14px,2vw,30px) 0 clamp(76px,7vw,116px)} .mur-persp{perspective:1500px;perspective-origin:50% 34%; display:flex;justify-content:center} .mur-plane{display:flex;flex-direction:column;gap:clamp(46px,4vw,62px); width:min(1420px,124vw);flex:none;transform-style:preserve-3d; will-change:transform;backface-visibility:hidden} .mur-ligne{display:grid;grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.7vw,24px);align-items:start; will-change:transform,opacity;backface-visibility:hidden} /* les écrans des deux bords ne sortent que sur grand écran */ .wc.bord{display:none} @media (min-width:1440px){ .mur-plane{width:min(1780px,122vw)} .mur-ligne{grid-template-columns:repeat(7,1fr)} .wc.bord{display:block} } .wc{position:relative;border-radius:12px; transform:translateZ(var(--lift,0px)); transition:transform .28s cubic-bezier(.2,.8,.3,1)} .wc img{display:block;width:100%;height:auto;aspect-ratio:4/3; object-fit:cover;object-position:var(--pos,50% 50%);border-radius:12px; border:1px solid rgba(28,28,38,.10);background:#fff; box-shadow:0 30px 60px -26px rgba(18,26,32,.45); transition:box-shadow .3s ease} /* les quatre écrans qu'on ne voit nulle part ailleurs, à peine détachés */ .wc.star{--lift:26px} .wc.star img{border-color:color-mix(in srgb,var(--pc) 42%,transparent)} /* l'étiquette : orange = le blocage, verte = la sortie conçue */ .wc .tag{position:absolute;left:50%;top:-13px;z-index:2;white-space:nowrap; transform:translateX(-50%);transform-origin:center; font:700 11.5px/1 var(--body-font),sans-serif;letter-spacing:.04em;color:#fff; border-radius:999px;padding:7px 11px} .wc .tag.sor{background:#118354;box-shadow:0 6px 16px rgba(20,154,99,.35)} .wc .tag.imp{background:#B5593A;box-shadow:0 6px 16px rgba(232,114,74,.4)} /* survol : l'écran et son étiquette montent ensemble */ @media (hover:hover){ .wc:hover{z-index:5;transform:translateY(-10px) translateZ(calc(var(--lift,0px) + 24px))} .wc:hover img{box-shadow:0 46px 86px -28px rgba(18,26,32,.55)} } /* les deux blocages battent une fois le mur en pleine lumière */ .mur.plein .wc.b img{animation:mur-bat 1.5s ease .2s 2} @keyframes mur-bat{0%,100%{box-shadow:0 30px 60px -26px rgba(18,26,32,.45)} 50%{box-shadow:0 30px 60px -26px rgba(18,26,32,.45),0 0 0 6px rgba(232,114,74,.32)}} /* ---- tablette : trois colonnes, six écrans ---- */ @media (max-width:1100px){ .mur-ligne{grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,18px)} .mur-plane{width:min(88vw,760px);gap:clamp(40px,5vw,50px)} .wc.petit{display:none} .wc.star{--lift:14px} .wc .tag{white-space:normal;max-width:94%;text-align:center;line-height:1.25} } /* ---- mobile : quatre écrans sur deux lignes ---- */ @media (max-width:700px){ .mur{padding:clamp(30px,6vw,44px) 0 clamp(82px,18vw,104px)} .mur-plane{width:min(92vw,520px);gap:clamp(52px,12vw,66px)} .mur-ligne{grid-template-columns:repeat(2,1fr);gap:clamp(10px,2.6vw,16px)} .wc:not(.mob4){display:none} .wc.star{--lift:0px} /* posée sur la tuile, l'étiquette couvrait l'écran qu'elle nomme : à cette taille elle passe dessous, et sur une seule ligne */ .wc .tag{top:auto;bottom:-14px;padding:5px 10px;font-size:0;white-space:nowrap} .wc .tag::before{content:attr(data-court); font:700 10px/1 var(--body-font),sans-serif;letter-spacing:.03em} } @media (prefers-reduced-motion:reduce){ .wc,.wc img{transition:none} .mur.plein .wc.b img{animation:none} } /* ============================================================ La note de discrétion, en bas des études de cas Edenred. Les chiffres d'effet existent mais ils sont internes : plutôt que de laisser un blanc que le lecteur interprète comme « pas de résultat », la page dit pourquoi ils n'y sont pas. Volontairement plus petite que le reste de l'encadré : c'est une note de bas de page, pas un argument. ============================================================ */ .pj-conf{margin-top:clamp(22px,3vh,32px);padding-top:18px; border-top:1px solid var(--night-line); font-size:14px;line-height:1.6;color:var(--on-night-faint)} /* ============================================================ L'amorce du MID, montrée en vidéo (Affiliation) Trois images côte à côte disaient « il y avait trois écrans d'aide ». Elles ne pouvaient pas montrer ce qui fait la décision : qu'on ne peut pas les sauter. Le défilé piloté au scroll qui vivait ici le montrait à moitié, puisque c'est le lecteur qui avançait. La vidéo, elle, montre le doigt qui n'a qu'un bouton à viser. Deux prises, ordinateur et mobile, et le sélecteur de la page Portail pour passer de l'une à l'autre. En dessous de 820 px il n'y a plus de choix à faire : on est sur un téléphone, on regarde la version mobile. ============================================================ */ .mid-video{margin-top:clamp(12px,1.6vw,20px)} .mid-bar{display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap;margin-bottom:12px} .mid-bar .trj-eye{margin:0} .mid-video .pj-demo{display:none} .mid-video[data-view=desktop] .pj-demo.bureau{display:block} .mid-video[data-view=mobile] .pj-demo.mobile{display:block} /* La prise desktop occupe toute la colonne, la mobile garde sa largeur de téléphone : c'est le seul endroit de la page où deux visuels du même moment ont des formes aussi différentes. */ .mid-video .pj-demo.bureau{width:100%;border-radius:14px;background:#e9ebf0} .mid-video .pj-demo.mobile{width:min(300px,72vw)} /* Les quatre temps restent écrits sous la vidéo. La vidéo les montre, elle ne les nomme pas, et c'est la nomination qui porte l'argument. */ .mid-temps{list-style:none;margin:16px 0 0;padding:0; display:grid;gap:9px 22px;grid-template-columns:repeat(2,minmax(0,1fr))} .mid-temps li{display:flex;align-items:flex-start;gap:9px; font-size:13.5px;line-height:1.5;color:var(--on-night-faint)} .mid-temps b{flex:0 0 auto;display:grid;place-items:center; width:20px;height:20px;margin-top:1px;border-radius:50%; background:color-mix(in srgb,var(--pc) 16%,transparent); color:var(--pc-ink);font-size:11.5px;font-weight:700} /* ⚠️ `[data-view]` sans valeur, exprès : une requête média ne pèse rien dans le calcul de spécificité, et `.mid-video[data-view=desktop] .pj-demo.bureau` plus haut l'emportait. Il faut ici le même poids, et venir après. */ @media (max-width:820px){ .mid-video .cx-vt{display:none} .mid-video[data-view] .pj-demo.bureau{display:none} .mid-video[data-view] .pj-demo.mobile{display:block} .mid-temps{grid-template-columns:1fr} } /* ============================================================ La démonstration du carrousel d'amorce (Affiliation) Le défilé plus bas nomme les quatre écrans, un par un. Il ne peut pas montrer le geste : le doigt qui n'a qu'un bouton à viser, et rien d'autre. C'est ce que la vidéo apporte, et c'est tout ce qu'elle a à faire. Muette, sans commandes en bas de cadre : on la lance, on la regarde, elle boucle. ============================================================ */ .pj-demo{position:relative;width:min(320px,74vw);margin-inline:auto; border-radius:22px;overflow:hidden;cursor:pointer; background:#8f96a6; box-shadow:0 26px 60px -22px rgba(8,10,18,.55)} .pj-demo video{display:block;width:100%;height:auto;pointer-events:none} .pj-demo:focus-visible{outline:3px solid var(--pc);outline-offset:3px} /* La pastille, reprise de celle des extraits de la page Expériences. Elle dit la durée avant qu'on clique : quatorze secondes, on sait si on a le temps. */ .pj-dtag{position:absolute;left:12px;top:12px;z-index:2; padding:5px 11px;border-radius:999px; font-size:12.5px;font-weight:600;letter-spacing:.04em; color:#fff;background:rgba(14,20,36,.62); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); pointer-events:none} /* L'image d'affiche montre déjà le doigt posé sur le bouton, donc elle ressemble à une capture de plus. Le rond blanc est le seul signal que tout le monde lit. */ .pj-dplay{position:absolute;left:50%;top:50%;z-index:2; width:56px;height:56px;margin:-28px 0 0 -28px; display:flex;align-items:center;justify-content:center; border:0;border-radius:50%;cursor:pointer; background:#fff;color:#0E1424; box-shadow:0 12px 30px -8px rgba(8,10,18,.55); transition:opacity .28s ease,transform .28s ease} /* le triangle n'est pas centré optiquement dans son carré : sans ce décalage il paraît collé au bord gauche du rond */ .pj-dplay svg{width:19px;height:19px;fill:currentColor;display:block;margin-left:3px} .pj-dplay:hover{transform:scale(1.07)} .pj-dplay:focus-visible{outline:3px solid var(--pc);outline-offset:3px} .pj-demo.lit .pj-dplay{opacity:0;transform:scale(.86);pointer-events:none} /* Sauf au clavier : on ne fait pas disparaître sous les doigts le bouton que la personne vient d'activer, elle n'aurait plus rien à viser. */ .pj-demo.lit .pj-dplay:focus-visible{opacity:1;transform:none;pointer-events:auto} @media (prefers-reduced-motion:reduce){ .pj-dplay{transition:none} }