:root { --page:#07001d; --text:#f6f3ff; --muted:#d4cde7; --line:rgba(228,219,255,.2); --background-fade:0; font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background:var(--page); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; overflow-x:hidden; background:#07001d; } .page-background { position:fixed; z-index:0; inset:0; overflow:hidden; pointer-events:none; background:url("assets/bg.jpg?v=20260913-hq") center top / max(1282px,100vw) auto no-repeat; transform:translateZ(0); } .page-background::after { content:""; position:absolute; inset:0; background:#07001d; opacity:var(--background-fade); } button,a { color:inherit; font:inherit; } button { cursor:pointer; } a { text-decoration:none; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-chrome { position:absolute; z-index:20; top:0; inset-inline:0; pointer-events:none; }.socialtop { position:fixed; z-index:22; top:40px; left:26px; display:grid; gap:0; pointer-events:auto; transition:top .45s cubic-bezier(.16,1,.3,1); }.socialtop a { display:grid; place-items:center; width:54px; height:54px; }.socialtop img { width:54px; height:54px; object-fit:contain; transition:all .5s cubic-bezier(0.83,0,0.17,1); will-change:transform,filter; }.socialtop a:hover img { transform:scale(1.1); filter:brightness(0) invert(1) drop-shadow(0 0 1px #cfbaff) drop-shadow(0 0 7px #cfbaff); }.menu-button,.sticky-menu-button { position:fixed; z-index:23; right:32px; top:32px; display:grid; place-content:center; gap:6px; width:28px; height:28px; padding:0; border:0; border-radius:50%; color:white; background:rgba(120,84,248,.72); box-shadow:inset 0 1px #ffffff30,0 3px 18px #1308427a; pointer-events:auto; }.menu-button i,.sticky-menu-button i { width:12px; height:2px; border-radius:2px; background:currentColor; }.menu-panel { position:fixed; z-index:40; top:72px; right:32px; width:218px; padding:10px; border:1px solid var(--line); border-radius:16px; background:#160a43e8; box-shadow:0 20px 50px #0008; backdrop-filter:blur(18px); }.menu-panel a { display:block; padding:10px 12px; border-radius:9px; color:#eee9ff; }.menu-panel a:hover { background:#ffffff14; }
.hero { position:relative; height:674px; overflow:hidden; isolation:isolate; }.hero-objects { position:absolute; z-index:-1; inset:0; pointer-events:none; }.hero-objects img { position:absolute; top:0; display:block; height:auto; max-width:none; }.hero-objects__left { left:calc(25vw - 222px); width:381px; }.hero-objects__right { left:50%; width:946px; }.hero-objects__mobile,.hero-tagline--mobile { display:none!important; }.hero-intro { position:relative; z-index:1; display:flex; width:494px; margin:0 auto; padding-top:73px; align-items:center; flex-direction:column; text-align:center; }.hero-logo { width:286px; height:154px; object-fit:contain; }.hero h1 { margin:0; font-size:24px; line-height:1.1; font-weight:750; letter-spacing:-.048em; text-wrap:balance; text-shadow:0 2px 14px #0b002d; }.availability { display:flex; gap:8px; align-items:center; margin:14px 0 26px; color:#f1edfb; font-size:14px; }.availability span { width:8px; height:8px; border-radius:50%; background:#07df57; box-shadow:0 0 10px #0cdf62; }.support-bar { display:flex; align-items:center; width:494px; height:69px; padding:0 18px 0 23px; border:1px solid rgba(222,207,255,.21); border-radius:40px; background:rgba(10,2,42,.5); box-shadow:inset 0 1px #ffffff13; backdrop-filter:blur(7px); }.support-bar strong { flex:1; font-size:14px; text-align:left; white-space:nowrap; }.support-button { border:0; border-radius:22px; min-height:36px; padding:0 15px; color:white; font-size:14px; font-weight:650; white-space:nowrap; }.support-button--secondary { margin-right:10px; background:#ffffff12; }.support-button--primary { background:#5140ef; box-shadow:inset 0 1px #ffffff47,0 3px 14px #1d0d9b82; }.support-button:hover,.pill-button:hover { filter:brightness(1.16); transform:translateY(-1px); }.building-heading { position:absolute; bottom:76px; left:50%; display:flex; align-items:center; gap:10px; margin:0; transform:translateX(-50%); font-size:27px; line-height:37px; letter-spacing:-.05em; }.building-heading img { width:40px; height:37px; object-fit:contain; }
.project-stack { width:1060px; margin:0 auto; display:grid; gap:73px; }.project-card { position:relative; height:626px; overflow:hidden; border:1px solid rgba(228,219,255,.22); border-radius:25px; background:#13053b; box-shadow:0 18px 45px #0004, inset 0 1px #ffffff28; }.project-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.project-card::after { content:""; position:absolute; inset:auto 0 0; height:229px; background:linear-gradient(180deg,transparent 0%,rgba(7,0,26,.3) 8%,rgba(7,0,26,.93) 75%,rgba(7,0,26,.98)); }.project-bottom { position:absolute; z-index:1; right:32px; bottom:26px; left:32px; display:grid; grid-template-columns:275px minmax(300px,1fr) 168px; align-items:center; gap:25px; min-height:100px; }.project-logo { width:275px; height:100px; object-fit:contain; object-position:left center; }.project-logo--crash { width:355px; height:130px; margin-left:-2px; }.project-bottom p { margin:0; max-width:430px; font-size:16px; line-height:1.18; letter-spacing:-.035em; text-wrap:balance; }.project-cta { display:grid; justify-items:center; gap:9px; }.pill-button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 16px; border:1px solid rgba(255,255,255,.06); border-radius:24px; color:white; background:rgba(255,255,255,.14); box-shadow:inset 0 1px #ffffff18; font-size:13px; white-space:nowrap; transition:transform .2s,filter .2s; backdrop-filter:blur(8px); }.project-cta small { color:#f2efff9e; font-size:11px; }.project-card--creator .project-logo { width:283px; }.project-card--crash .project-bottom { grid-template-columns:355px minmax(280px,1fr) 168px; }
.content-section { width:1060px; margin:110px auto 0; }.content-section--articles { margin-top:96px; }.section-heading { display:flex; gap:0; align-items:center; margin:0 0 73px; font-size:27px; letter-spacing:-.045em; }.section-heading img { display:block; width:37px; height:37px; object-fit:contain; }.content-rail { display:flex; gap:50px; width:calc(100vw - max(0px,(100vw - 1280px)/2) - 110px); overflow-x:auto; padding:0 0 10px; scrollbar-width:none; }.content-rail::-webkit-scrollbar { display:none; }.product-card,.article-card { position:relative; flex:0 0 428px; overflow:hidden; border:1px solid rgba(228,219,255,.22); border-radius:25px; background:#100630; box-shadow:0 17px 42px #0004; }.product-card { height:626px; }.article-card { height:428px; }.product-card>img,.article-card>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }.product-card:hover>img,.article-card:hover>img { transform:scale(1.035); }.product-card>div,.article-card>div { position:absolute; z-index:1; right:0; bottom:0; left:0; padding:30px; background:linear-gradient(transparent,rgba(6,0,26,.9) 25%,rgba(6,0,26,.97)); }.product-card>div { min-height:353px; }.product-card h3 { margin:0 0 25px; font-size:36px; line-height:.97; letter-spacing:-.066em; }.product-card p { margin:0 0 28px; font-size:15px; line-height:1.2; }.product-card .pill-button + .pill-button { margin-left:9px; }.article-card>div { min-height:168px; display:flex; flex-direction:column; align-items:flex-start; }.article-card time { color:#ffffffa1; font-size:11px; }.article-card h3 { margin:7px 0 14px; font-size:20px; line-height:1.02; letter-spacing:-.04em; }.article-card .pill-button { margin-top:auto; }
footer { position:relative; min-height:530px; margin-top:110px; display:flex; align-items:center; flex-direction:column; justify-content:flex-end; overflow:hidden; padding:70px 20px 48px; background:url("assets/footer-decor.jpg") center top/2266px 600px no-repeat; text-align:center; }.footer-decor { position:absolute; inset:0; pointer-events:none; }.footer-contact { z-index:1; display:grid; justify-items:center; gap:20px; margin-bottom:25px; }.footer-contact h2 { margin:0; color:#cfbaff; font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:27px; font-weight:700; line-height:33px; letter-spacing:-.54px; text-shadow:0 0 51px #050220,0 0 12px rgba(7,4,42,.768); }.footer-contact nav { display:flex; gap:0; }.footer-contact a { display:grid; place-items:center; width:80px; height:80px; }.footer-contact img { display:block; width:80px; height:80px; opacity:1; transition:all .5s cubic-bezier(0.83,0,0.17,1); will-change:transform,filter; }.footer-contact a:hover img { transform:scale(1.1); filter:brightness(0) invert(1) drop-shadow(0 0 1px #cfbaff) drop-shadow(0 0 7px #cfbaff); }.footer-contact + p { z-index:1; width:1080px; max-width:100%; margin:0 0 29px; color:rgba(215,206,234,.797); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:9.0395px; font-weight:500; line-height:11px; letter-spacing:-.1808px; text-shadow:0 0 30px rgba(9,5,44,.821),0 0 2px rgba(7,4,42,.567); }.footer-contact + p em { font-style:italic; }.support-bar--footer { z-index:1; width:494px; height:50px; padding-left:20px; }.support-bar--footer .support-button { min-height:32px; font-size:12px; }
.sticky-header { position:fixed; z-index:21; top:0; left:0; width:100%; height:83px; opacity:0; pointer-events:none; transition:opacity .25s ease; }.sticky-header.is-visible { opacity:1; pointer-events:auto; }.sticky-logo { position:absolute; z-index:2; top:17px; left:25px; width:54px; height:43px; }.sticky-logo img { display:block; width:100%; height:100%; object-fit:contain; }.sticky-menu-button { position:absolute; z-index:2; top:18px; right:28px; width:42px; height:42px; gap:6px; background:rgba(119,84,247,.74); }.sticky-menu-button i { width:18px; height:3px; }.progressive-blur { position:absolute; top:-40px; width:364px; height:167px; overflow:hidden; pointer-events:none; }.progressive-blur--left { left:-112px; }.progressive-blur--right { right:-112px; transform:scaleX(-1); }.progressive-blur i { position:absolute; inset:0; display:block; -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur)); -webkit-mask-image:linear-gradient(90deg,#000 var(--start),transparent var(--end)); mask-image:linear-gradient(90deg,#000 var(--start),transparent var(--end)); }.progressive-blur i:nth-child(1) { --blur:2px; --start:4%; --end:28%; }.progressive-blur i:nth-child(2) { --blur:4px; --start:18%; --end:42%; }.progressive-blur i:nth-child(3) { --blur:7px; --start:33%; --end:56%; }.progressive-blur i:nth-child(4) { --blur:11px; --start:48%; --end:70%; }.progressive-blur i:nth-child(5) { --blur:17px; --start:63%; --end:84%; }.progressive-blur i:nth-child(6) { --blur:25px; --start:78%; --end:100%; }.sticky-header.is-visible ~ .site-chrome .socialtop { top:95px; }
.modal { width:min(430px,calc(100vw - 36px)); padding:38px; border:1px solid #ffffff24; border-radius:28px; color:white; text-align:center; background:linear-gradient(145deg,#291363,#0a0329); box-shadow:0 30px 100px #000b; }.modal::backdrop { background:#02000eb5; backdrop-filter:blur(8px); }.modal>img { width:68px; height:68px; margin-bottom:6px; object-fit:contain; }.modal h2 { margin:0 0 10px; font-size:30px; letter-spacing:-.05em; }.modal p { margin:0 auto 24px; color:#fff9; line-height:1.35; }.modal-close { position:absolute; top:12px; right:15px; width:30px; height:30px; border:0; border-radius:50%; color:white; background:#ffffff18; font-size:23px; }.modal-actions { display:grid; gap:9px; }.modal-actions a { display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; border-radius:12px; background:#ffffff13; }.modal-actions img { width:22px; height:22px; }.modal form { display:flex; gap:8px; }.modal input { min-width:0; flex:1; padding:10px 12px; border:1px solid #fff3; border-radius:12px; color:white; background:#fff1; }.modal input::placeholder { color:#fff9; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1); }.reveal.is-revealed { opacity:1; transform:none; }
@media (max-width:1120px) { .project-stack,.content-section { width:calc(100% - 120px); }.content-rail { width:calc(100vw - 60px); }.project-bottom { grid-template-columns:230px minmax(200px,1fr) 150px; gap:16px; }.project-logo { width:230px; }.project-card--crash .project-bottom { grid-template-columns:280px minmax(180px,1fr) 150px; }.project-logo--crash { width:280px; } }
@media (max-width:720px) { .socialtop { top:auto; bottom:17px; left:50%; grid-auto-flow:column; grid-template-columns:repeat(5,54px); gap:0; transform:translateX(-50%); padding:10px 12px; border:1px solid #fff2; border-radius:30px; background:#13063ab8; backdrop-filter:blur(12px); }.menu-button { top:20px; right:20px; }.hero { height:600px; }.hero-objects__left { left:-4px; width:298px; }.hero-objects__right { left:50%; width:740px; }.hero-intro { width:min(94%,494px); padding-top:50px; }.hero-logo { width:245px; height:132px; }.hero h1 { font-size:21px; }.availability { margin:12px 0 20px; }.support-bar { width:100%; height:auto; min-height:58px; padding:8px 10px 8px 17px; }.support-bar strong { font-size:12px; }.support-button { min-height:34px; padding:0 10px; font-size:12px; }.support-button--secondary { margin-right:5px; }.building-heading { bottom:53px; font-size:23px; }.project-stack { width:calc(100% - 32px); gap:35px; }.project-card { height:510px; border-radius:22px; }.project-bottom,.project-card--crash .project-bottom { right:20px; bottom:18px; left:20px; display:grid; grid-template-columns:1fr; gap:8px; align-items:end; }.project-logo,.project-logo--crash { width:180px; height:74px; margin:0; }.project-bottom p { max-width:330px; font-size:14px; }.project-cta { justify-items:start; gap:3px; }.content-section { width:calc(100% - 32px); margin-top:75px; }.content-section--articles { margin-top:70px; }.section-heading { margin-bottom:28px; font-size:24px; }.content-rail { width:calc(100vw - 16px); gap:18px; }.product-card,.article-card { flex-basis:300px; border-radius:22px; }.product-card { height:440px; }.article-card { height:300px; }.product-card>div { min-height:255px; padding:22px; }.product-card h3 { margin-bottom:15px; font-size:29px; }.product-card p { margin-bottom:17px; font-size:13px; }.article-card>div { min-height:132px; padding:20px; }.sticky-logo { left:20px; }.sticky-menu-button { right:20px; }.progressive-blur { width:182px; height:125px; top:-30px; }.progressive-blur--left { left:-56px; }.progressive-blur--right { right:-56px; }.sticky-header.is-visible ~ .site-chrome .socialtop { top:auto; }.support-bar--footer { width:min(100%,494px); }.footer-contact + p { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

.socialtop.is-sticky { top:95px; }
@media (max-width:720px) { .socialtop.is-sticky { top:auto; } }
@media (min-width:721px) {
    .hero h1 { font-size:30px; line-height:1.12; }

    .project-bottom { display:block; min-height:100px; }
    .project-bottom .project-logo { position:absolute; top:0; left:0; }
    .project-bottom p { position:absolute; margin:0; }
    .project-bottom .project-cta { position:absolute; right:0; display:grid; width:168px; }

    .project-card--newt .project-logo { width:228px; height:100px; }
    .project-card--newt .project-bottom p { top:26px; left:253px; width:473px; }
    .project-card--newt .project-cta { top:6px; }

    .project-card--enchiridion .project-logo { width:228px; height:100px; }
    .project-card--enchiridion .project-bottom p { top:26px; left:253px; width:473px; }
    .project-card--enchiridion .project-cta { top:6px; }

    .project-card--creator .project-bottom { bottom:32px; }
    .project-card--creator .project-logo { width:283px; height:100px; top:0; }
    .project-card--creator .project-bottom p { top:19px; left:308px; width:422px; }
    .project-card--creator .project-cta { top:0; }

    .project-card--crash .project-bottom { right:29px; bottom:47px; left:381px; min-height:87px; }
    .project-card--crash .project-logo { position:absolute; top:unset; bottom:-47px; left:-381px; width:355px; height:226px; }
    .project-card--crash .project-bottom p { top:7px; left:0; width:437px; }
    .project-card--crash .project-cta { top:0; }
}

/* Les visuels d'articles embarquent déjà leur zone basse floutée : aucun voile CSS. */
.article-card { border:0; border-radius:35px; background:#0e042d; box-shadow:0 8px 92px -13px #000,0 0 0 1px rgba(0,0,0,.1525); }
.article-card::after { content:""; position:absolute; z-index:2; inset:0; border-radius:inherit; box-shadow:inset 0 .5px 1px rgba(255,255,255,.5); pointer-events:none; }
.article-card > img,.article-card > div { border:0; box-shadow:none; }
.article-card > div { inset:auto 30px 30px; min-height:0; display:flex; flex-direction:column; align-items:flex-start; padding:0; background:none; }
.article-card time { position:relative; order:1; margin:0 0 6px; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:18px; font-weight:500; letter-spacing:normal; opacity:.5; isolation:isolate; }
.article-card h3 { position:relative; order:2; width:256px; margin:0; color:#fff; font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:28px; font-weight:700; line-height:28px; letter-spacing:normal; isolation:isolate; }
.article-card time::before,.article-card h3::before { content:attr(data-shadow); position:absolute; z-index:-1; inset:0; color:#000; -webkit-text-stroke:8px #000; text-stroke:8px #000; filter:blur(48px); pointer-events:none; }
.article-card .pill-button { position:absolute; right:0; bottom:0; width:92px; min-height:43px; padding:0; border:0; border-radius:35px; background:rgba(255,255,255,.07); box-shadow:0 0 96px 8px #000; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:18px; font-weight:500; line-height:21px; letter-spacing:-.1202186px; transition:background-color .2s; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
@media (max-width:720px) { .article-card { border-radius:35px; }.article-card > div { inset:auto 20px 20px; }.article-card time { margin-bottom:4px; font-size:12px; line-height:16px; }.article-card h3 { width:190px; font-size:18px; line-height:20px; letter-spacing:-.45px; }.article-card .pill-button { right:0; bottom:0; width:76px; min-height:36px; font-size:14px; } }

/* Le viewport horizontal réserve l'espace des ombres et s'étend bord à bord. */
.content-rail { width:100vw!important; margin-top:-104px; margin-right:0; margin-bottom:-114px; margin-left:calc(50% - 50vw)!important; padding-top:104px; padding-right:104px; padding-bottom:114px; padding-left:var(--content-rail-inset,0px)!important; }
.support-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; }.support-button img { width:20px; height:20px; object-fit:contain; }

/* Hero UI — dimensions de la frame Sketch « Hector Animated Logo ». */
.hero-intro { width:494px; padding-top:56px; }
.hero-animated-logo { position:relative; width:286px; height:188px; flex:0 0 188px; }
.hero-blink-gif { position:absolute; top:0; left:80px; display:block; width:118px; height:118px; object-fit:cover; cursor:pointer; }
.hero-workmark { position:absolute; top:93px; left:22px; display:flex; width:238px; height:94px; }
.hero-workmark img { display:block; height:94px; object-fit:fill; }.hero-workmark img:nth-child(1) { width:56px; }.hero-workmark img:nth-child(2) { width:43px; }.hero-workmark img:nth-child(3) { width:41px; }.hero-workmark img:nth-child(4) { width:27px; }.hero-workmark img:nth-child(5) { width:43px; }.hero-workmark img:nth-child(6) { width:28px; }
.hero-details { position:relative; width:494px; margin-top:35px; padding-bottom:70px; }.hero h1 { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:27px; font-weight:600; line-height:37px; letter-spacing:-.5px; text-shadow:0 2px 29px #000; }.availability { height:18px; margin:26px 0 25px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; font-weight:400; line-height:18px; }.support-bar { height:69px; }.support-bar strong { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; font-weight:500; letter-spacing:-.1px; }.support-button--secondary { width:121px; }.support-button--primary { width:183px; }.building-heading { bottom:73px; }

.availability { width:max-content; margin-right:auto; margin-left:auto; }
.site-chrome { z-index:32; }.socialtop { z-index:30; }.menu-button { z-index:31; }

/* Sticky header — composition progressive identique au test Project Genie. */
@property --corner-blur-top { syntax:"<length>"; inherits:false; initial-value:0px; }
@property --corner-blur-horizontal-offset { syntax:"<length>"; inherits:false; initial-value:0px; }
.corner-blur-composition { position:fixed; z-index:21; inset:0; pointer-events:none; }.corner-blur { position:absolute; inset:0; pointer-events:none; transition:--corner-blur-top 360ms ease,--corner-blur-horizontal-offset 360ms ease; }.corner-blur--top-left,.corner-blur--top-right { --corner-blur-top:0px; --corner-blur-horizontal-offset:0px; }.corner-blur-composition--without-transition .corner-blur { transition:none; }.corner-blur-composition--near-top .corner-blur--top-left,.corner-blur-composition--near-top .corner-blur--top-right { --corner-blur-top:-100px; --corner-blur-horizontal-offset:-100px; }.corner-blur-composition__icon { position:fixed; z-index:22; top:17px; left:25px; display:block; isolation:isolate; width:54px; height:43px; pointer-events:auto; transform:translateZ(0); backface-visibility:hidden; will-change:transform; transition:top 360ms ease; }.corner-blur-composition--near-top + .corner-blur-composition__icon { top:-83px; }.corner-blur-composition__icon img { display:block; width:54px; height:43px; object-fit:contain; image-rendering:auto; transform:translateZ(0); backface-visibility:hidden; }.corner-blur-composition__icon .sticky-blink-gif { object-fit:cover; }.corner-blur__layer { position:absolute; inset:0; -webkit-backdrop-filter:blur(var(--blur-px)); backdrop-filter:blur(var(--blur-px)); }.corner-blur__layer--1 { --blur-px:16px; }.corner-blur__layer--2 { --blur-px:8px; }.corner-blur__layer--3 { --blur-px:4px; }.corner-blur__layer--4 { --blur-px:2px; }.corner-blur__layer,.corner-blur__shade { -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }.corner-blur__shade { position:absolute; z-index:1; inset:0; background:rgba(0,0,0,.4); }

/* La colonne qui sert de repère aux rails est la même que celle des projets :
   le rail reste large de 100vw, son premier élément commence sur ce repère. */
.building-heading { z-index:901; }

@media (min-width:721px) {
  .project-stack,
  .content-section { width:min(1060px,calc(100vw - 220px)); }
}

/* Même durée et même courbe que l'icône du sticky header. */
.socialtop { transition:top 360ms ease; }

/* Sur le landing, l'icône est déjà hors-cadre : pas d'animation de sortie. */
.corner-blur-composition--near-top + .corner-blur-composition__icon { transition:none; }


/* Produits — mesures et styles relevés dans la frame Sketch « v5 Products ». */
.product-card { overflow:hidden; border:0; border-radius:35px; background:#0e042d; box-shadow:none; }
.product-card::after { content:""; position:absolute; z-index:3; inset:0; border-radius:inherit; box-shadow:inset 0 .5px 1px rgba(255,255,255,.5); pointer-events:none; }
.product-card > img { z-index:0; transition:none; }
.product-card > div { position:absolute; z-index:2; inset:273px 0 0; min-height:0; padding:0; background:none; }
.product-card h3 { position:absolute; top:40px; left:50%; width:250px; margin:0; transform:translateX(-50%); color:#fff; font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:30px; font-weight:600; line-height:49px; letter-spacing:0; text-align:center; }
.product-card p { position:absolute; top:168px; left:30px; width:368px; margin:0; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:20px; font-weight:500; line-height:24px; letter-spacing:0; text-align:center; }
.product-card .pill-button { position:absolute; top:270px; left:50%; width:105px; min-height:43px; height:43px; padding:0; border:0; border-radius:35px; background:rgba(255,255,255,.15); box-shadow:0 0 96px 8px rgba(0,0,0,.3); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:18.0328px; font-weight:500; line-height:21px; letter-spacing:-.1202px; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); transform:translateX(-50%); }
.product-card .pill-button:hover { transform:translateX(-50%) translateY(-1px); }
.product-card--game-icons h3 { top:64px; width:262px; }
.product-card--game-icons p,.product-card--plex p,.product-card--gltf p { top:192px; }
.product-title--big-picture { display:flex; align-items:center; flex-direction:column; }
.product-title--big-picture span { display:block; height:36px; font-size:30px; line-height:30px; }
.product-title--big-picture strong { display:block; height:55px; font:600 50px/49px "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; white-space:nowrap; }
.product-card--plex .product-title--big-picture { top:35px; width:240px; }
.product-card--reddit-theme .product-title--big-picture { top:11px; width:240px; }
.product-card--glass .product-title--big-picture { top:59px; width:280px; }
.product-card--gltf .product-title--big-picture { top:71px; width:280px; }
.product-card--nitpicon .product-title--big-picture { top:83px; width:280px; }
.product-card--reddit-button .product-title--big-picture { top:47px; width:300px; }
.product-card--game-icons .product-title--big-picture { top:71px; width:300px; }
.product-card--plex .product-title--big-picture span:last-child,
.product-card--reddit-theme .product-title--big-picture span:last-child { width:max-content; white-space:nowrap; }

/* Les visuels ne zooment jamais : ni produits, ni articles, ni projets. */
.project-card:hover .project-image,.product-card:hover > img,.article-card:hover > img { transform:none; }
.project-image,.article-card > img { transition:none; }

/* Le survol de toute la carte Article active visuellement son CTA. */
.article-card { cursor:pointer; }
.article-card:hover .pill-button { filter:brightness(1.16); transform:translateY(-1px); }

/* Même traitement de surface que les produits et articles, sur le conteneur projet. */
.project-card { border:0; box-shadow:0 18px 45px #0004,inset 0 .5px 1px rgba(255,255,255,.5); }
.project-card::before { content:""; position:absolute; z-index:2; inset:0; border-radius:inherit; box-shadow:inset 0 .5px 1px rgba(255,255,255,.5); pointer-events:none; }

@media (max-width:720px) {
  .product-card::before,.product-card > div { inset:192px 0 0; }
  .product-card h3 { top:28px; width:175px; font-size:21px; line-height:34px; }
  .product-card p { top:118px; left:21px; width:258px; font-size:14px; line-height:17px; }
  .product-card .pill-button { top:189px; min-height:30px; height:30px; border-radius:25px; font-size:13px; line-height:15px; }
  .product-card--game-icons h3 { top:45px; width:184px; }
  .product-card--game-icons p,.product-card--plex p,.product-card--gltf p { top:135px; }
  .product-title--big-picture span { height:25px; font-size:21px; line-height:21px; }
  .product-title--big-picture strong { height:39px; font-size:35px; line-height:34px; }
  .product-card--plex .product-title--big-picture { top:16px; width:168px; }
  .product-card--reddit-theme .product-title--big-picture { top:0; width:168px; }
  .product-card--glass .product-title--big-picture { top:36px; width:210px; }
  .product-card--gltf .product-title--big-picture { top:41px; width:210px; }
  .product-card--nitpicon .product-title--big-picture { top:49px; width:210px; }
  .product-card--reddit-button .product-title--big-picture { top:24px; width:240px; }
  .product-card--game-icons .product-title--big-picture { top:41px; width:230px; }
}

/* Une carte Article est toujours parfaitement carrée, quelle que soit sa largeur. */
.article-card { aspect-ratio:1 / 1; height:auto; }

/* Menu — frame Sketch « Exemple plus proche de l'intégration réelle - sticky header ». */
.menu-button { top:18px; right:28px; width:42px; height:42px; gap:6px; border:0; border-radius:50%; color:#fff; background:rgba(128,128,128,.3); box-shadow:none; -webkit-backdrop-filter:blur(10px) saturate(2); backdrop-filter:blur(10px) saturate(2); }
.menu-button i { width:18px; height:3px; border-radius:1.5px; background:#fff; mix-blend-mode:screen; }

/* Les cartes projets conservent toujours la proportion de la maquette 1060 × 626. */
.project-card { aspect-ratio:1060 / 626; height:auto; }

/* La fin du rail Articles avance légèrement sur le décor du footer. */
main { position:relative; z-index:1; }
main + footer { z-index:0; margin-top:-32px; }
@media (max-width:720px) { .menu-button { top:18px; right:20px; } main + footer { margin-top:-16px; } }

/* Modales — spécifications des symboles Sketch « v5 Support Modal » et « v5 Newsletter Modal ». */
.modal { box-sizing:border-box; width:auto; max-width:calc(100vw - 36px); max-height:calc(100dvh - 36px); margin:auto; padding:0; overflow:visible; border:0; border-radius:35px; color:#fff; background:rgba(81,75,148,.215297); box-shadow:0 0 0 1px rgba(0,0,0,.5),0 16px 77px -11px #000,inset 0 .5px 1px rgba(255,255,255,.5); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); }
.modal::backdrop { background:#02000eb5; -webkit-backdrop-filter:none; backdrop-filter:none; }
.modal--support { width:549.5px; height:340px; }
.modal--newsletter { width:529px; height:408px; }
.modal-content { position:relative; }
.modal--support .modal-content { width:469.5px; height:270px; margin:30px 40px 40px; }
.modal--newsletter .modal-content { width:449px; height:338px; margin:30px 40px 40px; }
.modal-close { position:absolute; z-index:1; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.modal-intro { position:absolute; width:400px; text-align:center; }
.modal--support .modal-intro { top:0; left:34.75px; }
.modal--newsletter .modal-intro { top:0; left:24.5px; }
.modal h2 { height:37px; margin:0 0 10px; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:27px; font-weight:700; line-height:37px; letter-spacing:-1.026px; }
.modal-title-icon { display:inline-block; width:41px; height:41px; margin-left:3px; object-fit:contain; vertical-align:middle; transform:translateY(-1px); }
.modal--support .modal-title-icon { transform:translateY(-4px); }

/* Support bars desktop — actions de 46 px dans une capsule de 70 px. */
@media (min-width:721px) {
  .support-bar,
  .support-bar--footer {
    height:70px;
    padding:12px 12px 12px 23px;
  }
  .support-bar .support-button,
  .support-bar--footer .support-button {
    min-height:46px;
    height:46px;
  }
  .support-bar--aap {
    --support-final-height:70px;
    --support-final-padding:12px 12px 12px 23px;
  }
  @keyframes support-bar-action-in {
    from { min-height:0; height:0; opacity:0; transform:translateY(14px) scaleX(.92) scaleY(.2); transform-origin:50% 100%; }
    to { min-height:46px; height:46px; opacity:1; transform:translateY(0) scaleX(1) scaleY(1); transform-origin:50% 100%; }
  }
}

.modal-intro p { margin:0; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; font-weight:400; line-height:18px; letter-spacing:0; }
.modal-platform-label { position:absolute; top:133px; left:34.75px; width:400px; height:18px; margin:0; color:#C4C0FF; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; font-weight:400; line-height:18px; text-align:center; }
.modal-sponsors { position:absolute; top:201px; left:0; display:grid; grid-template-columns:84px 34px .5px 29.5px 61px 25px 58px 29.5px 45px 34px 69px; align-items:start; width:469.5px; height:69px; }
.modal-sponsor { display:grid; grid-template-rows:36px 24px; row-gap:9px; align-items:start; justify-items:center; height:68px; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; font-weight:500; line-height:24px; letter-spacing:-.4667px; text-align:center; transition:transform .15s ease; }
.modal-sponsor:hover { transform:translateY(-1px); }
.modal-sponsor img { display:block; width:auto; height:36px; object-fit:contain; }
.modal-sponsor:nth-of-type(1) { grid-column:1; }
.modal-sponsor:nth-of-type(2) { grid-column:5; }
.modal-sponsor:nth-of-type(3) { grid-column:7; }
.modal-sponsor:nth-of-type(4) { grid-column:9; }
.modal-sponsor:nth-of-type(5) { grid-column:11; }
.modal-sponsor--apple-pay { display:grid; grid-template-rows:none; align-items:center; }
.modal-sponsor--apple-pay img { width:84px; height:35px; }
.modal-sponsors-divider { grid-column:3; width:.5px; height:68px; margin-top:.5px; background:#8781D2; }
.modal-waitlist { position:absolute; top:262px; left:0; display:flex; align-items:center; width:449px; height:60px; margin:0; border:0; border-radius:999px; background:rgba(196,192,255,.1); }
.modal-waitlist input { min-width:0; flex:1; height:100%; padding:0 24px; border:0; outline:0; color:#fff; background:transparent; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; font-weight:400; line-height:19px; }
.modal-waitlist input::placeholder { color:rgba(196,192,255,.55); }
.modal-waitlist button { position:relative; isolation:isolate; width:172px; height:44px; margin-right:8px; padding:0; border:0; border-radius:999px; color:#fff; background:rgba(4,0,42,.324956); box-shadow:0 8px 92px -13px #000,0 0 0 1px rgba(0,0,0,.152508),inset 0 .5px 1px rgba(255,255,255,.3); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; font-weight:500; line-height:19px; -webkit-backdrop-filter:blur(25px); backdrop-filter:blur(25px); transition:filter .15s linear; }
.modal-waitlist button::before { content:""; position:absolute; z-index:0; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(175.304deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.054134) 10.48827%,rgba(255,255,255,0) 48.015625%,rgba(255,255,255,.069034) 95.048745%,rgba(255,255,255,0) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; pointer-events:none; }
.modal-waitlist button:hover { filter:brightness(1.1); }
.modal-newsletter-divider { position:absolute; top:218px; left:34.5px; display:block; width:380px; height:1px; background:rgba(196,192,255,.08); }
.modal-youtube-subscribe { position:absolute; isolation:isolate; top:127px; left:74.5px; display:flex; align-items:center; justify-content:center; gap:8px; width:300px; height:44px; padding:0; border:0; border-radius:999px; color:#fff; background:#f00; box-shadow:0 8px 92px -13px #000,0 0 0 1px rgba(0,0,0,.152508),inset 0 .5px 1px rgba(255,255,255,.3); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; font-weight:500; line-height:19px; -webkit-backdrop-filter:blur(25px); backdrop-filter:blur(25px); }
.modal-youtube-subscribe::before { content:""; position:absolute; z-index:0; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(175.304deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.054134) 10.48827%,rgba(255,255,255,0) 48.015625%,rgba(255,255,255,.069034) 95.048745%,rgba(255,255,255,0) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; pointer-events:none; }
.modal-youtube-subscribe::after { content:""; position:absolute; z-index:0; inset:0; border-radius:inherit; background:rgba(255,255,255,0); pointer-events:none; transition:background-color .15s linear; }
.modal-youtube-subscribe:hover::after { background:rgba(255,255,255,.12); }
.modal-youtube-subscribe__icon { position:relative; z-index:1; width:25px; height:19px; fill:currentColor; }
.modal-youtube-subscribe span { position:relative; z-index:1; }

@media (max-width:600px) {
  .modal { height:auto; overflow:auto; }
  .modal--support .modal-content,.modal--newsletter .modal-content { width:auto; height:auto; min-height:0; margin:28px 24px; }
  .modal-intro,.modal--support .modal-intro,.modal--newsletter .modal-intro,.modal-platform-label,.modal-sponsors,.modal-waitlist,.modal-newsletter-divider { position:relative; top:auto; left:auto; width:100%; }
  .modal-intro { margin:0 auto; }
  .modal-platform-label { margin-top:36px; }
  .modal-sponsors { grid-template-columns:repeat(5,minmax(0,1fr)); height:auto; margin-top:28px; gap:8px; }
  .modal-sponsor,.modal-sponsor:nth-of-type(n) { grid-column:auto; }
  .modal-sponsors-divider { display:none; }
  .modal-sponsor--apple-pay img { width:100%; max-width:84px; }
  .modal-waitlist { margin-top:32px; }
  .modal-newsletter-divider { margin-top:32px; }
  .modal-youtube-subscribe { position:relative; top:auto; left:auto; width:min(300px,100%); margin:14px auto 0; }
}

/* Le mobile conserve une version compacte des deux coins à toute hauteur de
   défilement. L'état « near top » desktop les repoussait hors champ. */
@media (max-width:720px) {
  body.site-home:not(.is-viewing-bigpicture) .corner-blur--top-left,
  body.site-home:not(.is-viewing-bigpicture) .corner-blur--top-right {
    transform:scale(.5);
  }
  body.site-home:not(.is-viewing-bigpicture) .corner-blur--top-left {
    transform-origin:0 0;
  }
  body.site-home:not(.is-viewing-bigpicture) .corner-blur--top-right {
    transform-origin:100% 0;
  }
  body.site-home:not(.is-viewing-bigpicture) .corner-blur-composition--near-top .corner-blur--top-left,
  body.site-home:not(.is-viewing-bigpicture) .corner-blur-composition--near-top .corner-blur--top-right {
    --corner-blur-top:0px;
    --corner-blur-horizontal-offset:0px;
  }
}

/* Échelle de référence des marques sur les cartes projet mobile. Les deux
   cartes Crash conservent volontairement leurs logos de composition. */
@media (max-width:720px) {
  .project-stack .project-card:not(.project-card--crash) > .project-bottom > .project-logo,
  .project-stack .project-card:not(.project-card--crash) > .project-bottom > .project-logo-swap,
  .project-stack .project-card:not(.project-card--crash) > .project-bottom > .project-logo-swap .project-logo {
    height:74px;
  }
}

/* Les contenus produit se construisent depuis le CTA, ancré en bas : réduire
   un écart remonte naturellement le bloc entier sans coordonnées par carte. */
@media (max-width:720px) {
  .product-card > div {
    inset:192px 0 0;
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:flex-end;
    padding:22px 21px 29px;
  }
  .product-card h3,
  .product-card p,
  .product-card .product-card__ctas {
    position:static;
    top:auto;
    left:auto;
    transform:none;
  }
  .product-card h3 { margin:0 0 12px; }
  .product-card p { width:auto; margin:0 0 17px; }
  .product-card .product-card__ctas { flex:none; }
}

@media (max-width:720px) {
  .project-stack .project-card--crash .project-logo--crash {
    width:210px;
    height:105px;
  }
  .project-stack .project-card.project-card--crash .project-bottom > .project-logo--crash {
    translate:-20px 12px;
  }
  .project-stack .project-card.project-card--crash .project-bottom > .project-cta {
    align-self:end;
  }
}

/* Empêche l’animation d’entrée du landing de redémarrer lorsque le bouton est
   promu au-dessus du panneau de navigation. */
html.is-landing-ready .menu-button.menu-button--promoted {
  animation:none;
  opacity:1;
  translate:0 0;
}

@media (max-width:720px) {
  .project-stack .project-card {
    aspect-ratio:550 / 320;
  }
  .project-stack .project-card::after {
    display:block;
    z-index:3;
    inset:26% 0 0;
    height:auto;
    border-radius:0 0 22px 22px;
    background:linear-gradient(to bottom, rgba(7,0,26,0) 0%, rgba(7,0,26,.16) 17%, rgba(7,0,26,.7) 58%, rgba(7,0,26,.96) 100%);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 17%, #000 68%);
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 17%, #000 68%);
  }
  .project-stack .project-card .project-bottom,
  .project-stack .project-card--crash .project-bottom {
    z-index:4;
  }
}

/* Structure identique au master : le dialog est le popup/overlay, le panneau est le c-popup. */
html.has-modal-open { overflow:hidden; }
.modal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:18px; overflow:hidden; border:0; border-radius:0; background:#02000eb5; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; opacity:0; pointer-events:none; transform:none; transition:opacity 240ms ease; }
.modal::backdrop { background:transparent; opacity:1; transition:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.modal.is-active { opacity:1; pointer-events:auto; animation:none; }
.modal-panel { box-sizing:border-box; overflow:visible; border:0; border-radius:35px; color:#fff; background:rgba(81,75,148,.215297); box-shadow:0 0 0 1px rgba(0,0,0,.5),0 16px 77px -11px #000,inset 0 .5px 1px rgba(255,255,255,.5); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); transform:scale(.92); opacity:0; cursor:default; }
.modal--support .modal-panel { width:549.5px; height:340px; }
.modal--newsletter .modal-panel { width:529px; height:408px; }
.modal.is-active .modal-panel { animation:privacy-popup-appear 360ms cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; }
@keyframes privacy-popup-appear {
  from { transform:scale(0.92); opacity:0; }
  to { transform:scale(1); opacity:1; }
}
@media (max-width:600px) {
  .modal { padding:14px; overflow:hidden; }
  .modal--support .modal-panel,.modal--newsletter .modal-panel { width:min(100%,529px); height:auto; max-height:calc(100dvh - 28px); overflow:auto; }
}

/* Pages Article — vues SPA : contenu éditorial, galerie locale et retour sans reload. */
.article-view { position:relative; z-index:1; min-height:100vh; padding:146px max(110px, calc((100vw - 1280px) / 2)) 156px; opacity:0; transform:translateY(18px); transition:opacity .42s ease, transform .62s cubic-bezier(.22,1,.36,1); }
.article-view.is-visible { opacity:1; transform:none; }
.article-view[hidden], .home-view[hidden], #footer[hidden] { display:none; }
.article-page { width:min(100%, 1060px); margin:0 auto; }
.article-page__top { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:76px; }
.article-back { display:inline-flex; align-items:center; gap:10px; padding:0; border:0; color:#f5f3ff; background:transparent; font:600 15px/1 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:-.12px; cursor:pointer; transition:color .25s ease, transform .25s ease; }
.article-back:hover { color:#cfbaff; transform:translateX(-4px); }
.article-page__meta { margin:0; color:#b7b3d3; font:500 14px/1.2 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.article-page__meta span { margin:0 7px; color:#6f6a92; }
.article-page__header { max-width:790px; margin:0 auto 82px; text-align:center; }
.article-page__header h1 { margin:0; color:#fff; font:700 clamp(42px, 5.4vw, 76px)/.98 "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:-.065em; text-wrap:balance; text-shadow:0 3px 24px rgba(211,196,255,.25); }
.article-page__header p { max-width:590px; margin:26px auto 0; color:#d5d1e7; font:400 clamp(18px, 2vw, 23px)/1.35 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:-.025em; }
.article-page__content { width:min(100%, 860px); margin:0 auto; }
.article-page__content > p { max-width:600px; margin:0 auto 24px; color:#e3e1ed; font:400 18px/1.62 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:-.018em; }
.article-notice { box-sizing:border-box; max-width:690px; margin:0 auto 18px !important; padding:18px 21px; border-radius:18px; color:#d5d1ff !important; background:rgba(196,192,255,.1); box-shadow:inset 0 .5px 1px rgba(255,255,255,.38); font-size:15px !important; line-height:1.45 !important; }
.article-credits { margin-bottom:52px !important; color:#a9a4c5 !important; font-size:15px !important; line-height:1.45 !important; }
.article-gallery { display:grid; gap:54px; }
.article-gallery-section { margin:0 0 96px; }
.article-gallery-section:last-child { margin-bottom:0; }
.article-gallery-section > h2 { width:600px; max-width:100%; margin:0 auto 8px; color:#fff; font:700 28px/1.12 "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.035em; }
.article-gallery-section > .article-related-links { margin-top:38px; }
.article-figure { margin:48px auto; }
.article-gallery .article-figure { margin:48px auto; }
.article-figure img { display:block; width:100%; height:auto; border-radius:25px; background:#09051b; box-shadow:0 21px 57px -28px rgba(0,0,0,.96), inset 0 .5px 1px rgba(255,255,255,.55); }
.article-figure figcaption { max-width:600px; margin:12px auto 0; color:#a9a4c5; font:400 14px/1.35 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:-.01em; text-align:left; }
.article-page__footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:92px; padding-top:30px; border-top:1px solid rgba(207,186,255,.18); }
.article-source { display:inline-flex; align-items:center; gap:10px; color:#cfbaff; font:600 15px/1 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration:none; transition:color .25s ease; }
.article-source:hover { color:#fff; }
.article-source span { font-size:18px; }
.article-back--bottom:hover { transform:translateX(-4px); }
.article-card[data-article-link] { cursor:pointer; }
.article-card[data-article-link]:hover .pill-button { color:#fff; background:rgba(255,255,255,.24); box-shadow:inset 0 .5px 1px rgba(255,255,255,.48); }
@media (max-width:900px) {
  .article-view { padding-right:48px; padding-left:48px; }
  .article-page__top { margin-bottom:58px; }
  .article-page__header { margin-bottom:62px; }
}
@media (max-width:600px) {
  .article-view { padding:112px 25px 90px; }
  .article-page__top { align-items:flex-start; flex-direction:column-reverse; gap:22px; margin-bottom:48px; }
  .article-page__header { margin-bottom:48px; text-align:left; }
  .article-page__header h1 { font-size:42px; text-wrap:initial; }
  .article-page__header p { margin-right:0; margin-left:0; font-size:18px; }
  .article-page__content > p { font-size:17px; line-height:1.58; }
  .article-gallery { gap:36px; }
  .article-figure { margin-bottom:38px; }
  .article-figure img { border-radius:18px; }
  .article-page__footer { align-items:flex-start; flex-direction:column; margin-top:62px; }
}

/* Chrome desktop avant / après l’arrivée du header à 230 px. */
@media (min-width:721px) {
  .socialtop { top:25px; }
  .menu-button { top:29px; transition:top 360ms ease; }
  .menu-button.is-sticky { top:18px; }
}

/* Panneaux Article — la home reste en place derrière une surface éditoriale opaque. */
html.has-article-panel,
html.has-article-panel body { overflow:hidden; }
.article-view,.archive-view,.bigpicture-view { position:fixed; z-index:20; inset:0; width:100vw; min-height:0; height:100dvh; padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; background:#09041b; opacity:0; pointer-events:none; transform:translateY(28px); transition:opacity .42s ease,transform .62s cubic-bezier(.22,1,.36,1); }
.article-view.is-visible,.archive-view.is-visible,.bigpicture-view.is-visible { opacity:1; pointer-events:auto; transform:none; }
.bigpicture-view { overflow:hidden; }
.bigpicture-panel-frame { display:block; width:100%; height:100%; border:0; background:#0d042a; }
/* Big Picture conserve le logo immédiatement, mais ses coins flous arrivent
   seulement après le début de la lecture. Le Socialtop vertical reste dans
   le menu burger : il ne doit pas recouvrir le mini-site. */
body.is-viewing-bigpicture .site-chrome > .socialtop { display:none; }
/* Sur mobile, un article est un panel autonome : le Socialtop de la landing
   ne doit jamais le recouvrir, y compris lors d'une arrivée depuis Google. */
@media (max-width:720px) {
  body.is-viewing-article .site-chrome > .socialtop { display:none; }
}
body.is-viewing-bigpicture .corner-blur-composition__icon,
body.is-viewing-bigpicture .corner-blur-composition--near-top + .corner-blur-composition__icon { top:17px; }
/* La masse de droite protège la lecture des onglets et des actions du panel. */
body.is-viewing-bigpicture .corner-blur--top-right { right:0; transform:scale(1.42); transform-origin:100% 0; }
.bigpicture-panel-tabs { position:fixed; z-index:32; top:27px; right:89px; display:flex; align-items:center; gap:22px; pointer-events:auto; }
.bigpicture-panel-tabs[hidden] { display:none !important; }
.bigpicture-panel-tabs a { color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px; font-weight:650; letter-spacing:-.02em; text-decoration:none; transition:color .15s linear; opacity:0; translate:0 11px; will-change:opacity,translate; }
.bigpicture-panel-tabs.is-visible a { animation:bigpicture-tab-in .48s cubic-bezier(.16,1,.3,1) both; }
.bigpicture-panel-tabs.is-visible a:nth-child(2) { animation-delay:.08s; }
.bigpicture-panel-tabs a:hover,.bigpicture-panel-tabs a[aria-current="page"] { color:#c8bbff; }
@keyframes bigpicture-tab-in { to { opacity:1; translate:0 0; } }
html.has-menu-open .bigpicture-panel-tabs { display:none; }
@media (max-width:720px) { .bigpicture-panel-tabs { top:25px; right:74px; gap:13px; }.bigpicture-panel-tabs a { font-size:15px; } }
.article-page { width:min(calc(100% - 220px), 1060px); margin:0 auto; padding:146px 0 0; }
.article-panel-close { position:fixed; z-index:1; top:96px; right:28px; display:inline-flex; align-items:center; gap:8px; padding:0; border:0; color:#d9d5ed; background:transparent; font:600 14px/1 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor:pointer; transition:color .25s ease, transform .25s ease; }
.article-panel-close span:first-child { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.1); font-size:23px; font-weight:300; line-height:1; }
.article-panel-close:hover { color:#fff; transform:translateY(-2px); }
.article-page__footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:92px; padding:30px 0; border-top:1px solid rgba(207,186,255,.18); }
.article-panel-footer { width:100%; min-height:530px; margin-top:56px; }
.article-panel-footer .support-bar { box-sizing:border-box; }
.archive-page { width:min(calc(100% - 220px), 1060px); margin:0 auto; padding:106px 0 0; }
.archive-page__header { width:min(100%,894px); margin:0 auto 58px; }
.archive-page__header h1 { margin:0; color:#fff; font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:55px; line-height:60px; letter-spacing:-.83px; }
.archive-page__header p { width:600px; max-width:100%; margin:18px 0 0; color:#c4c0ff; font-size:18px; line-height:1.4; }
.archive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,428px)); justify-content:center; gap:38px; width:100%; }
.archive-grid .article-card { width:100%; }
@media (max-width:900px) {
  .article-page { width:calc(100% - 96px); padding-top:126px; }
}
@media (max-width:600px) {
  .article-page { width:calc(100% - 50px); padding-top:112px; }
  .article-panel-footer { margin-top:72px; }
  .archive-page { width:calc(100% - 50px); padding-top:72px; }
  .archive-page__header { margin-bottom:38px; }
  .archive-page__header h1 { font-size:40px; line-height:normal; letter-spacing:-.6px; }
  .archive-page__header p { font-size:17px; }
  .archive-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .article-panel-close { top:77px; right:20px; }
  .article-panel-close span:last-child { display:none; }
}

/* En-tête éditorial — structure Hectorlizard : date, catégorie, titre, règle, introduction. */
.article-page__top { justify-content:flex-start; margin-bottom:26px; }
.article-page { width:min(calc(100% - 220px), 860px); }
.article-page__header { width:100%; max-width:none; margin:0 0 82px; text-align:left; }
.article-page__date { display:block; margin:0 0 24px; color:rgba(255,255,255,.54); font:400 13px/normal "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:normal; }
.article-page__category { margin:0 0 84px; color:#8f72ff; font:700 13px/normal "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:normal; text-transform:uppercase; }
.article-page__header h1 { max-width:600px; font-size:55px; line-height:60px; letter-spacing:-.83px; text-align:left; text-wrap:balance; }
.article-page__divider { width:100%; height:1px; margin:72px 0 70px; background:rgba(255,255,255,.22); }
.article-page__header > p:last-child { max-width:none; margin:0; color:#f1eff8; font-size:30px; line-height:normal; letter-spacing:-.43px; text-align:left; }
.article-notice a,
.article-credits a { color:#c8bbff; text-decoration:underline; text-decoration-color:rgba(200,187,255,.45); text-underline-offset:3px; transition:color .2s ease, text-decoration-color .2s ease; }
.article-notice a:hover,
.article-credits a:hover { color:#fff; text-decoration-color:currentColor; }
.article-credits { margin-bottom:52px !important; }
.article-related-links { display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:600px; max-width:100%; margin:62px auto 0; padding-top:26px; border-top:1px solid rgba(255,255,255,.16); }
.article-related-links a { color:#c8bbff; font:600 15px/1.35 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration:none; }
.article-related-links a::after { content:" ↗"; opacity:.5; }
.article-related-links a:hover { color:#fff; }
@media (min-width:601px) and (max-width:900px) {
  .article-page { width:calc(100% - 96px); }
  .article-page__content { width:calc(100vw - 96px); }
}
@media (max-width:600px) {
  .article-page__top { margin-bottom:30px; }
  .article-page { width:calc(100% - 50px); }
  .article-page__header { margin-bottom:52px; }
  .article-page__date { margin-bottom:18px; font-size:13px; }
  .article-page__category { margin-bottom:52px; font-size:13px; }
  .article-page__header h1 { font-size:40px; line-height:normal; letter-spacing:-.6px; }
  .article-page__divider { margin:48px 0 42px; }
  .article-page__header > p:last-child { font-size:30px; line-height:normal; }
  .article-gallery-section { margin-bottom:72px; }
  .article-gallery-section > h2 { font-size:24px; }
}

/* Colonne éditoriale unique et actions du panel. */
:root { --color-primary:#4341DA; }
.article-page__header { width:600px; max-width:100%; margin:0 auto 82px; }
.article-page__header .article-page__date { margin-bottom:16px; }
.article-page__header .article-page__category { width:auto; max-width:none; margin:0 0 50px; color:var(--color-primary); font:700 13px/normal "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:normal; text-align:left; }
.article-page__header h1 { max-width:none; }
.article-page__divider { margin:48px 0 42px; }
.article-page { padding-top:106px; }
.article-page__content { position:relative; left:50%; width:min(1030px, calc(100vw - 220px)); max-width:none; margin-right:0; margin-left:0; transform:translateX(-50%); }
.article-notice { max-width:600px; margin:0 auto 34px !important; padding:0; border-radius:0; color:#e3e1ed !important; background:transparent; box-shadow:none; font:400 18px/1.62 "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; letter-spacing:-.018em; }
.menu-button.article-panel-close,
.menu-button.article-panel-share { position:fixed; z-index:31; right:28px; display:grid; place-content:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; color:#fff; background:rgba(128,128,128,.3); box-shadow:none; -webkit-backdrop-filter:blur(10px) saturate(2); backdrop-filter:blur(10px) saturate(2); transform:none; }
.menu-button.article-panel-close { top:68px; }
.menu-button.article-panel-share { top:118px; }
.menu-button.article-panel-close svg,
.menu-button.article-panel-share svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:3; }
.menu-button.article-panel-close svg { stroke-width:3; }
.menu-button.article-panel-close:hover { color:#fff; transform:none; }
@media (max-width:600px) {
  .article-page { padding-top:72px; }
  .article-page__header { margin-bottom:52px; }
  .article-page__content { width:calc(100vw - 50px); }
  .menu-button.article-panel-close,
  .menu-button.article-panel-share { right:20px; }
  .menu-button.article-panel-close { top:68px; }
  .menu-button.article-panel-share { top:118px; }
}
@media (min-width:601px) and (max-width:900px) {
  .article-page { padding-top:86px; }
  .article-page__content { width:calc(100vw - 96px); }
}

/* Liens éditoriaux — pattern d’underline reveal du master Matomo. */
.article-page__content a { position:relative; display:inline-block; padding-bottom:2px; color:#c8bbff; font-weight:700; text-decoration:none; }

/* Navigation latérale — reprend la composition éditoriale du site Hectorlizard. */
html.has-menu-open,
html.has-menu-open body { overflow:hidden; }
.site-chrome { z-index:41; }
.menu-backdrop { position:fixed; z-index:39; inset:0; opacity:0; background:rgba(3,0,16,.24); transition:opacity .28s ease; }
.menu-backdrop.is-open { opacity:1; }
.menu-panel { position:fixed; z-index:40; top:0; right:0; bottom:0; width:min(410px,100vw); padding:0; overflow-y:auto; border:0; border-left:1px solid rgba(255,255,255,.05); border-radius:0; color:#fff; background:rgba(0,0,0,.68); box-shadow:none; -webkit-backdrop-filter:blur(41px) saturate(300%) brightness(120%); backdrop-filter:blur(41px) saturate(300%) brightness(120%); opacity:0; transform:translateX(100%); transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease; }
.menu-panel.is-open { opacity:1; transform:translateX(0); }
.menu-panel__content { --menu-panel-edge:32px; display:flex; min-height:100%; padding:26px var(--menu-panel-edge) 50px; flex-direction:column; }
.menu-panel__intro { padding-bottom:22px; }
.menu-panel__brand { display:inline-block; margin:0 0 8px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:22px; font-weight:700; letter-spacing:-.02em; transition:color .2s ease; }
.menu-panel__intro p { margin:28px 0 0; color:#737373; font-size:16px; line-height:1.32; letter-spacing:0; -webkit-mix-blend-mode:luminosity; mix-blend-mode:luminosity; }
.menu-panel__links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; row-gap:16px; padding:30px 0 34px; }
.menu-panel__links a { display:flex; align-items:flex-start; min-height:31px; padding:3px 0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:22px; font-weight:700; line-height:1.18; letter-spacing:-.012em; transition:color .2s ease; }
.menu-panel__links a:hover,.menu-panel__links a:focus-visible { color:#cdbdff; outline:0; }
.menu-panel__contact { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; row-gap:9px; padding:22px 0; color:#737373; font-size:16px; line-height:1.2; }
.menu-panel__contact span,.menu-panel__contact a { grid-column:1 / -1; }
.menu-panel__contact span { -webkit-mix-blend-mode:luminosity; mix-blend-mode:luminosity; }
.menu-panel__contact a { width:max-content; max-width:100%; color:#fff; font-size:22px; font-weight:700; line-height:1.15; overflow-wrap:anywhere; transition:color .2s ease; }
.menu-panel__intro,.menu-panel__links,.menu-panel__contact { position:relative; }
.menu-panel__intro::after,.menu-panel__links::after,.menu-panel__contact::after { position:absolute; right:calc(-1 * var(--menu-panel-edge)); bottom:0; left:calc(-1 * var(--menu-panel-edge)); height:2px; content:""; background:rgba(255,255,255,.05); pointer-events:none; }
.menu-panel__brand:hover,.menu-panel__brand:focus-visible,
.menu-panel__contact a:hover,.menu-panel__contact a:focus-visible { color:#cdbdff; outline:0; }
.menu-panel__brand,
.menu-panel__links a,
.menu-panel__contact a { padding:0; border-radius:0; background:transparent; }
.menu-panel__links a { min-height:0; }
.menu-panel__brand:hover,.menu-panel__brand:focus-visible,
.menu-panel__links a:hover,.menu-panel__links a:focus-visible,
.menu-panel__contact a:hover,.menu-panel__contact a:focus-visible { background:transparent; }
.menu-panel a.menu-panel__brand,
.menu-panel a.menu-panel__brand:hover,
.menu-panel a.menu-panel__brand:focus-visible { padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; filter:none!important; transform:none!important; }
.menu-panel__legal { margin:32px 0 0; color:#737373; font-size:11px; line-height:1.35; -webkit-mix-blend-mode:luminosity; mix-blend-mode:luminosity; }
.menu-panel__privacy { display:inline-block!important; margin-top:5px; padding:0!important; border:0!important; border-radius:0!important; color:inherit!important; background:transparent!important; box-shadow:none!important; font:inherit!important; line-height:inherit!important; letter-spacing:inherit!important; text-decoration:none; transition:color .2s ease; }
.menu-panel__privacy:hover,.menu-panel__privacy:focus-visible { color:#cdbdff!important; outline:0; }
.has-menu-open .site-chrome > .socialtop { visibility:hidden; pointer-events:none; }
.menu-panel { z-index:43; }
.menu-button[aria-expanded="true"] { z-index:50; }
.menu-panel__social { position:relative; display:flex; align-items:center; gap:0; padding:20px 0 22px; }
.menu-panel__social a { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:0; background:transparent; }
.menu-panel__social img { width:44px; height:44px; object-fit:contain; transition:all .5s cubic-bezier(.83,0,.17,1); will-change:transform,filter; }
.menu-panel__social a:hover img { transform:scale(1.1); filter:brightness(0) invert(1) drop-shadow(0 0 1px #cfbaff) drop-shadow(0 0 7px #cfbaff); }
.menu-panel__social::after { position:absolute; right:calc(-1 * var(--menu-panel-edge)); bottom:0; left:calc(-1 * var(--menu-panel-edge)); height:2px; content:""; background:rgba(255,255,255,.05); pointer-events:none; }
/* Sur la landing desktop, ce second accès ferait doublon avec le Socialtop
   de la chrome. Les pages autonomes le conservent naturellement. */
.site-home:not(.is-viewing-article) .menu-panel__social { display:none; }
.menu-button[aria-expanded="true"] i:first-child { transform:translateY(4.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] i:nth-child(2) { transform:translateY(-4.5px) rotate(-45deg); }
.menu-button i { transition:transform .22s ease; }
@media (max-width:720px) { .menu-panel { width:min(410px,100vw); }.menu-panel__content { --menu-panel-edge:28px; padding:24px var(--menu-panel-edge) 38px; }.menu-panel__intro,.menu-panel__links,.menu-panel__contact { column-gap:16px; } }
@media (max-width:720px) {
  /* Sur mobile, le Socialtop appartient au landing et suit son défilement. */
  .site-chrome .socialtop { position:absolute; top:20px; bottom:auto; left:14px; display:grid; grid-template-columns:none; grid-auto-flow:row; gap:0; padding:0; border:0; border-radius:0; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; transform:none; }
  .site-chrome .socialtop.is-sticky { top:20px; }
  .sticky-header.is-visible ~ .site-chrome .socialtop { top:20px; bottom:auto; left:14px; transform:none; }
  .site-home:not(.is-viewing-article) .menu-panel__social { display:flex; }
}
.article-page__content a::before { content:""; position:absolute; bottom:1px; left:0; display:block; width:100%; height:2px; background:currentColor; transform:scaleX(0); transform-origin:100% 50%; transition:transform .4s cubic-bezier(.83,0,.17,1); pointer-events:none; }
.article-page__content a:hover::before,
.article-page__content a:focus-visible::before { transform:scaleX(1); transform-origin:0 50%; }
.article-page__content a:focus-visible { outline:none; }
.article-page__content a:hover { color:#fff; }
.article-page__content .article-notice a,
.article-page__content .article-credits a,
.article-page__content .article-related-links a { transition:color .15s linear; }

/* Cartes Article — le bouton Read n’éclaircit que sa surface au survol. */
.article-card:hover .pill-button,
.article-card[data-article-link]:hover .pill-button { color:#fff; background:rgba(255,255,255,.25); box-shadow:0 0 96px 8px #000; filter:none; transform:none; }
.article-card.is-revealed { transition:transform .2s ease; }
.article-card.is-revealed:hover { transform:translateY(-2px); }

/* Cadence éditoriale commune et note 2020 des Props. */
.article-notice { margin-bottom:24px !important; }
.article-page__content > p.article-paragraph--lavender { color:#cfbaff; }
@media (max-width:600px) {
  .article-figure,
  .article-gallery .article-figure { margin:28px auto; }
  .article-panel-footer { margin-top:40px; }
}

/* Support bars — séquence d'entrée calée sur l'All Access Pass d'Apple :
   goutte verticale, capsule, expansion du fond, puis révélation du contenu. */
.support-bar--aap {
  position:relative;
  isolation:isolate;
  overflow:visible;
  border:0;
  background:rgba(4,0,42,.324956);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.support-bar--aap::before,
.support-bar--aap::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  pointer-events:none;
}
.support-bar--aap::after {
  z-index:0;
  width:100%;
  height:100%;
  border:1px solid rgba(222,207,255,.21);
  border-radius:40px;
  background:rgba(10,2,42,.5);
  box-shadow:inset 0 1px #ffffff13;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  transform:translate(-50%,-50%);
}
.support-bar--aap::before {
  z-index:2;
  width:56px;
  height:56px;
  border-radius:999px;
  background:rgb(10,2,42);
  opacity:0;
  transform:translate(-50%,-50%);
}
.support-bar__content {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
}
.support-bar__content > strong,
.support-bar__content > .support-button {
  position:relative;
}
.support-bar .support-button,
.support-bar .support-button--primary {
  box-shadow:none !important;
  filter:none;
  transition:background-color .2s linear,color .2s linear;
}
.support-bar .support-button:hover,
.support-bar .support-button:focus-visible {
  box-shadow:none !important;
  filter:none;
  transform:none;
}
.support-bar--hero:not(.is-aap-visible)::after {
  width:40px;
  height:36px;
  opacity:0;
  transform:translate(-50%,-50%) scale(1.3);
}
.support-bar--hero:not(.is-aap-visible) .support-bar__content > strong,
.support-bar--hero:not(.is-aap-visible) .support-bar__content > .support-button {
  opacity:0;
  transform:scale(.5);
}
.support-bar--hero.is-aap-visible::before,
.support-bar--footer.is-docked::before {
  animation:support-aap-intro 700ms both;
}
.support-bar--hero.is-aap-visible::after,
.support-bar--footer.is-docked::after {
  animation:support-aap-surface 700ms both;
}
.support-bar--hero.is-aap-visible .support-bar__content > strong,
.support-bar--hero.is-aap-visible .support-bar__content > .support-button,
.support-bar--footer.is-docked .support-bar__content > strong,
.support-bar--footer.is-docked .support-bar__content > .support-button {
  animation:support-aap-content 400ms 520ms both;
}
@keyframes support-aap-intro {
  0% { width:30px; height:80px; opacity:0; transform:translate(calc(-50% - 15px),-50%) scale(1.3); }
  2% { opacity:1; }
  5% { transform:translate(calc(-50% - 15px),-50%) scale(.8); }
  14% { width:56px; transform:translate(calc(-50% - 28px),-50%) scale(.8); }
  28% { height:56px; }
  52% { opacity:1; }
  60%,100% { opacity:0; }
}
@keyframes support-aap-surface {
  0% { width:40px; height:36px; opacity:0; transform:translate(-50%,-50%) scale(1.3); }
  2% { opacity:1; }
  30% { width:40px; height:36px; transform:translate(-50%,-50%) scale(1); }
  70%,100% { width:100%; height:100%; opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes support-aap-content {
  from { opacity:0; transform:scale(.5); }
  to { opacity:1; transform:scale(1); }
}
.support-bar--footer.is-docked {
  position:fixed;
  z-index:1;
  bottom:30px;
  left:50%;
  margin:0;
  transform:translateX(-50%);
}
.support-dock-layer {
  position:fixed;
  z-index:50;
  inset:0;
  pointer-events:none;
}
.support-dock-layer .support-bar--footer { pointer-events:auto; }

/* Footer — 80 px sous le disclaimer sur desktop; la version mobile le réduit plus bas. */
.footer-contact + p { margin-bottom:80px; }

/* Les deux support bars partagent les mêmes mesures, dont la version mobile. */
.support-bar--footer { height:69px; padding:0 18px 0 23px; }
.support-bar--footer .support-button { min-height:36px; font-size:14px; }
@media (max-width:720px) {
  .support-bar--footer { height:auto; min-height:58px; padding:8px 10px 8px 17px; }
  .support-bar--footer .support-button { min-height:34px; font-size:12px; }
}

/* Support Bar Base (Sketch) — surface, contour et ombres exportés à l’identique. */
.support-bar--aap::after {
  border:0;
  border-radius:35px;
  background:transparent;
  box-shadow:
    0 8px 92px -13px #000,
    0 0 0 1px rgba(0,0,0,.152508),
    inset 0 .5px 1px rgba(255,255,255,.3);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.support-bar--aap::before {
  border-radius:35px;
  background:rgba(4,0,42,.324956);
}
.support-bar__border {
  position:absolute;
  z-index:1;
  inset:0;
  padding:1px;
  border-radius:35px;
  background:linear-gradient(175.304deg,
    rgba(255,255,255,.4) 0%,
    rgba(255,255,255,.054134) 10.48827%,
    rgba(255,255,255,0) 48.015625%,
    rgba(255,255,255,.069034) 95.048745%,
    rgba(255,255,255,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.support-bar--aap::before { z-index:3; }
.support-bar__content { z-index:2; }
.support-bar--hero:not(.is-aap-visible) .support-bar__border { opacity:0; }
.support-bar--hero.is-aap-visible .support-bar__border,
.support-bar--footer.is-docked .support-bar__border { animation:support-aap-border 80ms 620ms both; }
@keyframes support-aap-border { from { opacity:0; } to { opacity:1; } }
@media (max-width:720px) {
  .support-bar--footer.is-docked {
    bottom:16px;
    width:min(calc(100% - 32px),494px);
  }
}

/* Cinématique « goutte » — reprise de la démo TwEnsanity : ascension,
   rebond, impact puis relâchement de la capsule et de ses enfants. */
.support-bar--aap {
  --support-final-width:494px;
  --support-final-height:69px;
  --support-final-padding:0 12px 0 24px;
  margin-inline:auto;
  will-change:width,height,transform,border-radius,opacity;
}
.support-bar--hero:not(.is-aap-visible) {
  width:20px;
  height:20px;
  padding:0;
  border-radius:999px;
  opacity:0;
  transform:translateY(110px);
}
.support-bar--hero.is-aap-visible {
  animation:support-bar-drop-hero 1.2s linear both;
}
.support-bar--footer.is-docked {
  animation:support-bar-drop-footer 1.2s linear both;
}
.support-bar--hero.is-aap-visible::before,
.support-bar--footer.is-docked::before,
.support-bar--hero.is-aap-visible::after,
.support-bar--footer.is-docked::after {
  animation:none;
}
.support-bar--hero.is-aap-visible .support-bar__border,
.support-bar--footer.is-docked .support-bar__border {
  animation:support-aap-border 100ms 820ms both;
}
.support-bar--aap {
  -webkit-backdrop-filter:blur(25px);
  backdrop-filter:blur(25px);
}
.support-bar__content { min-width:0; overflow:hidden; }
.support-bar__content > strong,
.support-bar__content > .support-button { min-width:0; }
.support-bar--hero:not(.is-aap-visible) .support-bar__content,
.support-bar--hero:not(.is-aap-visible) .support-bar__content > strong,
.support-bar--hero:not(.is-aap-visible) .support-bar__content > .support-button { opacity:0; transform:translateY(10px); }
.support-bar--hero.is-aap-visible .support-bar__content,
.support-bar--footer.is-docked .support-bar__content {
  animation:support-bar-content-expand 400ms ease-out 780ms both;
}
.support-bar--hero.is-aap-visible .support-bar__content > strong,
.support-bar--footer.is-docked .support-bar__content > strong {
  animation:support-bar-text-in 400ms ease-out 800ms both;
}
.support-bar--hero.is-aap-visible .support-bar__content > .support-button--secondary,
.support-bar--footer.is-docked .support-bar__content > .support-button--secondary {
  animation:support-bar-action-in 380ms cubic-bezier(.16,1,.3,1) 860ms both;
}
.support-bar--hero.is-aap-visible .support-bar__content > .support-button--primary,
.support-bar--footer.is-docked .support-bar__content > .support-button--primary {
  animation:support-bar-action-in 400ms cubic-bezier(.16,1,.3,1) 920ms both;
}
.support-bar--hero.is-aap-visible .support-button img,
.support-bar--footer.is-docked .support-button img {
  animation:support-bar-icon-in 320ms cubic-bezier(.16,1,.3,1) 1.02s both;
}
@keyframes support-bar-drop-hero {
  0% { width:20px; height:20px; padding:0; border-radius:999px; opacity:0; transform:translateY(110px); animation-timing-function:ease-out; }
  40% { width:30px; height:30px; padding:0; border-radius:999px; opacity:1; transform:translateY(-60px); animation-timing-function:ease-in; }
  60% { width:30px; height:30px; padding:0; border-radius:999px; opacity:1; transform:translateY(0); animation-timing-function:cubic-bezier(.175,.885,.32,1.275); }
  100% { width:var(--support-final-width); height:var(--support-final-height); padding:var(--support-final-padding); border-radius:999px; opacity:1; transform:translateY(0); }
}
@keyframes support-bar-drop-footer {
  0% { bottom:-100px; width:20px; height:20px; padding:0; border-radius:999px; opacity:0; transform:translateX(-50%); animation-timing-function:ease-out; }
  40% { bottom:60px; width:30px; height:30px; padding:0; border-radius:999px; opacity:1; transform:translateX(-50%); animation-timing-function:ease-in; }
  60% { bottom:30px; width:30px; height:30px; padding:0; border-radius:999px; opacity:1; transform:translateX(-50%); animation-timing-function:cubic-bezier(.175,.885,.32,1.275); }
  100% { bottom:30px; width:var(--support-final-width); height:var(--support-final-height); padding:var(--support-final-padding); border-radius:999px; opacity:1; transform:translateX(-50%); }
}
@keyframes support-bar-text-in {
  from { opacity:0; transform:translateY(10px) scaleY(.25); transform-origin:50% 100%; }
  to { opacity:1; transform:translateY(0) scaleY(1); transform-origin:50% 100%; }
}
@keyframes support-bar-action-in {
  from { min-height:0; height:0; opacity:0; transform:translateY(14px) scaleX(.92) scaleY(.2); transform-origin:50% 100%; }
  to { min-height:36px; height:36px; opacity:1; transform:translateY(0) scaleX(1) scaleY(1); transform-origin:50% 100%; }
}
@keyframes support-bar-icon-in {
  from { opacity:0; transform:scale(.5) rotate(-18deg); }
  to { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes support-bar-content-expand {
  from { max-height:0; opacity:0; transform:translateY(10px); }
  to { max-height:69px; opacity:1; transform:translateY(0); }
}
@media (max-width:720px) {
  .support-bar--aap {
    --support-final-width:100%;
    --support-final-height:58px;
    --support-final-padding:8px 10px 8px 17px;
  }
  @keyframes support-bar-drop-footer {
    0% { bottom:-100px; width:20px; height:20px; padding:0; border-radius:999px; opacity:0; transform:translateX(-50%); animation-timing-function:ease-out; }
    40% { bottom:56px; width:30px; height:30px; padding:0; border-radius:999px; opacity:1; transform:translateX(-50%); animation-timing-function:ease-in; }
    60% { bottom:30px; width:30px; height:30px; padding:0; border-radius:999px; opacity:1; transform:translateX(-50%); animation-timing-function:cubic-bezier(.175,.885,.32,1.275); }
    100% { bottom:30px; width:var(--support-final-width); height:var(--support-final-height); padding:var(--support-final-padding); border-radius:999px; opacity:1; transform:translateX(-50%); }
  }
  @keyframes support-bar-action-in {
    from { min-height:0; height:0; opacity:0; transform:translateY(14px) scaleX(.92) scaleY(.2); transform-origin:50% 100%; }
    to { min-height:34px; height:34px; opacity:1; transform:translateY(0) scaleX(1) scaleY(1); transform-origin:50% 100%; }
  }
}

/* Relais sticky : voile et retombée d’ombre propres au bas de viewport. */
.support-bar--footer.is-docked::after {
  box-shadow:
    0 140px 200px 150px rgba(0,0,0,.75),
    0 8px 92px -13px #000,
    0 0 0 1px rgba(0,0,0,.152508),
    inset 0 .5px 1px rgba(255,255,255,.3);
}
.support-bar--footer.is-docked { background:rgba(4,0,42,.6); }
.support-bar--aap,
.support-bar--aap::before,
.support-bar--aap::after,
.support-bar__border,
.support-bar .support-button { border-radius:999px; }
@media (max-width:720px) {
  .support-bar--footer.is-docked { bottom:30px; }
}

/* Les titres de niveau 2 ne portent plus de chasse ajoutée. */
h2,
.building-heading,
.section-heading,
.footer-contact h2,
.modal h2 { letter-spacing:normal !important; }

/* Libellé de la modale de soutien — conserve sa teinte lavande, malgré la
   règle générique des paragraphes de modale. */
.modal--support .modal-platform-label { color:#C4C0FF !important; }

/* Support bars desktop — actions de 46 px dans une capsule de 70 px. */
@media (min-width:721px) {
  .support-bar,
  .support-bar--footer {
    height:70px;
    padding:12px 12px 12px 23px;
  }
  .support-bar .support-button,
  .support-bar--footer .support-button {
    min-height:46px;
    height:46px;
  }
  .support-bar--aap {
    --support-final-height:70px;
    --support-final-padding:0 12px 0 24px;
  }
  @keyframes support-bar-action-in {
    from { min-height:0; height:0; opacity:0; transform:translateY(14px) scaleX(.92) scaleY(.2); transform-origin:50% 100%; }
    to { min-height:46px; height:46px; opacity:1; transform:translateY(0) scaleX(1) scaleY(1); transform-origin:50% 100%; }
  }
}

/* CTA de newsletter : reprend la couleur primaire Hector. */
.modal-waitlist button { background:#4341DA; }

/* Structure de la floating bar TwenSanity, reprise sans les anciens calques
   d'animation Hector qui entraient en concurrence avec elle. */
.support-bar.floating-bar {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  width:var(--support-final-width);
  height:var(--support-final-height);
  margin-inline:auto;
  padding:0 !important;
  border:0;
  border-radius:999px;
  background:rgba(3,0,20,.5);
  box-shadow:0 140px 200px 150px rgba(0,0,0,.75),0 8px 92px -13px #000,0 0 0 1px rgba(0,0,0,.152508),inset 0 .5px 1px rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(25px);
  backdrop-filter:blur(25px);
}
.support-bar.floating-bar::after,
.support-bar.floating-bar > .support-bar__border { display:none; }
.support-bar.floating-bar::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  width:auto;
  height:auto;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(175.304deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.054134) 10.48827%,rgba(255,255,255,0) 48.015625%,rgba(255,255,255,.069034) 95.048745%,rgba(255,255,255,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  opacity:1;
  transform:none;
}
.floating-bar .fb-content {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:var(--support-final-height);
  min-height:0;
  padding:var(--support-final-padding);
  opacity:1;
  transform:none;
  overflow:visible;
}
.support-bar.floating-bar .fb-text {
  flex:1;
  margin-right:20px;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:normal;
  white-space:nowrap;
}
.support-bar.floating-bar .fb-buttons { display:flex; gap:8px; }
.support-bar.floating-bar .fb-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:46px;
  height:46px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  color:#fff;
  box-shadow:none !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:normal;
  transition:transform .2s,background-color .2s;
  white-space:nowrap;
}
.support-bar.floating-bar .fb-btn img { width:20px; height:20px; margin-left:6px; object-fit:contain; }
.support-bar.floating-bar .btn-updates { background:rgba(255,255,255,.07); }
.support-bar.floating-bar .btn-updates:hover { background:rgba(255,255,255,.14); }
.support-bar.floating-bar .btn-support { background:#5140ef; }
.support-bar.floating-bar .btn-support:hover { background:#6253f5; }

.support-bar--hero.floating-bar:not(.is-aap-visible) {
  width:0;
  height:0;
  opacity:0;
  transform:translateY(110px);
}

/*
   Floating bar — composant TwenSanity repris à l'identique.
   Les seules variantes ci-dessous sont structurelles : la première capsule vit
   dans le hero et la seconde est remise dans le footer puis déplacée dans le
   calque fixe par script. Les dimensions, la surface et le scénario goutte
   restent ceux du composant de référence.
*/
.floating-bar {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  isolation:isolate;
  background:rgba(3,0,20,.5);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
  border:0;
  border-radius:999px;
  z-index:900;
  box-shadow:0 140px 200px 150px rgba(0,0,0,.75),0 8px 92px -13px #000,0 0 0 1px rgba(0,0,0,.152508),inset 0 .5px 1px rgba(255,255,255,.3);
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  width:0;
  height:0;
  padding:0;
  opacity:0;
}
.floating-bar::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(175.304deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.054134) 10.48827%,rgba(255,255,255,0) 48.015625%,rgba(255,255,255,.069034) 95.048745%,rgba(255,255,255,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.floating-bar .fb-content {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:70px;
  padding:0 12px 0 24px;
  box-sizing:border-box;
  opacity:0;
}
.floating-bar .fb-text {
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  margin-right:20px;
}
.floating-bar .fb-buttons { display:flex; gap:8px; }
.floating-bar .fb-btn {
  display:flex;
  align-items:center;
  height:46px;
  padding:0 16px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  font-weight:500;
  color:#fff;
  box-shadow:none;
  transition:transform .2s,background-color .2s;
  white-space:nowrap;
}
.floating-bar .fb-btn img { width:20px; height:20px; margin-left:6px; object-fit:contain; }
.floating-bar .btn-updates { background:rgba(255,255,255,.07); }
.floating-bar .btn-updates:hover { background:rgba(255,255,255,.14); }
.floating-bar .btn-support { background:#5140ef; }
.floating-bar .btn-support:hover { background:#6253f5; }

@keyframes drop-pop {
  0% { opacity:0; bottom:-100px; width:20px; height:20px; border-radius:50%; animation-timing-function:ease-out; }
  40% { opacity:1; bottom:60px; width:30px; height:30px; border-radius:50%; animation-timing-function:ease-in; }
  60% { bottom:30px; width:fit-content; max-width:30px; height:30px; border-radius:50%; animation-timing-function:cubic-bezier(.175,.885,.320,1.275); }
  100% { opacity:1; bottom:30px; width:fit-content; max-width:1000px; height:70px; border-radius:50px; }
}
@keyframes content-fade-in {
  0% { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}

/* La barre du hero utilise le même rebond ; seule l'ordonnée est locale. */
.floating-bar--hero {
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  box-shadow:0 8px 92px -13px #000,0 0 0 1px rgba(0,0,0,.152508),inset 0 .5px 1px rgba(255,255,255,.3);
}
.floating-bar--hero:not(.is-aap-visible) { bottom:-100px; width:0; height:0; opacity:0; }
.floating-bar--hero.is-aap-visible { animation:drop-pop-hero 1.2s linear forwards; }
.floating-bar--hero.is-aap-visible .fb-content { animation:content-fade-in .4s ease-out .7s forwards; }
@keyframes drop-pop-hero {
  0% { opacity:0; bottom:-100px; width:20px; height:20px; border-radius:50%; transform:translateX(-50%); animation-timing-function:ease-out; }
  40% { opacity:1; bottom:60px; width:30px; height:30px; border-radius:50%; transform:translateX(-50%); animation-timing-function:ease-in; }
  60% { bottom:0; width:fit-content; max-width:30px; height:30px; border-radius:50%; transform:translateX(-50%); animation-timing-function:cubic-bezier(.175,.885,.320,1.275); }
  100% { opacity:1; bottom:0; width:fit-content; max-width:1000px; height:70px; border-radius:50px; transform:translateX(-50%); }
}

/* Au repos elle est la même capsule dans le footer ; au docking elle reprend
   littéralement l'animation fixed de TwenSanity. */
.floating-bar--footer {
  position:relative;
  bottom:auto;
  left:auto;
  transform:none;
  width:fit-content;
  max-width:1000px;
  height:70px;
  margin-inline:auto;
  opacity:1;
}
.floating-bar--footer .fb-content { opacity:1; }
.floating-bar--footer.is-docked {
  position:fixed;
  z-index:900;
  bottom:30px;
  left:50%;
  width:0;
  max-width:none;
  height:0;
  margin:0;
  opacity:0;
  transform:translateX(-50%);
  animation:drop-pop 1.2s linear forwards;
}
/* La version de référence laisse la capsule seule pendant sa chute et son
   expansion. Le contenu ne commence donc qu'à +700 ms, jamais avec la bulle. */
.floating-bar--footer.is-docked .fb-content {
  opacity:0;
  animation:content-fade-in .4s ease-out .7s both;
}
/* Capsule sticky basse : au retour sous 230 px elle quitte le viewport par le
   bas, puis le script la rend à sa place normale hors de l'écran. */
.floating-bar--footer.is-docked.is-leaving {
  pointer-events:none;
}
.support-dock-layer { z-index:900; }
.support-dock-layer .floating-bar--footer { pointer-events:auto; }
.btn-support-label--mobile { display:none; }

@media (max-width:768px) {
  .floating-bar .fb-content { flex-direction:column; justify-content:center; gap:8px; width:100%; height:100%; padding:10px; }
  .floating-bar .fb-text { margin-right:0; font-size:15px; text-align:center; margin-bottom:4px; }
  .floating-bar .fb-buttons { width:100%; justify-content:center; gap:8px; }
  .floating-bar .fb-btn { justify-content:center; padding:0 10px; font-size:13px; height:40px; }
  .floating-bar .btn-updates .btn-text { display:inline; }
  .floating-bar .btn-updates img { margin-left:4px !important; }
  .floating-bar .btn-updates { flex:0 1 auto; padding:0 10px; border-radius:20px; }
  .floating-bar .btn-support { width:auto; padding:0 20px; flex:0 1 auto; }
  .btn-support-label--desktop { display:none; }
  .btn-support-label--mobile { display:inline; }
  .floating-bar--hero.is-aap-visible { animation-name:drop-pop-hero-mobile; }
  .floating-bar--footer.is-docked { animation-name:drop-pop-mobile; }
}
@keyframes drop-pop-mobile {
  0% { opacity:0; bottom:-100px; width:20px; height:20px; border-radius:50%; animation-timing-function:ease-out; }
  40% { opacity:1; bottom:60px; width:30px; height:30px; border-radius:50%; animation-timing-function:ease-in; }
  60% { bottom:30px; width:fit-content; max-width:30px; height:30px; border-radius:50%; animation-timing-function:cubic-bezier(.175,.885,.320,1.275); }
  100% { opacity:1; bottom:30px; width:fit-content; max-width:90vw; min-width:0; height:102px; border-radius:30px; }
}
@keyframes drop-pop-hero-mobile {
  0% { opacity:0; bottom:-100px; width:20px; height:20px; border-radius:50%; transform:translateX(-50%); animation-timing-function:ease-out; }
  40% { opacity:1; bottom:60px; width:30px; height:30px; border-radius:50%; transform:translateX(-50%); animation-timing-function:ease-in; }
  60% { bottom:0; width:fit-content; max-width:30px; height:30px; border-radius:50%; transform:translateX(-50%); animation-timing-function:cubic-bezier(.175,.885,.320,1.275); }
  100% { opacity:1; bottom:0; width:fit-content; max-width:90vw; min-width:0; height:102px; border-radius:30px; transform:translateX(-50%); }
}

/* Entrée du landing : même révélation que les cartes, orchestrée du haut vers
   le bas. Les propriétés `translate` préservent les transforms structurels. */
.landing-background-fade { position:fixed; z-index:0; inset:0; pointer-events:none; background:#07001d; opacity:1; }
html:not(.is-landing-ready) .hero-objects,
html:not(.is-landing-ready) .socialtop,
html:not(.is-landing-ready) .menu-button,
html:not(.is-landing-ready) .hero h1,
html:not(.is-landing-ready) .availability,
html:not(.is-landing-ready) .building-heading { opacity:0; }
html:not(.is-landing-ready) .hero-blink-gif { opacity:0; filter:blur(8px); transform:translateY(-440px) scale(8); }
html:not(.is-landing-ready) .hero-workmark img { opacity:0; translate:0 18px; }
html.is-landing-ready .landing-background-fade { animation:landing-background-in 1.15s ease-out .08s forwards; }
html.is-landing-ready .hero-objects { animation:landing-fade-in 1.05s ease-out .18s both; }
html.is-landing-ready .socialtop { animation:landing-rise-in .62s cubic-bezier(.16,1,.3,1) .44s both; }
html.is-landing-ready .menu-button { animation:landing-rise-in .62s cubic-bezier(.16,1,.3,1) .54s both; }
html.is-landing-ready .hero-blink-gif { transform-origin:50% 50%; animation:landing-logo-arrive 1s cubic-bezier(.34,1.36,.64,1) .2s both; will-change:transform,opacity,filter; }
html.is-landing-ready .hero-workmark img { animation:landing-letter-in .48s cubic-bezier(.16,1,.3,1) both; }
html.is-landing-ready .hero-workmark img:nth-child(1) { animation-delay:.4s; }
html.is-landing-ready .hero-workmark img:nth-child(2) { animation-delay:.48s; }
html.is-landing-ready .hero-workmark img:nth-child(3) { animation-delay:.56s; }
html.is-landing-ready .hero-workmark img:nth-child(4) { animation-delay:.64s; }
html.is-landing-ready .hero-workmark img:nth-child(5) { animation-delay:.72s; }
html.is-landing-ready .hero-workmark img:nth-child(6) { animation-delay:.8s; }
html.is-landing-ready .hero h1 { animation:landing-rise-in .7s cubic-bezier(.16,1,.3,1) 1.26s both; }
html.is-landing-ready .availability { animation:landing-rise-in .62s cubic-bezier(.16,1,.3,1) 1.4s both; }
html.is-landing-ready .building-heading { animation:landing-rise-in .7s cubic-bezier(.16,1,.3,1) 1.84s both; }
@keyframes landing-background-in { to { opacity:0; visibility:hidden; } }
@keyframes landing-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes landing-rise-in { from { opacity:0; translate:0 22px; } to { opacity:1; translate:0 0; } }
@keyframes landing-letter-in { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
@keyframes landing-logo-arrive {
  0% { opacity:0; filter:blur(8px); transform:translateY(-440px) scale(8); }
  10% { opacity:1; }
  100% { opacity:1; filter:blur(0); transform:translateY(0) scale(1); }
}
.support-bar--hero.floating-bar.is-aap-visible { animation:twensanity-drop-pop-hero 1.2s linear forwards; }
.support-bar--footer.floating-bar.is-docked {
  position:fixed;
  z-index:900;
  bottom:30px;
  left:50%;
  margin:0;
  animation:twensanity-drop-pop-footer 1.2s linear forwards;
}
.support-bar--hero.floating-bar.is-aap-visible .fb-content,
.support-bar--footer.floating-bar.is-docked .fb-content { animation:twensanity-content-fade-in .4s ease-out .7s both; }
.support-bar--hero.floating-bar.is-aap-visible .fb-btn,
.support-bar--footer.floating-bar.is-docked .fb-btn,
.support-bar--hero.floating-bar.is-aap-visible .fb-btn img,
.support-bar--footer.floating-bar.is-docked .fb-btn img { animation:none; opacity:1; transform:none; }
@keyframes twensanity-drop-pop-hero {
  0% { opacity:0; width:20px; height:20px; border-radius:999px; transform:translateY(110px); animation-timing-function:ease-out; }
  40% { opacity:1; width:30px; height:30px; border-radius:999px; transform:translateY(-60px); animation-timing-function:ease-in; }
  60% { width:30px; max-width:30px; height:30px; border-radius:999px; transform:translateY(0); animation-timing-function:cubic-bezier(.175,.885,.320,1.275); }
  100% { opacity:1; width:var(--support-final-width); max-width:var(--support-final-width); height:var(--support-final-height); border-radius:999px; transform:translateY(0); }
}
@keyframes twensanity-drop-pop-footer {
  0% { opacity:0; bottom:-100px; width:20px; height:20px; border-radius:999px; transform:translateX(-50%); animation-timing-function:ease-out; }
  40% { opacity:1; bottom:60px; width:30px; height:30px; border-radius:999px; transform:translateX(-50%); animation-timing-function:ease-in; }
  60% { bottom:30px; width:30px; max-width:30px; height:30px; border-radius:999px; transform:translateX(-50%); animation-timing-function:cubic-bezier(.175,.885,.320,1.275); }
  100% { opacity:1; bottom:30px; width:var(--support-final-width); max-width:var(--support-final-width); height:var(--support-final-height); border-radius:999px; transform:translateX(-50%); }
}
@keyframes twensanity-content-fade-in {
  0% { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}
@media (max-width:720px) {
  .hero { height:680px; }
  .hero-details { padding-bottom:102px; }
  .support-bar.floating-bar .fb-content { height:var(--support-final-height); }
  .support-bar.floating-bar .fb-btn { min-height:34px; height:34px; padding:0 10px; font-size:12px; }
  .support-bar.floating-bar .fb-btn img { width:18px; height:18px; margin-left:4px; }
  .support-bar--footer.floating-bar.is-docked { bottom:30px; width:min(calc(100% - 32px),494px); }
}

/* Newsletter Brevo — le formulaire généré sert uniquement de passerelle.
   L'interface, y compris le choix de liste, reste intégralement native à Hector. */
.newsletter-step--email { display:flex; align-items:center; width:100%; height:100%; }
.modal-waitlist .newsletter-honeypot { position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }
.newsletter-choice-screen,.newsletter-success { display:none; }
.modal--newsletter .modal-panel { transition:width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1); }
.modal--newsletter.is-list-choice .modal-panel,
.modal--newsletter.is-newsletter-success .modal-panel { width:449px; height:326px; }
.modal--newsletter.is-list-choice .modal-content,
.modal--newsletter.is-newsletter-success .modal-content { width:369px; height:266px; margin:30px 40px; }
.modal--newsletter.is-list-choice .modal-intro,
.modal--newsletter.is-list-choice .modal-youtube-subscribe,
.modal--newsletter.is-list-choice .modal-newsletter-divider,
.modal--newsletter.is-newsletter-success .modal-intro,
.modal--newsletter.is-newsletter-success .modal-youtube-subscribe,
.modal--newsletter.is-newsletter-success .modal-newsletter-divider { display:none; }
.modal--newsletter.is-list-choice .modal-waitlist { position:relative; top:auto; left:auto; display:block; width:100%; height:100%; background:transparent; }
.modal--newsletter.is-list-choice .newsletter-step--email { display:none; }
.modal--newsletter.is-list-choice .newsletter-choice-screen { display:grid; grid-template-columns:1fr; gap:7px; width:100%; min-width:0; margin:0; padding:0; border:0; }
.newsletter-choice-screen legend { width:100%; margin:0 0 29px; padding:0; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:20px; font-weight:600; line-height:24px; letter-spacing:-.3px; text-align:center; }
.newsletter-choice { position:relative; display:flex; align-items:center; gap:11px; min-height:37px; padding:0 14px; border-radius:999px; color:rgba(255,255,255,.8); background:rgba(196,192,255,.1); cursor:pointer; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; font-weight:500; line-height:19px; transition:background-color .15s linear,color .15s linear; }
.newsletter-choice:hover { color:#fff; background:rgba(196,192,255,.16); }
.newsletter-choice input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.newsletter-choice__radio { display:grid; flex:0 0 15px; width:15px; height:15px; place-items:center; border:1px solid rgba(196,192,255,.65); border-radius:50%; transition:border-color .15s linear,background-color .15s linear; }
.newsletter-choice__radio::after { width:7px; height:7px; border-radius:50%; background:#fff; content:""; opacity:0; transform:scale(.6); transition:opacity .15s linear,transform .15s cubic-bezier(.16,1,.3,1); }
.newsletter-choice input:checked + .newsletter-choice__radio { border-color:#4341DA; background:#4341DA; }
.newsletter-choice input:checked + .newsletter-choice__radio::after { opacity:1; transform:scale(1); }
.newsletter-choice:has(input:checked) { color:#fff; background:rgba(67,65,218,.34); }
.newsletter-choice input:focus-visible + .newsletter-choice__radio { outline:2px solid #fff; outline-offset:3px; }
.newsletter-submit-error { min-height:0; margin:0; color:#ffc0c0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:12px; line-height:16px; text-align:center; }
.newsletter-submit-error:not(:empty) { min-height:16px; margin:2px 0 -2px; }
.newsletter-confirm { position:relative; isolation:isolate; justify-self:end; width:172px; height:44px; margin-top:1px; padding:0; border:0; border-radius:999px; color:#fff; background:#4341DA; box-shadow:0 8px 92px -13px #000,0 0 0 1px rgba(0,0,0,.152508),inset 0 .5px 1px rgba(255,255,255,.3); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; font-weight:500; line-height:19px; transition:filter .15s linear,opacity .15s linear; }
.newsletter-confirm::before { position:absolute; z-index:0; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(175.304deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.054134) 10.48827%,rgba(255,255,255,0) 48.015625%,rgba(255,255,255,.069034) 95.048745%,rgba(255,255,255,0) 100%); content:""; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; pointer-events:none; }
.newsletter-confirm span { position:relative; z-index:1; }
.newsletter-confirm:hover { filter:brightness(1.1); }
.newsletter-confirm:disabled { cursor:wait; opacity:.62; }
.modal--newsletter.is-newsletter-success .modal-waitlist { display:none; }
.modal--newsletter.is-newsletter-success .newsletter-success { display:grid; height:100%; place-content:center; text-align:center; }
.newsletter-success h2 { margin:0 0 10px; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:27px; font-weight:700; line-height:37px; letter-spacing:-1.026px; }
.newsletter-success p { max-width:300px; margin:0 auto; color:rgba(255,255,255,.82); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:20px; }

@media (max-width:600px) {
  .modal--newsletter.is-list-choice .modal-panel,
  .modal--newsletter.is-newsletter-success .modal-panel { width:min(100%,449px); height:auto; }
  .modal--newsletter.is-list-choice .modal-content,
  .modal--newsletter.is-newsletter-success .modal-content { width:auto; height:auto; min-height:266px; margin:28px 24px; }
  .modal--newsletter.is-list-choice .modal-waitlist { min-height:266px; }
  .modal--newsletter.is-list-choice .newsletter-choice-screen { padding-top:6px; }
}

/* CTA des produits — structure de Sketch : pictogramme à gauche, libellé à
   droite. Chaque capsule s'ajuste à son contenu ; les paires gardent 15 px. */
.product-card__ctas { position:absolute; top:270px; left:50%; display:flex; align-items:center; gap:15px; transform:translateX(-50%); }
.product-card .product-card__ctas .product-cta { position:static; display:inline-flex; width:max-content; min-width:0; height:43px; min-height:43px; margin:0; padding:0 25px; gap:0; font-weight:450; transform:none; transition:background-color .2s; }
.product-card .product-card__ctas .product-cta:hover { color:#fff; background:rgba(255,255,255,.25); box-shadow:0 0 96px 8px rgba(0,0,0,.3); transform:none; }
.product-card h3,.product-card p { z-index:1; }
.product-card__ctas { z-index:0; }
.product-card .product-card__ctas .product-cta img { order:0; width:32px; height:33px; flex:0 0 32px; }
.product-cta__divider { display:block; width:2px; height:21px; flex:0 0 2px; margin:0 12px; opacity:.3; background:#fff; }
.product-cta__downloads { opacity:.3; }

@media (max-width:720px) {
  .product-card__ctas { top:189px; gap:15px; }
  .product-card .product-card__ctas .product-cta { height:30px; min-height:30px; padding:0 25px; gap:0; }
  .product-card .product-card__ctas .product-cta img { width:24px; height:25px; flex-basis:24px; }
  .product-cta__divider { height:16px; }
}

/* Palier tablette / grand mobile : on reprend exactement la capsule compacte
   existante. Le contenu reste en ligne et ne se comprime pas ; le palier
   mobile actuel ne commence qu'en dessous. */
@media (min-width:501px) and (max-width:768px) {
  .floating-bar .fb-content {
    flex-direction:row;
    justify-content:center;
    gap:0;
    height:70px;
    padding:0 12px 0 24px;
  }
  .floating-bar .fb-text { flex:0 0 auto; margin:0 12px 0 0; }
  .floating-bar .fb-buttons { flex:0 0 auto; width:auto; gap:8px; }
  .floating-bar .fb-btn { min-height:46px; height:46px; padding:0 16px; font-size:14px; }
  .floating-bar .fb-btn img { width:20px; height:20px; margin-left:6px !important; }
  .floating-bar--hero.is-aap-visible { animation-name:drop-pop-hero; }
  .floating-bar--footer.is-docked { animation-name:drop-pop; }
}

/* Bas des cartes « Currently building » : trois colonnes, avec le même
   intervalle de part et d'autre du texte. */
@media (min-width:721px) {
  .project-stack .project-card .project-bottom {
    right:40px;
    bottom:36px;
    left:0;
    display:grid;
    grid-template-columns:max-content minmax(0,1fr) 168px;
    grid-template-rows:63px;
    align-items:center;
    column-gap:0;
    min-height:0;
    height:63px;
  }
  .project-stack .project-card .project-logo {
    position:static;
    width:auto;
    max-width:422px;
    height:164px;
    margin:0;
    align-self:end;
    object-position:left bottom;
  }
  .project-stack .project-card .project-bottom p {
    position:static;
    width:auto;
    max-width:none;
    margin:0 10px 0 0;
    font-size:20px;
    line-height:24px;
  }
  .project-stack .project-card .project-cta {
    position:static;
    width:168px;
    height:63px;
    grid-template-rows:43px 11px;
    row-gap:9px;
    align-content:start;
    justify-self:end;
  }
  .project-stack .project-card .project-cta small { line-height:11px; }
  .project-stack .project-card--crash .project-bottom {
    right:40px;
    bottom:36px;
    left:0;
    grid-template-columns:345px minmax(0,1fr) 168px;
  }
  .project-stack .project-card--crash .project-logo {
    position:static;
    width:345px;
    max-width:none;
    height:244px;
    transform:translateY(42px);
  }
  .project-card--fictions .project-logo-swap { position:relative; width:369px; height:164px; }
  .project-card--fictions .project-logo-swap .project-logo { position:absolute; inset:0 auto 0 0; width:auto; max-width:100%; height:164px; transition:opacity 420ms ease; }
  .project-card--fictions .project-image { transition:opacity 420ms ease; }
  .project-card--fictions .project-image--next,
  .project-card--fictions .project-logo--next { opacity:0; }
  .project-card--fictions.is-fictions-switching [data-fictions-cover] { opacity:0; }
  .project-card--fictions.is-fictions-switching [data-fictions-cover-next],
  .project-card--fictions.is-fictions-switching [data-fictions-logo-next] { opacity:1; }
  .project-card--fictions.is-fictions-switching [data-fictions-logo] { opacity:0; }
}

/* Le changement Fictions est un vrai fondu enchaîné : la nouvelle cover est
   déjà peinte sous l'ancienne. Une interpolation linéaire évite le voile
   résiduel perceptible avec la courbe ease. */
.project-card--fictions .project-image { z-index:1; transition-timing-function:linear; }
.project-card--fictions .project-image--next { z-index:0; }
.project-card--fictions .project-video { opacity:0; pointer-events:none; transition:opacity 420ms linear; }
.project-card--fictions.is-fictions-levels-active .project-video { opacity:1; }
.project-card--fictions::after { z-index:2; }
.project-card--fictions .project-bottom { z-index:3; }
.project-card--fictions .project-logo-swap .project-logo { transition-timing-function:linear; }

@media (max-width:720px) {
  .project-stack .project-card .project-bottom,
  .project-stack .project-card--crash .project-bottom {
    grid-template-columns:minmax(0,1fr) max-content;
    grid-template-areas:
      "logo cta"
      "copy copy";
    column-gap:10px;
    row-gap:4px;
    align-items:center;
  }
  .project-stack .project-card .project-bottom > .project-logo,
  .project-stack .project-card .project-bottom > .project-logo-swap {
    grid-area:logo;
    translate:-20px 0;
  }
  .project-stack .project-card .project-bottom > p,
  .project-stack .project-card .project-bottom > .project-copy-swap {
    grid-area:copy;
    max-width:none;
  }
  .project-stack .project-card .project-bottom > .project-cta {
    grid-area:cta;
    justify-self:end;
    align-self:center;
  }
}

@media (max-width:600px) {
  .modal--newsletter .modal-waitlist {
    height:auto;
    margin-top:24px;
    border-radius:0;
    background:transparent;
  }
  .modal--newsletter .newsletter-step--email {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    height:auto;
  }
  .modal--newsletter .modal-waitlist input {
    width:100%;
    height:60px;
    border-radius:999px;
    background:rgba(196,192,255,.1);
  }
  .modal--newsletter .modal-waitlist button {
    width:100%;
    height:44px;
    margin:0;
  }
}

/* La séquence Levels reste lisible à toutes les tailles : son image animée
   reçoit un voile sombre et un flou qui gagnent graduellement la moitié basse. */
.project-card--fictions.is-fictions-levels-active::after {
  display:block;
  z-index:2;
  inset:48% 0 0;
  height:auto;
  background:linear-gradient(to bottom, rgba(7,0,26,0) 0%, rgba(7,0,26,.2) 16%, rgba(7,0,26,.7) 58%, rgba(7,0,26,.95) 100%);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 18%, #000 68%);
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 18%, #000 68%);
}

@media (max-width:720px) {
  .project-card--fictions.is-fictions-levels-active::after {
    inset:37% 0 0;
  }
}

/* Composition mobile des cartes projet : la cover occupe la moitié haute,
   puis se prolonge en reflet. Le voile inférieur masque progressivement ce
   reflet sans toucher aux éléments éditoriaux qui restent ancrés au bas. */
@media (max-width:720px) {
  .page-background {
    /* Asset mobile dédié : affiché directement à sa résolution utile, sans
       sur-agrandissement GPU qui le rendait flou sur les écrans Retina. */
    background-image:url("assets/bg-mobile.jpg?v=20260913-hq");
    background-position:center top;
    background-size:cover;
  }

  .hero {
    height:650px;
  }
  .hero-objects .hero-objects__left,
  .hero-objects .hero-objects__right {
    display:none!important;
  }
  .hero-objects .hero-objects__mobile {
    top:0;
    left:50%;
    display:block!important;
    width:auto;
    height:270px!important;
    transform:translateX(-50%);
  }
  .hero-intro {
    width:min(92vw,390px);
    padding-top:38px;
  }
  .hero-animated-logo {
    width:238px;
    height:157px;
    flex-basis:157px;
  }
  .hero-blink-gif {
    left:67px;
    width:98px;
    height:98px;
  }
  .hero-workmark {
    top:77px;
    left:18px;
    transform:scale(.83);
    transform-origin:top left;
  }
  .hero-details {
    width:min(calc(100vw - 32px),390px);
    margin-top:24px;
    padding-bottom:92px;
  }
  .hero h1 {
    font-size:16px;
    line-height:20px;
  }
  .hero-tagline--desktop { display:none!important; }
  .hero-tagline--mobile { display:inline!important; }
  .availability {
    margin:18px auto 20px;
    font-size:13px;
  }
  .building-heading {
    bottom:46px;
    gap:7px;
    font-size:20px;
    line-height:28px;
    white-space:nowrap;
  }
  .building-heading img {
    width:30px;
    height:28px;
  }

  .support-bar.floating-bar .fb-content {
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 12px;
  }
  .support-bar.floating-bar .fb-text {
    width:auto;
    flex:1 1 auto;
    margin-right:0;
    font-size:13px;
    text-align:center;
    white-space:nowrap;
  }
  .support-bar.floating-bar .fb-buttons {
    flex:0 0 auto;
    width:auto;
    gap:6px;
  }
  .support-bar.floating-bar .btn-updates {
    padding:0 8px;
  }
  .support-bar.floating-bar .btn-updates .btn-text {
    font-size:0;
  }
  .support-bar.floating-bar .btn-updates .btn-text::after {
    content:"Sub";
    font-size:12px;
  }
  .support-bar.floating-bar .btn-support {
    padding:0 12px;
  }
  .support-bar.floating-bar .btn-updates,
  .support-bar.floating-bar .btn-support {
    border-radius:999px !important;
  }

  .project-stack .project-card {
    height:auto;
    aspect-ratio:1060 / 939;
  }
  .project-stack .project-card .project-image {
    inset:0 0 auto;
    /* 1060 / (939 × 2 / 3) = 1060 / 626 : la cover conserve exactement
       la proportion des cartes desktop. */
    height:66.6667%;
  }
  .project-stack .project-card::before {
    z-index:2;
    inset:66.6667% 0 auto;
    height:66.6667%;
    border-radius:0;
    background:var(--mobile-project-cover) center / cover no-repeat;
    box-shadow:none;
    content:"";
    transform:scaleY(-1);
    transform-origin:center;
  }
  .project-stack .project-card::after {
    display:block;
    z-index:3;
    inset:37% 0 0;
    height:auto;
    border-radius:0 0 22px 22px;
    background:linear-gradient(to bottom, rgba(7,0,26,0) 0%, rgba(7,0,26,.16) 17%, rgba(7,0,26,.7) 58%, rgba(7,0,26,.96) 100%);
    -webkit-backdrop-filter:blur(0);
    backdrop-filter:blur(0);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 17%, #000 68%);
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 17%, #000 68%);
  }
  .project-stack .project-card::after {
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }
  .project-stack .project-card .project-bottom,
  .project-stack .project-card--crash .project-bottom {
    z-index:4;
    bottom:24px;
  }
  .project-stack .project-card .project-cta .pill-button[data-track="project_interest"] {
    min-height:30px;
    height:30px;
    padding:0 18px;
    border-radius:999px;
    font-size:13px;
    line-height:15px;
  }

  .footer-contact a,
  .footer-contact img {
    width:60px;
    height:60px;
  }
}

/* Test : les visuels de projets restent bruts, sans voile sombre ajouté en bas. */
.project-card::after { display:none; }

/* GLTF : le bloc éditorial s'empile depuis le bas. Sa hauteur dépend donc
   réellement du titre et de l'introduction, sans coordonnées à maintenir. */
.product-card--gltf > div {
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  box-sizing:border-box;
  padding:36px 30px 40px;
}
.product-card--gltf h3,
.product-card--gltf p,
.product-card--gltf .product-card__ctas {
  position:static;
  left:auto;
  top:auto;
  transform:none;
}
.product-card--gltf h3 { margin:0 0 28px; }
.product-card--gltf p { width:auto; margin:0 0 28px; white-space:normal; text-wrap:wrap; }
.product-card--gltf .product-card__ctas { flex:none; }

@media (max-width:720px) {
  .product-card--gltf > div { padding:22px 21px 29px; }
  .product-card--gltf h3 { margin-bottom:18px; }
  .product-card--gltf p { margin-bottom:17px; }
}
.project-card--fictions.is-fictions-reset .project-image,
.project-card--fictions.is-fictions-reset .project-logo-swap .project-logo { transition:none!important; }

/* Hector Creator emploie le même double calque que Fictions, y compris pour
   le texte afin que chaque suite Eyrie / Figs / Scales reste synchronisée. */
.project-card--creator .project-logo-swap { position:relative; width:322px; height:164px; align-self:end; }
.project-card--creator .project-logo-swap .project-logo { position:absolute; inset:0 auto 0 0; width:auto; max-width:100%; height:164px; transition:opacity 420ms linear; }
.project-card--creator .project-copy-swap { position:relative; height:120px; margin-right:10px; align-self:center; }
.project-stack .project-card--creator .project-copy-swap p { position:absolute; top:50%; right:0; left:0; width:auto; max-width:none; margin:0; color:#fff; font-size:20px; line-height:24px; letter-spacing:-.035em; transform:translateY(-50%); transition:opacity 420ms linear; }
.project-card--creator .project-copy--next,
.project-card--creator .project-logo--next { opacity:0; }
.project-card--creator .project-image { z-index:1; transition:opacity 420ms linear; }
.project-card--creator .project-image--next { z-index:0; }
.project-card--creator::after { z-index:2; }
.project-card--creator .project-bottom { z-index:3; }
.project-card--creator.is-creator-switching [data-creator-cover],
.project-card--creator.is-creator-switching [data-creator-logo],
.project-card--creator.is-creator-switching [data-creator-copy] { opacity:0; }
.project-card--creator.is-creator-switching [data-creator-cover-next],
.project-card--creator.is-creator-switching [data-creator-logo-next],
.project-card--creator.is-creator-switching [data-creator-copy-next] { opacity:1; }
.project-card--creator.is-creator-reset .project-image,
.project-card--creator.is-creator-reset .project-logo-swap .project-logo,
.project-card--creator.is-creator-reset .project-copy-swap p { transition:none!important; }
/* Les descriptions des projets conservent toujours leurs retours naturels. */
.project-stack .project-bottom p { text-wrap:wrap; }
.project-cta__chevron { width:12px; height:12px; margin-left:5px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.project-bottom p,
.project-stack .project-card--creator .project-copy-swap p { letter-spacing:-.01em; }

/* Les logos simples s'alignent sur la position visuelle des logos Fictions.
   TwEnsanity conserve son placement sur mesure. */
@media (min-width:1001px) {
  .project-stack .project-card--crash .project-cta { grid-template-rows:43px; align-content:center; }
  .project-stack .project-card:not(.project-card--fictions):not(.project-card--crash):not(.project-card--creator) > .project-bottom > .project-logo { transform:translateY(36px); }
  .project-card--creator .project-logo-swap { transform:translateY(36px); }
}

@media (min-width:721px) and (max-width:1000px) {
  .project-stack .project-card--crash .project-cta { grid-template-rows:43px; align-content:center; }
  .project-stack .project-card .project-bottom {
    grid-template-columns:minmax(180px,240px) minmax(0,1fr) 140px;
    column-gap:0;
  }
  .project-stack .project-card .project-logo { width:100%; max-width:240px; height:120px; }
  .project-card--fictions .project-logo-swap { width:270px; height:120px; }
  .project-card--fictions .project-logo-swap .project-logo { width:auto; max-width:100%; height:120px; }
  .project-card--creator .project-logo-swap { width:235px; height:120px; }
  .project-card--creator .project-logo-swap .project-logo { width:auto; max-width:100%; height:120px; }
  .project-card--creator .project-copy-swap { height:104px; }
  .project-stack .project-card:not(.project-card--fictions):not(.project-card--crash):not(.project-card--creator) > .project-bottom > .project-logo { transform:translateY(36px); }
  .project-card--creator .project-logo-swap { transform:translateY(36px); }
  .project-stack .project-card .project-cta { width:140px; }
  .project-stack .project-card--crash .project-bottom { grid-template-columns:260px minmax(0,1fr) 140px; }
  .project-stack .project-card--crash .project-logo { width:260px; height:184px; }
}

/* Les appels « I’m interested! » reprennent désormais la capsule aplanie des
   CTA produits : même gabarit, fond translucide et flou, sans liseré ni
   lumière interne. */
.project-stack .project-cta .pill-button {
  width:max-content;
  min-height:43px;
  height:43px;
  padding:0 25px;
  border:0;
  border-radius:35px;
  background:rgba(255,255,255,.15);
  box-shadow:0 0 96px 8px rgba(0,0,0,.3);
  font-size:18px;
  font-weight:500;
  line-height:21px;
  letter-spacing:-.1202px;
  filter:none;
  transform:none;
  transition:background-color .2s;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
.project-stack .project-cta .pill-button:hover {
  color:#fff;
  background:rgba(255,255,255,.25);
  filter:none;
  transform:none;
}

@media (max-width:720px) {
  .project-card--fictions .project-logo-swap { position:relative; width:180px; height:74px; }
  .project-card--fictions .project-logo-swap .project-logo { position:absolute; inset:0 auto 0 0; width:auto; max-width:100%; height:74px; transition:opacity 420ms ease; }
  .project-card--fictions .project-image { transition:opacity 420ms ease; }
  .project-card--fictions .project-image--next,
  .project-card--fictions .project-logo--next { opacity:0; }
  .project-card--fictions.is-fictions-switching [data-fictions-cover] { opacity:0; }
  .project-card--fictions.is-fictions-switching [data-fictions-cover-next],
  .project-card--fictions.is-fictions-switching [data-fictions-logo-next] { opacity:1; }
  .project-card--fictions.is-fictions-switching [data-fictions-logo] { opacity:0; }
  .project-card--creator .project-logo-swap { position:relative; width:180px; height:74px; }
  .project-card--creator .project-logo-swap .project-logo { position:absolute; inset:0 auto 0 0; width:auto; max-width:100%; height:74px; transition:opacity 420ms linear; }
  .project-card--creator .project-copy-swap { position:relative; height:72px; margin-right:0; }
  .project-stack .project-card--creator .project-copy-swap p { top:50%; margin:0; font-size:14px; line-height:17px; transform:translateY(-50%); }
}

/* Dernière couche afin de couvrir aussi la règle mobile de transition. */
.project-card--fictions .project-image { z-index:1; transition-timing-function:linear; }
.project-card--fictions .project-image--next { z-index:0; }
.project-card--fictions::after { z-index:2; }
.project-card--fictions .project-bottom { z-index:3; }
.project-card--fictions .project-logo-swap .project-logo { transition-timing-function:linear; }

/* Dernière règle mobile : le HTML emploie directement .floating-bar (et non
   .support-bar). Elle doit donc gagner sur la mise en colonne historique. */
@media (max-width:720px) {
  .floating-bar .fb-content {
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:var(--support-final-height);
    padding:0 12px;
  }
  .floating-bar .fb-text {
    flex:1 1 auto;
    width:auto;
    margin:0;
    font-size:13px;
    text-align:center;
    white-space:nowrap;
  }
  .floating-bar .fb-buttons {
    flex:0 0 auto;
    width:auto;
    justify-content:flex-end;
    gap:6px;
  }
  .floating-bar .fb-btn {
    min-height:34px;
    height:34px;
    font-size:12px;
  }
  .floating-bar .btn-updates {
    padding:0 8px;
    border-radius:999px!important;
  }
  .floating-bar .btn-updates .btn-text {
    font-size:0;
  }
  .floating-bar .btn-updates .btn-text::after {
    content:"Sub";
    font-size:12px;
  }
  .floating-bar .btn-support {
    padding:0 12px;
    border-radius:999px!important;
  }
}

@media (max-width:720px) {
  .hero {
    height:570px;
  }
  .page-background {
    transform:none;
  }
  .hero-details {
    padding-bottom:60px;
  }
  .availability {
    margin:14px auto;
  }
  .building-heading {
    bottom:120px;
  }
  .project-stack {
    margin-top:-90px;
  }
  .project-stack .project-cta small {
    font-size:9px;
  }
  .project-stack .project-cta {
    justify-items:center;
  }
  .project-stack .project-cta .pill-button {
    min-height:30px;
    height:30px;
    padding:0 18px;
    border-radius:999px;
    font-size:13px;
    line-height:15px;
  }
  .socialtop {
    bottom:22px;
  }
  .floating-bar .fb-content {
    height:46px;
    padding-left:15px;
    padding-right:7px;
  }
  .floating-bar .btn-updates {
    width:34px;
    padding:0!important;
  }
  .floating-bar .btn-updates .btn-text {
    display:none!important;
  }
  .floating-bar .btn-updates img {
    margin-left:0!important;
  }
  .floating-bar .btn-support {
    padding:0 7px 0 12px;
  }
  .floating-bar--footer:not(.is-docked) {
    height:46px;
  }
  .floating-bar--hero.is-aap-visible {
    animation-name:drop-pop-hero-mobile;
  }
  .floating-bar--footer.is-docked {
    animation-name:drop-pop-footer-mobile;
  }
}

@keyframes drop-pop-hero-mobile {
  0% { opacity:0; bottom:-100px; width:20px; height:20px; border-radius:999px; transform:translateX(-50%); animation-timing-function:ease-out; }
  40% { opacity:1; bottom:60px; width:30px; height:30px; border-radius:999px; transform:translateX(-50%); animation-timing-function:ease-in; }
  60% { bottom:0; width:fit-content; max-width:30px; height:30px; border-radius:999px; transform:translateX(-50%); animation-timing-function:cubic-bezier(.175,.885,.320,1.275); }
  100% { opacity:1; bottom:0; width:fit-content; max-width:1000px; height:46px; border-radius:999px; transform:translateX(-50%); }
}
@keyframes drop-pop-footer-mobile {
  0% { opacity:0; bottom:-100px; width:20px; height:20px; border-radius:999px; animation-timing-function:ease-out; }
  40% { opacity:1; bottom:60px; width:30px; height:30px; border-radius:999px; animation-timing-function:ease-in; }
  60% { bottom:30px; width:fit-content; max-width:30px; height:30px; border-radius:999px; animation-timing-function:cubic-bezier(.175,.885,.320,1.275); }
  100% { opacity:1; bottom:30px; width:fit-content; max-width:1000px; height:46px; border-radius:999px; }
}

@media (max-width:600px) {
  .modal h2 {
    height:31px;
    margin-bottom:8px;
    font-size:23px;
    line-height:31px;
  }
  .modal-title-icon {
    width:35px;
    height:35px;
  }
  .modal-intro p,
  .modal-platform-label {
    font-size:13px;
    line-height:16px;
  }

  .modal--support .modal-sponsors {
    position:relative;
    gap:5px;
  }
  .modal--support .modal-sponsor {
    grid-template-rows:28px 16px;
    row-gap:4px;
    height:48px;
    font-size:12px;
    line-height:16px;
  }
  .modal--support .modal-sponsor img {
    max-width:100%;
    height:28px;
  }
  .modal--support .modal-sponsor--apple-pay img {
    width:64px;
    height:auto;
    max-height:28px;
  }
  .modal--support .modal-sponsors-divider {
    position:absolute;
    z-index:2;
    top:0;
    bottom:auto;
    left:20%;
    display:block;
    width:1px;
    height:48px;
    margin:0;
    background:rgba(196,192,255,.72);
    transform:translateX(-50%);
    pointer-events:none;
  }

  .modal--support .modal-platform-label {
    margin-top:40px;
  }
  .modal--support .modal-sponsors {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:6px;
  }
  .modal--support .modal-sponsor,
  .modal--support .modal-sponsor:nth-of-type(n) {
    flex:0 0 43px;
    grid-column:auto;
    font-size:10px;
    line-height:14px;
  }
  .modal--support .modal-sponsor--apple-pay {
    flex-basis:64px;
  }
  .modal--support .modal-sponsor--apple-pay img {
    width:64px;
  }
  .modal--support .modal-sponsors-divider {
    position:static;
    z-index:auto;
    flex:0 0 1px;
    align-self:stretch;
    width:1px;
    height:44px;
    margin:0 2px;
    background:rgba(196,192,255,.5);
    transform:none;
  }

  .modal--newsletter .modal-waitlist {
    padding:8px;
    border-radius:24px;
    background:rgba(196,192,255,.1);
  }
  .modal--newsletter .newsletter-step--email {
    gap:6px;
  }
  .modal--newsletter .modal-waitlist input {
    height:44px;
    padding:0 16px;
    background:transparent;
  }
  .modal--newsletter .modal-waitlist button {
    height:40px;
  }
}

/* Dernière règle de proportion : elle doit succéder aux anciens essais de
   ratio mobile encore présents plus haut dans la feuille. */
@media (max-width:720px) {
  .project-stack .project-card {
    height:auto;
    aspect-ratio:335 / 255;
  }
  .project-stack .project-card .project-image {
    top:0;
    right:0;
    bottom:auto;
    left:0;
    height:66.6667%;
    object-position:center top;
  }
  .project-stack .project-card::before {
    top:66.6667%;
    right:0;
    bottom:auto;
    left:0;
    height:66.6667%;
    background-position:center top;
  }
  .project-card__edge {
    position:absolute;
    z-index:5;
    inset:0;
    display:block;
    border-radius:inherit;
    box-shadow:inset 0 .5px 1px rgba(255,255,255,.5);
    pointer-events:none;
  }
}

/* Disclaimer partagé : même lavande et même opacité sur toutes les tailles. */
.footer-contact + p {
  width:min(650px,100%);
  color:#d4c8ff;
  opacity:.6;
}

@media (max-width:720px) {
  /* Sur iPhone, couvrir un viewport haut agrandissait l’export mobile au-delà
     de sa densité utile. On l’ajuste à la largeur, sans upscaling additionnel. */
  .page-background {
    background-size:100% auto;
  }
  footer {
    min-height:450px;
    background-size:1400px auto;
    background-position:center bottom;
  }
  .footer-contact + p {
    margin-bottom:70px;
  }
}

/* Les huit liens restent à taille constante : quatre par rangée sur mobile. */
@media (max-width:720px) {
  .footer-contact nav {
    display:grid;
    grid-template-columns:repeat(4,60px);
    gap:0;
  }
}

/* Ces projets restent prêts dans le code, sans être visibles jusqu'à leur
   annonce. TwEnsanity et Jak X restent bien affichés. */
.project-card--creator,
.project-card--newt {
  display:none;
}

/* Les deux compositions Crash descendent légèrement sur les formats larges. */
@media (min-width:721px) {
  .project-stack .project-card--crash .project-logo--crash {
    transform:translateY(36px);
  }
}

/* Les deux logos Crash gardent leur composition mobile, sous le texte, et
   leurs CTA restent alignés avec les cartes projet compactes. */
@media (max-width:720px) {
  .project-stack .project-card--jakx .project-bottom > .project-logo--crash {
    position:relative;
    z-index:0;
    translate:-20px 4px;
  }
  .project-stack .project-card--crash:not(.project-card--jakx) .project-bottom > .project-logo--crash {
    position:relative;
    z-index:0;
    translate:-20px 12px;
  }
  .project-stack .project-card--crash .project-bottom > p {
    position:relative;
    z-index:1;
  }
  .project-stack .project-card--crash .project-bottom > .project-cta {
    translate:0 -10px;
  }

  /* Le second rang rejoint visuellement la ligne logo/CTA sans figer les
     hauteurs : le texte garde donc ses retours naturels. */
  .project-card--fictions .project-bottom,
  .project-card--enchiridion .project-bottom,
  .project-card--creator .project-bottom,
  .project-card--newt .project-bottom {
    row-gap:0;
  }
  .project-card--fictions .project-bottom > p,
  .project-card--enchiridion .project-bottom > p,
  .project-card--creator .project-bottom > .project-copy-swap,
  .project-card--newt .project-bottom > p {
    margin-top:-10px;
  }
}

/* Parallax léger : le décor reste dans la fenêtre Hero, défile un peu moins
   vite que le document et s'estompe légèrement au fil du défilement. */
.hero-objects {
  transform:translate3d(0,var(--hero-objects-parallax-y,0px),0);
  backface-visibility:hidden;
  will-change:transform;
}
.hero-objects img {
  opacity:var(--hero-objects-opacity,1);
  will-change:opacity;
}

@media (max-width:600px) {
  .modal--support .modal-sponsor--apple-pay {
    flex-basis:68px;
    grid-template-rows:1fr;
    align-items:center;
  }
  .modal--support .modal-sponsor--apple-pay img {
    width:67px;
    height:28px;
    max-width:none;
    max-height:none;
    align-self:center;
  }
  .modal--support .modal-sponsors-divider {
    display:block!important;
    flex:0 0 1px;
    align-self:center;
    width:1px;
    height:44px;
    margin:0 11px;
    background:rgba(196,192,255,.5);
  }
}

/* Palier tablette : plus de largeur utile pour les descriptions, sans entrer
   dans la composition verticale mobile. Les 164 px de référence deviennent
   123 px, soit 75 % de la taille desktop. */
@media (min-width:721px) and (max-width:1179px) {
  .project-stack .project-card .project-bottom p,
  .project-stack .project-card--creator .project-copy-swap p {
    font-size:17px;
    line-height:21px;
  }
  .project-stack .project-card:not(.project-card--crash) > .project-bottom > .project-logo {
    height:123px;
  }
  .project-card--fictions .project-logo-swap,
  .project-card--creator .project-logo-swap {
    height:123px;
  }
  .project-card--fictions .project-logo-swap .project-logo,
  .project-card--creator .project-logo-swap .project-logo {
    height:123px;
  }
}

@media (min-width:1001px) and (max-width:1179px) {
  .project-card--fictions .project-logo-swap { width:277px; }
  .project-card--creator .project-logo-swap { width:242px; }
  .project-stack .project-card--crash .project-bottom {
    grid-template-columns:259px minmax(0,1fr) 168px;
  }
  .project-stack .project-card--crash .project-logo {
    width:259px;
    height:183px;
  }
}

/* Le site ne montre pas de liseré de navigation clavier par défaut. */
*:focus,
*:focus-visible {
  outline:none!important;
}

/* Le panel éditorial emprunte l'unique capsule de la home et la place dans le
   calque sticky. Sa copie structurelle dans le footer de l'article ne doit
   jamais former une seconde barre à la fin de la lecture. */
.article-panel-footer .floating-bar--footer {
  display:none;
}