/* ══════════════════════════════════════════════════════════════════════════ Home arkalabs — socle. Extrait de .input/ui/home-embed/cortex-landing.css, réduit aux primitives réellement utilisées par la home (les blocs de la page produit Cortex.deck, le header et le footer de la maquette sont écartés : le site garde les siens). Thème : la maquette pilotait le sombre par [data-theme] sur . Le site pilote par .theme-dark/.theme-light sur #app-root (mobile-menu.js). Les sélecteurs sont donc réécrits sur #app-root, qui porte aussi le fond et la typo — arkalabs-palette.css impose un background/font-family !important sur #app-root et doit être repris ici. ══════════════════════════════════════════════════════════════════════════ */ /* Les tokens sont portés par :root ET par #app-root : arkalabs-palette.css définit --card sur #app-root, ce qui écraserait la valeur de la maquette pour tous ses descendants. Même spécificité, feuille chargée après : c'est celle-ci qui prend. */ :root,#app-root{ --red:#c70f43; --red-2:#a60b37; --red-soft:rgba(199,15,67,.09); --bg:#faf7f4; --bg-2:#f3eee8; --bg-3:#ece4db; --ink-inv:#100f11; --ink:#1b1613; --ink-2:#5c554d; --ink-3:#988f84; --line:rgba(27,22,19,.12); --line-2:rgba(27,22,19,.06); --card:#fffefc; --card-2:#f6f1eb; --shadow:0 34px 70px -44px rgba(27,22,19,.42); --shadow-sm:0 14px 34px -22px rgba(27,22,19,.34); --sans:'Geist',system-ui,-apple-system,sans-serif; --disp:'Poppins',var(--sans); --mono:'JetBrains Mono',ui-monospace,monospace; --wrap:1240px; } #app-root.theme-dark{ --red:#ff2f63; --red-2:#e01048; --red-soft:rgba(255,47,99,.12); --bg:#0e0d0f; --bg-2:#151417; --bg-3:#1c1a1f; --ink-inv:#faf7f4; --ink:#f4f1ee; --ink-2:#aaa39b; --ink-3:#6d665e; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.05); --card:#161418; --card-2:#1d1b20; --shadow:0 44px 90px -48px rgba(0,0,0,.85); --shadow-sm:0 20px 44px -28px rgba(0,0,0,.7); } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:84px} html,body{margin:0} body{overflow-x:hidden;-webkit-font-smoothing:antialiased} /* Reprend la main sur arkalabs-palette.css, qui pose background et font-family en !important sur #app-root. */ #app-root{ background-color:var(--bg)!important;color:var(--ink)!important; font-family:var(--sans)!important;line-height:1.55; } /* Pas de transition de fond sur #app-root, contrairement à la maquette : le moteur de scrubbing réécrit --p et --e seize fois par seconde, chaque écriture relance la transition et la couleur reste figée sur sa valeur de départ — le thème ne bascule alors plus visuellement. */ #app-root img{display:block;max-width:100%} /* Les boutons portent leur propre couleur (.btn-1, .btn-d, .btn-o…) : les exclure ici, sinon cette règle plus spécifique les repeint en rouge — sur la bande rouge, le CTA secondaire devient alors invisible. */ #app-root main a:not(.btn){color:var(--red);text-decoration:none} #app-root main a:not(.btn):hover{color:var(--red-2)} #app-root ::selection{background:var(--red);color:#fff} /* ── primitives ── Sélecteurs non préfixés, comme dans la maquette : aucune autre feuille chargée par la home ne définit .wrap ni .btn, et préfixer .btn le rendrait plus spécifique que ses variantes .btn-1/.btn-2/.btn-d/.btn-o, qui perdraient alors leur bordure. */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(22px,5vw,60px)} .ey{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:11px} .ey::before{content:'';width:26px;height:1px;background:var(--red);flex:none} .ey .n{color:var(--red)} h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.022em;line-height:1.04;margin:0} .hl{color:var(--red)} .lead{font-size:clamp(16px,1.28vw,18.5px);line-height:1.62;color:var(--ink-2);text-wrap:pretty} /* La transition ne porte que sur transform et box-shadow : sur background, border-color ou color, elle serait relancée par chaque écriture de --p/--e du moteur de scrubbing (toutes les 60 ms, pour une transition de 180 ms) et la couleur resterait figée sur celle du thème quitté. */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:14.5px;padding:14px 24px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap;text-decoration:none} .btn svg{width:17px;height:17px} .btn-1{background:var(--red);color:#fff;box-shadow:0 12px 30px -14px var(--red)} .btn-1:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 40px -14px var(--red)} .btn-2{background:transparent;color:var(--ink);border-color:var(--line)} .btn-2:hover{color:var(--ink);border-color:var(--ink-2);background:var(--card-2)} /* arkalabs-palette.css pose `#app-root a{color:var(--link)}` — spécificité 1-0-1, qui bat les classes de variante et repeint tous les boutons avec la couleur de lien du site : en thème clair, le CTA sombre de la bande rouge passait en texte noir sur fond noir, et le CTA fantôme en noir sur rouge. Chaque variante reprend donc la main ici, y compris .btn-d et .btn-o définies dans home-sections.css. */ #app-root .btn-1,#app-root .btn-1:hover{color:#fff} #app-root .btn-2,#app-root .btn-2:hover{color:var(--ink)} #app-root .btn-d,#app-root .btn-d:hover{color:#fff} #app-root .btn-o,#app-root .btn-o:hover{color:#fff} /* ── reveal on scroll ── */ .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .rv.in{opacity:1;transform:none} .reveal-now .rv{transition:none!important} .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s} /* ── décor du hero ── */ .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-aura{position:absolute;left:50%;top:-8%;width:min(1100px,120vw);height:760px;transform:translateX(-50%);background:radial-gradient(46% 42% at 50% 34%,var(--red-soft),transparent 72%);filter:blur(6px)} /* ── coquille de section ── */ .sec{position:relative;padding:clamp(78px,10vw,150px) 0} .sec.alt{background:var(--bg-2)} .sec.ink{background:var(--ink-inv);color:#f4f1ee} .sec.ink .ey{color:rgba(244,241,238,.5)} .sec.ink .lead{color:rgba(244,241,238,.66)} .sec-head{max-width:760px} .sec-head.center{margin:0 auto;text-align:center} .sec-head h2{font-size:clamp(30px,4.2vw,54px);margin-top:18px} .sec-head .lead{margin-top:22px} /* ── split (copy + tuile) ── Repris du socle de la maquette pour la page Cortex : trois de ses sections opposent un bloc de texte à une scène animée. L'accueil ne s'en sert pas. */ .split{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(30px,5vw,72px);align-items:center} .split.flip{grid-template-columns:1.18fr 0.82fr} .split.flip .split-copy{order:2} .split-copy{min-width:0} .split-copy h2{font-size:clamp(28px,3.4vw,46px);margin-top:16px} .split-copy .lead{margin-top:20px} .split-tile{position:relative;background:transparent} @media(max-width:920px){.split,.split.flip{grid-template-columns:1fr;gap:34px}.split.flip .split-copy{order:0}} /* ── piliers ── */ .pillars{margin-top:clamp(44px,5vw,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px)} .pillar{padding:34px 30px;border-top:2px solid var(--red)} .pillar .pn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red);font-weight:600} .pillar h3{font-size:clamp(20px,1.8vw,25px);margin-top:16px;letter-spacing:-.015em} .pillar p{margin:13px 0 0;font-size:14.5px;line-height:1.62;color:var(--ink-2)} @media(max-width:860px){.pillars{grid-template-columns:1fr;gap:8px}.pillar{border-top:1px solid var(--line);padding:26px 0}.pillar:first-child{border-top:2px solid var(--red)}} /* ── liste à puces numérotées (section Continuité) ── */ .pts{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:15px} .pts li{display:flex;gap:13px;font-size:14.5px;line-height:1.55;color:var(--ink-2)} .pts li b{color:var(--ink);font-weight:600} .pts .pk{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font-family:var(--mono);font-size:12px;font-weight:600} /* ── CTA final ── */ .cta{text-align:center;max-width:720px;margin:0 auto} .cta h2{font-size:clamp(30px,4.4vw,58px)} .cta .lead{margin:22px auto 0;max-width:52ch} .cta-row{margin-top:34px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv{opacity:1;transform:none;transition:none} }