/* sygh — page d'accueil. Généré à partir des anciennes couches (home, radius, v2–v5, foot2) : même cascade, règles mortes retirées. */
@font-face { font-family: Geist; font-weight: 100 900; font-style: normal; font-display: swap; src: url("/assets/geist-var.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("/assets/geist-mono-var.woff2") format("woff2"); }
@property --bg { syntax: "<color>"; inherits: true; initial-value: #0b0b0b; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fg2 { syntax: "<color>"; inherits: true; initial-value: #c8c8c8; }
@property --fg3 { syntax: "<color>"; inherits: true; initial-value: #8a8a8a; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #2a2a2a; }
@property --card { syntax: "<color>"; inherits: true; initial-value: #161616; }
@property --card2 { syntax: "<color>"; inherits: true; initial-value: #1c1c1c; }
@property --inv { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --glo { syntax: "<number>"; inherits: true; initial-value: 1; }
:root { --s-sec: clamp(112px,12vw,176px); --s-block: clamp(88px,9vw,136px); --s-head: clamp(32px,3.2vw,52px); --s-in: clamp(40px,4vw,56px); --s-kick: 20px; --s-lead: 24px; --g: 20px; --r: 24px; --wrap: 1280px; --gut: clamp(20px,4vw,48px); --acid: #c4f53a; --pink: #ff2e88; --orng: #ff6b1a; --cob: #2f4bff; --ink: #0b0b0b; --acc: var(--acid); --t-h1: clamp(48px,6.4vw,108px); --t-h2: clamp(40px,4.6vw,68px); --t-lead: clamp(18px,1.5vw,22px); --org: var(--orng); --green: var(--acid); --f: 'Geist',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; --mono: 'Geist Mono',ui-monospace,Menlo,monospace; --ease: cubic-bezier(.2,.8,.2,1); }
html[data-theme="dark"] { --bg: #0b0b0b; --fg: #ffffff; --fg2: #c8c8c8; --fg3: #8a8a8a; --line: #2a2a2a; --card: #161616; --card2: #1c1c1c; --inv: 0; --glo: 1; }
html[data-theme="light"] { --bg: #ffffff; --fg: #0b0b0b; --fg2: #3d3d3d; --fg3: #707070; --line: #e2e2e2; --card: #f2f2f2; --card2: #ffffff; --inv: 1; --glo: 0; }
html { --bgM: var(--bg); }
html[data-tmid="dark"] { --bgM: #0b0b0b; }
html[data-tmid="light"] { --bgM: #ffffff; }
html { --thd: 2s; --the: cubic-bezier(.45,0,.25,1); transition: --bg var(--thd) var(--the),--fg var(--thd) var(--the),--fg2 var(--thd) var(--the),--fg3 var(--thd) var(--the),--line var(--thd) var(--the),--card var(--thd) var(--the),--card2 var(--thd) var(--the),--inv var(--thd) var(--the),--glo var(--thd) var(--the); }
*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0px; background: var(--bg); color: var(--fg); font-family: var(--f); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0px; }
b, strong { font-weight: 600; }
.inv { filter: invert(var(--inv)); }
.wrap { max-width: var(--wrap); margin: 0px auto; padding: 0 var(--gut); }
:focus-visible { outline: 2px solid var(--org); outline-offset: 3px; }
.sec { padding: calc(var(--s-sec) / 2) 0; }
.block { margin-top: var(--s-block); }
.sec:has(+ [data-snap]) { padding-bottom: calc(var(--s-sec) * 2); }
.sec + .sec[data-snap] { padding-top: calc(var(--s-sec) * 2); }
.head { margin-bottom: var(--s-head); }
.head > :last-child { margin-bottom: 0px; }
.kick { display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--s-kick); font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); }
.kick i { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0px 8px; border-radius: 6px; background: var(--acc); color: var(--acc-ink,var(--ink)); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.kick.sub::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--acc); }
h2 { font-size: var(--t-h2); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; color: var(--fg3); }
h2 b { font-weight: 500; color: var(--fg); }
.lead { margin-top: var(--s-lead); max-width: 560px; font-size: var(--t-lead); line-height: 1.35; letter-spacing: -0.015em; color: var(--fg2); }
.after { margin-top: var(--s-in); }
.head-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid; border-radius: 999px; padding: 12px 20px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; background: transparent; color: var(--fg); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.btn svg { width: 11px; height: 11px; }
.btn:hover { background: var(--fg); color: var(--bgM); border-color: var(--fg); }
.btn.solid { background: var(--fg); color: var(--bgM); border-color: var(--fg); transition: background .25s,border-color .25s,transform .45s var(--ease); }
.btn.solid:hover { background: color-mix(in srgb,var(--fg) 82%,var(--bgM)); border-color: color-mix(in srgb,var(--fg) 82%,var(--bgM)); transform: translateY(-2px); }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding-top: 32px; }
.navr { display: flex; align-items: center; gap: 10px; }
.logo img { display: block; height: clamp(30px, 2.7vw, 40px); width: auto; }
.status { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); outline: none; }
.status::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: var(--green); opacity: 0.35; animation: 2s ease-out 0s infinite normal none running pulse; }
.status::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px); white-space: nowrap; background: var(--fg); color: var(--bgM); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 7px 11px; border-radius: 7px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.btn.cta { margin-top: 40px; border-radius: 999px; padding: 7px 7px 7px 24px; gap: 14px; font-size: 16px; background: var(--fg); color: var(--bgM); border-color: var(--fg); transition: transform .45s var(--ease); }
.btn.cta:hover { transform: translateY(-3px); }
.ava { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; background: url("/assets/747b846abd.jpg") center center / cover no-repeat rgb(238, 238, 238); transition: transform .45s var(--ease); }
.btn.cta:hover .ava { transform: scale(1.1) rotate(-5deg); }
.foot { position: relative; isolation: isolate; }
.scard { position: relative; display: block; aspect-ratio: 5104 / 3138; border-radius: 5.9% / 9.6%; container-type: inline-size; overflow: hidden; color: rgb(255, 255, 255); isolation: isolate; }
.sc-define { background: var(--cob); color: rgb(255, 255, 255); }
.sc-build { background: var(--pink); color: var(--ink); }
.sc-grow { background: var(--acid); color: var(--ink); }
.sc-build .sc-logo, .sc-grow .sc-logo { filter: brightness(0); }
.sc-logo { position: absolute; right: 7%; bottom: 10%; width: 17%; height: auto; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: var(--g); }
.pcard { display: block; }
.pcard-img { display: block; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--card); }
.pcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.04); }
.pcard-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.pcard-meta b { font-size: 20px; font-weight: 500; letter-spacing: -0.025em; }
.pcard-meta span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.what { padding-top: 0px; padding-bottom: 0px; }
.hs-pin { padding: calc(var(--s-sec) / 2) 0; }
.hs-pin .head { margin-bottom: var(--s-in); }
.hs-view { padding: 0px; margin: 0px; }
.hs-track { display: grid; grid-template-columns: minmax(0px, 1fr); justify-items: center; }
.svc { --ch: clamp(420px,calc(100svh - 360px),620px); --u: calc(var(--ch) * .008); position: relative; flex: 0 0 auto; height: var(--ch); aspect-ratio: 4 / 5; border-radius: 5.6% / 4.5%; overflow: hidden; isolation: isolate; background: var(--pc); color: rgb(255, 255, 255); }
.svc[data-tone="light"] { color: var(--ink); }
.svc { cursor: pointer; }
.svc[data-img] { background: linear-gradient(transparent 30%,rgba(0,0,0,.7)),var(--img) center/cover; }
.svc-face { position: absolute; inset: 0px; display: flex; flex-direction: column; justify-content: space-between; padding: calc(6 * var(--u)); }
.svc-n { font-family: var(--mono); font-size: max(12px,calc(2.6 * var(--u))); font-weight: 500; letter-spacing: 0.06em; }
.svc-n em { font-style: normal; opacity: 0.55; }
.svc-big { position: absolute; right: -0.06em; top: -0.2em; font-size: calc(60 * var(--u)); font-weight: 900; letter-spacing: -0.08em; line-height: 1; color: transparent; -webkit-text-stroke: 2px currentcolor; opacity: 0.3; pointer-events: none; transition: transform 1s var(--ease); }
.svc:hover .svc-big { transform: translate(-10px, 10px); }
.svc-main { position: relative; }
.svc h3 { font-size: calc(12 * var(--u)); font-weight: 500; letter-spacing: -0.06em; line-height: 0.9; max-width: 9ch; }
.svc-t { margin-top: calc(3.2 * var(--u)); max-width: 30ch; font-size: max(12px,calc(3.2 * var(--u))); line-height: 1.45; opacity: 0.88; }
.svc-tags { list-style: none; display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--u)); margin: calc(4.4 * var(--u)) 0 0; padding: 0 calc(13 * var(--u)) 0 0; }
.svc-tags li { padding: calc(1.2 * var(--u)) calc(2.2 * var(--u)); border-radius: 999px; font-size: max(12px,calc(2.4 * var(--u))); font-weight: 500; border: 1.5px solid; }
.svc-plus { position: absolute; right: calc(4.8 * var(--u)); bottom: calc(4.8 * var(--u)); z-index: 3; width: max(40px,calc(10.5 * var(--u))); height: max(40px,calc(10.5 * var(--u))); border-radius: 50%; border: 0px; padding: 0px; display: grid; place-items: center; cursor: pointer; background: rgb(255, 255, 255); color: rgb(10, 10, 10); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 26px; font-weight: 400; line-height: 1; transition: transform .5s var(--ease),background .3s,color .3s; }
.svc[data-tone="light"] .svc-plus { background: rgb(10, 10, 10); color: rgb(255, 255, 255); }
.svc-plus:hover { transform: scale(1.08); }
.svc-plus span { display: block; transition: transform .5s var(--ease); }
.svc.open .svc-plus span { transform: rotate(45deg); }
.svc-more { position: absolute; inset: 0px; z-index: 2; padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(18 * var(--u)); background: var(--pc); display: flex; flex-direction: column; gap: calc(5 * var(--u)); visibility: hidden; }
.svc-more h3 { margin-bottom: calc(2 * var(--u)); font-size: calc(8 * var(--u)); }
.svc.open .svc-more { visibility: visible; }
.svc.open .svc-face { visibility: hidden; }
.svc-b h4 { font-family: var(--mono); font-size: max(11px,calc(2.4 * var(--u))); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.svc-b p { margin-top: calc(1.6 * var(--u)); font-size: max(13px,calc(3.4 * var(--u))); line-height: 1.45; }
.hs:not(.pinned) .hs-track { row-gap: var(--g); padding: 0 var(--gut); }
.hs:not(.pinned) .svc { --ch: calc(min(100vw - 2 * var(--gut),460px) * 1.3); width: min(100%, 460px); height: auto; aspect-ratio: 4 / 5.2; transform: perspective(1400px) rotateY(var(--fy,0deg)); }
.hint { margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
.launch { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 340px; margin: 0px; line-height: 1.45; font-size: 13px; color: var(--fg2); }
.launch .lb { display: inline-flex; align-items: center; gap: 8px; background: var(--fg); color: var(--bgM); border-radius: 6px; padding: 7px 12px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.launch .lb i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.of-tag.hot i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: var(--g); align-items: start; padding-bottom: 40px; }
.of { position: relative; display: flex; flex-direction: column; }
.of-panel { position: relative; z-index: 2; background: var(--card2); border: 1.5px solid var(--ink); border-radius: 28px; padding: 32px 30px 30px; }
.of-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.of-top h3 { font-size: clamp(36px, 3vw, 48px); font-weight: 500; letter-spacing: -0.055em; line-height: 1; }
.of-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.of-tag.hot { color: var(--fg); }
.of-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.of-price b { font-size: clamp(44px, 3.6vw, 56px); font-weight: 500; letter-spacing: -0.055em; line-height: 1; }
.of-price small { font-size: 13px; color: var(--fg3); }
.of-price s { font-size: 15px; color: var(--fg3); }
.of-d { margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--fg2); min-height: 4.35em; }
.of-list { list-style: none; margin: 24px 0px 0px; padding: 24px 0px 0px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.of-list li { position: relative; padding-left: 30px; }
.of-list li::before { content: ""; position: absolute; left: 0px; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' stroke='%23fff' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.of-list b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.015em; }
.of-list span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--fg3); }
.of-card { position: relative; z-index: 1; margin: calc(-61.5% + 84px) 14px 0px; transition: transform .7s var(--ease); }
.of-go { position: absolute; left: 7%; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; letter-spacing: -0.015em; }
.of-go svg { width: 12px; height: 12px; transition: transform 0.3s; }
.of-card .sc-logo { width: 15%; bottom: 20px; }
.of:hover .of-card, .of:focus-within:not(:has(.of-opts :focus)) .of-card { transform: translateY(38%) rotate(-2deg); }
.of-card:hover .of-go svg { transform: translateX(4px); }
.of-opts { margin: 24px 0px 0px; padding: 18px 0px 0px; border-top: 1px solid var(--line); min-width: 0px; }
.of-opts summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); transition: color 0.25s; }
.of-opts summary::-webkit-details-marker { display: none; }
.of-opts summary:hover, .of-opts[open] summary { color: var(--fg); }
.of-opts summary i { position: relative; width: 12px; height: 12px; }
.of-opts summary i::before, .of-opts summary i::after { content: ""; position: absolute; left: 0px; top: 5px; width: 12px; height: 1.6px; background: currentcolor; transition: transform .3s var(--ease); }
.of-opts summary i::after { transform: rotate(90deg); }
.of-opts[open] summary i::after { transform: rotate(0deg); }
.of-opts summary:focus-visible { outline: 2px solid var(--org); outline-offset: 4px; border-radius: 4px; }
.of-opts-in { display: grid; gap: 8px; margin-top: 14px; }
.of-opts label { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; transition: border-color 0.25s, background 0.25s; }
.of-opts label:hover { border-color: var(--fg3); }
.of-opts input { appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 0px; border: 1.5px solid var(--fg3); border-radius: 50%; transition: background 0.2s, border-color 0.2s; }
.of-opts input:checked { border-color: var(--fg); background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' stroke='%23fff' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.of-opts input:focus-visible { outline: 2px solid var(--org); outline-offset: 2px; }
.of-opts label:has(input:checked) { border-color: var(--fg); }
.of-opts label > span { flex: 1 1 0%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.of-opts b { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.of-opts small { font-size: 13px; color: var(--fg3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.of-price b[data-total] { font-variant-numeric: tabular-nums; }
.of-ideal { margin-top: 20px; padding: 0px 6px; font-size: 12.5px; line-height: 1.45; color: var(--fg3); transition: opacity 0.4s; }
.of-ideal b { color: var(--fg); font-weight: 500; }
.of:hover .of-ideal, .of:focus-within:not(:has(.of-opts :focus)) .of-ideal { opacity: 0; }
.fine { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--fg3); }
.fine a { text-decoration: underline; text-underline-offset: 3px; color: var(--fg); }
.sp { --fg: #fff; --fg2: #c8c8c8; --fg3: #8a8a8a; --line: #2a2a2a; --card2: #161616; --bgM: #0b0b0b; color: var(--fg); border-radius: 32px; background: rgb(11, 11, 11); padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sp .btn { margin-top: 32px; }
.faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .head { margin-bottom: 0px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 26px 4px; font-size: clamp(19px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fg); color: var(--bgM); font-weight: 400; font-size: 24px; line-height: 1; transition: transform .5s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details.closing summary::after { transform: none; }
.faq details > p { overflow: hidden; }
.faq details p { padding: 0px 4px 24px; font-size: 16px; line-height: 1.5; color: var(--fg2); max-width: 620px; }
.calw { border-radius: var(--r); overflow: hidden; background: var(--ink); padding: clamp(8px, 1.5vw, 20px); }
.calw > div { min-height: 640px; }
.calw iframe { display: block; width: 100% !important; }
.mailx { margin-top: var(--g); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 20px; }
.mailx b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.mailx span { display: block; margin-top: 4px; font-size: 14px; color: var(--fg3); }
.foot { position: relative; margin-top: calc(var(--s-sec) / 2); padding-bottom: 32px; }
.ft-in { width: 100%; padding-top: var(--s-sec); }
.clock b { font-size: 28px; font-weight: 500; letter-spacing: -0.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.clock small { font-size: 12px; color: var(--fg3); }
.ft-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: var(--s-in); padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg3); }
.ft-legal { display: flex; gap: 20px; }
.ft-legal a:hover { color: var(--fg); }
.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s,transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (max-width: 1000px) {
  .offers { grid-template-columns: minmax(0px, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; gap: 120px; padding-bottom: 110px; }
}
@media (max-width: 900px) {
  .pgrid { grid-template-columns: 1fr 1fr; }
  .faq, .sp { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .navr { gap: 6px; }
  .btn { font-size: 14px; padding: 10px 16px; }
  .pgrid { grid-template-columns: 1fr; }
  .btn.cta { font-size: 15px; }
  .ft-legal { flex-wrap: wrap; gap: 12px; }
}
@media (hover: none) {
  .of .of-card { transform: none; }
  .of .of-ideal { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { transition: none; scroll-behavior: auto; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .status::before { animation: auto ease 0s 1 normal none running none; }
}
.fnav { position: fixed; left: 50%; top: 14px; z-index: 60; display: flex; align-items: center; gap: 4px; max-width: calc(-24px + 100vw); padding: 6px; border-radius: 16px; background: rgba(37, 37, 37, 0.5); backdrop-filter: blur(12px); border: 0px; transform: translate(-50%, -160%); opacity: 0; transition: transform .7s var(--ease),opacity .5s; }
.fnav.on { transform: translate(-50%, 0px); opacity: 1; }
.fn-logo { display: grid; place-items: center; padding: 0px 12px 0px 10px; }
.fn-logo img { display: block; height: 20px; width: auto; filter: none; }
.fn-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.fn-links::-webkit-scrollbar { display: none; }
.fn-links a { padding: 9px 13px; border-radius: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; transition: background 0.3s, color 0.3s; }
.fn-links a:hover { color: rgb(255, 255, 255); }
.fn-links a.on { background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); }
.fn-cta { margin-left: 4px; padding: 9px 14px; border-radius: 10px; background: rgb(255, 255, 255); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
@media (max-width: 700px) {
  .fn-cta { display: none; }
  .fn-links a { padding: 8px 10px; font-size: 13px; }
}
.hs-pin > .wrap { width: 100%; }
.svc-main { transition: opacity 0.4s; }
.svc.open .svc-main { opacity: 0; }
html.cur-on, html.cur-on * { cursor: none !important; }
html.cur-on input, html.cur-on textarea, html.cur-on [contenteditable] { cursor: text !important; }
.cur, .cur-dot { position: fixed; left: 0px; top: 0px; z-index: 90; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity 0.3s; }
.cur { width: 38px; height: 38px; margin: -19px 0px 0px -19px; border: 1.5px solid var(--fg); display: grid; place-items: center; transform: translate3d(var(--x,-99px),var(--y,-99px),0) scale(var(--s,1)); transition: opacity .3s,width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background .3s,border-color .3s; }
.cur-dot { width: 5px; height: 5px; margin: -2.5px 0px 0px -2.5px; background: var(--fg); transform: translate3d(var(--x,-99px),var(--y,-99px),0); transition: opacity 0.3s, transform; }
.cur.on, .cur-dot.on { opacity: 1; }
.cur { box-shadow: 0 0 0 1px color-mix(in srgb,var(--bg) 35%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--bg) 35%,transparent); }
.cur-dot { box-shadow: 0 0 0 1px color-mix(in srgb,var(--bg) 40%,transparent); }
.cur.link { opacity: 0 !important; }
.cur.link ~ .cur-dot { width: 8px; height: 8px; margin: -4px 0px 0px -4px; }
.cur-l { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bg); opacity: 0; transition: opacity 0.25s; }
.cur.press { --s: .82; }
@media (hover: none), (pointer: coarse) {
  .cur, .cur-dot { display: none; }
}
@media (min-width: 701px) {
  .fnav { padding: 8px; gap: 6px; border-radius: 18px; }
  .fn-logo { padding: 0px 14px 0px 12px; }
  .fn-logo img { height: 24px; }
  .fn-links a { padding: 11px 16px; font-size: 15px; border-radius: 11px; }
  .fn-cta { padding: 11px 18px; font-size: 14px; border-radius: 11px; }
}
html { scroll-padding-top: 0px; }
@media (min-width: 801px) and (max-height: 1150px) {
  .svc { --ch: clamp(320px,calc(100svh - 500px),620px); }
}
@media (min-width: 801px) and (max-height: 900px) {
  .svc { --ch: clamp(300px,calc(100svh - 460px),620px); }
}
html.lenis, html.lenis body { height: auto; }
.of:has(.sc-define) { --oc: var(--cob); --ocx: #fff; }
.of:has(.sc-build) { --oc: var(--pink); --ocx: #0b0b0b; }
.of:has(.sc-grow) { --oc: var(--acid); --ocx: #0b0b0b; }
.of-list li::before { background-color: var(--oc,var(--fg)); }
.of:has(.sc-grow) .of-list li::before, .of:has(.sc-grow) .of-opts input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' stroke='%230b0b0b' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.of:has(.sc-build) .of-list li::before, .of:has(.sc-build) .of-opts input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' stroke='%230b0b0b' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.of-tag:not(.hot)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oc); }
.of-tag.hot i { background: var(--oc); }
.of-opts input:checked { background-color: var(--oc,var(--fg)); border-color: var(--oc,var(--fg)); }
.of-opts label:has(input:checked) { border-color: var(--oc,var(--fg)); }
.of-opts summary i { color: var(--oc,currentColor); }
.of-opts summary:hover i, .of-opts[open] summary i { color: var(--oc,currentColor); }
.hs.list .hs-pin { padding: calc(var(--s-sec) / 2) 0; }
.hs.list .hs-track { display: block; max-width: var(--wrap); margin: 0px auto; padding: 0 var(--gut); border-top: 1px solid var(--line); }
.hs.list .svc, .hs.list .svc[data-tone], .hs.list .svc[data-img] { --u: 8px; width: 100%; height: auto; aspect-ratio: auto; max-width: none; border-radius: 0px; overflow: visible; transform: none; background: none; color: var(--fg); cursor: default; display: grid; grid-template-columns: minmax(64px, 0.5fr) minmax(0px, 3fr) minmax(0px, 3fr); column-gap: clamp(24px, 4vw, 64px); align-items: start; padding: clamp(28px, 3.6vw, 48px) 0px; border-bottom: 1px solid var(--line); }
.hs.list .svc-face, .hs.list .svc-more, .hs.list .svc-top, .hs.list .svc-main { display: contents; }
.hs.list .svc-face, .hs.list .svc-more { visibility: visible; opacity: 1; position: static; padding: 0px; background: none; }
.hs.list .svc-big, .hs.list .svc-plus, .hs.list .svc-more h3 { display: none; }
.hs.list .svc-n { grid-column: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg2); }
.hs.list .svc-n::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--pc); flex: 0 0 auto; }
.hs.list .svc-n em { display: none; }
.hs.list .svc h3 { grid-area: 1 / 2; max-width: none; font-size: clamp(30px, 3.6vw, 52px); line-height: 1; }
.hs.list .svc-t { grid-area: 2 / 2; margin-top: 14px; max-width: 44ch; font-size: clamp(15px, 1.3vw, 18px); color: var(--fg2); opacity: 1; }
.hs.list .svc-tags { grid-area: 3 / 2; margin: 20px 0px 0px; padding: 0px; gap: 8px; }
.hs.list .svc-tags li { padding: 5px 12px; font-size: 12px; border: 1px solid var(--line); color: var(--fg2); }
.hs.list .svc-b { grid-column: 3; }
.hs.list .svc-b:nth-of-type(1) { grid-row: 1 / span 2; }
.hs.list .svc-b:nth-of-type(2) { grid-row: 3; }
.hs.list .svc-b h4 { font-size: 11px; color: var(--fg3); opacity: 1; }
.hs.list .svc-b p { margin-top: 8px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.5; color: var(--fg2); }
@media (max-width: 800px) {
  .hs.list .svc, .hs.list .svc[data-tone], .hs.list .svc[data-img] { grid-template-columns: 1fr; row-gap: 0px; }
  .hs.list .svc-n, .hs.list .svc h3, .hs.list .svc-t, .hs.list .svc-tags, .hs.list .svc-b, .hs.list .svc-b:nth-of-type(1), .hs.list .svc-b:nth-of-type(2) { grid-area: auto / 1; }
  .hs.list .svc-n { margin-bottom: 14px; }
  .hs.list .svc-b { margin-top: 16px; }
}
.hs.list .svc, .hs.list .svc[data-tone], .hs.list .svc[data-img] { grid-template-columns: minmax(56px, 0.4fr) minmax(0px, 3fr) minmax(0px, 3fr) 44px; align-items: center; padding: clamp(16px, 1.8vw, 24px) 0px; cursor: pointer; position: relative; row-gap: 0px; transition: background 0.3s; }
.hs.list .svc:hover .svc-n { color: var(--fg); }
.hs.list .svc h3 { grid-area: 1 / 2 / span 2; font-size: clamp(26px, 2.8vw, 40px); }
.hs.list .svc-t { grid-area: 1 / 3; margin-top: 0px; align-self: end; }
.hs.list .svc-tags { grid-area: 2 / 3; margin: 10px 0px 0px; align-self: start; }
.hs.list .svc-n { grid-row: 1 / span 2; }
.hs.list .svc-plus { display: grid; position: static; grid-area: 1 / 4 / span 2; justify-self: end; width: 36px; height: 36px; border: 1px solid var(--line); background: none; color: var(--fg); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.hs.list .svc[data-tone] .svc-plus { background: none; color: var(--fg); }
.hs.list .svc.open .svc-plus { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hs.list .svc[data-tone]:hover .svc-plus, .hs.list .svc[data-tone].open:hover .svc-plus { background: var(--pc); border-color: var(--pc); color: rgb(255, 255, 255); }
.hs.list .svc[data-tone="light"]:hover .svc-plus { color: var(--ink); }
.hs.list .svc-b, .hs.list .svc-b:nth-of-type(1), .hs.list .svc-b:nth-of-type(2) { display: none; grid-row: 3; margin-top: 18px; }
.hs.list .svc-b:nth-of-type(1) { grid-column: 2; }
.hs.list .svc-b:nth-of-type(2) { grid-column: 3; }
.hs.list .svc.open .svc-b { display: block; animation: svcIn .45s var(--ease); }
@media (max-width: 800px) {
  .hs.list .svc, .hs.list .svc[data-tone], .hs.list .svc[data-img] { grid-template-columns: 1fr; align-items: start; padding: 20px 52px 20px 0px; }
  .hs.list .svc-n, .hs.list .svc h3, .hs.list .svc-t, .hs.list .svc-tags, .hs.list .svc.open .svc-b, .hs.list .svc-b:nth-of-type(1), .hs.list .svc-b:nth-of-type(2) { grid-area: auto / 1; }
  .hs.list .svc-n { margin-bottom: 8px; }
  .hs.list .svc-t { margin-top: 8px; align-self: start; }
  .hs.list .svc-plus { position: absolute; right: 0px; top: 18px; grid-area: auto; }
  .hs.list .svc-b { margin-top: 14px; }
}
.hs.list .svc-plus { padding: 0px; }
.hs.list .svc-plus span { position: relative; display: block; width: 14px; height: 14px; font-size: 0px; line-height: 0; color: inherit; }
.hs.list .svc-plus span::before, .hs.list .svc-plus span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -0.8px 0px 0px -7px; border-radius: 1px; background: currentcolor; }
.hs.list .svc-plus span::after { transform: rotate(90deg); }
.hs.list { --pi: clamp(14px,2vw,28px); }
.hs.list .svc, .hs.list .svc[data-tone], .hs.list .svc[data-img] { --ct: #fff; grid-template-columns: minmax(48px, 0.35fr) minmax(0px, 1.3fr) minmax(0px, 1fr) minmax(0px, 1fr) 44px; column-gap: clamp(16px, 2.4vw, 40px); align-items: center; margin: 0 calc(-1 * var(--pi)); padding: clamp(22px,2.4vw,32px) var(--pi); border-bottom: 0px; border-radius: var(--rx-l,6px); position: relative; transition: background .45s var(--ease),color .45s var(--ease),padding .45s var(--ease); }
.hs.list .svc[data-tone="light"] { --ct: #0b0b0b; }
.hs.list .svc::after { content: ""; position: absolute; left: var(--pi); right: var(--pi); bottom: 0px; height: 1px; background: var(--line); transition: opacity 0.3s; }
.hs.list .svc.open::after { opacity: 0; }
.hs.list .svc:not(.open):hover { background: color-mix(in srgb,var(--fg) 4%,transparent); }
.hs.list .svc[data-tone].open { background: var(--pc); color: var(--ct); padding-top: clamp(30px, 3.2vw, 44px); padding-bottom: clamp(32px, 3.4vw, 48px); --fg: var(--ct); --fg2: color-mix(in srgb,var(--ct) 80%,transparent); --fg3: color-mix(in srgb,var(--ct) 62%,transparent); --line: color-mix(in srgb,var(--ct) 28%,transparent); }
.hs.list .svc.open .svc-n::before { background: var(--ct); }
.hs.list .svc h3 { grid-area: 1 / 2; font-size: clamp(26px, 2.8vw, 40px); }
.hs.list .svc-n { grid-row: 1; }
.hs.list .svc-tags { grid-area: 1 / 3 / auto / span 2; margin: 0px; align-self: center; }
.hs.list .svc-t { display: none; }
.hs.list .svc-plus { grid-area: 1 / 5; }
.hs.list .svc.open .svc-t, .hs.list .svc.open .svc-b { display: block; grid-row: 2; margin-top: clamp(28px, 3vw, 44px); align-self: start; animation: svcIn .5s var(--ease); }
.hs.list .svc.open .svc-t { grid-column: 2; max-width: 34ch; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.45; color: var(--fg); }
.hs.list .svc.open .svc-b:nth-of-type(1) { grid-area: 2 / 3; }
.hs.list .svc.open .svc-b:nth-of-type(2) { grid-area: 2 / 4; }
.hs.list .svc-b h4 { color: var(--fg3); }
.hs.list .svc-b p { color: var(--fg); }
.hs.list .svc.open .svc-plus { background: var(--ct); color: var(--pc); border-color: var(--ct); }
.hs.list .svc[data-tone].open:hover .svc-plus { background: var(--ct); color: var(--pc); border-color: var(--ct); }
.hs.list .svc.open .svc-tags li { border-color: var(--line); color: var(--fg); }
@media (max-width: 800px) {
  .hs.list .svc, .hs.list .svc[data-tone], .hs.list .svc[data-img] { grid-template-columns: 1fr; align-items: start; padding: 22px calc(var(--pi) + 52px) 22px var(--pi); }
  .hs.list .svc[data-tone].open { padding-top: 26px; padding-bottom: 30px; }
  .hs.list .svc-n, .hs.list .svc h3, .hs.list .svc-tags, .hs.list .svc.open .svc-t, .hs.list .svc.open .svc-b, .hs.list .svc.open .svc-b:nth-of-type(1), .hs.list .svc.open .svc-b:nth-of-type(2) { grid-area: auto / 1; }
  .hs.list .svc-tags { margin-top: 14px; }
  .hs.list .svc.open .svc-t { margin-top: 22px; max-width: none; }
  .hs.list .svc.open .svc-b { margin-top: 20px; }
  .hs.list .svc-plus { position: absolute; right: var(--pi); top: 20px; grid-area: auto; }
}
.hs.list .hs-track { border-top: 0px; }
.hs.list .svc::after { left: 0px; right: 0px; }
.hs.list .svc:first-child::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background: var(--line); transition: opacity 0.3s; }
.hs.list .svc:first-child.open::before { opacity: 0; }
.hs.list .svc { transition: background .45s var(--ease),color .45s var(--ease),padding .45s var(--ease),margin .45s var(--ease); }
.hs.list .svc[data-tone].open { margin-top: 12px; margin-bottom: 12px; }
:root { --rx-s: 2px; --rx-m: 4px; --rx-l: 6px; }
.kick i, .launch .lb, .status::after { border-radius: var(--rx-s); }
.btn, .btn.cta, .sub .btn.solid, .svc-tags li, .sx-toc a, .sx-card .cat { border-radius: var(--rx-m); }
.of-opts label, .fn-links a, .fn-cta { border-radius: var(--rx-m); }
.scard, .svc, .pcard-img, .calw, .of-panel, .sp, .mailx, .fnav, .sx-cover, .sx-fig img, .sx-ph, .sx-next-img, .sx-card, .sx-row--video video { border-radius: var(--rx-l); }
:root { --c-define: var(--cob); --c-build: var(--orng); --c-grow: var(--acid); --acc: var(--fg); --acc-ink: var(--bg); --green: var(--fg); }
html[data-theme="light"], [data-theme="light"] { --bg: #ffffff; --fg: #0b0b0b; --fg2: #4a4a4a; --fg3: #8a8a8a; --line: #e4e4e4; --card: #f4f4f3; --card2: #ffffff; }
.kick i { background: var(--fg); color: var(--bg); }
.kick.sub::before { background: var(--fg); }
.hx { position: relative; height: 100svh; min-height: 600px; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(84px, 11vh, 120px); padding-bottom: clamp(120px, 22vh, 260px); box-sizing: border-box; isolation: isolate; background: var(--bg); }
.hx h1 { font-size: var(--t-h1); font-weight: 500; letter-spacing: -0.055em; line-height: 0.95; text-wrap: balance; }
.hx .btn.cta { margin-top: 0px; }
.status, .status::before { background: var(--fg); border-radius: 0px; }
.launch .lb i { background: var(--bgM); }
.hs.list .svc[data-tone].open { background: var(--card); --ct: #0b0b0b; color: rgb(11, 11, 11); }
.hs.list .svc .svc-n::before, .hs.list .svc.open .svc-n::before { background: var(--fg); }
.hs.list .svc.open .svc-plus, .hs.list .svc[data-tone].open:hover .svc-plus { background: rgb(11, 11, 11); color: rgb(255, 255, 255); border-color: rgb(11, 11, 11); }
.sc-define { background: var(--c-define); color: rgb(255, 255, 255); }
.sc-build { background: var(--c-build); color: var(--ink); }
.sc-grow { background: var(--c-grow); color: var(--ink); }
.of:has(.sc-define) { --oc: var(--c-define); }
.of:has(.sc-build) { --oc: var(--c-build); }
.of:has(.sc-grow) { --oc: var(--c-grow); }
.fnav { background: rgba(11, 11, 11, 0.86); }
h2, h2 b { color: var(--fg); }
.lead { color: var(--fg2); }
.kick { gap: 10px; letter-spacing: 0.06em; font-size: 12px; }
.kick i { min-width: 0px; height: auto; padding: 0px; background: none; color: var(--fg3); font-size: 12px; font-weight: 500; border-radius: 0px; }
.kick::before, .kick.sub::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 0px; background: var(--px,var(--fg)); }
.kick::after { content: ""; width: 6px; height: 6px; margin-left: 6px; background: var(--px2,var(--px)); box-shadow: 12px -6px 0 var(--px3,var(--px)),24px 0 0 var(--px); }
.kick.sub::after { display: none; }
#work { --px: var(--cob); --px2: var(--pink); --px3: var(--acid); }
#what { --px: var(--orng); --px2: var(--cob); --px3: var(--pink); }
#team { --px: var(--pink); --px2: var(--acid); --px3: var(--orng); }
#why { --px: var(--cob); --px2: var(--orng); --px3: var(--acid); }
#plans { --px: var(--orng); --px2: var(--acid); --px3: var(--pink); }
#agencies { --px: var(--acid); --px2: var(--pink); --px3: var(--cob); }
#faq { --px: var(--pink); --px2: var(--cob); --px3: var(--orng); }
#book { --px: var(--cob); --px2: var(--acid); --px3: var(--pink); }
.foot { --px: var(--orng); --px2: var(--cob); --px3: var(--acid); }
.launch .lb i { background: var(--pink); border-radius: 0px; }
.status, .status::before { background: var(--fg); }
.goo .gw { display: inline-block; line-height: 0; white-space: nowrap; }
.goo .gw svg { display: inline-block; height: var(--gw-h); margin: var(--gw-mt) calc(var(--gw-p) * -1) var(--gw-mb); vertical-align: baseline; fill: currentcolor; overflow: visible; max-width: none; }
/* mot absent du dictionnaire : police goo (tools/goo/goofont.py), même effet que les tracés */
@font-face { font-family: 'Sygh Goo'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/goo.woff') format('woff'); }
.goo .gw-txt { line-height: inherit; font-family: 'Sygh Goo', var(--f); font-weight: 400; letter-spacing: 0; }
.goo { letter-spacing: 0px; word-spacing: -0.035em; }
.goo .gw { opacity: 0; filter: blur(10px); transform: translateX(-0.3em); transition: opacity 0.45s, filter 0.6s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.goo .gw.on { opacity: 1; filter: blur(0px); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .goo .gw { opacity: 1; filter: none; transform: none; transition: none; }
}
h2.goo { line-height: 0.9; }
.hx h1.goo { line-height: 0.92; }
.launch .lb i, .of-tag.hot i { background: var(--pink); }
.svc-plus, .faq summary::after, .of-list li::before, .of-opts input, .status, .status::before { border-radius: var(--rx-s); }
.of-panel, .of-opts label { border-radius: var(--rx-l); }
.of-opts label { border-radius: var(--rx-m); }
.svc-main h3, .faq summary, .of-panel .of-price { letter-spacing: -0.045em; }
.of-panel h3.goo { line-height: 0.9; }
.kick, .launch .lb, .hint, .of-opts > span, .svc-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.btn { border-radius: var(--rx-m); }
.of-tag i, .of-tag:not(.hot)::before, .of-tag.hot i, .status, .status::before { border-radius: var(--rx-s); }
:root { --r: 8px; --rx-s: var(--r); --rx-m: var(--r); --rx-l: var(--r); }
*, ::before, ::after { border-radius: min(var(--r),25%) !important; }
.ava, .cur, .cur-dot { border-radius: 50% !important; }
.kick::after { display: none; }
:root { --s-sec: clamp(128px,13vw,200px); }
.block { margin-top: var(--s-sec); }
.of-list, .of-opts, .faq details, .ft-bot { border-radius: 0px !important; }
.of-list li::before, .of-opts input { border-radius: 5px !important; }
.hx { justify-content: flex-end; padding-top: 0px; padding-bottom: clamp(64px, 9vh, 96px); }
.hx h1 { width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; position: absolute !important; }
.ab { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.ab .head { margin-bottom: 0px; }
.ab-st { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; letter-spacing: -0.035em; font-weight: 500; color: var(--fg); }
.ab-st span { color: var(--fg3); }
.ab-sig { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: clamp(28px, 3vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); }
.ab-ava { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.ab-name { display: grid; gap: 2px; margin-right: auto; }
.ab-name b { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.ab-name small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
.why { padding: var(--s-sec) 0; }
.why .lead { max-width: 520px; }
.st { list-style: none; margin: 0px; padding: 0px; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: var(--g,20px); }
.st li { border-top: 1.5px solid var(--c); padding-top: 22px; }
.st-n { display: block; min-height: 0.9em; margin-bottom: 28px; color: var(--c); font-size: clamp(56px, 6vw, 96px); line-height: 0.9; }
.st h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; color: var(--fg); }
.st p { margin-top: 8px; max-width: 30ch; font-size: 15px; line-height: 1.45; color: var(--fg2); }
.offers { align-items: stretch; padding-bottom: 24px; }
.of { background: var(--oc); color: var(--ocx); border-radius: var(--rx-l); padding: clamp(24px, 2.4vw, 34px); transition: opacity .7s,transform .5s var(--ease); }
.of:hover { transform: translateY(-6px); }
.of-panel { flex: 1 1 0%; display: flex; flex-direction: column; background: none; border: 0px; border-radius: 0px; padding: 0px; color: inherit; }
.of-top h3 { font-size: clamp(56px, 5.4vw, 80px); color: inherit; }
.of-tag, .of-tag.hot { color: inherit; opacity: 0.8; }
.of-tag:not(.hot)::before, .of-tag.hot i { background: currentcolor; }
.of-price { margin-top: 28px; gap: 6px 10px; }
.of-price b { font-size: clamp(40px, 3.4vw, 50px); font-weight: 600; letter-spacing: -0.05em; }
.of-price small, .of-price s { color: inherit; opacity: 0.65; }
.of-d { color: inherit; opacity: 0.85; }
.of-list { margin-top: 22px; padding-top: 22px; border-top: 1.5px solid color-mix(in srgb, currentcolor 30%, transparent 70%); gap: 12px; }
.of-list li { padding-left: 22px; }
.of-list li::before { width: 8px; height: 8px; top: 0.5em; border-radius: 0px !important; background: none currentcolor !important; }
.of-opts { border-top: 1.5px solid color-mix(in srgb, currentcolor 30%, transparent 70%); }
.of-opts summary, .of-opts summary i, .of-opts summary:hover i, .of-opts[open] summary i { color: inherit !important; }
.of-opts label { border-color: color-mix(in srgb, currentcolor 30%, transparent 70%); }
.of-opts label:hover, .of-opts label:has(input:checked) { border-color: currentcolor; }
.of-opts input { border-color: currentcolor; }
.of-opts input:checked { box-shadow: inset 0 0 0 3px var(--oc); background: none currentcolor !important; border-color: currentcolor !important; }
.of-opts small { color: inherit; opacity: 0.7; }
.of-card { margin: 22px 0px 0px; aspect-ratio: auto; container-type: normal; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0px 20px; border-radius: var(--rx-m); background: var(--ink); color: rgb(255, 255, 255); transform: none !important; }
.of-card:hover { background: rgb(0, 0, 0); }
.of-go { position: static; }
.of-card .sc-logo { position: static; width: 44px; margin-left: auto; filter: none; }
.of-ideal { margin-top: 16px; padding: 0px; color: inherit; opacity: 0.8; }
.of-ideal b { color: inherit; }
.of:hover .of-ideal, .of:focus-within:not(:has(.of-opts :focus)) .of-ideal { opacity: 0.8; }
.chat.on .faq-src { display: none; }
.chat-win { background: var(--card); border: 1px solid var(--line); border-radius: var(--rx-l); overflow: hidden; }
.chat-bar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
.chat-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.chat-bar span { display: grid; gap: 2px; }
.chat-bar b { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.chat-bar small { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
.chat-bar small i { width: 7px; height: 7px; background: var(--acid); }
.chat-reset { margin-left: auto; padding: 6px 0px; border: 0px; background: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
.chat-reset:hover { color: var(--fg); }
.chat-log { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; min-height: 240px; max-height: min(460px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.msg { max-width: min(88%, 520px); padding: 14px 18px; font-size: 16px; line-height: 1.45; letter-spacing: -0.01em; border-radius: var(--rx-l); animation: msgin .4s var(--ease) both; }
.msg a { text-decoration: underline; text-underline-offset: 3px; }
.msg.t { align-self: flex-start; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-bottom-left-radius: var(--rx-s); }
.msg.u { align-self: flex-end; background: var(--ink); color: rgb(255, 255, 255); border-bottom-right-radius: var(--rx-s); }
.msg.dots { display: flex; gap: 5px; padding: 18px; }
.msg.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg3); animation: 1s ease 0s infinite normal none running blink; }
.msg.dots i:nth-child(2) { animation-delay: 0.15s; }
.msg.dots i:nth-child(3) { animation-delay: 0.3s; }
.chat-opts { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 20px; background: var(--bg); border-top: 1px solid var(--line); }
.chat-opts.busy { opacity: 0.45; pointer-events: none; }
.chip { font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-align: left; padding: 10px 16px; border: 1.5px solid var(--fg); border-radius: var(--rx-m); background: transparent; color: var(--fg); cursor: pointer; transition: background 0.2s, color 0.2s; }
.chip:hover { background: var(--fg); color: var(--bg); }
.chip.more { border-style: dashed; border-color: var(--fg3); color: var(--fg3); }
.chip.cta { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.chip.cta:hover { background: var(--ink); border-color: var(--ink); color: var(--acid); }
@media (prefers-reduced-motion: reduce) {
  .msg { animation: auto ease 0s 1 normal none running none; }
  .msg.dots i { animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 1000px) {
  .offers { gap: 16px; padding-bottom: 24px; }
  .st { grid-template-columns: 1fr 1fr; row-gap: 44px; }
}
@media (max-width: 900px) {
  .ab { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
  .st { grid-template-columns: 1fr; }
  .msg { max-width: 94%; }
}
.btn { border-radius: 999px !important; }
.btn.cta { border-radius: 999px !important; }
.why, .pnl, #faq { position: relative; margin-left: 0px; margin-right: 0px; --en: 1; --ex: 0; background: none !important; border-radius: 0px !important; }
.why::before, .pnl::before, #faq::before, .why::after, .pnl::after, #faq::after { content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; }
.why::before, .pnl::before, #faq::before { background: var(--pv); }
.why::after, .pnl::after, #faq::after { background: var(--pb); transform-origin: 50% 0px; transform: scale(calc(.82 + .18 * var(--en))); will-change: transform; border-radius: var(--rp) var(--rp) 0 0 !important; }
.why { --pv: #fff; --pb: #0b0b0b; }
.pnl { --pv: #0b0b0b; --pb: var(--card); }
#faq { --pv: var(--card); --pb: var(--bg); }
.why > *, .pnl > *, #faq > * { transform-origin: 50% 0px; transform: translate3d(0,calc((1 - var(--en)) * 80px - var(--ex) * 36px),0) scale(calc(1 - var(--ex) * .05)); opacity: calc(var(--en) * (1 - var(--ex) * .55)); will-change: transform, opacity; }
:root { --s-pan: calc(var(--s-sec) * .75); }
.why, .pnl, #faq { padding-top: var(--s-pan); }
.why, .pnl { padding-bottom: calc(var(--s-pan) + var(--rp)); }
#faq { padding-bottom: calc(var(--s-sec) / 2); }
.why { margin-top: 0px; margin-bottom: 0px; z-index: 1; }
.pnl { margin-top: calc(var(--rp) * -1); z-index: 2; }
#faq { margin-top: calc(var(--rp) * -1); z-index: 3; }
.pcard-img, .svc, .of, .chat-win, .calw, .mailx { border-radius: var(--rpm) !important; }
.of-opts label { border-radius: 14px !important; }
.of-card { border-radius: 999px !important; }
.chip { border-radius: 999px !important; }
.msg { border-radius: 18px !important; }
.msg.t { border-bottom-left-radius: 6px !important; }
.msg.u { border-bottom-right-radius: 6px !important; }
.cmp-h { margin-top: var(--s-block); margin-bottom: var(--s-head); }
.why .lead { margin-bottom: 0px; }
.why .wrap.head { margin-bottom: var(--s-head) !important; }
.cmpw { overflow-x: auto; margin: 0px -4px; padding: 0px 4px; }
.cmp { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0px; font-size: 15px; }
.cmp th, .cmp td { padding: 20px 22px; text-align: left; vertical-align: top; font-weight: 400; line-height: 1.35; color: var(--fg2); border-bottom: 1px solid var(--line); }
.cmp th, .cmp td { border-radius: 0px !important; }
.cmp thead th, .cmp thead td { padding-top: 28px; padding-bottom: 22px; font-size: 17px; color: var(--fg3); }
.cmp tbody th { width: 20%; color: var(--fg3); }
.cmp .me { background: rgb(26, 26, 26); color: var(--fg); font-weight: 500; }
.cmp thead .me { border-radius: var(--rpm) var(--rpm) 0 0 !important; }
.cmp tbody tr:last-child .me { border-radius: 0 0 var(--rpm) var(--rpm) !important; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0px; }
.cmp .me img { display: block; height: 22px; width: auto; }
.ft-bot .clock b { font-size: inherit; letter-spacing: 0px; }
.st li { border-top: 1px solid var(--line); }
.st-n { color: var(--fg); }
.st h3::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--c); vertical-align: middle; transform: translateY(-1px); }
.pnl .of { background: var(--bg); color: var(--ink); }
.pnl .of:has(.sc-grow) { background: rgb(11, 11, 11); color: rgb(255, 255, 255); }
.pnl .of-list li::before { outline: rgba(0, 0, 0, 0.1) solid 1px; background: var(--oc) !important; }
.pnl .of-opts input:checked { box-shadow: none; background: var(--oc) !important; border-color: var(--oc) !important; }
.pnl .of:has(.sc-grow) .of-card { background: var(--acid); color: var(--ink); }
.pnl .of:has(.sc-grow) .of-card .sc-logo { filter: brightness(0); }
.hx { height: 100svh; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(16px, 3vh, 28px); padding: clamp(88px, 12vh, 112px) 0px clamp(28px, 5vh, 48px); }
.hx { height: auto; min-height: 100svh; }
.hx .hx-main { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: clamp(40px, 8vh, 84px); }
.hx .hx-main h1 { width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0px; font-size: clamp(52px, 8.6vw, 148px); line-height: 0.9; letter-spacing: -0.055em; font-weight: 500; color: var(--fg3); position: static !important; }
.hx .hx-main h1 b { color: var(--fg); }
.hx .hx-main h1.goo { line-height: 0.88; }
.hx-side { display: grid; justify-items: center; gap: 18px; max-width: 360px; padding-bottom: 0.6vw; }
.hx .hx-side .btn.cta { background: var(--hxfg); color: var(--hxbg); transition: background-color 0.5s, color 0.5s; }
.hx-side p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; letter-spacing: -0.01em; color: var(--fg2); }
.hx-side .btn.cta { margin-top: 0px; justify-self: center; }
.hx > .wrap { width: 100%; }
.kick { display: none !important; }
.hs.list .svc .svc-n::before, .hs.list .svc.open .svc-n::before { background: var(--pc); }
.hs.list .svc.open .svc-tags li { background: var(--pc); border-color: var(--pc); color: rgb(255, 255, 255); }
.hs.list .svc[data-tone="light"].open .svc-tags li { color: var(--ink); }
.hs.list .svc-tags li { transition: background 0.3s, color 0.3s, border-color 0.3s; }
.hx { justify-content: center; gap: 0px; padding-top: clamp(96px, 14vh, 140px); }
.hx .hx-main h1 { font-size: clamp(56px, 9.2vw, 170px); }
.hx .hx-main { align-items: center; }
.of-top { flex-direction: column; align-items: flex-start; gap: 14px; }
.of-top .of-tag { order: -1; }
.hx { padding-bottom: calc(var(--s-sec) / 2); }
.hs.list .hs-pin { padding-bottom: calc(var(--s-sec) / 2); }
.hs-pin .head, .hs.list .hs-pin .head { margin-bottom: var(--s-head); }
.ab { align-items: start; }
:root { --rp: 60px; --rpm: 28px; }
.dk { --bg: #0b0b0b; --fg: #fff; --fg2: #c8c8c8; --fg3: #8a8a8a; --line: #2a2a2a; --card: #161616; --card2: #1c1c1c; --bgM: #0b0b0b; background: var(--bg); color: var(--fg); }
.pg { position: relative; z-index: 2; background: var(--bg); margin-bottom: var(--foot-h,0px); border-radius: 0 0 var(--rp) var(--rp) !important; }
footer.foot { position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 1; margin: 0px; padding: 0px; isolation: isolate; overflow: hidden; background: linear-gradient(rgb(0, 0, 0) 0%, rgb(27, 27, 27) 100%); color: var(--fg); }
html.foot-static .pg { margin-bottom: 0px; }
html.foot-static footer.foot { position: relative; }
.ft-in { width: 100%; padding-top: clamp(36px, 5vw, 72px); }
.ft-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; font-size: 15px; }
.ft-top a { color: var(--fg2); transition: color 0.2s; }
.ft-top a:hover { color: var(--fg); }
.ft-soc { display: flex; gap: 24px; }
.ft-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 18px 0px 0px; padding: 0px; border: 0px; font-size: 13px; color: var(--fg3); }
.ft-bot .clock b { font-weight: 500; color: var(--fg2); }
.ft-legal { display: flex; gap: 20px; }
.ft-legal a:hover { color: var(--fg); }
.ft-sigw { --lw: min(112vw,170svh); display: block; position: relative; width: 100vw; height: calc(var(--lw) * .305); margin: clamp(24px, 3vw, 44px) calc(50% - 50vw) 0px; line-height: 0; overflow: hidden; }
.ft-sig { display: block; width: var(--lw); max-width: none; height: auto; margin-left: calc((100vw - var(--lw)) / 2); fill: rgb(244, 244, 242); will-change: transform; transform-origin: 50% 100%; }
@media (max-width: 560px) {
  .ft-legal { flex-wrap: wrap; gap: 10px 16px; }
}
footer.foot { border-radius: 0px !important; }
footer.foot { padding-top: var(--rp); }
html.foot-static footer.foot { margin-top: calc(var(--rp) * -1); }
@keyframes pulse { 
  0% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes svcIn { 
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes msgin { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes blink { 
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

/* Lenis (défilement doux) : classes ajoutées par la bibliothèque elle-même, donc absentes de nos sources */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- hero : le titre reste fixe, seuls les objets bougent ---------- */
.hx h1.goo .gw, .hx h1.goo .gw.on { transition: none; animation: none; opacity: 1; filter: none; transform: none; }

/* ---------- hero : fond uni + objets autocollants (hero-objects.js) ---------- */
.hx { --hxbg: #ffffff; --hxfg: #0b0b0b; background: var(--hxbg); color: var(--hxfg); overflow: clip; transition: background-color 0.5s, color 0.5s; }
.hx .hx-main h1, .hx .hx-main h1 b { color: var(--hxfg); font-size: clamp(56px, 10.4vw, 190px); }
.hx-side p { color: var(--hxfg); opacity: 0.78; }
.hx > .wrap { position: relative; pointer-events: none; }
.hx .hx-main h1 { position: relative; z-index: 1; }
.hx-side { position: relative; z-index: 4; }
.hx-side p, .hx .btn.cta { pointer-events: auto; }
.hxo-l { position: absolute; inset: 0; pointer-events: none; }
.hxo-l.b { z-index: 0; }
.hxo-l.f { z-index: 3; }
.hxo { position: absolute; left: 0; top: 0; margin: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; pointer-events: auto; will-change: transform; }
.hxo.drag { cursor: grabbing; }
/* au survol (et pendant qu'on le tient) : halo de la couleur de l'objet */
@media (hover: hover) { .hxo:hover .hxo-in, .hxo.drag .hxo-in { filter: drop-shadow(0 0 46px color-mix(in srgb, var(--glow, transparent) 38%, transparent)) drop-shadow(0 8px 10px rgb(0 0 0 / 0.18)); } }
.hxo-in { display: block; width: 100%; transition: filter 0.3s ease; filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.18)); }
.hxo-in > * { display: block; width: 100%; pointer-events: none; -webkit-user-drag: none; border-radius: 0 !important; }
.hxo-in:has(.hxo-badge), .hxo:hover .hxo-in:has(.hxo-badge), .hxo.drag .hxo-in:has(.hxo-badge) { filter: none !important; }
.hxo-badge { display: grid; place-items: center; text-align: center; white-space: pre; font-size: calc(var(--bw, 120px) * 0.135); line-height: 1.12; font-weight: 500; letter-spacing: -0.01em; color: #0b0b0b; background: #fff; border: 1.5px solid #0b0b0b; border-radius: 50% !important; }
.hxo-pic { aspect-ratio: 4 / 5; object-fit: cover; }
.hxo-txt { display: grid; place-items: center; padding: 0.5em 1.1em; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; border-radius: 999px !important; width: auto !important; }

/* envol au scroll : titre, texte et bouton montent plus vite que la page */
.hx .hx-main h1 { transform: translate3d(0, calc(var(--fly, 0) * -85vh), 0); opacity: calc(1.15 - var(--fly, 0) * 1.2); }
.hx .hx-side { transform: translate3d(0, calc(var(--fly, 0) * -60vh), 0); opacity: calc(1.2 - var(--fly, 0) * 1.6); }
@media (prefers-reduced-motion: reduce) { .hx .hx-main h1, .hx .hx-side { transform: none; opacity: 1; } }


/* le hero reste épinglé pendant ~2,5 écrans de scroll : c'est la durée de l'envol */
.hx-run { position: relative; height: 300svh; }
.hx-run > .hx { position: sticky; top: 0; }
@media (prefers-reduced-motion: reduce) { .hx-run { height: auto; } .hx-run > .hx { position: relative; } }
/* la première section remonte par-dessus la fin de l'envol : pas de blanc vide entre les deux */
.hx-run { margin-bottom: -65svh; }
.hx-run + .sec { position: relative; z-index: 7; background: var(--bg); box-shadow: 0 -22vh 22vh -8vh #fff; }
@media (prefers-reduced-motion: reduce) { .hx-run { margin-bottom: 0; } }

/* Tableau comparatif : survol de ligne */
.cmp tbody th, .cmp tbody td { transition: opacity .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease), transform .45s var(--ease), box-shadow .35s var(--ease); }
@media (hover:hover) {
  .cmp tbody:hover tr:not(:hover) > * { opacity: .38; }
  .cmp tbody tr:hover > th { color: var(--fg); transform: translateX(8px); }
  .cmp tbody tr:hover > td { color: var(--fg); }
  .cmp tbody tr:hover > td.me { background: rgb(40,40,40); box-shadow: inset 3px 0 0 var(--acid); transform: translateX(0); }
  .cmp tbody tr:hover > td:not(.me) { transform: translateX(4px); }
}

/* FR : « partenaire créatif. » est plus long que « creative partner. », on réduit un peu pour tenir sur 2 lignes */
html[lang="fr"] .hx .hx-main h1, html[lang="fr"] .hx .hx-main h1 b { font-size: clamp(50px, 8.7vw, 160px); }

/* Bouton de langue : une goutte qui se décolle de l'encart (goo), reliée par un col qui s'étire comme de la pâte.
   Le fond gris de l'encart passe dans une couche filtrée (.fn-goo) qui contient la barre et le rond ; le disque blanc est posé par-dessus. */
.fnav { background: transparent; }
.fn-svg { position: absolute; width: 0; height: 0; }
.fn-goo { position: absolute; left: 0; top: 0; width: calc(100% + 90px); height: 100%; z-index: -1; filter: url(#fnGoo); opacity: .86; pointer-events: none; }
.fn-goo i { position: absolute; background: #0b0b0b; }
.fn-goo .a { left: 0; top: 0; width: calc(100% - 90px); height: 100%; border-radius: var(--rx-l) !important; }
.fn-goo .b { left: calc(100% - 90px + 5px); top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50% !important; }
.fn-lang { position: absolute; left: calc(100% + 10px); top: 50%; width: 34px; height: 34px; margin-top: -17px; display: grid; place-items: center; border-radius: 50% !important; background: rgb(255, 255, 255); color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.fn-lang, .fn-goo .b { transition: transform .55s cubic-bezier(.2, 1.5, .4, 1); }
.fnav:has(.fn-lang:hover) .fn-goo .b, .fn-lang:hover { transform: translateX(8px); }
@keyframes fnOut { 0% { transform: translateX(-64px); opacity: 0; } 20% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.fnav.on .fn-lang, .fnav.on .fn-goo .b { animation: fnOut 1.1s cubic-bezier(.2, 1.3, .4, 1) .4s backwards; }
@media (max-width: 700px) {
  .fn-goo { width: 100%; } .fn-goo .a { width: 100%; } .fn-goo .b { display: none; }
  .fn-lang { left: auto; right: 0; top: calc(100% + 8px); margin-top: 0; width: 44px; height: 44px; background: rgb(255, 255, 255); border: 5px solid rgba(11, 11, 11, 0.86); background-clip: padding-box; animation: none !important; }
}

@media (max-width: 700px) { html[lang="fr"] .hx .hx-main h1, html[lang="fr"] .hx .hx-main h1 b { font-size: 11.2vw; } }

/* Work : slider de projets */
.pslide { align-items: stretch; --gx: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); display: flex; gap: var(--g); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gx); scroll-padding: 0 var(--gx); cursor: grab; user-select: none; }
.pslide::-webkit-scrollbar { display: none; }
.pslide.drag { cursor: grabbing; scroll-snap-type: none; }
.pslide.drag .ps { pointer-events: none; }
.ps { flex: 0 0 min(64vw, 820px); scroll-snap-align: start; display: block; }
.ps-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pg, #222); border-radius: var(--rpm) !important; }
.ps-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ps:hover .ps-img img { transform: scale(1.04); }
.ps-tags { position: absolute; left: 20px; top: 20px; display: flex; gap: 8px; }
.ps-tags i { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px !important; background: rgba(255, 255, 255, 0.92); color: var(--ink); }
.ps-meta { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 24px; margin-top: 20px; }
.ps-meta b { font-size: clamp(34px, 4.6vw, 68px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.ps-sum { color: var(--fg2); font-size: 16px; line-height: 1.35; max-width: 34ch; }
.ps-go { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ps-go em { display: inline-block; font-style: normal; transition: transform .4s var(--ease); }
.ps:hover .ps-go em, .ps-all:hover em { transform: translateX(6px); }
.ps-all { flex-basis: min(40vw, 480px); }
.ps-all { display: flex; }
.ps-all .ps-img { flex: 1; aspect-ratio: auto; background: var(--ink); color: rgb(255, 255, 255); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 44px); gap: 12px; }
.ps-all b { font-size: clamp(34px, 4.2vw, 64px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.ps-all em { font-style: normal; font-size: clamp(34px, 4vw, 56px); display: inline-block; transition: transform .4s var(--ease); }
.ps-after { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ps-arrows { display: flex; gap: 8px; }
.ps-arrows button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50% !important; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 18px; transition: background .3s, color .3s; cursor: pointer; }
.ps-arrows button:hover { background: var(--ink); color: rgb(255, 255, 255); }
@media (max-width: 700px) { .ps { flex-basis: 84vw; } }

/* la barre garde sa largeur naturelle (FR plus long qu'EN) */
.fnav { width: max-content; }
@media (min-width: 701px) { .fn-links { overflow: visible; flex: 0 0 auto; } }

/* Mobile / tactile : pas d’ombre portée sur les objets du hero (elle révèle le contour des images) */
@media (max-width: 700px), (hover: none) { .hxo-in, .hxo:hover .hxo-in, .hxo.drag .hxo-in { filter: none !important; } }
/* Mobile : le titre et le texte du hero ont leur propre calque (pas de repaint à chaque frame du scroll) ; le filtre goo de la nav ne sert qu'au rond de langue, absent ici */
.hx .hx-main h1, .hx .hx-side { will-change: transform, opacity; }
@media (max-width: 700px) { .fn-goo { filter: none; } }