, avant le héros ; le héros remonte sous le dock (marge négative), d'où position + z-index pour rester au-dessus de ses halos. À retirer avec le balisage BANDEAU-CREATION. */ .bandeau-creation { position: relative; z-index: 2; } .bandeau-creation p { max-width: 100%; margin: .2rem auto 0; padding: .45rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-faint); font-size: .8125rem; line-height: 1.5; text-align: center; text-shadow: none; overflow-wrap: break-word; } /* DEV-1 : la mention MENTION-DEV réutilise le même bloc, juste après. Chaque bloc est autonome (son propre conteneur entre ses commentaires) : l'un retiré, l'autre reste seul ; les deux retirés, rien ne s'affiche. Deux bandeaux qui se suivent : léger écart entre les deux. */ .bandeau-creation + .bandeau-creation p { margin-top: .3rem; } .bandeau-creation a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .bandeau-creation a:hover { color: var(--text); } /* DEV-2 : précision discrète près des offres (solution.html) et du formulaire (contact.html), à retirer avec son balisage MENTION-DEV. */ .mention-dev { max-width: 70ch; margin: 1.25rem 0 0; color: var(--text-faint); font-size: .875rem; line-height: 1.55; } .form-card > .mention-dev { margin: 0 0 1.25rem; } /* ========================================================================= S3b — MOUVEMENT ET FLUIDITÉ Règles communes : on n'anime que transform, opacity (et clip-path) ; tout est enfermé dans (prefers-reduced-motion: no-preference) ou annulé en reduced-motion ; sans JavaScript, tout reste visible. ========================================================================= */ /* ---------- MOUV-2 : transitions entre les pages ---------- Transitions de documents natives (Chrome, Edge, Safari récents) ; les autres navigateurs naviguent normalement. Le dock reçoit un nom de transition dédié (« dock ») seulement pendant le changement de page : classe .vt-nav posée par le petit script en tête (pageswap / pagereveal). Nommé en permanence, il deviendrait une « racine de fond » et le flou de sa pilule ne verrait plus la page derrière lui. Le dock reste donc en place ; seul le contenu fait un fondu court avec un léger glissement. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } html.vt-nav .site-header { view-transition-name: dock; } ::view-transition-old(root) { animation: vt-sortie var(--dur-short) var(--ease-soft) both; } ::view-transition-new(root) { animation: vt-entree 280ms var(--ease-expo) both; } ::view-transition-group(dock) { animation-duration: 280ms; animation-timing-function: var(--ease-expo); } } @keyframes vt-sortie { to { opacity: 0; transform: translateY(-6px); } } @keyframes vt-entree { from { opacity: 0; transform: translateY(10px); } } /* ---------- MOUV-3 : apparitions au défilement en CSS natif ---------- Là où le navigateur connaît animation-timeline: view(), c'est le défilement lui-même qui anime les .reveal : montée de 18 px et fondu, terminés quand l'élément a parcouru 220 px dans l'écran. reveal.js détecte la même fonction et n'observe alors plus les .reveal : les deux mécanismes ne s'additionnent jamais. Ailleurs (Firefox, anciens Safari), reveal.js garde son comportement. Toujours sous html.js (S2S-1). La montée passe par la propriété individuelle `translate` (famille transform, composée sur le GPU) : `transform` reste libre pour le survol des cartes et des boutons. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { :where(html.js) .reveal { opacity: 1; transform: none; animation: reveal-defilement linear both; animation-timeline: view(); animation-range: entry 0% entry 220px; } :where(html.js) .reveal[data-delay="1"] { animation-range: entry 24px entry 244px; } :where(html.js) .reveal[data-delay="2"] { animation-range: entry 48px entry 268px; } :where(html.js) .reveal[data-delay="3"] { animation-range: entry 72px entry 292px; } } } @keyframes reveal-defilement { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } } /* ---------- MOUV-4 : titres qui se révèlent mot par mot ---------- motion.js remplace le contenu du titre par un .sr-only (la phrase, pour les lecteurs d'écran) et une copie aria-hidden découpée en .mot. Un mot simple (.mot-bloc) passe en inline-block sur grand écran seulement : sous 861 px les titres ont `hyphens: auto`, qu'un inline-block empêcherait ; les mots y restent en ligne et apparaissent en fondu seul (translate est sans effet sur une boîte en ligne). Les retours à la ligne sont donc ceux du titre d'origine. Cascade : --i (rang du mot) × --pas (≤ 40 ms, total < 700 ms), après --split-base. Un titre .split-pret qui n'a pas encore reçu .split-joue attend, mots masqués (h2 hors de l'écran). */ .mot { display: inline; } @media (min-width: 861px) { .mot-bloc { display: inline-block; } } .split-visuel { user-select: none; -webkit-user-select: none; } @media (prefers-reduced-motion: no-preference) { :where(html.js) .split-pret .mot { animation: mot-entree 420ms var(--ease-expo) backwards; animation-delay: calc(var(--split-base, 0ms) + var(--i, 0) * var(--pas, 40ms)); } :where(html.js) .split-pret:not(.split-joue) .mot { animation-play-state: paused; } } @keyframes mot-entree { from { opacity: 0; translate: 0 .3em; } to { opacity: 1; translate: none; } } /* ---------- MOUV-5 : arrivée du héros ---------- Au chargement, le contenu du héros entre en séquence : sur-titre (0 ms), titre (80 ms, mot par mot via MOUV-4), paragraphe (200 ms), boutons (300 ms), le reste (380 ms) ; 450 ms chacun : tout est en place avant 900 ms. Animation CSS au temps, pas au script : si motion.js ne tourne pas, elle se termine quand même, contenu visible. Sans JavaScript (pas de html.js) ou en reduced-motion : aucune animation. Titre non découpé (script absent ou arrivé tard) : il apparaît d'un bloc à 350 ms ; ce délai laisse à motion.js le temps de le découper avant qu'il ne se montre. */ @media (prefers-reduced-motion: no-preference) { :where(html.js) :is(.hero-inner, .page-hero > .wrap, .page-hero > .wrap-narrow, .article-header > .wrap-narrow) > :not(.hero-inner) { animation: heros-entree 450ms var(--ease-expo) 380ms backwards; } :where(html.js) :is(.hero-inner, .page-hero > .wrap, .page-hero > .wrap-narrow, .article-header > .wrap-narrow) > :is(.eyebrow, .article-back, .blog-tag) { animation-delay: 0ms; } :where(html.js) :is(.hero-inner, .page-hero > .wrap, .page-hero > .wrap-narrow, .article-header > .wrap-narrow) > :is(.lead, .article-meta) { animation-delay: 200ms; } :where(html.js) :is(.hero-inner, .page-hero > .wrap, .page-hero > .wrap-narrow, .article-header > .wrap-narrow) > .hero-cta { animation-delay: 300ms; } :where(html.js) :is(.hero-inner, .page-hero > .wrap, .page-hero > .wrap-narrow, .article-header > .wrap-narrow) > h1 { animation-delay: 350ms; --split-base: 80ms; } :where(html.js) :is(.hero-inner, .page-hero > .wrap, .page-hero > .wrap-narrow, .article-header > .wrap-narrow) > h1.split-pret { animation: none; } } @keyframes heros-entree { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } } /* ---------- MOUV-6 : lueur qui suit le pointeur ---------- Ordinateur seulement. motion.js pose --mx / --my (px) sur la carte, la carte d'article ou la fenêtre de démonstration survolée, et la classe .lueur-on. ::after : lueur orange braise (opacité ≤ 0,10) centrée sur le pointeur ; ::before : la bordure s'éclaire du côté du pointeur. Les deux n'animent que leur opacité (fondu à l'entrée et à la sortie). Valeurs par défaut au centre : sans le script, l'anneau de survol des .card reste celui d'avant. */ @media (hover: hover) and (pointer: fine) { .card, .blog-card, .demo-masquage .console { --mx: 50%; --my: 50%; isolation: isolate; } .blog-card { position: relative; } .card::after, .blog-card::after, .demo-masquage .console::after, .blog-card::before, .demo-masquage .console::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-med) var(--ease-soft); } .card::before, .card::after, .blog-card::before, .blog-card::after, .demo-masquage .console::before, .demo-masquage .console::after { z-index: 3; } .card::after, .blog-card::after, .demo-masquage .console::after { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 138, 90, .10), transparent 62%); } .card::before, .blog-card::before, .demo-masquage .console::before { padding: 1px; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 138, 90, .5), transparent 70%), var(--grad-soft); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .lueur-on::before, .lueur-on::after { opacity: 1; } } /* ---------- MOUV-7 : boutons vivants ---------- Partout : léger enfoncement au clic, flèches qui glissent au survol (règles .btn-arrow, .link-arrow, .blog-read plus haut, en transform). Ordinateur : les boutons principaux du contenu suivent le pointeur qui s'approche (--ax / --ay posés par motion.js, 6 px au plus, propriété `translate`, indépendante du `transform` du survol), puis reviennent avec un rebond doux. Le focus clavier n'est jamais déplacé : un bouton :focus-visible garde translate: none, et son contour reste celui du site. */ @media (prefers-reduced-motion: no-preference) { .btn:active, .site-header .btn:active { transform: scale(.97); transition-duration: 90ms; } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { main .btn-primary { translate: var(--ax, 0px) var(--ay, 0px); transition: transform .45s var(--ease-fluid), box-shadow .45s var(--ease-fluid), background var(--t-med), border-color var(--t-med), translate 160ms var(--ease-expo); } main .btn-primary.aimant-retour { transition: transform .45s var(--ease-fluid), box-shadow .45s var(--ease-fluid), background var(--t-med), border-color var(--t-med), translate 700ms cubic-bezier(.34, 1.56, .64, 1); } main .btn-primary:focus-visible { translate: none; } }