/* ============================================================ Philippe Xavier — Consultant IA Design system : sombre / futuriste / néon 3 directions commutables via [data-style] sur ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Surfaces (cool anthracite) */ --bg: oklch(0.158 0.012 255); --bg-2: oklch(0.132 0.012 255); --bg-3: oklch(0.198 0.014 255); --panel: oklch(0.205 0.014 255); --panel-2: oklch(0.235 0.015 255); --line: oklch(0.30 0.015 255); --line-soft: oklch(0.26 0.013 255 / 0.7); /* Text */ --fg: oklch(0.965 0.004 255); --fg-dim: oklch(0.78 0.012 255); --fg-mute: oklch(0.62 0.013 255); --fg-faint: oklch(0.50 0.013 255); /* Accent — overridden per [data-style] */ --acc: oklch(0.84 0.135 195); --acc-2: oklch(0.72 0.15 230); --acc-ink: oklch(0.18 0.04 230); /* text on accent */ --acc-soft: oklch(0.84 0.135 195 / 0.14); --acc-line: oklch(0.84 0.135 195 / 0.40); --glow: oklch(0.84 0.135 195 / 0.55); /* Type */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-sans: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Geometry */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --maxw: 1200px; --gut: clamp(20px, 5vw, 64px); --shadow: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 24px 60px -30px oklch(0 0 0 / 0.85); } /* ---------- Style A : Signal (cyan) ---------- */ :root[data-style="signal"] { --acc: oklch(0.85 0.13 195); --acc-2: oklch(0.74 0.14 225); --acc-soft: oklch(0.85 0.13 195 / 0.13); --acc-line: oklch(0.85 0.13 195 / 0.42); --glow: oklch(0.85 0.13 195 / 0.50); --acc-ink: oklch(0.16 0.03 220); } /* ---------- Style B : Aurore (violet→cyan) ---------- */ :root[data-style="aurore"] { --acc: oklch(0.72 0.16 295); --acc-2: oklch(0.82 0.13 205); --acc-soft: oklch(0.72 0.16 295 / 0.15); --acc-line: oklch(0.72 0.16 295 / 0.45); --glow: oklch(0.72 0.16 295 / 0.55); --acc-ink: oklch(0.96 0.01 300); } /* ---------- Style C : Terminal (émeraude) ---------- */ :root[data-style="terminal"] { --acc: oklch(0.83 0.16 158); --acc-2: oklch(0.86 0.15 130); --acc-soft: oklch(0.83 0.16 158 / 0.12); --acc-line: oklch(0.83 0.16 158 / 0.40); --glow: oklch(0.83 0.16 158 / 0.45); --acc-ink: oklch(0.16 0.04 160); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); background: var(--bg); color: var(--fg); line-height: 1.6; font-size: 17px; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ::selection { background: var(--acc); color: var(--acc-ink); } /* page background texture */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(900px 600px at 78% -8%, var(--acc-soft), transparent 60%), radial-gradient(700px 500px at -5% 12%, oklch(0.5 0.08 255 / 0.10), transparent 55%); pointer-events: none; } body::after { content: ""; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(oklch(1 0 0 / 0.022) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.022) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(110% 90% at 50% 0%, #000 35%, transparent 80%); mask-image: radial-gradient(110% 90% at 50% 0%, #000 35%, transparent 80%); pointer-events: none; } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: clamp(72px, 11vw, 140px); position: relative; } .section--tight { padding-block: clamp(56px, 8vw, 96px); } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acc); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--acc-line); } .eyebrow--center { justify-content: center; } .shead { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); } .shead--center { margin-inline: auto; text-align: center; } .shead h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -0.02em; margin-top: 18px; text-wrap: balance; } .shead p { color: var(--fg-mute); font-size: clamp(16px, 1.6vw, 18.5px); margin-top: 18px; max-width: 620px; text-wrap: pretty; } .shead--center p { margin-inline: auto; } .grad { background: linear-gradient(110deg, var(--acc) 8%, var(--acc-2) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-sans); font-weight: 560; font-size: 15.5px; letter-spacing: 0.01em; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; transition: transform .18s ease, background .2s ease, border-color .2s, box-shadow .25s, color .2s; white-space: nowrap; } .btn svg { width: 17px; height: 17px; } .btn--primary { background: var(--acc); color: var(--acc-ink); box-shadow: 0 0 0 0 var(--glow), 0 10px 30px -12px var(--glow); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 28px -2px var(--glow), 0 16px 40px -16px var(--glow); } .btn--ghost { background: oklch(1 0 0 / 0.02); color: var(--fg); border-color: var(--line); } .btn--ghost:hover { border-color: var(--acc-line); background: var(--acc-soft); transform: translateY(-2px); } .btn--block { width: 100%; } .btn--lg { padding: 16px 28px; font-size: 16.5px; } .linkarrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.04em; color: var(--acc); transition: gap .2s; } .linkarrow:hover { gap: 13px; } /* chip / tag */ .chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; display: inline-flex; align-items: center; gap: 8px; background: oklch(1 0 0 / 0.02); } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--glow); } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; } .site-header.scrolled { background: oklch(0.158 0.012 255 / 0.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--line-soft); } .nav { display: flex; align-items: center; gap: 24px; height: 72px; } .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; } .brand .mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--acc-line); background: linear-gradient(150deg, var(--acc-soft), transparent); font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--acc); letter-spacing: -0.04em; box-shadow: inset 0 0 18px -8px var(--glow); } .brand .bname { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; line-height: 1.1; } .brand .brole { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; } .brand > span { display: flex; flex-direction: column; justify-content: center; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { font-size: 14.5px; color: var(--fg-dim); padding: 8px 13px; border-radius: 8px; transition: color .2s, background .2s; position: relative; } .nav-links a:hover { color: var(--fg); background: oklch(1 0 0 / 0.03); } .nav-actions { display: flex; align-items: center; gap: 12px; } /* Style switcher */ .styleswitch { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: oklch(0 0 0 / 0.25); } .styleswitch button { width: 30px; height: 26px; border-radius: 999px; display: grid; place-items: center; transition: background .2s, transform .2s; position: relative; } .styleswitch button .sw { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor; background: radial-gradient(circle at 35% 30%, currentColor, transparent 70%); } .styleswitch button[data-s="signal"] { color: oklch(0.85 0.13 195); } .styleswitch button[data-s="aurore"] { color: oklch(0.72 0.16 295); } .styleswitch button[data-s="terminal"] { color: oklch(0.83 0.16 158); } .styleswitch button:hover { background: oklch(1 0 0 / 0.06); } .styleswitch button.active { background: oklch(1 0 0 / 0.10); box-shadow: 0 0 14px -3px currentColor; } .styleswitch button.active .sw { box-shadow: 0 0 10px currentColor; } .menu-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); } .menu-toggle span { display:block; width: 17px; height: 1.6px; background: var(--fg); margin: 3.4px auto; transition: .25s; } /* ============================================================ HERO (shared + 3 variants) ============================================================ */ .hero { position: relative; padding-top: 150px; padding-bottom: clamp(60px, 8vw, 110px); overflow: hidden; } .hero__variant { display: none; } :root[data-style="signal"] .hero__variant.is-signal, :root[data-style="aurore"] .hero__variant.is-aurore, :root[data-style="terminal"] .hero__variant.is-terminal { display: block; } .hero h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.0; text-wrap: balance; } .hero .lede { color: var(--fg-mute); text-wrap: pretty; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* glow orb util */ .orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; } /* --- Variant A : Signal (centered, grid) --- */ .h-signal { text-align: center; max-width: 900px; margin-inline: auto; position: relative; z-index: 2; } .h-signal h1 { font-size: clamp(40px, 7vw, 86px); margin: 26px 0 0; } .h-signal .lede { font-size: clamp(17px, 2vw, 21px); max-width: 600px; margin: 22px auto 0; } .h-signal .hero-cta { justify-content: center; margin-top: 36px; } .h-signal .scanline { width: min(620px, 80%); height: 1px; margin: 46px auto 0; background: linear-gradient(90deg, transparent, var(--acc-line), transparent); position: relative; } .h-signal .scanline::after { content:""; position:absolute; left:50%; top:-3px; width:7px; height:7px; transform: translateX(-50%); border-radius:50%; background: var(--acc); box-shadow: 0 0 16px var(--glow); } .signal-metrics { display: flex; gap: clamp(24px, 5vw, 60px); justify-content: center; margin-top: 30px; flex-wrap: wrap; } .signal-metrics .m { text-align: center; } .signal-metrics .m b { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; display:block; letter-spacing: -0.02em; } .signal-metrics .m span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); } /* --- Variant B : Aurore (asymmetric, atmospheric) --- */ .h-aurore { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; } .h-aurore h1 { font-size: clamp(40px, 6.2vw, 80px); margin: 24px 0 0; } .h-aurore .lede { font-size: clamp(17px, 1.9vw, 20px); max-width: 520px; margin-top: 24px; } .h-aurore .hero-cta { margin-top: 34px; } .aurore-orb-1 { width: 520px; height: 520px; top: -120px; right: -80px; background: var(--acc); opacity: 0.30; } .aurore-orb-2 { width: 420px; height: 420px; bottom: -160px; left: 30%; background: var(--acc-2); opacity: 0.18; } .aurore-panel { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(160deg, oklch(1 0 0 / 0.05), oklch(1 0 0 / 0.01)); padding: 22px; backdrop-filter: blur(8px); box-shadow: var(--shadow); } .aurore-panel .ap-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 16px; } .aurore-panel .ap-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); } .ap-row { display:flex; align-items:center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line-soft); } .ap-row:first-of-type { border-top: none; } .ap-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--acc-soft); border:1px solid var(--acc-line); display:grid; place-items:center; color: var(--acc); } .ap-ico svg { width: 17px; height: 17px; } .ap-row .t { font-size: 14.5px; font-weight: 540; } .ap-row .s { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-mute); } .ap-row .val { margin-left: auto; font-family: var(--font-display); font-weight: 600; color: var(--acc); } /* --- Variant C : Terminal (editorial + code window) --- */ .h-terminal { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .h-terminal h1 { font-size: clamp(38px, 5.6vw, 72px); margin: 22px 0 0; } .h-terminal .lede { font-size: clamp(16px, 1.8vw, 19px); max-width: 480px; margin-top: 22px; } .h-terminal .hero-cta { margin-top: 32px; } .term { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: oklch(0.118 0.012 255); box-shadow: var(--shadow); font-family: var(--font-mono); } .term__bar { display:flex; align-items:center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); background: oklch(0.16 0.012 255); } .term__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display:block; } .term__bar i:nth-child(1){ background: oklch(0.7 0.16 25); } .term__bar i:nth-child(2){ background: oklch(0.82 0.13 90); } .term__bar i:nth-child(3){ background: var(--acc); } .term__bar span { margin-left: 8px; font-size: 11.5px; color: var(--fg-mute); letter-spacing: 0.04em; } .term__body { padding: 18px 18px 22px; font-size: 13px; line-height: 1.85; } .term__body .ln { white-space: pre-wrap; } .term__body .c-dim { color: var(--fg-faint); } .term__body .c-acc { color: var(--acc); } .term__body .c-fg { color: var(--fg); } .term__body .bar { display:inline-block; height: 8px; border-radius: 2px; background: var(--acc); vertical-align: middle; box-shadow: 0 0 10px var(--glow); } .term__cursor { display:inline-block; width: 8px; height: 15px; background: var(--acc); vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ============================================================ MARQUEE / approach band ============================================================ */ .band { border-block: 1px solid var(--line-soft); background: oklch(0 0 0 / 0.18); } .band .wrap { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; justify-content: center; padding-block: 22px; } .band .lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); } .band .item { display:flex; align-items:center; gap: 10px; color: var(--fg-dim); font-size: 14.5px; } .band .item svg { width: 17px; height: 17px; color: var(--acc); } /* ============================================================ SERVICES ============================================================ */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .card { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(170deg, oklch(1 0 0 / 0.035), oklch(1 0 0 / 0.008)); padding: 26px 24px 28px; overflow: hidden; transition: border-color .25s, transform .25s, background .25s; } .card::after { content:""; position:absolute; inset:0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, var(--acc-line), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s; pointer-events: none; } .card:hover { transform: translateY(-4px); border-color: var(--acc-line); } .card:hover::after { opacity: 1; } .card .ico { width: 46px; height: 46px; border-radius: 12px; display:grid; place-items:center; border: 1px solid var(--acc-line); background: var(--acc-soft); color: var(--acc); margin-bottom: 20px; box-shadow: inset 0 0 22px -10px var(--glow); } .card .ico svg { width: 22px; height: 22px; } .card h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin-bottom: 9px; } .card p { color: var(--fg-mute); font-size: 15px; } .card .num { position:absolute; top: 20px; right: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); letter-spacing: 0.1em; } /* ============================================================ MÉTHODE (process) ============================================================ */ .method { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 6vw, 72px); align-items: start; } .steps { display: flex; flex-direction: column; gap: 0; } .step { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 22px 0; position: relative; } .step:not(:last-child) { border-bottom: 1px solid var(--line-soft); } .step .sn { width: 48px; height: 48px; border-radius: 13px; flex: none; display:grid; place-items:center; font-family: var(--font-display); font-weight: 600; font-size: 17px; border: 1px solid var(--line); color: var(--fg-dim); background: oklch(1 0 0 / 0.02); transition: .25s; } .step:hover .sn { color: var(--acc); border-color: var(--acc-line); box-shadow: 0 0 20px -6px var(--glow); } .step h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 6px; } .step p { color: var(--fg-mute); font-size: 14.8px; } .step .stag { font-family: var(--font-mono); font-size: 11px; color: var(--acc); letter-spacing: 0.1em; text-transform: uppercase; } .method-aside { border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(165deg, oklch(1 0 0 / 0.04), oklch(1 0 0 / 0.008)); padding: 30px; position: sticky; top: 100px; box-shadow: var(--shadow); } .method-aside .q { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .method-aside .q b { color: var(--acc); } .method-aside .deliver { margin-top: 24px; display: grid; gap: 12px; } .method-aside .deliver li { display:flex; align-items:flex-start; gap: 11px; font-size: 14.5px; color: var(--fg-dim); list-style: none; } .method-aside .deliver li svg { width: 18px; height: 18px; color: var(--acc); flex: none; margin-top: 2px; } /* ============================================================ À PROPOS ============================================================ */ .about { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 64px); align-items: center; } .about-figure { position: relative; } .about-figure .ph { aspect-ratio: 4/5; border-radius: var(--r-lg); } /* about visual panel (no photo) */ .about-card { position: relative; aspect-ratio: 4/5; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 80% at 80% -10%, var(--acc-soft), transparent 55%), linear-gradient(165deg, oklch(1 0 0 / 0.05), oklch(1 0 0 / 0.008)); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; padding: 30px; } .about-card::after { content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(oklch(1 0 0 / 0.03) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.03) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(80% 70% at 70% 10%, #000, transparent 75%); mask-image: radial-gradient(80% 70% at 70% 10%, #000, transparent 75%); } .about-card .ac-top { display:flex; align-items:center; justify-content: space-between; position: relative; z-index: 1; } .about-card .ac-mono { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; color: var(--acc); width: 62px; height: 62px; border-radius: 16px; display:grid; place-items:center; border: 1px solid var(--acc-line); background: var(--acc-soft); box-shadow: inset 0 0 26px -10px var(--glow); } .about-card .ac-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2.3vw, 23px); line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); margin: auto 0; position: relative; z-index: 1; text-wrap: pretty; } .about-card .ac-stats { display: grid; gap: 14px; position: relative; z-index: 1; } .about-card .ac-stat { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line-soft); } .about-card .ac-stat b { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--acc); letter-spacing: -0.02em; white-space: nowrap; } .about-card .ac-stat span { font-size: 13px; color: var(--fg-mute); line-height: 1.4; } .about-figure .badge { position: absolute; bottom: 18px; left: 18px; right: 18px; display:flex; align-items:center; gap: 12px; background: oklch(0.13 0.012 255 / 0.85); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 16px; } .about-figure .badge .dotpulse { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 var(--glow); animation: pulse 2.2s infinite; flex: none; } @keyframes pulse { 0%{ box-shadow: 0 0 0 0 var(--glow);} 70%{ box-shadow: 0 0 0 10px transparent;} 100%{ box-shadow: 0 0 0 0 transparent;} } .about-figure .badge b { font-size: 14px; } .about-figure .badge span { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); } .about-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -0.02em; line-height: 1.08; margin: 16px 0 18px; text-wrap: balance; } .about-body p { color: var(--fg-mute); font-size: 16px; margin-bottom: 16px; max-width: 600px; } .about-body p strong { color: var(--fg); font-weight: 560; } .about-tags { display:flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } /* placeholder visual */ .ph { background: repeating-linear-gradient(135deg, oklch(1 0 0 / 0.035) 0 2px, transparent 2px 11px), linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); display: grid; place-items: center; position: relative; overflow: hidden; } .ph .ph-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--fg-faint); text-transform: uppercase; text-align: center; padding: 8px 14px; border: 1px dashed var(--line); border-radius: 8px; background: oklch(0 0 0 / 0.25); } /* ============================================================ RÉALISATIONS (case studies) ============================================================ */ .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .case { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: oklch(1 0 0 / 0.018); transition: transform .25s, border-color .25s; display: flex; flex-direction: column; } .case:hover { transform: translateY(-4px); border-color: var(--acc-line); } .case .ph { aspect-ratio: 16/10; border: none; border-bottom: 1px solid var(--line); } /* ---- Case bespoke visuals ---- */ .case-viz { aspect-ratio: 16/10; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; padding: 20px; display: flex; flex-direction: column; gap: 10px; justify-content: center; background: radial-gradient(120% 90% at 85% -10%, var(--acc-soft), transparent 55%), linear-gradient(160deg, var(--bg-3), var(--bg-2)); } .case-viz::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(oklch(1 0 0 / 0.03) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.03) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(90% 80% at 75% 10%, #000, transparent 80%); mask-image: radial-gradient(90% 80% at 75% 10%, #000, transparent 80%); } .case-viz > * { position: relative; z-index: 1; } /* viz 1 : document extraction */ .vz-doc-card { border: 1px solid var(--line); border-radius: 10px; background: oklch(0.16 0.012 255 / 0.7); backdrop-filter: blur(4px); padding: 12px 13px; box-shadow: var(--shadow); } .vz-doc-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 11px; } .vz-pill { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-dim); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; } .vz-scan { width: 36px; height: 18px; border-radius: 5px; background: linear-gradient(90deg, transparent, var(--acc-soft)); border: 1px solid var(--acc-line); position: relative; overflow: hidden; } .vz-scan::after { content:""; position:absolute; top:0; bottom:0; width: 2px; background: var(--acc); box-shadow: 0 0 8px var(--glow); left: 30%; } .vz-field { display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); } .vz-field:first-of-type { border-top: none; } .vz-field span { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.06em; } .vz-field b { font-size: 12.5px; color: var(--fg); font-weight: 540; } .vz-flow { display:flex; align-items:center; gap: 10px; justify-content: center; } .vz-arrow { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--acc-line)); position: relative; } .vz-arrow::after { content:""; position:absolute; right:0; top:-3px; border-left: 6px solid var(--acc); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; } .vz-tag.ok { display:inline-flex; align-items:center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--acc); border: 1px solid var(--acc-line); background: var(--acc-soft); border-radius: 999px; padding: 4px 11px; } .vz-tag.ok svg { width: 13px; height: 13px; } /* viz 2 : email triage */ .viz-mail { gap: 7px; } .vz-mail-row { display:flex; align-items:center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: oklch(0.16 0.012 255 / 0.55); } .vz-mail-row.sel { border-color: var(--acc-line); background: var(--acc-soft); } .vz-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); flex: none; } .vz-mail-row.sel .vz-dot { background: var(--acc); box-shadow: 0 0 8px var(--glow); } .vz-line { height: 5px; border-radius: 3px; background: oklch(1 0 0 / 0.13); } .vz-line.w90 { width: 90px; } .vz-line.w80 { width: 78px; } .vz-line.w70 { width: 66px; } .vz-line.w60 { width: 54px; } .vz-cat { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-mute); } .vz-cat.urgent { color: oklch(0.78 0.15 25); border-color: oklch(0.78 0.15 25 / 0.4); } .vz-cat.rdv { color: var(--acc); border-color: var(--acc-line); background: var(--acc-soft); } .vz-reply { display:flex; align-items:center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--acc); margin-top: 2px; padding-left: 2px; } .vz-reply svg { width: 13px; height: 13px; } /* viz 3 : knowledge assistant chat */ .viz-chat { gap: 9px; } .vz-bubble { border-radius: 11px; padding: 9px 13px; font-size: 12px; max-width: 82%; } .vz-bubble.user { align-self: flex-end; background: var(--acc); color: var(--acc-ink); font-weight: 540; border-bottom-right-radius: 3px; } .vz-bubble.bot { align-self: flex-start; background: oklch(0.16 0.012 255 / 0.7); border: 1px solid var(--line); border-bottom-left-radius: 3px; display:flex; flex-direction: column; gap: 7px; } .vz-bot-head { display:flex; align-items:center; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); letter-spacing: 0.04em; } .vz-bot-ico { width: 20px; height: 20px; border-radius: 6px; background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--acc); display:grid; place-items:center; font-size: 8.5px; font-weight: 600; } .vz-typ { display:inline-flex; gap: 4px; padding: 2px 2px; } .vz-typ i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); opacity: 0.4; animation: vztyp 1.2s infinite; } .vz-typ i:nth-child(2){ animation-delay: .2s; } .vz-typ i:nth-child(3){ animation-delay: .4s; } @keyframes vztyp { 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} } @media (prefers-reduced-motion: reduce) { .vz-typ i { animation: none; } } .vz-sources { display:flex; gap: 6px; flex-wrap: wrap; align-self: flex-start; } .vz-src { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; background: oklch(1 0 0 / 0.02); } .case .case-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; } .case .ctag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); } .case h3 { font-family: var(--font-display); font-weight: 600; font-size: 18.5px; line-height: 1.2; } .case p { color: var(--fg-mute); font-size: 14.3px; } .case .result { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); display:flex; align-items: baseline; gap: 9px; } .case .result b { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--acc); letter-spacing: -0.02em; } .case .result span { font-size: 13px; color: var(--fg-mute); } /* ============================================================ TARIFS ============================================================ */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } .tier { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px 32px; background: linear-gradient(170deg, oklch(1 0 0 / 0.03), oklch(1 0 0 / 0.006)); display: flex; flex-direction: column; position: relative; } .tier.featured { border-color: var(--acc-line); box-shadow: 0 0 0 1px var(--acc-line), 0 30px 70px -40px var(--glow); } .tier.featured::before { content: "Le plus choisi"; position: absolute; top: -11px; left: 28px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc-ink); background: var(--acc); padding: 4px 11px; border-radius: 999px; } .tier .tname { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); } .tier .price { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4vw, 44px); letter-spacing: -0.02em; margin: 14px 0 4px; } .tier .price small { font-size: 15px; font-weight: 400; color: var(--fg-mute); font-family: var(--font-sans); letter-spacing: 0; } .tier .tdesc { color: var(--fg-mute); font-size: 14.5px; min-height: 44px; } .tier .feat { list-style: none; display: grid; gap: 12px; margin: 22px 0 26px; } .tier .feat li { display:flex; align-items:flex-start; gap: 11px; font-size: 14.5px; color: var(--fg-dim); } .tier .feat li svg { width: 17px; height: 17px; color: var(--acc); flex: none; margin-top: 3px; } .tier .btn { margin-top: auto; } /* ============================================================ FAQ ============================================================ */ .faq { max-width: 820px; margin-inline: auto; } .qa { border-bottom: 1px solid var(--line-soft); } .qa button.q { width: 100%; display:flex; align-items: center; gap: 18px; text-align: left; padding: 22px 4px; font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 2vw, 20px); letter-spacing: -0.01em; transition: color .2s; } .qa button.q:hover { color: var(--acc); } .qa .q .plus { margin-left: auto; flex: none; width: 22px; height: 22px; position: relative; } .qa .q .plus::before, .qa .q .plus::after { content:""; position:absolute; inset:0; margin:auto; background: var(--acc); transition: transform .3s; } .qa .q .plus::before { width: 14px; height: 1.8px; } .qa .q .plus::after { width: 1.8px; height: 14px; } .qa.open .q .plus::after { transform: rotate(90deg); opacity: 0; } .qa .a { overflow: hidden; height: 0; transition: height .3s ease; } .qa .a-inner { padding: 0 4px 24px; color: var(--fg-mute); font-size: 15.5px; max-width: 680px; } /* ============================================================ PRISE DE RDV (booking / calendly) ============================================================ */ .booking { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 56px); align-items: stretch; } .booking-intro h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.8vw, 46px); letter-spacing: -0.02em; line-height: 1.08; margin: 16px 0 18px; text-wrap: balance; } .booking-intro p { color: var(--fg-mute); font-size: 16.5px; margin-bottom: 26px; max-width: 480px; } .booking-intro .blist { list-style: none; display: grid; gap: 16px; } .booking-intro .blist li { display:flex; align-items: flex-start; gap: 13px; } .booking-intro .blist .bi-ico { width: 36px; height: 36px; flex:none; border-radius: 10px; border: 1px solid var(--acc-line); background: var(--acc-soft); color: var(--acc); display:grid; place-items:center; } .booking-intro .blist .bi-ico svg { width: 18px; height: 18px; } .booking-intro .blist b { display:block; font-size: 15px; font-weight: 560; } .booking-intro .blist span { font-size: 13.5px; color: var(--fg-mute); } /* booking widget (Calendly placeholder) */ .cal { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(180deg, oklch(0.135 0.012 255), oklch(0.118 0.012 255)); box-shadow: var(--shadow); display: flex; flex-direction: column; } .cal__head { display:flex; align-items:center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); } .cal__head .av { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--acc-line); background: var(--acc-soft); color: var(--acc); display:grid; place-items:center; font-family: var(--font-display); font-weight: 600; flex:none; } .cal__head .ct b { font-size: 14.5px; display:block; } .cal__head .ct span { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-mute); display:flex; align-items:center; gap:6px; } .cal__head .ct span svg { width: 13px; height:13px; } .cal__badge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; } .cal__body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; flex: 1; } .cal__cal { padding: 20px 22px; border-right: 1px solid var(--line-soft); } .cal__monthbar { display:flex; align-items:center; justify-content: space-between; margin-bottom: 16px; } .cal__monthbar b { font-family: var(--font-display); font-size: 15px; font-weight: 600; } .cal__nav { display:flex; gap: 6px; } .cal__nav button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); display:grid; place-items:center; color: var(--fg-dim); transition: .2s; } .cal__nav button:hover { border-color: var(--acc-line); color: var(--acc); } .cal__nav button svg { width: 14px; height: 14px; } .cal__dow { display:grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 6px; } .cal__dow span { text-align:center; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.04em; } .cal__grid { display:grid; grid-template-columns: repeat(7,1fr); gap: 4px; } .cal__grid button { aspect-ratio: 1; border-radius: 9px; font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim); border: 1px solid transparent; transition: .18s; position: relative; } .cal__grid button.empty { pointer-events: none; } .cal__grid button.avail { color: var(--fg); border-color: var(--line); } .cal__grid button.avail:hover { border-color: var(--acc-line); background: var(--acc-soft); color: var(--acc); } .cal__grid button.avail::after { content:""; position:absolute; bottom: 5px; left:50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius:50%; background: var(--acc); opacity: .8; } .cal__grid button.sel { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); box-shadow: 0 0 18px -4px var(--glow); } .cal__grid button.sel::after { display: none; } .cal__grid button.disabled { color: var(--fg-faint); opacity: .4; } .cal__slots { padding: 20px 20px; display: flex; flex-direction: column; } .cal__slots .sl-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 14px; } .cal__slots .sl-head b { color: var(--fg); } .cal__slotlist { display: grid; gap: 8px; overflow-y: auto; max-height: 230px; padding-right: 4px; } .slot { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 13.5px; color: var(--fg); text-align: center; transition: .18s; background: oklch(1 0 0 / 0.015); } .slot:hover { border-color: var(--acc-line); color: var(--acc); } .slot.sel { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); font-weight: 600; } .cal__confirm { margin-top: 16px; } .cal__note { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); text-align: center; padding: 12px 16px 16px; border-top: 1px solid var(--line-soft); letter-spacing: 0.02em; } .cal__note a { color: var(--acc); } /* confirmation toast state */ .cal.confirmed .cal__body, .cal.confirmed .cal__note { display: none; } .cal__done { display: none; padding: 40px 30px 46px; text-align: center; flex-direction: column; align-items: center; gap: 14px; } .cal.confirmed .cal__done { display: flex; } .cal__done .ok { width: 58px; height: 58px; border-radius: 50%; background: var(--acc-soft); border: 1px solid var(--acc-line); display:grid; place-items:center; color: var(--acc); box-shadow: 0 0 30px -8px var(--glow); } .cal__done .ok svg { width: 28px; height: 28px; } .cal__done h4 { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .cal__done p { color: var(--fg-mute); font-size: 14.5px; max-width: 300px; } .cal__done .recap { font-family: var(--font-mono); font-size: 13px; color: var(--acc); border: 1px solid var(--acc-line); border-radius: 10px; padding: 10px 16px; background: var(--acc-soft); } /* ============================================================ CONTACT + FOOTER ============================================================ */ .cta-final { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(36px, 6vw, 64px); text-align: center; position: relative; overflow: hidden; background: linear-gradient(165deg, oklch(1 0 0 / 0.05), oklch(1 0 0 / 0.008)); } .cta-final .orb { width: 380px; height: 380px; top: -160px; left: 50%; transform: translateX(-50%); background: var(--acc); opacity: 0.16; } .cta-final h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4.2vw, 48px); letter-spacing: -0.02em; line-height: 1.06; position: relative; text-wrap: balance; } .cta-final p { color: var(--fg-mute); font-size: 17px; margin: 18px auto 30px; max-width: 480px; position: relative; } .cta-final .hero-cta { justify-content: center; position: relative; } .site-footer { border-top: 1px solid var(--line-soft); padding-block: 50px 34px; margin-top: 30px; } .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; } .foot-brand .brand { margin-bottom: 16px; } .foot-brand p { color: var(--fg-mute); font-size: 14px; max-width: 280px; } .foot-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 14px; } .foot-col a, .foot-col span { display:block; color: var(--fg-mute); font-size: 14px; padding: 5px 0; transition: color .2s; } .foot-col a:hover { color: var(--acc); } .foot-bot { display:flex; align-items:center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; } .foot-bot p { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); letter-spacing: 0.02em; } .foot-bot .socials { display:flex; gap: 8px; } .foot-bot .socials a { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); display:grid; place-items:center; color: var(--fg-dim); transition: .2s; } .foot-bot .socials a:hover { border-color: var(--acc-line); color: var(--acc); transform: translateY(-2px); } .foot-bot .socials svg { width: 16px; height: 16px; } /* ============================================================ Reveal animation ============================================================ */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } } /* ============================================================ Mobile nav drawer ============================================================ */ .drawer { display: none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .cards, .cases, .pricing { grid-template-columns: 1fr 1fr; } .method, .about, .booking, .h-aurore, .h-terminal { grid-template-columns: 1fr; } .method-aside { position: static; } .h-aurore .aurore-panel { max-width: 460px; } .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } .cal__body { grid-template-columns: 1fr; } .cal__cal { border-right: none; border-bottom: 1px solid var(--line-soft); } } @media (max-width: 720px) { .nav-links { display: none; } .menu-toggle { display: block; } .brand .brole { display: none; } .cards, .cases, .pricing { grid-template-columns: 1fr; } .signal-metrics { gap: 28px; } body { font-size: 16px; } .drawer { display: block; position: fixed; inset: 0; z-index: 99; background: oklch(0.13 0.012 255 / 0.97); backdrop-filter: blur(14px); padding: 96px var(--gut) 40px; opacity: 0; pointer-events: none; transition: opacity .3s; } .drawer.open { opacity: 1; pointer-events: auto; } .drawer a { display:block; font-family: var(--font-display); font-size: 26px; font-weight: 500; padding: 16px 0; border-bottom: 1px solid var(--line-soft); } .drawer .btn { margin-top: 28px; } .menu-toggle.open span:nth-child(1){ transform: translateY(5px) rotate(45deg); } .menu-toggle.open span:nth-child(2){ opacity: 0; } .menu-toggle.open span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); } } @media (max-width: 480px) { .hero-cta .btn { width: 100%; } .cta-final .hero-cta .btn { width: auto; } .styleswitch { display: none; } }