/* ============================================================ KENZO HASSANI — Médiation & conversations à fort enjeu Concept: "l'humain sous tension" · dark, ancré, premium Calibre de craft aligné sur Fursa Advisory (Astro+GSAP) en statique. ============================================================ */ :root { /* palette */ --nuit: #0b1310; --nuit-2: #0f1a16; --surface: #14211c; --surface-2: #1b2c25; --ivoire: #f2efe6; --ivoire-2: #e6e2d5; --muted: #a4b8af; --faint: #748a7f; --line: rgba(242, 239, 230, 0.12); --line-2: rgba(242, 239, 230, 0.22); --jade: #4fc59f; --jade-bright:#74dab7; --jade-deep: #1d7a5d; --clay: #df6a40; --clay-hi: #ef8156; --gold: #e9bd72; --clair: #e9e6dc; --on-clay: #1a0f08; --sans: 'Archivo', system-ui, -apple-system, sans-serif; --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* fluid scale */ --t-hero: clamp(3rem, 1.4rem + 8vw, 8.5rem); --t-h2: clamp(2.1rem, 1.2rem + 4.2vw, 5rem); --t-h3: clamp(1.2rem, 1rem + 0.9vw, 1.6rem); --t-lead: clamp(1.08rem, 1rem + 0.55vw, 1.4rem); --ease: cubic-bezier(0.16, 1, 0.3, 1); --wrap: 1240px; --pad: clamp(1.4rem, 5vw, 4rem); --z-cursor: 9000; --z-progress: 60; --z-nav: 50; --z-dots: 30; } /* ─── thème CLAIR (jour) — bascule via [data-theme=light] sur , contraste AA ─── */ :root[data-theme="light"] { --nuit: #f3f0e8; --nuit-2: #eae6da; --surface: #fbf9f2; --surface-2: #f1ede1; --ivoire: #14201b; --ivoire-2: #2b3a33; --muted: #4f6058; --faint: #5c6c64; --line: rgba(11, 19, 16, 0.12); --line-2: rgba(11, 19, 16, 0.20); --jade: #0e6e4d; --jade-bright:#0e6e4d; --jade-deep: #0a4d35; --gold: #7a5e1e; --clair: #ffffff; } :root[data-theme="light"] .hero__fallback { background: radial-gradient(120% 90% at 62% 38%, rgba(14,110,77,.06), transparent 55%), radial-gradient(90% 80% at 20% 90%, rgba(211,95,51,.05), transparent 55%); } :root[data-theme="light"] body::before { mix-blend-mode: multiply; opacity: .03; } /* ─── bouton bascule jour / nuit ─── */ .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ivoire); transition: border-color .25s var(--ease), color .25s, background .25s; } .theme-toggle:hover { border-color: var(--jade); color: var(--jade); } .theme-toggle:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; } .theme-toggle .ico { grid-area: 1 / 1; } .theme-toggle .ico-moon { display: none; } :root[data-theme="light"] .theme-toggle .ico-sun { display: none; } :root[data-theme="light"] .theme-toggle .ico-moon { display: block; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); font-weight: 400; color: var(--ivoire); background: var(--nuit); line-height: 1.6; overflow-x: clip; position: relative; } /* film grain */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } img, svg, canvas { display: block; max-width: 100%; } ::selection { background: var(--jade); color: var(--nuit); } .wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-nav { position: fixed; top: -120px; left: 1rem; z-index: 999; background: var(--clay); color: var(--on-clay); padding: .8rem 1.1rem; border-radius: .5rem; font-family: var(--mono); font-size: 12px; transition: top .18s var(--ease); } .skip-nav:focus { top: 1rem; } /* ─── custom cursor ─── */ .cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; mix-blend-mode: difference; display: none; } @media (hover: hover) and (pointer: fine) { body.has-cursor .cursor { display: block; } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } } .cursor-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ivoire); transition: width .18s, height .18s; } .cursor-ring { position: absolute; width: 36px; height: 36px; border: 1.5px solid var(--ivoire); border-radius: 50%; opacity: .7; transition: width .28s var(--ease), height .28s var(--ease), background .2s, border-color .2s; } body.cursor-hover .cursor-dot { width: 0; height: 0; } body.cursor-hover .cursor-ring { width: 60px; height: 60px; border-color: var(--jade); background: rgba(79,197,159,.14); } /* ─── scroll progress ─── */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-progress); pointer-events: none; } .scroll-progress > span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--jade-deep), var(--jade) 55%, var(--gold)); transition: transform .08s linear; } /* ─── typography ─── */ .eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--jade); font-weight: 600; } .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--jade); } .eyebrow--pill { border: 1px solid var(--line-2); border-radius: 999px; padding: .55rem .9rem; color: var(--jade-bright); } .eyebrow--pill::before { display: none; } .display { font-family: var(--sans); font-weight: 800; line-height: .92; letter-spacing: -0.035em; text-wrap: balance; } .section-title { font-family: var(--sans); font-weight: 800; font-size: var(--t-h2); line-height: .98; letter-spacing: -0.03em; text-wrap: balance; } .section-title em { font-style: normal; color: var(--jade); } .lead { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.5; color: var(--ivoire-2); max-width: 56ch; } p { text-wrap: pretty; } .muted { color: var(--muted); } /* ─── buttons ─── */ .btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.6rem; border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--ivoire); transition: background .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--clay); border-color: var(--clay); color: var(--on-clay); } .btn--primary:hover { background: var(--clay-hi); border-color: var(--clay-hi); } .btn--ghost { background: rgba(242,239,230,.02); } .btn--ghost:hover { border-color: var(--jade); color: var(--jade); } .btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; } .btn:active { transform: translateY(0) scale(.98); } .more { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--jade); font-weight: 600; position: relative; } .more::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 0; background: currentColor; transition: width .3s var(--ease); } .more:hover::after { width: 100%; } /* ─── reveal system ─── */ html.js .reveal { opacity: 0; transform: translateY(48px); transition: opacity .8s var(--ease), transform .9s var(--ease); will-change: opacity, transform; } html.js .reveal-l { opacity: 0; transform: translateX(-60px); transition: opacity .85s var(--ease), transform .95s var(--ease); } html.js .reveal-r { opacity: 0; transform: translateX(60px); transition: opacity .85s var(--ease), transform .95s var(--ease); } html.js .reveal.in, html.js .reveal-l.in, html.js .reveal-r.in { opacity: 1; transform: none; } .rd-1 { transition-delay: .08s; } .rd-2 { transition-delay: .16s; } .rd-3 { transition-delay: .24s; } .rd-4 { transition-delay: .32s; } .rd-5 { transition-delay: .40s; } /* ─── nav ─── */ .nav { position: fixed; top: 0; inset-inline: 0; z-index: var(--z-nav); transition: background .35s var(--ease), border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; } .nav.stuck { background: color-mix(in oklab, var(--nuit) 86%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--line); } .nav__inner { display: flex; align-items: center; gap: 1.6rem; padding-block: 1rem; } .brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; font-size: 1rem; } .brand__mark { width: 1.4rem; height: 1.4rem; border-radius: 50%; flex: none; background: radial-gradient(circle at 38% 34%, var(--jade-bright), var(--jade-deep) 60%, transparent 66%); box-shadow: 0 0 0 1px var(--line-2), 0 0 16px -2px rgba(79,197,159,.6); } .nav__links { display: flex; gap: 1.7rem; margin-left: auto; } .nav__links a { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .25s; } .nav__links a:hover { color: var(--ivoire); } .nav__cta { padding: .65rem 1.1rem; font-size: 11px; } .nav__toggle { display: none; width: 2.6rem; height: 2.6rem; margin-left: auto; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } .nav__toggle span { width: 22px; height: 2px; background: var(--ivoire); transition: transform .3s var(--ease), opacity .3s; } .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } .nav__mobile { display: none; flex-direction: column; padding: .4rem var(--pad) 1.4rem; } .nav__mobile a { padding: .9rem .2rem; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); } .nav__mobile a:last-child { border: 0; margin-top: .7rem; } /* ─── scene shell ─── */ .scene { position: relative; padding-block: clamp(5rem, 11vw, 10rem); } .scene--alt { background: var(--nuit-2); border-block: 1px solid var(--line); } /* éclaircie tonale UNIQUE : la tension se résout en clarté (ivoire chaud désaturé, raccords gradient) */ .scene--clair { background: var(--clair); color: var(--nuit); border-block: 1px solid rgba(11,19,16,.12); } .scene--clair > .wrap { position: relative; z-index: 1; } .scene--clair::before, .scene--clair::after { content: ""; position: absolute; inset-inline: 0; height: 16vh; pointer-events: none; z-index: 0; } .scene--clair::before { top: 0; background: linear-gradient(to bottom, var(--nuit), var(--clair)); } .scene--clair::after { bottom: 0; background: linear-gradient(to top, var(--nuit), var(--clair)); } .scene--clair .eyebrow { color: #14573c; } .scene--clair .section-title { color: var(--nuit); } .scene--clair .section-title em { color: var(--jade-deep); } .scene--clair .figure { border-top-color: rgba(11,19,16,.18); } .scene--clair .figure__n { color: var(--nuit); } .scene--clair .figure__l { color: #5a6b62; } .scene--clair .figure:hover { border-color: var(--jade-deep); } .scene-head { max-width: 60ch; margin-bottom: clamp(2.2rem, 5vw, 4rem); display: flex; flex-direction: column; gap: 1.2rem; } /* ─── hero ─── */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero__canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } .hero__fallback { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 62% 38%, rgba(79,197,159,.16), transparent 55%), radial-gradient(90% 80% at 20% 90%, rgba(223,106,64,.10), transparent 55%); } .hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 34%; z-index: 2; background: linear-gradient(to bottom, transparent, var(--nuit)); pointer-events: none; } .hero__inner { position: relative; z-index: 3; padding-top: 7rem; padding-bottom: 4rem; display: flex; flex-direction: column; gap: 1.7rem; max-width: 46rem; margin-inline: max(1.2rem, calc((100% - var(--wrap)) / 2)) auto; } .hero__manifesto { font-family: var(--sans); font-weight: 800; font-size: var(--t-hero); line-height: .9; letter-spacing: -0.045em; text-transform: none; } .hero__manifesto .ln { display: block; overflow: hidden; } .hero__manifesto .ln > span { display: block; } .hero__manifesto .accent { color: var(--jade); } .hero__lead { font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .7vw, 1.45rem); line-height: 1.5; color: var(--ivoire-2); max-width: 42ch; } .hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem; } .proof { display: flex; flex-wrap: wrap; gap: .5rem 2.2rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--faint); } .proof strong { color: var(--ivoire); font-weight: 600; } .scroll-cue { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .6rem; font-family: var(--mono); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); } .scroll-cue-line { width: 1.5px; height: 48px; background: linear-gradient(to bottom, transparent, var(--jade)); } @media (max-width: 760px) { .scroll-cue { display: none; } } /* ─── manifeste / approche ─── */ .approche__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .manifesto-q { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 1rem + 2.6vw, 2.9rem); line-height: 1.25; color: var(--ivoire); margin-bottom: 1.8rem; text-wrap: balance; } .manifesto-q .hl { color: var(--jade); font-style: normal; } .approche__text p { color: var(--muted); margin-bottom: 1rem; max-width: 54ch; } .approche__text .lead { color: var(--ivoire-2); margin-bottom: 1.2rem; } .portrait { display: flex; flex-direction: column; gap: .9rem; } .portrait__frame { position: relative; aspect-ratio: 4/5; border-radius: 1rem; overflow: hidden; border: 1px solid var(--line-2); background: radial-gradient(120% 90% at 30% 18%, rgba(79,197,159,.22), transparent 60%), radial-gradient(130% 100% at 80% 96%, rgba(223,106,64,.18), transparent 55%), linear-gradient(155deg, var(--surface-2), var(--nuit-2)); display: grid; place-items: center; } .portrait__frame::after { content: ""; position: absolute; inset: 0; opacity: .45; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .portrait__sig { position: relative; font-family: var(--serif); font-size: clamp(3rem, 8vw, 5rem); color: rgba(242,239,230,.26); letter-spacing: .04em; } .portrait__cap { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .portrait__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: grayscale(1) contrast(1.05) brightness(1.05); clip-path: inset(0 round 1rem); transition: clip-path 1.15s var(--ease), filter 1.15s var(--ease); } /* reveal « le flou se lève » — la tension floue devient lisible (piloté par .in du reveal one-shot) */ html.js .portrait__img { clip-path: inset(0 0 16% 0 round 1rem); filter: grayscale(1) contrast(1.18) brightness(.92) blur(9px); } html.js .portrait.in .portrait__img { clip-path: inset(0 round 1rem); filter: grayscale(1) contrast(1.05) brightness(1.05) blur(0); } .portrait__tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(56% 42% at 88% 7%, rgba(116,218,183,.20), transparent 62%); } .portrait__frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 52%, rgba(11,19,16,.62) 100%); } .portrait__frame::after { z-index: 3; } /* ─── pour qui (split) ─── */ .paths__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .path { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.8rem, 3.5vw, 3rem); background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; overflow: hidden; transition: transform .4s var(--ease), border-color .4s, background .4s; } .path::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 120% at 80% 0%, rgba(79,197,159,.10), transparent 60%); transition: opacity .4s; } .path:hover { transform: translateY(-5px); border-color: var(--jade-deep); background: var(--surface-2); } .path:hover::before { opacity: 1; } .path__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--jade); } .path h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); position: relative; } .path p { color: var(--muted); position: relative; max-width: 44ch; } .path .more { margin-top: auto; padding-top: .7rem; position: relative; } /* ─── entreprises (B2B) ─── */ .biz__head { max-width: 44rem; } .biz__offers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.2rem) clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); } .offer { padding-top: 1.6rem; border-top: 1px solid var(--line-2); } .offer h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); margin-bottom: .55rem; display: flex; align-items: baseline; gap: .7rem; } .offer h3::before { content: ""; flex: 0 0 auto; width: 20px; height: 2px; background: var(--jade); align-self: center; } .offer p { color: var(--muted); max-width: 46ch; } .biz__entry { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.6rem, 3.5vw, 2.6rem); border-radius: 1.1rem; background: linear-gradient(135deg, var(--surface-2), var(--nuit-2)); border: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: center; justify-content: space-between; } .biz__entry .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; } .biz__entry h3 { font-family: var(--sans); font-weight: 700; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); max-width: 26ch; } .biz__why { margin-top: 2rem; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--faint); max-width: 60ch; } /* ─── particuliers ─── */ .indiv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3.4rem); } .indiv-card { padding-top: 1.6rem; border-top: 1px solid var(--line-2); } .indiv-card h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); margin-bottom: .55rem; } .indiv-card p { color: var(--muted); } .indiv__note { margin-top: clamp(2rem, 4vw, 3rem); font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--faint); max-width: 52ch; } /* ─── méthode RECADRAGE (pinned) ─── */ .method { position: relative; } .method__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .method__pin { position: sticky; top: 18vh; align-self: start; } .method__name { font-family: var(--sans); font-weight: 900; font-size: clamp(2.4rem, 1.5rem + 5vw, 5.5rem); letter-spacing: -0.04em; line-height: .9; color: var(--ivoire); } .method__name .accent { color: var(--jade); } .method__thesis { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.4vw, 1.4rem); color: var(--ivoire-2); margin-top: 1.3rem; opacity: 0; transform: translateY(6px); transition: opacity .42s var(--ease), transform .42s var(--ease); } .method__steps { display: flex; flex-direction: column; gap: 1rem; } .mstep { padding: clamp(1.4rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); } .mstep__n { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: var(--jade); } .mstep h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); margin: .5rem 0 .4rem; } .mstep p { color: var(--muted); max-width: 48ch; } .method__steps { gap: clamp(2.5rem, 9vh, 6rem); } .mstep { transition: border-color .4s var(--ease), background .4s, transform .4s var(--ease); } .mstep.is-active { border-color: var(--jade-deep); background: var(--surface-2); transform: translateX(4px); } .mstep.is-active .mstep__n { color: var(--jade-bright); } /* ── schéma RECADRAGE (SVG, piloté au scroll) ── */ .rec-schema { margin-top: clamp(2rem, 4vh, 3rem); max-width: 240px; transition: clip-path 1.2s var(--ease), filter 1.2s var(--ease); } /* reveal « fenêtre » : le schéma s'ouvre de haut en bas (échos des 4 mouvements) + le flou se lève */ html.js .rec-schema { clip-path: inset(0 0 100% 0); filter: blur(7px); } html.js .rec-schema.in { clip-path: inset(0 0 0 0); filter: blur(0); } .rec-svg { width: 100%; height: auto; overflow: visible; } .rec-wave { stroke: var(--jade); stroke-width: 1.6; stroke-opacity: .26; stroke-linecap: round; } .rec-spine { stroke: var(--line-2); stroke-width: 2; } .rec-prog { stroke: var(--jade); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .7s var(--ease); } .rec-node circle { fill: var(--nuit); stroke: var(--line-2); stroke-width: 2; transition: fill .45s var(--ease), stroke .45s; } .rec-node text { fill: var(--faint); font-family: var(--mono); font-size: 9px; font-weight: 600; text-anchor: middle; transition: fill .45s; } .rec-node.done circle { stroke: var(--jade-deep); } .rec-node.done text { fill: var(--jade); } .rec-node.active circle { fill: var(--jade); stroke: var(--jade); filter: drop-shadow(0 0 7px rgba(79,197,159,.6)); } .rec-node.active text { fill: var(--nuit); } /* ── micro-interactions cartes texte ── */ .offer, .indiv-card, .figure { transition: border-color .35s var(--ease), transform .35s var(--ease); } .offer:hover, .indiv-card:hover { border-color: var(--jade-deep); transform: translateY(-3px); } .figure:hover { border-color: var(--jade-deep); } @media (prefers-reduced-motion: reduce) { .rec-prog, .rec-node circle, .rec-node text, .mstep { transition: none; } html.js .rec-schema { clip-path: none !important; filter: none !important; transition: none !important; } html.js .method__thesis { transition: none !important; } } /* ─── preuve / figures ─── */ .figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: clamp(2rem, 4vw, 3.2rem); } .figure { border-top: 1px solid var(--line-2); padding-top: 1.4rem; } .figure__n { font-family: var(--sans); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); letter-spacing: -0.03em; color: var(--ivoire); line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .figure__n.is-set { animation: settle .42s var(--ease); } @keyframes settle { 0% { transform: translateY(2px); opacity: .85; } 100% { transform: none; opacity: 1; } } .figure__l { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: .6rem; } /* ─── ressources ─── */ .res__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); } .res-card { display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.8rem, 3.2vw, 2.6rem); background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; transition: transform .4s var(--ease), border-color .4s, background .4s; } .res-card:hover { transform: translateY(-5px); border-color: var(--jade-deep); background: var(--surface-2); } .res-card h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); } .res-card p { color: var(--muted); } .res-card .more { margin-top: .4rem; } .news { border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); } .news__label { font-family: var(--sans); font-weight: 600; font-size: var(--t-lead); display: block; margin-bottom: 1.1rem; max-width: 40ch; } .news__row { display: flex; gap: .7rem; flex-wrap: wrap; max-width: 34rem; } .news__input { flex: 1 1 16rem; padding: 1rem 1.1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ivoire); font-family: var(--sans); } .news__input::placeholder { color: var(--faint); } .news__input:focus-visible { outline: none; border-color: var(--jade); } .news__hint { margin-top: .8rem; font-family: var(--mono); font-size: 12px; color: var(--jade); } /* ─── contact ─── */ .contact { position: relative; } .signal-rule { height: 1.5px; background: var(--line); overflow: hidden; margin-bottom: clamp(2.4rem, 5vw, 4rem); } .signal-rule > span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--clay), var(--jade) 60%, var(--gold)); } .contact h2 { max-width: 18ch; } .portals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(2.4rem, 5vw, 3.4rem); } .portal { display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; } .portal:hover { transform: translateY(-5px); border-color: var(--clay); box-shadow: 0 20px 50px -24px rgba(223,106,64,.5); } .portal__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--jade); } .portal h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); } .portal p { color: var(--muted); font-size: .96rem; flex: 1; } /* ─── footer ─── */ .foot { border-top: 1px solid var(--line); padding-block: 2.8rem; background: var(--nuit-2); } .foot__inner { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; justify-content: space-between; } .foot__brand { display: flex; align-items: center; gap: .6rem; font-family: var(--sans); font-weight: 700; } .foot__links { display: flex; flex-wrap: wrap; gap: 1.3rem; } .foot__links a { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .25s; } .foot__links a:hover { color: var(--jade); } .foot__legal { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--faint); } /* ─── scene-progress dots ─── */ .dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: var(--z-dots); display: flex; flex-direction: column; gap: 15px; } .dots a { display: flex; align-items: center; justify-content: flex-end; color: var(--muted); opacity: .5; transition: opacity .25s, color .25s; } .dots a::before { content: ""; width: 26px; height: 1.5px; background: currentColor; transition: width .25s var(--ease); } .dots a.active { opacity: 1; color: var(--jade); } .dots a.active::before { width: 44px; } .dots a:hover { opacity: 1; color: var(--jade); } .dots i { position: absolute; right: 38px; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ivoire); background: var(--surface-2); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--line); opacity: 0; transform: translateX(8px); transition: opacity .15s, transform .2s; white-space: nowrap; pointer-events: none; } .dots a:hover i, .dots a.active i { opacity: 1; transform: translateX(0); } @media (max-width: 1100px) { .dots { display: none; } } /* ─── responsive ─── */ @media (max-width: 900px) { .nav__links, .nav__cta { display: none; } .nav__toggle { display: flex; } .nav.open .nav__mobile { display: flex; } .nav.open { background: var(--nuit); border-bottom-color: var(--line); } .approche__grid, .method__grid { grid-template-columns: 1fr; } .method__pin { position: static; } .portrait { max-width: 22rem; order: -1; } .biz__offers { grid-template-columns: 1fr; } .figures { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .paths__grid, .res__grid, .indiv__grid, .portals { grid-template-columns: 1fr; } .hero__ctas .btn { flex: 1 1 auto; justify-content: center; } .foot__legal { align-items: flex-start; } } /* ─── reduced motion ─── */ @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .reveal-l, html.js .reveal-r { opacity: 1; transform: none; transition: none; } html.js .portrait__img, html.js .portrait.in .portrait__img { clip-path: none !important; filter: grayscale(1) contrast(1.05) brightness(1.05) !important; transition: none !important; } .cursor { display: none !important; } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; } .scroll-progress > span, .signal-rule > span { transition: none; } .btn:hover, .path:hover, .res-card:hover, .portal:hover { transform: none; } }