/* ============================================================ HOUSE — feuille de style maison, partagée par toutes les marques. Seul l'accent change, via (voir plus bas). ============================================================ */ :root{ --bg:#070708; --bg-rgb:7,7,8; --bg-2:#0c0c0e; --bg-3:#101014; --panel:rgba(255,255,255,.022); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17); --line-3:rgba(255,255,255,.26); --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.58); --dim:rgba(255,255,255,.36); --serif:'Playfair Display',Georgia,serif; --ui:'Inter',system-ui,-apple-system,sans-serif; --mono:'DM Mono','SFMono-Regular',ui-monospace,monospace; --max:1180px; --prose:64ch; --nav-h:70px; --ease:cubic-bezier(.22,.61,.36,1); --accent:#3c82f6; --accent-deep:#1d4ed8; --accent-rgb:60,130,246; --accent-ink:#fff; } html[data-brand="butterfly"]{--accent:#3c82f6;--accent-deep:#1d4ed8;--accent-rgb:60,130,246;--accent-ink:#fff;} html[data-brand="quantum"]{--accent:#eab308;--accent-deep:#a45a09;--accent-rgb:234,179,8;--accent-ink:#0a0a0a;} html[data-brand="abdelkader"]{--accent:#c88728;--accent-deep:#8f6118;--accent-rgb:200,135,40;--accent-ink:#0a0a0a;} html[data-brand="sevenlions"]{--accent:#b8960c;--accent-deep:#8a7009;--accent-rgb:184,150,12;--accent-ink:#0a0a0a;} html[data-brand="financefactory"]{--accent:#e8571f;--accent-deep:#b23e13;--accent-rgb:232,87,31;--accent-ink:#fff;} html[data-theme="light"]{--bg:#fdfaf5;--bg-rgb:253,250,245;--bg-2:#f5efe3;--bg-3:#ece3d3;--panel:rgba(45,32,10,.03);--line:rgba(45,32,10,.14);--line-2:rgba(45,32,10,.26);--line-3:rgba(45,32,10,.36);--text:rgba(26,20,10,.92);--muted:rgba(26,20,10,.6);--dim:rgba(26,20,10,.42)} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--text);font-family:var(--ui);font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:rgba(var(--accent-rgb),.28)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.012em;color:var(--text)} em{font-style:italic} /* ---------- utilities ---------- */ .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.4rem,5vw,3.5rem)} .prose{max-width:var(--prose)} .eyebrow{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.7em} .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.7} .dot{color:var(--accent)} .rule{height:1px;background:var(--line);border:0;margin:0} .center{text-align:center} .muted{color:var(--muted)} /* airy wave divider */ .wavesep{width:100%;height:34px;display:block;opacity:.5} /* ---------- side rail ---------- */ .rail{position:fixed;left:0;top:var(--nav-h);bottom:0;width:clamp(2.6rem,4vw,3.4rem);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:1.6rem 0;z-index:40;pointer-events:none} .rail span{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--dim);writing-mode:vertical-rl} .rail .tick{width:1px;flex:1;margin:1rem 0;background:linear-gradient(var(--line),transparent)} @media(max-width:900px){.rail{display:none}} /* ---------- nav ---------- */ nav.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(var(--bg-rgb),.74);border-bottom:1px solid var(--line)} .nav-in{max-width:var(--max);margin:0 auto;padding:1.05rem clamp(1.4rem,5vw,3.5rem);display:flex;align-items:center;gap:2rem} .brand{font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:-.02em;white-space:nowrap} .nav-links{display:flex;gap:1.9rem;margin-left:auto;font-size:.84rem;color:var(--muted)} .nav-links a{position:relative;padding:.2rem 0;transition:color .3s} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--accent);transition:right .35s var(--ease)} .nav-links a:hover,.nav-links a.active{color:var(--text)} .nav-links a:hover::after,.nav-links a.active::after{right:0} .nav-cta{margin-left:0} .nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--text);width:40px;height:40px;border-radius:2px;cursor:pointer;font-size:1.1rem} @media(max-width:820px){ .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:2rem;background:rgba(7,7,8,.97);font-size:1.3rem;transform:translateY(-100%);transition:transform .45s var(--ease);margin:0} .nav-links.open{transform:none} .nav-toggle{display:inline-flex;align-items:center;justify-content:center} } /* ---------- buttons (fins) ---------- */ .btn{position:relative;overflow:hidden;isolation:isolate;font-family:var(--ui);font-size:.65rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;padding:.46em 1.5em;border-radius:1px;cursor:pointer;transition:color .5s var(--ease),border-color .5s var(--ease);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center} .btn .tx{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.7em} .btn .ar{transition:transform .45s var(--ease)} .btn:hover .ar{transform:translateX(5px)} .btn-primary{border-color:var(--accent);color:var(--accent)} .btn-primary::before{content:"";position:absolute;inset:0;z-index:1;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)} .btn-primary:hover{color:var(--accent-ink)} .btn-primary:hover::before{transform:scaleX(1)} .btn-ghost{border-color:var(--line-2);color:var(--muted)} .btn-ghost:hover{border-color:var(--text);color:var(--text)} /* text link with animated underline */ .link{color:var(--accent);font-size:.9rem;position:relative;display:inline-flex;align-items:center;gap:.5em;padding-bottom:2px} .link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)} .link:hover::after{transform:scaleX(1)} .link .ar{transition:transform .35s var(--ease)} .link:hover .ar{transform:translateX(4px)} .dl{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);transition:gap .3s var(--ease)} .dl::before{content:"\2193";font-size:12px;opacity:.85} .dl:hover{gap:.9em} /* ---------- hero (home) ---------- */ .hero{position:relative;min-height:clamp(560px,90vh,880px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)} .hero-media{position:absolute;inset:0;z-index:0;isolation:isolate} .hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:contrast(1.05) saturate(1.05)} .hero-media canvas{position:absolute;inset:0;width:100%;height:100%} .hero-recolor{position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;pointer-events:none} html[data-theme="light"] .hero-media video{filter:invert(1) sepia(.55) saturate(1.8) hue-rotate(3deg) contrast(1.02);opacity:.6;mix-blend-mode:multiply} html[data-theme="light"] .hero-recolor{display:none} .hero-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(58% 55% at 20% 42%,rgba(var(--accent-rgb),.15),transparent 70%);pointer-events:none} .hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg) 6%,rgba(var(--bg-rgb),.5) 48%,transparent 84%)} .hero-in{position:relative;z-index:2;width:100%} .hero h1{font-size:clamp(2.6rem,6.4vw,5rem);max-width:15ch;margin:1.5rem 0 0} .hero h1 em{color:var(--accent);font-weight:500} .hero .lead{max-width:48ch;margin:1.8rem 0 0;color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.16rem);font-weight:300;line-height:1.8} .cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem} .hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;gap:1rem;padding:1rem clamp(1.4rem,5vw,3.5rem);border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)} .hero-foot .role{color:var(--accent)} @media(max-width:600px){.hero-foot span:nth-child(2){display:none}} /* ---------- inner page header ---------- */ .page-head{position:relative;padding:clamp(3.5rem,9vw,7rem) 0 0;border-bottom:1px solid var(--line);overflow:hidden} .page-head .crumb{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:1.6rem} .page-head .crumb a{color:var(--muted)} .page-head .crumb a:hover{color:var(--accent)} .page-head h1{font-size:clamp(2.2rem,5.2vw,3.9rem);max-width:16ch} .page-head h1 em{color:var(--accent);font-weight:500} .page-head .intro{max-width:56ch;color:var(--muted);font-weight:300;font-size:1.1rem;line-height:1.8;margin:1.6rem 0 clamp(2.5rem,5vw,3.5rem)} /* ---------- sections (aérées) ---------- */ section.blk{padding:clamp(4.5rem,10vw,8.5rem) 0;position:relative} section.tint{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .mark{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:clamp(2.4rem,5vw,3.6rem)} .mark .idx{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em} .mark h2{font-size:clamp(1.7rem,3.6vw,2.6rem)} .mark .idx-line{flex:1;height:1px;background:var(--line);align-self:center;margin-left:1rem} .lede{max-width:56ch;color:var(--muted);font-weight:300;font-size:1.12rem;line-height:1.85;margin:-1rem 0 clamp(2.5rem,5vw,3.5rem)} /* prose (didactique) */ .prose p{color:var(--muted);font-weight:300;font-size:1.06rem;line-height:1.9;margin-bottom:1.4rem} .prose p strong{color:var(--text);font-weight:500} .prose h3{font-size:1.5rem;margin:2.6rem 0 1rem} .prose ul{list-style:none;margin:1.4rem 0} .prose ul li{position:relative;padding-left:1.6rem;margin-bottom:.9rem;color:var(--muted);font-weight:300} .prose ul li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--accent)} /* ---------- roomy cards ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.3rem} .grid.two{grid-template-columns:repeat(auto-fit,minmax(430px,1fr))} .tile{border:1px solid var(--line);border-radius:2px;padding:clamp(1.9rem,3vw,2.6rem);position:relative;transition:border-color .4s,background .4s;overflow:hidden} .tile:hover{border-color:var(--line-2);background:var(--panel)} .tile .kid{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.14em} .tile h3{font-size:1.4rem;margin:1.3rem 0 .8rem} .tile p{color:var(--muted);font-size:.98rem;font-weight:300;line-height:1.8} .tile .tag{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem} .tile .tag::before{content:"";width:16px;height:1px;background:var(--accent);opacity:.75} .tile .more{margin-top:1.5rem} .tile::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .45s var(--ease)} .tile:hover::after{width:100%} /* ---------- didactic: numbered steps / explain rows ---------- */ .steps{display:grid;gap:0;border-top:1px solid var(--line)} .step{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3rem);padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid var(--line);align-items:start} .step .n{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em;padding-top:.4rem} .step h3{font-size:1.5rem;margin-bottom:.9rem} .step p{color:var(--muted);font-weight:300;font-size:1.04rem;line-height:1.85;max-width:60ch} .step .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:1rem} /* explain row: label left, prose right */ .rows{display:grid;gap:0} .exrow{display:grid;grid-template-columns:minmax(180px,.9fr) 1.4fr;gap:clamp(1.6rem,5vw,4rem);padding:clamp(2.2rem,4vw,3.2rem) 0;border-top:1px solid var(--line);align-items:baseline} .exrow:last-child{border-bottom:1px solid var(--line)} .exrow .lab{font-family:var(--serif);font-size:1.55rem;font-weight:600} .exrow .lab .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem;font-weight:400} .exrow .txt{color:var(--muted);font-weight:300;font-size:1.05rem;line-height:1.9} @media(max-width:720px){.exrow,.step{grid-template-columns:1fr;gap:1rem}} /* editorial split (about / mission) */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:start} .split .big{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.9vw,2.25rem);line-height:1.32;letter-spacing:-.01em} .split .big em{color:var(--accent)} .split .side p{color:var(--muted);font-weight:300;font-size:1rem;line-height:1.85;margin-bottom:1.2rem} .split .side .sig{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line)} @media(max-width:760px){.split{grid-template-columns:1fr}} /* metrics */ .metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .metrics .m{padding:2.2rem clamp(1rem,2vw,1.8rem);border-right:1px solid var(--line)} .metrics .m:last-child{border-right:0} .metrics .m b{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,2.9rem);display:block;line-height:1} .metrics .m span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:block;margin-top:.7rem} @media(max-width:720px){.metrics{grid-template-columns:repeat(2,1fr)}.metrics .m:nth-child(2){border-right:0}.metrics .m:nth-child(-n+2){border-bottom:1px solid var(--line)}} /* callout band */ .callout{border:1px solid var(--line);border-radius:2px;padding:clamp(2.4rem,5vw,4rem);text-align:center;background:var(--bg-2)} .callout h2{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:20ch;margin:0 auto 1.2rem} .callout p{color:var(--muted);font-weight:300;max-width:52ch;margin:0 auto 2rem;line-height:1.85} /* contact */ .field{display:block;width:100%;background:transparent;border:1px solid var(--line-2);border-radius:1px;color:var(--text);font-family:var(--ui);font-size:.98rem;padding:.95rem 1.1rem;margin-bottom:1rem;transition:border-color .3s} .field:focus{outline:none;border-color:var(--accent)} textarea.field{min-height:150px;resize:vertical} /* ---------- footer ---------- */ footer.site{border-top:1px solid var(--line);padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem;margin-top:0} .foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2.5rem} .foot-grid .brand{font-size:1.5rem} .foot-lead{color:var(--muted);font-weight:300;font-size:.94rem;max-width:34ch;margin-top:1rem;line-height:1.8} .foot-links{display:flex;gap:3.5rem;flex-wrap:wrap} .foot-col b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:1.1rem} .foot-col a{display:block;color:var(--muted);font-size:.92rem;padding:.3rem 0;transition:color .3s} .foot-col a:hover{color:var(--accent)} .copy{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem} /* reveal */ .reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.pre{opacity:0;transform:translateY(22px)} .reveal.pre.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal.pre{opacity:1;transform:none}*{scroll-behavior:auto}}