/* ========================================================================== Grapheva — Brand tokens (from "Grapheva Visual Identity" guidelines, 2026) Typeface: Inter (SemiBold / Medium / Regular) — fonts.google.com/specimen/Inter Theme: dark (default) + light, toggled via [data-theme] on ========================================================================== */ :root{ /* Raw palette — only hex values from the brand PDF */ --c-primary: #111111; --c-secondary: #393a44; --c-tertiary: #7b8087; --c-slate: #4c5166; --c-charcoal: #1b1b1e; --c-light: #ededed; --c-white: #ffffff; --c-offwhite: #fafafa; --c-black: #000000; /* ---- Semantic tokens: DARK theme (default) ---- */ --bg: var(--c-primary); --bg-elevated: var(--c-charcoal); --bg-elevated-hover: var(--c-secondary); --bg-alt: var(--c-charcoal); /* "why" panel — follows the theme like every other surface */ --bg-footer: var(--c-black); --ink: var(--c-white); --ink-muted: var(--c-tertiary); --border: rgba(255,255,255,0.08); --surface-tint: rgba(255,255,255,0.06); --surface-tint-strong: rgba(255,255,255,0.22); --alt-ink: var(--c-white); --alt-ink-muted: var(--c-tertiary); --alt-border: rgba(255,255,255,0.08); --alt-accent-text: var(--c-tertiary); --accent-fill: var(--c-white); --accent-fill-hover: var(--c-light); --accent-on-fill: var(--c-primary); --accent-text: var(--c-tertiary); --header-bg: rgba(17,17,17,.7); --header-bg-scrolled: rgba(17,17,17,.92); --grid-line: rgba(255,255,255,.035); --grid-fade: rgba(255,255,255,.05); --shadow-dropdown: 0 20px 40px rgba(0,0,0,.4); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --container-w: 1240px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --ease: cubic-bezier(.16,.84,.44,1); } /* ---- Semantic tokens: LIGHT theme ---- */ :root[data-theme="light"]{ --bg: var(--c-offwhite); --bg-elevated: var(--c-light); --bg-elevated-hover: #e2e2e2; --bg-alt: var(--c-white); --bg-footer: var(--c-light); --ink: var(--c-primary); --ink-muted: var(--c-tertiary); --border: rgba(17,17,17,0.1); --surface-tint: rgba(17,17,17,0.05); --surface-tint-strong: rgba(17,17,17,0.18); --alt-ink: var(--c-primary); --alt-ink-muted: var(--c-secondary); --alt-border: rgba(17,17,17,0.1); --alt-accent-text: var(--c-secondary); --accent-fill: var(--c-primary); --accent-fill-hover: var(--c-secondary); --accent-on-fill: var(--c-white); --accent-text: var(--c-secondary); --header-bg: rgba(250,250,250,.75); --header-bg-scrolled: rgba(250,250,250,.94); --grid-line: rgba(17,17,17,.045); --grid-fade: rgba(17,17,17,.06); --shadow-dropdown: 0 20px 40px rgba(17,17,17,.12); } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--font-sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color .35s var(--ease), color .35s var(--ease); /* Sticky footer: stack the flow children in a column at least a screen tall, and let
absorb the slack so the footer is pinned to the bottom on short pages / when zoomed out. The fixed header and the absolute sprite/overlays sit outside this flow and are unaffected. */ min-height: 100vh; display: flex; flex-direction: column; } main{ flex: 1 0 auto; } .site-footer{ flex-shrink: 0; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } ul{ list-style: none; margin:0; padding:0; } button{ font-family: inherit; cursor:pointer; } h1,h2,h3,h4,p{ margin:0; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--accent-fill); color:var(--accent-on-fill); padding:.75rem 1.25rem; border-radius:var(--radius-sm); } .skip-link:focus{ left:1rem; top:1rem; } .container{ width:100%; max-width: var(--container-w); margin-inline:auto; padding-inline: 24px; } /* ========================================================================== Typography helpers ========================================================================== */ .eyebrow{ display:flex; align-items:center; gap:12px; font-size:.78rem; font-weight:600; letter-spacing:.06em; color: var(--accent-text); margin-bottom: 18px; } .eyebrow-rule{ width:28px; height:1px; background: var(--accent-text); display:inline-block; } .why-intro .eyebrow{ color: var(--alt-accent-text); } .section-title{ font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 20px; } .accent{ color: var(--accent-text); font-style: normal; } .why-intro .accent{ color: var(--alt-accent-text); } /* ========================================================================== Buttons ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 15px 26px; font-size:.94rem; font-weight:600; border-radius: var(--radius-sm); border: 1px solid transparent; transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); white-space: nowrap; } .btn svg{ transition: transform .25s var(--ease); } .btn:hover{ transform: translateY(-2px); } .btn:hover svg{ transform: translateX(3px); } .btn-accent{ background: var(--accent-fill); color: var(--accent-on-fill); } .btn-accent:hover{ background: var(--accent-fill-hover); } .btn-outline{ background: transparent; color: var(--ink); border-color: var(--surface-tint-strong); } .btn-outline:hover{ border-color: var(--accent-fill); background: var(--surface-tint); } .btn-sm{ padding: 10px 20px; font-size:.85rem; } /* ========================================================================== Header ========================================================================== */ .site-header{ position: fixed; left:0; right:0; top:0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease), top .3s var(--ease), left .3s var(--ease), right .3s var(--ease), border-radius .3s var(--ease), box-shadow .3s var(--ease); } .site-header.is-scrolled{ top: 14px; left: 0; right: 0; width: min(1040px, calc(100% - 32px)); margin-inline: auto; background: var(--header-bg-scrolled); border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-dropdown); } .header-inner{ display:flex; align-items:center; justify-content:space-between; height: 78px; } .brand{ display:flex; align-items:center; gap:12px; color: var(--ink); transition: color .3s var(--ease); } .brand-mark{ color: var(--ink); flex-shrink:0; transition: color .3s var(--ease); } /* Brand = logomark + wordmark side by side, both following the theme (white in dark mode, #111 in light mode). The mark uses currentColor inherited from .brand; the wordmark fill uses var(--ink), which resolves through the shadow boundary. */ .brand-logo{ height: 30px; width: auto; display:block; flex-shrink:0; } .brand-type{ height: 18px; width: auto; display:block; } .brand-logo-footer{ height: 26px; } .brand-type-footer{ height: 16px; } .logo-mark{ fill: var(--ink); transition: fill .3s var(--ease); } .logo-text{ fill: var(--ink); transition: fill .3s var(--ease); } .nav{ display:flex; align-items:center; gap:36px; margin-inline:auto; padding-left: 60px; } .nav-link{ font-size:.92rem; font-weight:500; color: var(--ink-muted); display:flex; align-items:center; gap:6px; background:none; border:none; padding:0; transition: color .2s var(--ease); } .nav-link:hover{ color: var(--ink); } .nav-link.is-active{ color: var(--accent-text); } /* ---- Services dropdown ---- .nav-item-dropdown is the hover/focus root. .nav-dropdown is an invisible hit-box that spans from the trigger's bottom edge all the way through the panel (via padding-top instead of a margin/gap), so moving the cursor straight down from "Services" into the menu never crosses a dead zone and never drops the hover state. */ .nav-item-dropdown{ position:relative; } .nav-dropdown-trigger svg{ transition: transform .2s var(--ease); } .nav-dropdown{ position:absolute; top:100%; left:50%; transform: translateX(-50%); padding-top: 16px; /* bridges the gap — still part of the hoverable box */ width: max-content; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .2s var(--ease), visibility .2s; } .nav-item-dropdown:hover .nav-dropdown, .nav-item-dropdown:focus-within .nav-dropdown, .nav-item-dropdown.is-open .nav-dropdown{ opacity:1; visibility:visible; pointer-events:auto; } .nav-item-dropdown:hover .nav-dropdown-trigger svg, .nav-item-dropdown:focus-within .nav-dropdown-trigger svg, .nav-item-dropdown.is-open .nav-dropdown-trigger svg{ transform: rotate(180deg); } .nav-dropdown-panel{ background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; min-width: 220px; display:flex; flex-direction:column; gap:2px; box-shadow: var(--shadow-dropdown); transform: translateY(-6px); transition: transform .2s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); } .nav-item-dropdown:hover .nav-dropdown-panel, .nav-item-dropdown:focus-within .nav-dropdown-panel, .nav-item-dropdown.is-open .nav-dropdown-panel{ transform: translateY(0); } .nav-dropdown-panel a{ font-size:.88rem; color: var(--ink-muted); padding: 10px 12px; border-radius: var(--radius-sm); transition: background-color .15s var(--ease), color .15s var(--ease); } .nav-dropdown-panel a:hover{ background: var(--surface-tint); color: var(--ink); } .nav-cta{ flex-shrink:0; margin-left:14px; } /* ---- Theme toggle ---- */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin-left:18px; flex-shrink:0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); } .theme-toggle:hover{ border-color: var(--accent-fill); background: var(--surface-tint); } .theme-toggle .icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle .icon-sun{ display:none; } :root[data-theme="light"] .theme-toggle .icon-moon{ display:block; } .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; margin-left:12px; } .nav-toggle span{ width:100%; height:2px; background: var(--ink); border-radius:2px; transition: transform .25s var(--ease), opacity .25s var(--ease), background-color .3s var(--ease); } .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .mobile-nav{ display:none; flex-direction:column; gap:2px; max-height:0; overflow:hidden; background: var(--bg-elevated); transition: max-height .35s var(--ease), background-color .3s var(--ease); } .mobile-nav.is-open{ max-height: 400px; } .mobile-nav a{ padding: 16px 24px; font-size:.95rem; font-weight:500; color: var(--ink-muted); border-top:1px solid var(--border); } .mobile-nav .btn{ margin: 14px 24px; } /* ========================================================================== Grid texture overlay (used on dark hero / CTA sections) ========================================================================== */ .grid-overlay{ position:absolute; inset:0; pointer-events:none; z-index:0; background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 96px), linear-gradient(180deg, var(--grid-fade), transparent 55%); mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, black 40%, transparent 100%); } /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; padding: 190px 0 72px; overflow:hidden; transition: background-color .35s var(--ease); } /* Soft edge blending the animated bands into the next section's background */ .hero-fade{ position:absolute; left:0; right:0; bottom:0; height: 240px; z-index:0; pointer-events:none; background: linear-gradient(180deg, transparent, var(--bg)); } /* Same idea mirrored at the top: bg → transparent, pulled up under the header */ .hero-fade-top{ position:absolute; left:0; right:0; top:-50px; height: 240px; z-index:0; pointer-events:none; background: linear-gradient(180deg, var(--bg), transparent); } .hero-inner{ position:relative; z-index:1; max-width: 900px; } .hero-title{ font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 28px; } .hero-desc{ font-size: 1.1rem; line-height:1.6; color: var(--ink-muted); max-width: 560px; margin-bottom: 40px; } .hero-actions{ display:flex; flex-wrap:wrap; gap:16px; } /* ========================================================================== Lifecycle / wheel section ========================================================================== */ .lifecycle{ padding: 120px 0 72px; background: var(--bg); transition: background-color .35s var(--ease); } .lifecycle-grid{ display:grid; grid-template-columns: minmax(0,400px) 1fr; gap: 110px; align-items:center; margin-top: 64px; } .wheel-col{ display:flex; flex-direction:column; align-items:center; gap:28px; } .wheel-wrap{ position:relative; width:100%; max-width: 380px; aspect-ratio:1/1; margin-inline:auto; } .wheel{ width:100%; height:100%; } .wheel svg{ width:100%; height:100%; overflow:visible; } .wheel-seg{ cursor:pointer; fill: var(--bg-elevated); stroke: none; transition: fill .35s var(--ease), opacity .35s var(--ease); } .wheel-seg:hover{ fill: var(--bg-elevated-hover); } .wheel-seg.is-active{ fill: var(--accent-fill); } .wheel-num{ font-size: 13px; font-weight:600; fill: var(--ink-muted); pointer-events:none; transition: fill .35s var(--ease); } .wheel-num.is-active{ fill: var(--accent-on-fill); } .wheel-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width: 380px; } .wheel-legend-item{ display:inline-flex; align-items:center; gap:7px; padding: 7px 12px 7px 8px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--ink-muted); font-size:.78rem; font-weight:500; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); } .wheel-legend-item:hover{ color: var(--ink); border-color: var(--surface-tint-strong); } .wheel-legend-item.is-active{ color: var(--accent-on-fill); background: var(--accent-fill); border-color: var(--accent-fill); } .wheel-legend-num{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background: var(--surface-tint); font-size:.66rem; font-weight:700; } .wheel-legend-item.is-active .wheel-legend-num{ background: rgba(255,255,255,.25); } .wheel-center{ position:absolute; inset:0; margin:auto; width: 34%; height:34%; background: var(--bg); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--ink); pointer-events:none; transition: background-color .35s var(--ease), color .35s var(--ease); } .phase-panel{ min-width:0; } .phase-number{ font-size: 2.6rem; font-weight:700; color: var(--ink-muted); line-height:1; margin-bottom: 6px; } .phase-eyebrow{ font-size:.78rem; font-weight:600; letter-spacing:.05em; color: var(--accent-text); margin-bottom: 8px; } .phase-title{ font-size: 1.9rem; font-weight:600; margin-bottom: 18px; } .phase-desc{ color: var(--ink-muted); font-size:1.02rem; line-height:1.6; margin-bottom: 26px; max-width:480px; } .phase-list{ display:flex; flex-direction:column; gap:14px; margin-bottom: 34px; } .phase-list li{ position:relative; padding-left:26px; font-size:.96rem; color: var(--ink); } .phase-list li::before{ content:"—"; position:absolute; left:0; color: var(--accent-text); } .phase-dots{ display:flex; gap:8px; } .phase-dots button{ height:6px; width:20px; border-radius:4px; border:none; background: var(--bg-elevated-hover); transition: background-color .3s var(--ease), width .3s var(--ease); } .phase-dots button.is-active{ background: var(--accent-fill); width:34px; } /* ========================================================================== Expertise cards ========================================================================== */ .expertise{ padding: 60px 0 72px; background: var(--bg); transition: background-color .35s var(--ease); } .expertise-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top: 56px; } .expertise-card{ background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 34px 28px 38px; transition: background-color .3s var(--ease), border-color .3s var(--ease); } .expertise-card:hover{ background: var(--bg-elevated); border-color: var(--surface-tint-strong); } .expertise-icon{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius: var(--radius-sm); border: 1px solid var(--surface-tint-strong); color: var(--ink); margin-bottom: 26px; transition: border-color .3s var(--ease), color .3s var(--ease); } .expertise-num{ display:block; font-size:.8rem; font-weight:600; color: var(--accent-text); margin-bottom: 10px; } .expertise-card h3{ font-size: 1.02rem; font-weight:600; margin-bottom: 12px; line-height:1.35; } .expertise-card p{ font-size:.9rem; line-height:1.6; color: var(--ink-muted); } /* ========================================================================== Why Grapheva — elevated panel, follows the active theme ========================================================================== */ .why{ background: var(--bg-alt); color: var(--alt-ink); padding: 120px 0 72px; transition: background-color .35s var(--ease); } .why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 90px; } .why-intro p{ font-size: 1.05rem; line-height:1.65; color: var(--alt-ink-muted); max-width:440px; margin-top:20px; } .why-list{ display:flex; flex-direction:column; } .why-item{ display:flex; gap:26px; padding: 30px 0; border-top: 1px solid var(--alt-border); } .why-item:last-child{ border-bottom: 1px solid var(--alt-border); } .why-num{ font-size:1.3rem; font-weight:700; color: var(--c-tertiary); flex-shrink:0; width:42px; } .why-item h3{ font-size:1.08rem; font-weight:600; margin-bottom:10px; } .why-item p{ font-size:.95rem; line-height:1.6; color: var(--alt-ink-muted); } /* ========================================================================== References / trust wall ========================================================================== */ .trust{ padding: 100px 0 72px; background: var(--bg); overflow:hidden; transition: background-color .35s var(--ease); } .trust-heading{ max-width: 620px; margin: 0 auto; text-align:center; font-size: 1.4rem; font-weight:600; line-height:1.4; color: var(--ink); } /* Logo marquee — two rows, opposite directions, edges fade via mask */ .trust-marquee{ margin-top: 52px; display:flex; flex-direction:column; gap: 26px; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .trust-row{ display:flex; overflow:hidden; width:100%; } .trust-track{ display:flex; align-items:center; flex-shrink:0; gap: 56px; padding-right: 56px; animation: trust-scroll 34s linear infinite; will-change: transform; } .trust-row-a .trust-track{ animation-name: trust-scroll; } .trust-row-b .trust-track{ animation-name: trust-scroll; animation-direction: reverse; animation-duration: 40s; } .trust-row:hover .trust-track{ animation-play-state: paused; } @keyframes trust-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-100%); } } .trust-logo{ flex-shrink:0; font-size: 1.15rem; font-weight:700; letter-spacing:-.01em; white-space: nowrap; color: var(--ink-muted); opacity: .8; transition: color .3s var(--ease), opacity .3s var(--ease); } .trust-row:hover .trust-logo{ opacity:.55; } .trust-row .trust-logo:hover{ color: var(--ink); opacity:1; } @media (prefers-reduced-motion: reduce){ .trust-track{ animation: none; } } /* Divider + stats */ .trust-divider{ height:1px; background: var(--border); margin-top: 64px; } /* Le bandeau « Nos partenaires » et son filet sont retirés du HTML en attendant les vrais logos ; ce retrait séparait les chiffres du filet. Le padding de .trust suffit désormais. Les règles du bandeau ci-dessus sont conservées pour son retour. */ .trust-stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align:center; } .trust-stat-num{ display:block; font-size: 2.75rem; font-weight:700; letter-spacing:-.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .trust-stat-label{ display:block; margin-top: 10px; font-size: .92rem; color: var(--ink-muted); } /* ========================================================================== About page — hero + presentation ========================================================================== */ .about-hero{ position:relative; padding: 170px 0 72px; overflow:hidden; background: var(--bg); transition: background-color .35s var(--ease); } .about-hero-inner{ position:relative; z-index:1; max-width: 800px; } .about-hero .hero-title{ font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin-bottom: 20px; } .about-hero-desc{ font-size:1.08rem; line-height:1.6; color: var(--ink-muted); max-width: 620px; } .about-intro{ padding: 60px 0 72px; background: var(--bg); transition: background-color .35s var(--ease); } .about-intro-grid{ display:grid; grid-template-columns: 1.3fr .7fr; gap: 90px; align-items:start; } .about-intro-text p{ font-size:1.02rem; line-height:1.75; color: var(--ink-muted); margin-bottom: 20px; } .about-intro-text p strong{ color: var(--ink); font-weight:600; } .about-intro-text .btn{ margin-top: 14px; } /* Facts panel — sticks alongside the narrative on wide screens */ .about-facts{ position:sticky; top: 110px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; transition: background-color .3s var(--ease), border-color .3s var(--ease); } .about-facts h3{ font-size:.78rem; font-weight:600; letter-spacing:.06em; color: var(--ink-muted); margin-bottom: 22px; } .about-facts dl{ margin:0; } .about-fact{ padding: 16px 0; border-top: 1px solid var(--border); } .about-fact:first-of-type{ border-top:none; padding-top:0; } .about-fact:last-of-type{ padding-bottom:0; } .about-fact dt{ font-size:.82rem; color: var(--ink-muted); margin-bottom:6px; } .about-fact dd{ margin:0; font-size:.98rem; font-weight:600; line-height:1.45; color: var(--ink); } /* ========================================================================== Founders ========================================================================== */ .founders{ padding: 40px 0 90px; background: var(--bg); transition: background-color .35s var(--ease); } .founders-head{ max-width: 620px; } .founders-desc{ font-size:1.02rem; line-height:1.65; color: var(--ink-muted); } .founders-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; } .founder-card{ background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 40px; transition: transform .3s var(--ease), background-color .3s var(--ease); } .founder-card:hover{ transform: translateY(-4px); } .founder-avatar{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--ink); font-weight:700; font-size:1rem; letter-spacing:.02em; margin-bottom: 26px; transition: background-color .3s var(--ease), color .3s var(--ease); } .founder-card h3{ font-size:1.2rem; font-weight:600; margin-bottom: 6px; } .founder-role{ font-size:.88rem; color: var(--ink-muted); margin-bottom: 14px; } .founder-bio{ font-size:.92rem; line-height:1.6; color: var(--ink-muted); margin-bottom: 22px; } .founder-contact{ display:flex; flex-direction:column; gap:8px; } .founder-contact a{ font-size:.9rem; color: var(--ink); border-top:1px solid var(--border); padding-top:8px; transition: color .2s var(--ease); } .founder-contact a:first-child{ border-top:none; padding-top:0; } .founder-contact a:hover{ color: var(--accent-text); } /* ========================================================================== Gallery band — blurred black & white image with CTA ========================================================================== */ .gallery{ padding: 20px 0 72px; background: var(--bg-alt); transition: background-color .35s var(--ease); } .gallery-card{ position:relative; isolation:isolate; overflow:hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); min-height: 460px; display:flex; align-items:center; justify-content:center; text-align:center; padding: clamp(32px, 6vw, 80px); } /* Blurred, desaturated backdrop — assets/Villa.jpg (case-sensitive filename; GitHub Pages serves on Linux). The brand gradient below shows through if the file is absent. The negative inset + scale hide the blur's soft edges. */ .gallery-media{ position:absolute; inset:-8%; z-index:0; background-image: url('../assets/Villa.jpg?v=62176f6f'), linear-gradient(135deg, var(--c-charcoal), var(--c-slate)); background-size: cover, cover; background-position: center, center; filter: grayscale(1) contrast(1.05) blur(7px); transform: scale(1.05); transition: transform .6s var(--ease), filter .6s var(--ease); } .gallery-card:hover .gallery-media{ transform: scale(1.1); filter: grayscale(1) contrast(1.05) blur(5px); } /* Symmetric dark scrim so the centered copy stays readable, in both themes */ .gallery-overlay{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(9,9,11,.62) 0%, rgba(9,9,11,.74) 100%), radial-gradient(ellipse 75% 90% at 50% 50%, rgba(9,9,11,.2), transparent 78%); } /* Content sits on the dark image — force a light-on-dark palette regardless of theme (this band deliberately keeps one look). */ .gallery-content{ position:relative; z-index:2; max-width: 620px; margin-inline:auto; color:#fff; } .gallery-content .eyebrow{ justify-content:center; color: rgba(255,255,255,.7); } .gallery-content .eyebrow-rule{ background: rgba(255,255,255,.55); } .gallery-content .section-title{ color:#fff; } .gallery-content .accent{ color: rgba(255,255,255,.6); } .gallery-desc{ font-size:1.05rem; line-height:1.6; color: rgba(255,255,255,.82); margin: 0 auto 34px; max-width: 500px; } .gallery-cta{ background:#fff; color:#111; } .gallery-cta:hover{ background: var(--c-light); } @media (prefers-reduced-motion: reduce){ .gallery-media{ transition:none; } .gallery-card:hover .gallery-media{ transform: scale(1.05); } } /* ========================================================================== CTA ========================================================================== */ .cta{ position:relative; padding: 150px 0 72px; text-align:center; overflow:hidden; background: var(--bg); transition: background-color .35s var(--ease); } .cta-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; } .cta-bg svg{ display:block; width:100%; height:100%; } /* Smooth hand-off from the previous section (founders, plain var(--bg)) into the animated bands — taller and eased with a two-step gradient */ .cta-fade-top{ position:absolute; left:0; right:0; top:0; height: 320px; z-index:0; pointer-events:none; background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 8%, transparent 100%); } /* Band colors per theme (gradient stops live in the shared sprite SVG, referenced by both the hero and CTA band layers) */ .cta-bg .cta-bg-base{ fill:#0d0d0f; } .cta-stop-edge{ stop-color:#0b0b0d; } .cta-stop-mid{ stop-color:#17171a; } :root[data-theme="light"] .cta-bg .cta-bg-base{ fill:#f0f0f2; } :root[data-theme="light"] .cta-stop-edge{ stop-color:#f5f5f6; } :root[data-theme="light"] .cta-stop-mid{ stop-color:#d6d6da; } .cta-inner{ position:relative; z-index:1; max-width: 680px; margin-inline:auto; } .cta .eyebrow{ justify-content:center; } .cta-desc{ font-size:1.05rem; color: var(--ink-muted); line-height:1.6; margin: 22px auto 40px; max-width: 520px; } /* ========================================================================== Contact page ========================================================================== */ .contact-page{ position:relative; padding: 170px 0 72px; overflow:hidden; background: var(--bg); transition: background-color .35s var(--ease); } .contact-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr 1.2fr; gap: 90px; align-items:start; } .contact-desc{ font-size:1.05rem; color: var(--ink-muted); line-height:1.6; margin: 22px 0 36px; max-width: 420px; } .contact-details{ display:flex; flex-direction:column; gap:12px; } .contact-form{ background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; display:flex; flex-direction:column; gap:22px; transition: background-color .3s var(--ease), border-color .3s var(--ease); } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; } .form-field{ display:flex; flex-direction:column; gap:8px; } .form-field label{ font-size:.85rem; font-weight:500; color: var(--ink-muted); } .form-field input, .form-field select, .form-field textarea{ font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .2s var(--ease), background-color .3s var(--ease); } .form-field textarea{ resize: vertical; min-height: 140px; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color: var(--accent-fill); } .form-submit{ align-self:flex-start; } .form-submit:disabled{ opacity:.6; pointer-events:none; } /* Pot de miel du formulaire de contact. `display:none` est reconnu par les robots un peu sérieux : on sort le champ du flux sans le masquer, et `tabindex="-1"` le retire du parcours clavier. */ .hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .form-status{ font-size:.9rem; color: var(--ink-muted); min-height:1.2em; margin:0; } .form-status.is-success{ color: var(--ink); } .form-status.is-error{ color: var(--ink); } /* Direct founder contacts on the contact page */ .contact-founders{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; } .contact-founder{ display:flex; flex-direction:column; gap:6px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-tint); } .contact-founder-name{ font-weight:600; font-size:.95rem; margin-bottom:2px; } .contact-founder a{ font-size:.88rem; color: var(--ink-muted); transition: color .2s var(--ease); } .contact-founder a:hover{ color: var(--accent-text); } /* ========================================================================== Services hub page ========================================================================== */ .services-hero{ position:relative; padding: 170px 0 72px; overflow:hidden; background: var(--bg); transition: background-color .35s var(--ease); } .services-hero-inner{ position:relative; z-index:1; max-width: 760px; } .services-hero .hero-title{ font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin-bottom: 20px; } .services-hero-desc{ font-size:1.08rem; line-height:1.6; color: var(--ink-muted); max-width: 620px; } .services-list{ padding: 60px 0 72px; background: var(--bg); transition: background-color .35s var(--ease); } .service-block{ padding: 46px 0; border-top: 1px solid var(--border); display:grid; grid-template-columns: 1.4fr 1fr; column-gap: 56px; row-gap: 26px; grid-template-areas: "head prestations" "text prestations"; align-items: start; } .service-block:first-child{ border-top: none; } .service-head{ grid-area: head; display:flex; align-items:center; gap:16px; } .service-num{ font-size:.9rem; font-weight:700; color: var(--accent-text); letter-spacing:.04em; flex-shrink:0; } .service-head h2{ font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight:600; line-height:1.25; } .service-body{ display:contents; } .service-text{ grid-area: text; } .service-text p{ font-size:.98rem; line-height:1.68; color: var(--ink-muted); margin-bottom: 16px; } .service-text .btn{ margin-top: 10px; } .service-prestations{ grid-area: prestations; align-self: stretch; background: var(--bg-elevated); border-radius: var(--radius-md); padding: 26px 28px; transition: background-color .3s var(--ease), border-color .3s var(--ease); } .service-prestations h3{ font-size:.74rem; font-weight:600; letter-spacing:.05em; color: var(--accent-text); margin-bottom: 16px; } .service-prestations ul{ display:flex; flex-direction:column; gap:12px; } .service-prestations li{ position:relative; padding-left:20px; font-size:.92rem; line-height:1.45; color: var(--ink); } .service-prestations li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background: var(--accent-text); } /* Opportunités à saisir */ .opportunities{ padding: 80px 0 72px; background: var(--bg); transition: background-color .35s var(--ease); } .opportunities-intro{ font-size:1.02rem; line-height:1.6; color: var(--ink-muted); max-width: 620px; margin-top: 18px; } .opportunities-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top: 48px; } .opp-card{ background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 26px; transition: background-color .3s var(--ease), border-color .3s var(--ease); } .opp-card:hover{ background: var(--bg-elevated); border-color: var(--surface-tint-strong); } .opp-card h3{ font-size:1rem; font-weight:600; margin-bottom:10px; } .opp-card p{ font-size:.9rem; line-height:1.6; color: var(--ink-muted); } /* ========================================================================== Galerie / réalisations (galerie.html) Layout follows the modular-mosaic portfolio format: a fixed sidebar carrying the page title and the category list, and a gutterless grid built on a square base module, with tiles spanning 2 columns and/or 2–3 rows. Hovering a tile dims every other tile and surfaces the project name in a fixed readout at the bottom left — the tiles themselves stay caption-free. The mosaic is CSS Grid with `grid-auto-flow: dense` rather than a masonry library: same packing, no dependency, and it re-packs itself when a category filter removes tiles. ========================================================================== */ .works-page{ display: flex; align-items: flex-start; gap: 6.25vw; /* Bottom padding keeps the sticky sidebar (and the hover readout at its foot) from settling flush against the footer once you scroll to the end of the mosaic. */ padding: 150px 6.25vw 72px 6.25vw; background: var(--bg); transition: background-color .35s var(--ease); } /* ---- Sidebar: title + categories ---- Sticky rather than fixed, so it rides alongside the mosaic but stops at the end of the section instead of floating over the footer. */ .works-sidebar{ position: sticky; top: 110px; width: 12.5vw; flex-shrink: 0; z-index: 5; } .works-title{ font-size: 1.9rem; font-weight: 300; letter-spacing: .04em; line-height: 1.1; margin: 0 0 6.25vw; } .works-cats ul{ display:block; } .works-cat{ display:block; position:relative; border-bottom: 1px solid var(--border); margin: 0 0 20px; transition: border-color .3s var(--ease); } .works-cat button{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; width:100%; padding: 5px 0; background:none; border:none; text-align:left; font-family: inherit; font-size: .75rem; font-weight: 500; letter-spacing: .06em; line-height: 1.45; color: var(--ink-muted); transition: color .3s var(--ease), padding-left .3s var(--ease); } .works-cat button:hover{ color: var(--ink); } .works-cat.is-active{ border-color: var(--ink); } .works-cat.is-active button{ color: var(--ink); } /* Zero-padded tally (024, 006) — recomputed from the markup by main.js */ .works-count{ flex-shrink:0; font-size: .7rem; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; opacity: .55; } /* Compact control that replaces the list once the sidebar unpins */ .works-select{ display:none; } .works-select select{ font: inherit; font-size:.85rem; color: var(--ink); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; width: 100%; } /* ---- Mosaic ---- 6 columns over the track the sidebar leaves free — 100vw less the page padding (2 × 6.25vw), the sidebar (12.5vw) and the flex gap (6.25vw), i.e. 68.75vw — separated by --mosaic-gap. grid-auto-rows subtracts the gaps so a row is exactly as tall as a column is wide: every module is a square (1×1 or 2×2). */ .works-mosaic{ --mosaic-gap: 10px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: calc((68.75vw - 5 * var(--mosaic-gap)) / 6); grid-auto-flow: dense; gap: var(--mosaic-gap); flex: 1; min-width: 0; } .tile{ position: relative; display: block; overflow: hidden; border-radius: 5px; grid-column: span 1; grid-row: span 1; } .tile--w2{ grid-column: span 2; } .tile--h2{ grid-row: span 2; } .tile[hidden]{ display:none; } /* Placeholder surface: theme-aware gradient + fine trame + logomark watermark. Set --img on .tile-media to drop a real photograph in; it covers the placeholder completely. */ .tile-media{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px), linear-gradient(150deg, var(--bg-elevated), var(--bg-elevated-hover)); background-size: auto, auto, cover; transition: opacity .3s var(--ease), transform .6s var(--ease); } .tile:nth-child(3n+2) .tile-media{ background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px), linear-gradient(28deg, var(--bg-elevated-hover), var(--bg-elevated)); } .tile:nth-child(3n+3) .tile-media{ background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px), linear-gradient(205deg, var(--bg-elevated), var(--bg-elevated-hover)); } /* Photograph layer — paints over the watermark once --img is set */ .tile-media::after{ content:""; position:absolute; inset:0; background-image: var(--img, none); background-size: cover; background-position: center; } .tile-mark{ width: 30%; max-width: 72px; height:auto; color: var(--ink); opacity: .07; } /* Hairline separating adjacent modules. The reference has none — its tiles are photographs — but flat placeholders need the edge to read. */ .tile::before{ content:""; position:absolute; inset:0; z-index:2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); pointer-events:none; } /* Hover: the pointed-at tile lifts, everything else recedes */ .works-mosaic.is-hovered .tile-media{ opacity: .2; } .tile:hover .tile-media, .tile:focus-visible .tile-media{ opacity: 1; transform: scale(1.03); } /* Wipe-in "open" badge at the centre of the hovered tile */ .tile::after{ content:""; position:absolute; inset:0; margin:auto; width:50px; height:50px; z-index:3; background-color: var(--accent-fill); background-image: linear-gradient(var(--accent-on-fill), var(--accent-on-fill)), linear-gradient(var(--accent-on-fill), var(--accent-on-fill)); background-size: 14px 1px, 1px 14px; background-position: center, center; background-repeat: no-repeat; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path .35s var(--ease); } .tile:hover::after, .tile:focus-visible::after{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } /* ---- Readout: year + name of the hovered project ---- Lives at the foot of the sidebar column rather than pinned to the viewport, so it stays inside its column and can never ride over the footer. Nothing sits below it, so fading it in shifts no other content — only opacity animates. */ .works-readout{ margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .works-readout.is-visible{ opacity: 1; } .works-readout-year{ display:flex; align-items:center; gap:15px; font-size: .62rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-muted); margin-bottom: 10px; } .works-readout-year::before{ content:""; display:block; width:0; height:0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .works-readout-title{ font-size: .78rem; font-weight: 300; letter-spacing: .03em; color: var(--ink); } /* ---- Detail overlay (stands in for per-project pages) ---- */ .works-lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding: 48px; background: rgba(9,9,11,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .works-lightbox.is-open{ display:flex; } /* Full-screen dialog: media stage on the left 60%, description + CTA on the right 40%. Fills the viewport inside the overlay's 12px inset. */ .lightbox-dialog{ position:relative; display:grid; grid-template-columns: 60% 40%; width: 100%; height: 100%; max-height: none; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 5px; overflow:hidden; } .lightbox-frame{ position:relative; min-height: 0; overflow:hidden; background: var(--bg-elevated); } /* ---- Carousel (the "images" work type) --------------------------------- A horizontal track of full-bleed slides translated by whole widths. Arrows sit over the media as translucent chips; a pill counter and a morphing dot row anchor to the corners. Controls collapse when a project has a single slide (.is-single). */ .carousel{ position:absolute; inset:0; } .carousel-track{ display:flex; height:100%; transition: transform .5s var(--ease); will-change: transform; touch-action: pan-y; } .carousel.is-dragging .carousel-track, .carousel.no-anim .carousel-track{ transition:none; } .cslide{ position:relative; flex:0 0 100%; height:100%; overflow:hidden; } /* Per-slide surface: brand placeholder (trame + gradient + logomark and a faint slide number), overpainted by the real photo when --img is set. */ .cslide-media{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px), linear-gradient(150deg, var(--bg-elevated), var(--bg-elevated-hover)); } .cslide:nth-child(3n+2) .cslide-media{ background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px), linear-gradient(28deg, var(--bg-elevated-hover), var(--bg-elevated)); } .cslide:nth-child(3n+3) .cslide-media{ background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 38px), linear-gradient(205deg, var(--bg-elevated), var(--bg-elevated-hover)); } .cslide-media::after{ content:""; position:absolute; inset:0; z-index:2; background-image: var(--img, none); background-size: cover; background-position:center; } .cslide-num{ position:absolute; left:18px; top:14px; font-size:2.4rem; font-weight:700; letter-spacing:.04em; color: var(--ink); opacity:.10; font-variant-numeric: tabular-nums; } .cslide .tile-mark{ width:24%; max-width:92px; opacity:.09; } /* Arrows — dark translucent chips, image-agnostic in either theme */ .carousel-arrow{ position:absolute; top:50%; transform: translateY(-50%); z-index:4; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background: rgba(9,9,11,.5); color:#fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity:0; transition: opacity .3s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); } .carousel-prev{ left:16px; } .carousel-next{ right:16px; } .carousel:hover .carousel-arrow, .carousel:focus-within .carousel-arrow{ opacity:1; } .carousel-arrow:hover{ background: rgba(9,9,11,.72); } .carousel-prev:hover{ transform: translateY(-50%) scale(1.08) translateX(-2px); } .carousel-next:hover{ transform: translateY(-50%) scale(1.08) translateX(2px); } /* Position counter — pill, top-right of the media column (the close chip sits over the info column, so they never meet) */ .carousel-count{ position:absolute; top:16px; right:16px; z-index:4; font-size:.7rem; font-weight:600; letter-spacing:.12em; font-variant-numeric: tabular-nums; color:#fff; background: rgba(9,9,11,.5); padding:5px 11px; border-radius:999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Dot row — active dot stretches into a bar */ .carousel-dots{ position:absolute; left:0; right:0; bottom:16px; z-index:4; display:flex; gap:7px; justify-content:center; align-items:center; } .carousel-dot{ width:7px; height:7px; border-radius:999px; padding:0; border:none; background: rgba(255,255,255,.45); transition: width .3s var(--ease), background-color .3s var(--ease); } .carousel-dot:hover{ background: rgba(255,255,255,.7); } .carousel-dot.is-active{ width:22px; background:#fff; } /* Single-slide projects (maquette / before-after fallback): no controls */ .carousel.is-single .carousel-arrow, .carousel.is-single .carousel-count, .carousel.is-single .carousel-dots{ display:none; } @media (prefers-reduced-motion: reduce){ .carousel-track{ transition:none; } } .lightbox-info{ padding: clamp(32px, 4vw, 64px); display:flex; flex-direction:column; gap:14px; overflow-y:auto; } .lightbox-cat{ font-size:.68rem; font-weight:600; letter-spacing:.06em; color: var(--ink-muted); } .lightbox-title{ font-size:1.35rem; font-weight:300; letter-spacing:.01em; line-height:1.3; /* keeps a long title from running under the close button */ padding-right: 42px; } .lightbox-desc{ font-size:.95rem; line-height:1.7; color: var(--ink-muted); margin-top:6px; } .lightbox-actions{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top: 24px; } /* Floats over the media, so it keeps one look in both themes: white glyph on a dark chip, inset from the dialog corner. */ .lightbox-close{ position:absolute; top:12px; right:12px; z-index:4; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:none; border-radius: 5px; background: rgba(9,9,11,.72); color: #fff; transition: background-color .2s var(--ease); } .lightbox-close:hover{ background: rgba(9,9,11,.92); } @media (prefers-reduced-motion: reduce){ .tile-media{ transition: opacity .3s; } .tile:hover .tile-media{ transform:none; } .tile::after{ transition:none; } } /* ---- Mosaic responsive ---- The sidebar unpins and the module count drops; wide/tall spans are progressively flattened so a tile never dominates a narrow screen. */ @media (max-width: 1400px){ .works-page{ gap: 5vw; padding-left: 5vw; padding-right: 5vw; } .works-sidebar{ width: 16vw; } .works-mosaic{ /* 100vw − 2×5vw padding − 16vw sidebar − 5vw flex gap = 69vw */ grid-template-columns: repeat(5, 1fr); grid-auto-rows: calc((69vw - 4 * var(--mosaic-gap)) / 5); } } @media (max-width: 1080px){ .works-page{ display: block; padding: 120px 24px 56px; } .works-sidebar{ position: static; width: 100%; max-width: var(--container-w); margin-inline: auto; } .works-title{ font-size:1.6rem; margin-bottom: 26px; } .works-cats{ display:none; } .works-select{ display:block; max-width: 320px; } /* Sidebar is no longer a column here, and hover has no meaning on touch */ .works-readout{ display:none; } .works-mosaic{ width: 100%; margin-left: 0; margin-top: 40px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc((100vw - 48px - 3 * var(--mosaic-gap)) / 4); } } @media (max-width: 760px){ .works-page{ padding-top: 100px; } .works-mosaic{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc((100vw - 48px - var(--mosaic-gap)) / 2); } /* Two columns only — every tile flattens to the same square module */ .tile--w2{ grid-column: span 1; } .tile--h2{ grid-row: span 1; } .tile::after{ width:40px; height:40px; } /* 48px a side would eat a phone screen */ .works-lightbox{ padding: 16px; } /* Too narrow for two columns — the media stage moves back on top and the info panel takes the rest of the screen height */ .lightbox-dialog{ grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .lightbox-frame{ aspect-ratio: 4 / 3; min-height:0; } .lightbox-info{ padding: 28px 24px 30px; } /* Stacked again, so the close chip lands on the media — shift the image counter clear of it */ .carousel-count{ right: 60px; } .carousel-arrow{ width:38px; height:38px; } .carousel-prev{ left:10px; } .carousel-next{ right:10px; } } /* No hover to reveal the arrows on touch devices — keep them visible */ @media (hover: none){ .carousel-arrow{ opacity:1; } } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background: var(--bg-footer); padding-top: 90px; transition: background-color .35s var(--ease); } .footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 60px; padding-bottom: 70px; } .footer-brand p{ font-size:.92rem; color: var(--ink-muted); line-height:1.6; margin: 20px 0 26px; max-width: 320px; } .footer-social{ display:flex; gap:10px; } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--ink-muted); transition: color .2s var(--ease), border-color .2s var(--ease); } .icon-btn:hover{ color: var(--ink); border-color: var(--ink); } .footer-col h4{ font-size:.78rem; font-weight:600; letter-spacing:.05em; color: var(--c-tertiary); margin-bottom: 22px; } .footer-col a{ display:block; font-size:.92rem; color: var(--ink-muted); padding: 8px 0; transition: color .2s var(--ease); } .footer-col a:hover{ color: var(--ink); } .footer-contact-line{ display:flex; align-items:center; gap:10px; font-size:.92rem; color: var(--ink-muted); padding: 8px 0; } .footer-contact-line svg{ flex-shrink:0; color: var(--ink); } .footer-contact-line a:hover{ color: var(--ink); } .footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding: 26px 0; border-top: 1px solid var(--border); font-size:.85rem; color: var(--ink-muted); } .footer-quote{ font-style: italic; } /* ========================================================================== Scroll reveal ========================================================================== */ .reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1080px){ /* Five nav items no longer fit at the original spacing — tighten before the mobile breakpoint takes over at 760px. */ .nav{ gap: 20px; padding-left: 24px; } .lifecycle-grid{ grid-template-columns: 1fr; gap: 56px; } .wheel-wrap{ max-width: 340px; } .expertise-grid{ grid-template-columns: repeat(2, 1fr); } .why-grid{ grid-template-columns:1fr; gap:48px; } .about-intro-grid{ grid-template-columns: 1fr; gap: 48px; } .about-facts{ position:static; } .contact-inner{ grid-template-columns: 1fr; gap: 56px; } .trust-stats{ grid-template-columns: repeat(2,1fr); row-gap: 40px; } .footer-grid{ grid-template-columns: 1fr 1fr; } .footer-brand{ grid-column: 1 / -1; } .service-block{ grid-template-columns: 1fr; grid-template-areas: "head" "text" "prestations"; row-gap: 28px; } .opportunities-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px){ .nav{ gap: 13px; padding-left: 0; } .nav-link{ font-size:.86rem; } } @media (max-width: 760px){ .nav, .nav-cta{ display:none; } .nav-toggle{ display:flex; } .mobile-nav{ display:flex; } .header-inner{ height:68px; } .theme-toggle{ margin-left:auto; margin-right:8px; } .hero{ padding: 140px 0 90px; } .hero-actions{ flex-direction:column; align-items:flex-start; } .hero-actions .btn{ width:100%; justify-content:center; } .section-title{ font-size: 1.9rem; } .lifecycle, .expertise, .why, .trust, .founders{ padding-top: 70px; padding-bottom: 70px; } .expertise-grid{ grid-template-columns: 1fr; } .trust-heading{ font-size: 1.2rem; } .trust-stat-num{ font-size: 2.2rem; } .founders-grid{ grid-template-columns: 1fr; } .gallery{ padding-bottom: 70px; } .gallery-card{ min-height: 380px; padding: 32px 26px; } .gallery-overlay{ background: linear-gradient(180deg, rgba(9,9,11,.5) 0%, rgba(9,9,11,.82) 100%); } .cta{ padding: 100px 0; } .contact-page{ padding: 130px 0 80px; } .contact-form{ padding: 28px; } .form-row{ grid-template-columns: 1fr; } .contact-founders{ grid-template-columns: 1fr; } .services-hero{ padding: 130px 0 20px; } .about-hero{ padding: 130px 0 20px; } .about-intro{ padding: 50px 0 60px; } .about-facts{ padding: 26px; } .opportunities-grid{ grid-template-columns: 1fr; } .service-head{ gap: 12px; } .footer-grid{ grid-template-columns: 1fr; gap:36px; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }