:root{ --bg:#07080B; --bg-2:#0C0E13; --surface:#0E1117; --surface-2:#12151C; --border:rgba(255,255,255,0.07); --border-strong:rgba(255,255,255,0.12); --text:#EDEEF2; --text-dim:#B4B8C3; --muted:#7A7F8C; --accent:#3B82F6; --accent-2:#1D4ED8; --accent-glow:rgba(59,130,246,0.35); --radius:14px; --radius-lg:20px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg);color:var(--text);font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip} html{scroll-behavior:smooth} body{min-height:100vh} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} img{max-width:100%;display:block} ::selection{background:var(--accent);color:#fff} /* ============ BACKGROUND AMBIENCE + 3D CANVAS ============ */ .bg-ambience{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:0;transition:opacity 3s cubic-bezier(.16,.84,.3,1)} .bg-ambience.visible{opacity:1} .bg-canvas-wrap{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 3s cubic-bezier(.16,.84,.3,1)} .bg-canvas-wrap.visible{opacity:0.9} #bgCanvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* Dotted-surface overlay (ported from 21st.dev DottedSurface). Stacks ABOVE the neon tubes but below all content. Fades in when the scrolling-showcase section enters the viewport and stays on below it. */ .dotted-surface-wrap{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s cubic-bezier(.16,.84,.3,1)} .dotted-surface-wrap.visible{opacity:0.75} #dottedSurfaceCanvas{position:absolute;inset:0;width:100%;height:100%;display:block} .bg-ambience::before{ content:"";position:absolute;top:-20%;left:50%;transform:translateX(-50%); width:1400px;height:1400px;border-radius:50%; background:radial-gradient(circle,rgba(59,130,246,0.12) 0%,rgba(59,130,246,0.04) 30%,transparent 65%); filter:blur(40px); } .bg-ambience::after{ content:"";position:absolute;inset:0; background: radial-gradient(1200px 600px at 80% 90%, rgba(29,78,216,0.08), transparent 60%), radial-gradient(800px 400px at 10% 40%, rgba(59,130,246,0.06), transparent 60%); } /* ============ INTRO SPLASH — EB-WEB. ============ */ .intro-splash{ position:fixed;inset:0;z-index:50;pointer-events:none; display:grid;place-items:center; opacity:1; transition:opacity .7s cubic-bezier(.16,.84,.3,1); will-change:opacity; } .intro-word{ display:flex;align-items:baseline; font-weight:600;letter-spacing:-0.04em;line-height:1; font-size:clamp(72px,14vw,200px); color:var(--text); filter:drop-shadow(0 20px 60px rgba(59,130,246,0.15)); } .intro-letter{ display:inline-block; background:linear-gradient(180deg,#fff 0%,#B9C2D4 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; will-change:transform,opacity; transition:none; --scroll-y:0vh; --enter-tx:0em; --enter-scale:1; --enter-op:1; transform:translate(var(--enter-tx),var(--scroll-y)) scale(var(--enter-scale)); opacity:var(--enter-op); } .intro-letter.dot{ background:linear-gradient(180deg,#6EA8FA 0%,#2563EB 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* ENTRANCE — only transform + opacity animate (GPU, no layout thrash). Phase 1: B(1), E(3), B(4), .(5) are opacity 0. E(0) is translated RIGHT by the width of B so it visually sits next to W. W(2) stays put. */ .intro-word.enter-ready .intro-letter{ transition: opacity 1.3s cubic-bezier(.16,.84,.3,1), transform 1.4s cubic-bezier(.16,.84,.3,1); } /* Phase 1 */ .intro-word:not(.spread) .intro-letter[data-i="0"]{--enter-tx:0.72em} .intro-word:not(.spread) .intro-letter[data-i="1"]{--enter-op:0;--enter-scale:.65} .intro-word:not(.spread) .intro-letter[data-i="2"]{--enter-tx:0em} .intro-word:not(.spread) .intro-letter[data-i="3"]{--enter-op:0;--enter-scale:.65} .intro-word:not(.spread) .intro-letter[data-i="4"]{--enter-op:0;--enter-scale:.65} .intro-word:not(.spread) .intro-letter[data-i="5"]{--enter-op:0;--enter-scale:.65} /* Phase 2 */ .intro-word.spread .intro-letter{--enter-tx:0em;--enter-scale:1;--enter-op:1} /* Stagger */ .intro-word.spread .intro-letter[data-i="1"]{transition-delay:0ms} .intro-word.spread .intro-letter[data-i="3"]{transition-delay:140ms} .intro-word.spread .intro-letter[data-i="4"]{transition-delay:280ms} .intro-word.spread .intro-letter[data-i="5"]{transition-delay:520ms} /* L'accueil commence directement au hero : plus de piste de scroll de 100 vh sous l'écran de chargement. */ body.intro-active{overflow-x:clip} /* ============ GLASSMORPHISM utilities ============ */ .glass{ background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.015) 100%); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(255,255,255,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 60px -30px rgba(0,0,0,0.5); } .grid-overlay{ position:fixed;inset:0;pointer-events:none;z-index:0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse at center, black 20%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse at center, black 20%, transparent 70%); } /* ============ LAYOUT ============ */ .container{width:100%;max-width:1360px;margin:0 auto;padding:0 32px;position:relative;z-index:1} .container-wide{max-width:1520px} section{position:relative;z-index:1} /* ============ HEADER ============ */ .header{ position:fixed;top:0;left:0;right:0;z-index:100; padding:14px 0; transition:transform .45s var(--ease), background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease), opacity .4s var(--ease); transform:translateY(0); border-bottom:1px solid transparent; } body.intro-active .header{opacity:0;pointer-events:none;transform:translateY(-30px)} .header.scrolled{ background:rgba(7,8,11,0.72); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--border); } .header.hidden{transform:translateY(-110%)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px;letter-spacing:-0.02em;cursor:pointer} .logo-mark{ width:30px;height:30px;border-radius:8px;position:relative; background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%); box-shadow:0 0 0 1px rgba(255,255,255,0.1) inset, 0 8px 24px -8px var(--accent-glow); display:grid;place-items:center; } .logo-mark::after{ content:"";width:10px;height:10px;border-radius:3px;background:rgba(255,255,255,0.9); box-shadow:0 0 8px rgba(255,255,255,0.5); } .logo-text{display:flex;align-items:baseline;gap:6px} .logo-text small{font-family:'Geist Mono',monospace;color:var(--muted);font-size:12.5px;font-weight:400;letter-spacing:0.02em} nav.primary{display:flex;align-items:center;gap:4px} .nav-item{position:relative;padding:9px 16px;border-radius:8px;font-size:15.5px;color:var(--text-dim);font-weight:450;transition:color .2s,background .2s;display:flex;align-items:center;gap:6px} .nav-item:hover{color:var(--text);background:rgba(255,255,255,0.04)} .nav-item.active{color:var(--text)} .nav-item .chev{width:10px;height:10px;opacity:.6;transition:transform .25s var(--ease)} .nav-item.open .chev{transform:rotate(180deg)} .dropdown{ position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px); width:420px;background:rgba(14,17,23,0.92);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%); border:1px solid var(--border);border-radius:16px;padding:10px; opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .25s var(--ease); box-shadow:0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02); } .dropdown.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} .dd-item{display:flex;gap:12px;padding:12px 14px;border-radius:10px;transition:background .2s;cursor:pointer;align-items:flex-start} .dd-item:hover{background:rgba(255,255,255,0.04)} .dd-icon{width:36px;height:36px;flex-shrink:0;border-radius:9px;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.15);display:grid;place-items:center;color:var(--accent)} .dd-title{font-size:14px;font-weight:500;color:var(--text);letter-spacing:-0.01em} .dd-desc{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45} .header-cta{display:flex;align-items:center;gap:10px} .header-cta .btn{font-size:15px;padding:11px 20px} .btn{ display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:10px;font-size:14px;font-weight:500; transition:all .25s var(--ease);letter-spacing:-0.005em; border:1px solid transparent; backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); } /* Secondary / ghost — translucent blue frosted glass */ .btn-ghost{ color:#E8EEF8; background:rgba(59,130,246,0.06); border-color:rgba(96,165,250,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px -10px rgba(59,130,246,0.25); } .btn-ghost:hover{ color:#fff; background:rgba(59,130,246,0.12); border-color:rgba(96,165,250,0.38); transform:translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 10px 24px -10px rgba(59,130,246,0.45); } /* Primary — translucent white frosted glass */ .btn-primary{ background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.25); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px -10px rgba(0,0,0,0.4), 0 16px 40px -20px rgba(59,130,246,0.3); } .btn-primary:hover{ transform:translateY(-1px); background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.4); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 14px 32px -10px rgba(0,0,0,0.5), 0 20px 48px -20px rgba(59,130,246,0.45); } .btn-lg{padding:14px 24px;font-size:15px;border-radius:12px} .btn svg{width:14px;height:14px} .menu-toggle{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);align-items:center;justify-content:center} .menu-toggle span{width:18px;height:1.5px;background:var(--text);position:relative;transition:all .25s} .menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--text);transition:all .25s} .menu-toggle span::before{top:-6px} .menu-toggle span::after{top:6px} .menu-toggle.open span{background:transparent} .menu-toggle.open span::before{top:0;transform:rotate(45deg)} .menu-toggle.open span::after{top:0;transform:rotate(-45deg)} /* ============ PAGES ============ */ .page{display:none;animation:pageIn .5s var(--ease-out)} .page.active{display:block} @keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* ============ HERO ============ */ /* Full-page hero: occupies the full viewport so the next section never peeks below the fold. Content is flex-centered on both axes inside it. Header is position:fixed so it overlays the top — no padding needed for clearance, the natural vertical centering keeps text below the nav. */ .hero{min-height:100vh;padding:0;position:relative;text-align:center;display:flex;align-items:center;justify-content:center} .hero > .container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%} .hero-eyebrow{ display:inline-flex;align-items:center;gap:10px; padding:6px 14px 6px 8px;border-radius:999px; background:rgba(255,255,255,0.03);border:1px solid var(--border); font-size:12.5px;color:var(--text-dim);font-family:'Geist Mono',monospace;font-weight:400; margin-bottom:32px; } .hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 2s ease-in-out infinite} .hero-eyebrow .badge{font-size:10.5px;padding:3px 8px;border-radius:999px;background:rgba(59,130,246,0.12);color:#8BB4F8;border:1px solid rgba(59,130,246,0.22)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} .h1{ font-size:clamp(40px,6.2vw,78px);font-weight:600;letter-spacing:-0.035em;line-height:1.02; background:linear-gradient(180deg,#fff 0%,#C6CBD6 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; max-width:16ch;text-wrap:balance; } .h1 .accent{ background:linear-gradient(180deg,#6EA8FA 0%,#2563EB 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .hero-sub{ font-size:clamp(16px,1.4vw,19px);color:var(--text-dim);max-width:62ch;margin-top:28px;font-weight:400;line-height:1.6; } .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px} /* Hero visual panel — GLASS */ .hero-visual{ margin-top:80px;position:relative;width:100%;text-align:left; border-radius:24px;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.015) 100%); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); border:1px solid rgba(255,255,255,0.09); box-shadow:0 40px 100px -40px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.06) inset; } .hero-visual-inner{padding:40px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;min-height:420px} .hero-visual-panel{ background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01)); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(255,255,255,0.08);border-radius:16px; padding:24px;font-family:'Geist Mono',monospace;font-size:13px; position:relative;overflow:hidden; } .hero-visual-panel::before{ content:"";position:absolute;top:0;left:0;right:0;height:36px; background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent); border-bottom:1px solid var(--border); } .hero-panel-dots{display:flex;gap:6px;position:relative;z-index:1;margin-bottom:24px} .hero-panel-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.1)} .metric-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px dashed var(--border)} .metric-row:last-child{border-bottom:none} .metric-label{color:var(--muted);font-size:12px;letter-spacing:0.04em;text-transform:uppercase} .metric-val{color:var(--text);font-size:16px;font-weight:500} .metric-delta{color:#6EE7B7;font-size:11px;margin-left:8px;font-weight:500} .metric-bar{height:4px;border-radius:2px;background:rgba(255,255,255,0.06);margin-top:6px;overflow:hidden;width:100%} .metric-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#6EA8FA);border-radius:2px;animation:fill 1.6s var(--ease-out) forwards;transform-origin:left} .hero-visual-stack{display:flex;flex-direction:column;gap:16px} .stack-card{ padding:18px 20px;border-radius:14px; background:rgba(255,255,255,0.03); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(255,255,255,0.08); display:flex;align-items:center;gap:14px; transition:all .3s var(--ease); } .stack-card:hover{border-color:var(--border-strong);background:rgba(255,255,255,0.04);transform:translateX(4px)} .stack-icon{width:38px;height:38px;border-radius:10px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);display:grid;place-items:center;color:var(--accent);flex-shrink:0} .stack-info{flex:1;min-width:0} .stack-title{font-size:14px;font-weight:500;color:var(--text)} .stack-desc{font-size:12.5px;color:var(--muted);margin-top:2px} .stack-status{font-family:'Geist Mono',monospace;font-size:11px;color:#6EE7B7;padding:4px 10px;border-radius:999px;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2)} @keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ============ SECTIONS ============ */ .section{padding:120px 0} .section-sm{padding:80px 0} .section-head{max-width:780px;margin-bottom:64px} .eyebrow{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:24px;height:1px;background:var(--accent)} .h2{font-size:clamp(32px,4vw,52px);font-weight:600;letter-spacing:-0.03em;line-height:1.05;color:var(--text);max-width:22ch;text-wrap:balance} .h2 .soft{color:var(--muted)} .lead{font-size:18px;color:var(--text-dim);max-width:60ch;margin-top:20px;line-height:1.6} /* ============ SERVICES GRID ============ */ .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .service-card{ position:relative;padding:32px;border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.015) 100%); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(255,255,255,0.08); box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 50px -30px rgba(0,0,0,0.5); overflow:hidden; transition:all .35s var(--ease); cursor:pointer; min-height:280px;display:flex;flex-direction:column;justify-content:space-between; } .service-card::before{ content:"";position:absolute;inset:0;border-radius:var(--radius-lg); background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),rgba(59,130,246,0.12),transparent 60%); opacity:0;transition:opacity .3s; } .service-card:hover::before{opacity:1} .service-card:hover{border-color:var(--border-strong);transform:translateY(-2px)} .service-num{font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.1em} .service-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid var(--border);display:grid;place-items:center;color:var(--accent);margin-bottom:28px} .service-title{font-size:22px;font-weight:500;letter-spacing:-0.02em;color:var(--text);margin-top:16px} .service-desc{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.55} .service-link{display:flex;align-items:center;gap:6px;margin-top:24px;font-size:13px;color:var(--accent);font-weight:500} .service-link svg{width:12px;height:12px;transition:transform .25s} .service-card:hover .service-link svg{transform:translateX(4px)} /* ============ STORYTELLING — Timeline (vanilla port of Aceternity Timeline) ============ The section is a list of items, each with: • a STICKY title on the left (sticks at top:160 px while its content is in view; fades to gray once scrolled past — same look as the neutral-500 in the source) • a CARD on the right (photo bg + description text overlay) A vertical 2 px line at the far left runs through every marker. The line has a base track (faint white, masked to fade at the section's edges) plus a colored fill (`.tl-line-fill`) whose `height` and `opacity` are driven by scroll progress — replicating Aceternity's `useScroll({offset: ["start 10%", "end 50%"]})` + `useTransform`. */ .tl-section{position:relative;width:100%} /* ---- Header (Aceternity's "Changelog from my journey" intro block) ---- */ .tl-header{ max-width:1280px; margin:0 auto; padding:80px 32px 40px; } .tl-header h2{ font-size:clamp(32px,4vw,52px); font-weight:600;letter-spacing:-0.025em;line-height:1.05; color:var(--text);text-wrap:balance; max-width:22ch;margin:0 0 16px; } .tl-header h2 .accent{color:var(--accent)} .tl-header p{ font-size:17px;color:var(--text-dim);line-height:1.6; max-width:62ch;margin:0; } /* ---- 2-column grid: items scroll on the left, cards stick on the right ---- */ .tl-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:80px; max-width:1280px; margin:0 auto; padding:0 32px 120px; } /* ---- Left column — items list with STICKY titles ---- */ /* Each item is just a tall scroll-range that lets its title dwell at the top of the viewport (Aceternity Timeline behavior). The marker sits INSIDE the sticky title-wrap so it travels with the title — when the next item's title arrives at top:140 it pushes the previous one out. */ .tl-items-col{ position:relative; padding-left:72px; /* room for marker + line */ } .tl-item{ position:relative; min-height:0; } /* Spacer in the CONTENT BOX (not padding) so the sticky title-wrap has room to actually stick — sticky's containing block is the parent's content area, padding doesn't count. */ .tl-item::after{ content:"";display:block;height:32vh; } .tl-item:first-child{padding-top:80px} .tl-item:last-child::after{height:60px} /* Sticky head — wraps the marker and the title, sticks at top:140 px. z-index higher than the line so the title visually sits ON TOP of it. */ .tl-title-wrap{ position:sticky; top:140px; z-index:5; display:flex;align-items:center; padding:24px 0; /* breathing room around the sticky title */ } .tl-marker{ position:absolute; top:50%; /* centered in the sticky head — small (~70 px tall) */ left:-60px; /* puts marker center on the line at left:32 px of grid */ width:40px;height:40px; border-radius:50%; background:#05070c; display:flex;align-items:center;justify-content:center; box-shadow:0 0 0 1px rgba(255,255,255,0.06); transform:translateY(-50%); z-index:2; } .tl-marker::before{ content:""; width:14px;height:14px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); transition:background .35s ease, border-color .35s ease, box-shadow .35s ease; } .tl-item.active .tl-marker::before{ background:rgba(96,165,250,0.55); border-color:#60A5FA; box-shadow:0 0 14px rgba(96,165,250,0.55); } .tl-title{ font-size:clamp(26px,3vw,40px); font-weight:600;letter-spacing:-0.022em;line-height:1.1; color:rgba(255,255,255,0.32); margin:0;text-wrap:balance; transition:color .45s ease; } .tl-title .accent{color:rgba(96,165,250,0.42);transition:color .45s ease} .tl-item.active .tl-title{color:rgba(255,255,255,0.95)} .tl-item.active .tl-title .accent{color:var(--accent)} /* ---- Right column — sticky card panel ---- */ /* The .tl-cards-sticky container sticks at top:140 px while the user scrolls through the items column. Inside, all 4 cards are stacked absolutely; only the .active one is visible. */ .tl-cards-col{position:relative} .tl-cards-sticky{ position:sticky; top:140px; width:100%; aspect-ratio:4/3; } .tl-card{ position:absolute;inset:0; width:100%;height:100%; border-radius:20px; overflow:hidden; background:#0a0a0d; border:1px solid rgba(255,255,255,0.06); box-shadow:0 30px 60px -30px rgba(0,0,0,0.6),0 1px 0 rgba(255,255,255,0.04) inset; opacity:0; transform:translateY(28px) scale(0.96); transition:opacity .6s cubic-bezier(.25,1,.4,1), transform .6s cubic-bezier(.25,1,.4,1); pointer-events:none; } .tl-card.active{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .tl-card-bg{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; z-index:0; } /* BLUR layer — backdrop-filter applied to the bottom of the card and masked with a vertical gradient so the blur fades in as you approach the text. The mask goes from black (full blur) at the bottom to transparent (no blur) ~60 % up the card. */ .tl-card::before{ content:"";position:absolute;inset:0;z-index:1; backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 25%,transparent 60%); mask-image:linear-gradient(0deg,#000 0%,#000 25%,transparent 60%); pointer-events:none; } /* DARK gradient — sits on top of the blur so the text stays legible even after the photo is blurred. */ .tl-card::after{ content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(0deg,rgba(5,7,12,0.78) 0%,rgba(5,7,12,0.40) 30%,rgba(5,7,12,0.08) 60%,transparent 100%); } .tl-card-text{ position:absolute; left:32px;right:32px;bottom:30px; z-index:3;color:#fff; } .tl-card-text p{ font-size:clamp(13px,1vw,15px); line-height:1.55; color:rgba(255,255,255,0.88); max-width:62ch; margin:0; } /* ---- Vertical line + scroll-driven fill (left column) ---- */ .tl-line{ position:absolute; top:0;bottom:0;left:32px; width:2px; background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.10) 99%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 8%,black 92%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,black 8%,black 92%,transparent 100%); overflow:hidden; } .tl-line-fill{ position:absolute; top:0;left:0;right:0; width:100%; height:0; background:linear-gradient(to top,#3B82F6 0%,#60A5FA 30%,transparent 100%); border-radius:9999px; opacity:0; will-change:height,opacity; } /* ---- Mobile fallback ---- */ /* Below 960 px: drop the sticky right column. Cards become inline below each item's title + description — same flow as a regular vertical list. */ @media (max-width:960px){ .tl-grid{ grid-template-columns:1fr; gap:0; padding:0 20px 80px; } .tl-items-col{padding-left:48px} .tl-line{left:20px} .tl-marker{left:-44px;top:80px;transform:none} .tl-item{padding:32px 0} .tl-item:first-child{padding-top:24px} .tl-cards-col{display:none} /* Inject one small inline card per item via a new selector if needed — for now we drop the visual to keep mobile snappy. */ } /* ============ HELIX SHOWCASE — 3D scroll-driven helical reveal ============ Replaces the 2-col timeline. The rail is a point in 3D space; each card orbits at fixed radius with its own --i offset (angle + Y). As scroll progresses, the rail rotates AND translates so the active card lands at front-center while past/future cards remain visible at the sides. */ .helix-section{position:relative;width:100%;padding:0} /* SCÉNARIO : 1) Au scroll, le titre `.helix-header` (sticky avec top:50vh) entre dans le viewport en premier — il monte du bas, atteint le centre vertical et se fige. 2) L'utilisateur continue : le titre est pinned au centre, la zone des cards (`.helix-sticky`, top:0) n'est pas encore engagée → on ne voit QUE le titre. 3) Quand `.helix-sticky` finit par engager (top=0, hauteur 100vh), les cards apparaissent au centre du viewport, EN AVANT du titre (z-index plus élevé). À partir de là le timeline hélicoïdal commence. IMPORTANT : pas de classe `.reveal` sur .helix-header (son `transform:translateY(24px)` écraserait le `transform:translateY(-50%)` du centrage vertical). */ .helix-wrapper{position:relative;grid-column:1/-1} .helix-header{ position:sticky; top:50vh; transform:translateY(-50%); /* recentre visuellement le titre sur top:50vh */ margin:0 auto; max-width:1080px; padding:0 32px;text-align:center; z-index:1; /* DERRIÈRE les cards */ pointer-events:none; } .helix-header h2{ font-size:clamp(34px,4.2vw,56px); line-height:1.05;letter-spacing:-0.02em;font-weight:700; color:var(--text);margin:0; text-shadow:0 2px 18px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5); } .helix-header h2 .accent{color:var(--accent)} .helix-header p{ color:var(--text-dim);margin:18px auto 0; max-width:60ch;font-size:16px;line-height:1.6; text-shadow:0 1px 8px rgba(0,0,0,0.7); } .helix-sticky{ position:sticky;top:0; height:100vh; overflow:hidden; z-index:5; /* DEVANT le titre */ } .helix-stage{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; perspective:1500px;perspective-origin:50% 50%; } .helix-rail{ position:relative; width:0;height:0; transform-style:preserve-3d; transform:rotateY(0deg) translateY(0); will-change:transform; } .helix-card{ --i:0; --card-w:min(445px, 56vw); /* -10% */ --card-h:min(302px, 37vw); /* -10% */ --angle-step:55deg; --y-step:90px; --radius:480px; --depth:14px; /* épaisseur 3D — discrète, juste un soupçon sur la tranche */ /* Variables pilotées par la souris (JS) */ --mx:0; --my:0; --hover:0; position:absolute;left:0;top:0; width:var(--card-w);height:var(--card-h); margin:calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2); /* Angles vifs. Les pseudo-éléments (::before, ::after) et l'image de fond héritent via `border-radius:inherit` → rien d'autre à changer. */ border-radius:0; background:#0E1117; border:1px solid rgba(220,230,255,0.18); box-shadow: /* Halo lumineux extérieur — la carte "respire" */ 0 0 0 1px rgba(255,255,255,0.06), 0 0 40px -10px rgba(150,180,255,0.18), /* Drop shadow profond */ 0 60px 140px -20px rgba(0,0,0,0.85), /* Highlights internes (rim de verre) */ 0 0 0 1px rgba(255,255,255,0.04) inset, 0 1px 0 rgba(255,255,255,0.20) inset, 0 -1px 0 rgba(0,0,0,0.35) inset; transform-style:preserve-3d; transform: rotateY(calc(var(--i) * var(--angle-step) + var(--mx) * 4deg)) translateZ(calc(var(--radius) + var(--hover) * 18px)) translateY(calc(var(--i) * var(--y-step))) rotateX(calc(var(--my) * 4deg)); transition: filter 0.6s ease, opacity 0.6s ease, transform 0.22s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.4s ease; filter:brightness(0.5) saturate(0.7); } /* Quand la souris QUITTE la card, on rallonge l'easing du transform pour que le retour de --mx/--my/--hover à 0 soit doux (ease-out-quint sur 0.75s au lieu de 0.22s). La classe est retirée après la transition par le JS, pour que le suivi souris reste réactif au prochain hover. */ .helix-card.is-leaving{ transition: filter 0.6s ease, opacity 0.6s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; } /* Face arrière → donne l'épaisseur 3D au card (visible quand l'hélice tourne) */ .helix-card::before{ content:""; position:absolute;inset:0; border-radius:inherit; background: /* Tranche bleutée — comme la tranche d'une lame de verre */ linear-gradient(135deg,#1a2030 0%,#0c1018 55%,#1d2536 100%); border:1px solid rgba(180,200,255,0.12); box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 1px 0 rgba(255,255,255,0.10) inset, 0 40px 80px rgba(0,0,0,0.7); transform:translateZ(calc(var(--depth) * -1)); z-index:-1; } .helix-card.active{ filter:brightness(1) saturate(1); box-shadow: /* Halo extérieur plus fort sur la carte active */ 0 0 0 1px rgba(255,255,255,0.10), 0 0 60px -10px rgba(150,180,255,0.28), 0 90px 180px -30px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 1px 0 rgba(255,255,255,0.26) inset, 0 -1px 0 rgba(0,0,0,0.4) inset; } .helix-card-bg{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block;pointer-events:none; border-radius:inherit; /* Image légèrement adoucie : impression d'être "derrière une vitre" */ filter:saturate(1.05) brightness(0.92); } /* Voile GLASS 3D sur TOUTE la carte — version NOIRE : – backdrop-filter blur → verre fumé (l'image s'adoucit derrière) – toutes les couches sont noires (plus aucun voile blanc/laiteux) – la couche pilotée par la souris est une ÉCLAIRCIE : le voile noir s'amincit sous le curseur au lieu d'y projeter un reflet blanc ⚠️ Ces couches se COMPOSENT (deux calques à 0.30 donnent 0.51, pas 0.30). Les alphas sont donc volontairement bas pris individuellement. */ .helix-card::after{ content:"";position:absolute;left:0;right:0;top:0;bottom:0; border-radius:inherit; backdrop-filter:blur(3px) saturate(1.05); -webkit-backdrop-filter:blur(3px) saturate(1.05); background: /* Éclaircie mouse-tracked : transparent sous le curseur, assombri autour */ radial-gradient( 130% 90% at calc(50% + var(--mx) * 55%) calc(30% + var(--my) * 65%), rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 28%, rgba(0,0,0,0.15) 58%, rgba(0,0,0,0.22) 100% ), /* Sheen diagonal noir (haut-gauche → bas-droit) */ linear-gradient( 135deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.04) 30%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.04) 72%, rgba(0,0,0,0.12) 100% ), /* Voile noir global (verre fumé) */ linear-gradient( 180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.14) 45%, rgba(0,0,0,0.20) 100% ), /* Dégradé sombre en bas pour garantir la lisibilité du texte */ linear-gradient( 180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.42) 72%, rgba(0,0,0,0.74) 88%, rgba(0,0,0,0.92) 100% ); /* Rim intérieur : discret et neutre (le rim blanc épais jurait avec un voile noir et des angles vifs) */ box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, -1px 0 0 rgba(0,0,0,0.30) inset, 0 -1px 0 rgba(0,0,0,0.45) inset; pointer-events:none; z-index:1; } /* Texte simple posé sur le verre — text-shadow pour la lisibilité */ .helix-card-text{ position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4); } .helix-card-num{ font-family:'Geist Mono',monospace;font-size:11px; letter-spacing:0.2em;color:rgba(255,255,255,0.55);margin-bottom:12px; } .helix-card-title{ font-family:'Sintony',sans-serif;font-weight:700; font-size:clamp(22px,2.4vw,30px); line-height:1.15;letter-spacing:-0.01em;margin:0 0 10px; color:#fff; } .helix-card-title .accent{color:#9CC2FF} .helix-card-desc{ font-size:14.5px;color:rgba(255,255,255,0.82);line-height:1.55; max-width:50ch;margin:0; } .helix-progress{ position:absolute;bottom:5vh;left:50%; display:flex;gap:10px; transform:translateX(-50%); z-index:5; } .helix-progress .step{ width:24px;height:3px;border-radius:3px; background:rgba(255,255,255,0.18); transition:background 0.3s, width 0.3s; } .helix-progress .step.active{ background:var(--accent);width:40px; } .helix-hint{ position:absolute;top:5vh;left:50%;transform:translateX(-50%); z-index:5; font-family:'Geist Mono',monospace;font-size:11px; letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.45);pointer-events:none; } @media (max-width:900px){ .helix-card{ --card-w:min(302px, 63vw); /* -10% */ --card-h:min(206px, 42vw); /* -10% */ --angle-step:50deg; --y-step:70px; --radius:340px; --depth:10px; } .helix-stage{perspective:1100px} .helix-card-text{left:14px;right:14px;bottom:14px} } @media (max-width:600px){ .helix-card{ /* Format ~5:4 (un peu plus haut que large) → assez de hauteur pour titre 2 lignes + description 3 lignes, sans rogner. */ --card-w:min(240px, 70vw); --card-h:min(200px, 60vw); --angle-step:62deg; /* cards bien séparées, pas d'overlap */ --y-step:48px; --radius:340px; /* cylindre plus large que les cards */ --depth:8px; } .helix-stage{perspective:900px} .helix-card-text{ left:14px;right:14px;bottom:14px; /* On laisse le texte respirer sans contrainte top → la hauteur de la card est suffisante. */ } .helix-card-num{font-size:10.5px;margin-bottom:8px;letter-spacing:0.16em} .helix-card-title{font-size:16px;line-height:1.18;margin-bottom:6px} .helix-card-desc{ font-size:12.5px;line-height:1.45; display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden; -webkit-line-clamp:3; /* 3 lignes max → texte coupé proprement avec ellipsis */ } } /* Très petit mobile (<380px) : on coupe la description à 2 lignes pour que tout rentre quand le viewport est étroit (ex iPhone SE en portrait). */ @media (max-width:380px){ .helix-card{ --card-w:min(220px, 72vw); --card-h:min(180px, 60vw); --radius:300px; } .helix-card-title{font-size:15px} .helix-card-desc{-webkit-line-clamp:2;font-size:12px} } /* Sur écrans tactiles : pas d'effet hover (évite tilt qui reste figé) */ @media (hover: none){ .helix-card{ --mx:0; --my:0; --hover:0; } } /* ============ BENEFITS — HORIZONTAL STICKY SCROLL ============ Vertical scroll → horizontal translation. The section is 300 vh tall; `.bh-sticky` is pinned full-viewport while the user scrolls through. Inside the sticky, a horizontal flex track holds all cards side-by-side and JS translates it leftward in proportion to vertical scroll progress (Apple-style horizontal reveal). The header (eyebrow + title) stays at top of the sticky while cards slide. */ .bh-section{position:relative;width:100%} .bh-outer{position:relative;height:320vh} .bh-sticky{ position:sticky;top:0; height:100vh; display:flex;flex-direction:column; overflow:hidden; } .bh-head{ flex-shrink:0; padding:96px 0 48px; } .bh-head .eyebrow{margin-bottom:14px} .bh-head .h2{font-size:clamp(28px,3.4vw,44px)} /* Track-wrap — masks horizontal overflow, vertically centers the cards in the remaining viewport height. */ .bh-track-wrap{ flex:1; display:flex; align-items:center; overflow:hidden; width:100%; } .bh-track{ display:flex; gap:28px; padding:0 max(32px, calc((100vw - 1280px) / 2 + 32px)); will-change:transform; } /* Glass card avec contour glowing neon EN MOUVEMENT — version allégée : un seul pseudo `::before` qui dessine la couronne via conic-gradient + mask-composite, sans blur ni second halo flouté (les `filter:blur(8px)` sur des animations en boucle saturent le compositor). L'animation se fait uniquement par `@property --bh-angle`, ce qui ne déclenche QUE le repaint du gradient — pas de relayout, pas de blur GPU. */ @property --bh-angle{ syntax:''; initial-value:0deg; inherits:false; } .bh-card{ position:relative; flex-shrink:0; width:380px; height:min(460px, 60vh); padding:36px 32px; display:flex;flex-direction:column;gap:18px; border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.10) 100%); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(255,255,255,0.10); box-shadow: 0 0 28px rgba(59,130,246,0.22), /* halo bleuté ambiant statique */ 0 1px 0 rgba(255,255,255,0.18) inset, 0 30px 60px -30px rgba(0,0,0,0.55); transition:border-color .3s ease, transform .3s ease, background .3s ease, box-shadow .35s ease; isolation:isolate; } /* Ruban lumineux qui tourne autour du contour — UN seul pseudo, pas de blur */ .bh-card::before{ content:""; position:absolute;inset:0; border-radius:inherit; padding:1.6px; background:conic-gradient( from var(--bh-angle), transparent 0%, transparent 70%, rgba(96,165,250,0.85) 82%, rgba(200,225,255,1) 90%, /* cœur clair — l'orbe */ rgba(96,165,250,0.85) 96%, transparent 100% ); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; animation:bhBorderTravel 4.5s linear infinite; pointer-events:none; } /* Décalage de phase pour désynchroniser les orbes entre cards */ .bh-card:nth-child(2n)::before{ animation-delay:-1.5s; } .bh-card:nth-child(3n)::before{ animation-delay:-3.0s; } .bh-card:hover{ border-color:rgba(140,190,255,0.45); background:linear-gradient(180deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.13) 100%); transform:translateY(-4px); box-shadow: 0 0 36px rgba(59,130,246,0.35), 0 1px 0 rgba(255,255,255,0.22) inset, 0 30px 60px -30px rgba(0,0,0,0.55); } .bh-card:hover::before{ animation-duration:2.6s; } /* l'orbe accélère au hover */ @keyframes bhBorderTravel{ to { --bh-angle:360deg; } } /* Fallback Firefox (avant @property), et accessibilité reduced-motion */ @supports not (background:conic-gradient(from var(--bh-angle), red, blue)){ .bh-card::before{ background:linear-gradient(135deg, transparent 30%, rgba(96,165,250,0.6) 50%, transparent 70%); animation:none; } } @media (prefers-reduced-motion: reduce){ .bh-card::before{ animation:none; } } .bh-card-num{ font-family:'Geist Mono',monospace; font-size:13px;letter-spacing:0.06em; color:var(--accent);font-weight:500; } .bh-card-body{display:flex;flex-direction:column;gap:18px;flex:1} .bh-card-body h3{ font-size:26px;font-weight:500;letter-spacing:-0.02em;line-height:1.18; color:#fff;margin:0;text-wrap:balance; } .bh-card-body p{ font-size:17px;color:rgba(255,255,255,0.92);line-height:1.55;margin:0; } /* Mobile fallback — drop the horizontal scroll, use a vertical list. Breakpoint à 900px pour couvrir aussi tablette portrait (768px) où le sticky horizontal n'est pas adapté au touch. On désactive le flex/sticky du parent pour empêcher l'écrasement vertical de bh-track-wrap (flex:1 sur parent height:auto → enfant collapse). */ @media (max-width:900px){ .bh-outer{height:auto} .bh-sticky{position:relative;height:auto;display:block;overflow:visible} .bh-head{padding:60px 0 24px} .bh-track-wrap{display:block;overflow:visible;flex:none;align-items:stretch} .bh-track{display:flex;flex-direction:column;gap:16px;padding:0;transform:none !important} .bh-card{width:100%;height:auto;flex-shrink:1} } /* Legacy single-use of benefits-grid on sub-pages (kept for compatibility elsewhere — only the home-page section swaps to the stack). */ .benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;border-radius:var(--radius-lg)} /* ============ CTA BAND (GLASS) ============ */ .cta-band{ padding:80px 56px;border-radius:24px;position:relative;overflow:hidden; background: radial-gradient(800px 400px at 50% 0%,rgba(59,130,246,0.22),transparent 70%), linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01)); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); border:1px solid rgba(255,255,255,0.09); box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 80px -30px rgba(0,0,0,0.5); } .cta-band::before{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(ellipse at 50% 0%, black 10%, transparent 60%); -webkit-mask-image:radial-gradient(ellipse at 50% 0%, black 10%, transparent 60%); } .cta-band-inner{position:relative;text-align:center;max-width:720px;margin:0 auto} .cta-band .h2{max-width:none;margin:0 auto} /* ============ SUB-PAGE HERO ============ */ .sub-hero{padding:160px 0 80px;border-bottom:1px solid var(--border);position:relative} .sub-hero-breadcrumb{font-family:'Geist Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:0.05em;margin-bottom:24px;display:flex;align-items:center;gap:8px} .sub-hero-breadcrumb span{color:var(--text-dim)} .sub-hero-breadcrumb .sep{color:var(--muted);opacity:.5} .sub-hero h1{font-size:clamp(36px,5vw,64px);font-weight:600;letter-spacing:-0.03em;line-height:1.05;max-width:18ch;text-wrap:balance} .sub-hero p.intro{font-size:18px;color:var(--text-dim);max-width:62ch;margin-top:24px;line-height:1.6} /* ============ CONTENT SECTIONS (sub-pages) ============ */ .content-section{padding:100px 0} .content-grid{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start} .content-aside{position:sticky;top:100px} .content-aside .eyebrow{margin-bottom:24px} /* Le H3 historique est promu H2 pour la SEO mais doit garder son rendu */ .content-aside h2, .content-aside h3{font-size:26px;font-weight:500;letter-spacing:-0.02em;line-height:1.15;color:var(--text);margin:0} .content-main{display:flex;flex-direction:column;gap:48px} /* Idem : H4 historique promu H3 → on étend la règle aux deux niveaux */ .content-block h3, .content-block h4{font-size:20px;font-weight:500;letter-spacing:-0.015em;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:12px} .content-block h3::before, .content-block h4::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} .content-block p{font-size:16px;color:var(--text-dim);line-height:1.7} /* ============ INCLUDED LIST (GLASS) ============ */ .included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow:hidden;margin-top:24px} .included-cell{padding:24px;display:flex;gap:14px;align-items:flex-start;border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01)); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border:1px solid rgba(255,255,255,0.07); } .included-check{width:22px;height:22px;border-radius:6px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);display:grid;place-items:center;flex-shrink:0;color:var(--accent)} .included-text{font-size:14.5px;color:var(--text);line-height:1.5} /* ============ REALISATIONS (GLASS) ============ */ .works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .work-card{ border-radius:var(--radius-lg);overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.01) 100%); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(255,255,255,0.08); box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 50px -30px rgba(0,0,0,0.5); transition:all .4s var(--ease);position:relative; } .work-card:hover{border-color:rgba(255,255,255,0.16);transform:translateY(-4px)} .work-visual{aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--surface),var(--bg-2));border-bottom:1px solid var(--border)} .work-visual-pattern{position:absolute;inset:0} .work-visual-label{position:absolute;top:16px;left:16px;font-family:'Geist Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(7,8,11,0.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border)} .work-body{padding:28px} .work-category{font-family:'Geist Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:0.08em;text-transform:uppercase} .work-title{font-size:20px;font-weight:500;letter-spacing:-0.02em;margin-top:10px;color:var(--text)} .work-desc{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.55} .work-meta{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap} .work-chip{font-size:11.5px;font-family:'Geist Mono',monospace;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.03);border:1px solid var(--border);color:var(--text-dim)} /* ============ CONTACT ============ */ .contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch} /* LEFT — visual gradient card */ .contact-visual{ position:relative;border-radius:24px;overflow:hidden; padding:48px 40px;min-height:580px; display:flex;flex-direction:column;justify-content:space-between;gap:32px; background: radial-gradient(70% 60% at 85% 100%, rgba(96,165,250,0.55), transparent 60%), radial-gradient(120% 90% at 30% 0%, #2C6CFF 0%, #1A40A8 35%, #0E1A48 70%, #0A0E1F 100%); border:1px solid rgba(255,255,255,0.1); box-shadow:0 30px 60px -30px rgba(0,0,0,0.6); color:#fff; } .contact-visual::after{ content:"";position:absolute;inset:0; background:radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,0.07), transparent 70%); pointer-events:none; } .contact-visual-mark{ font-family:Georgia,'Times New Roman',serif;font-size:140px;line-height:0.7;font-weight:700; color:rgba(255,255,255,0.22);user-select:none;pointer-events:none; position:relative;z-index:1;letter-spacing:-0.05em; } .contact-visual-body{position:relative;z-index:2} .contact-visual-quote{ font-family:'Sintony',sans-serif;font-weight:700; font-size:clamp(22px,2.2vw,28px); line-height:1.3;letter-spacing:-0.01em;color:#fff; margin:0 0 28px;max-width:26ch; } .contact-visual-loc{ display:flex;align-items:flex-start;gap:10px; margin-top:28px;padding-top:22px; border-top:1px solid rgba(255,255,255,0.16); font-size:13px;color:rgba(255,255,255,0.85);line-height:1.55; } .contact-visual-loc svg{ width:18px;height:18px;flex-shrink:0; color:#9CC2FF;margin-top:1px; } .contact-visual-loc strong{color:#fff;font-weight:600} .contact-visual-info{display:flex;flex-direction:column;gap:18px} .contact-visual-info-row{display:flex;align-items:center;gap:14px} .contact-visual-info-row .ic{ width:38px;height:38px;border-radius:50%; display:grid;place-items:center;flex-shrink:0; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.2); color:#fff; } .contact-visual-info-row .ic svg{width:16px;height:16px} .contact-visual-info-label{ font-family:'Geist Mono',monospace;font-size:10.5px; letter-spacing:0.1em;text-transform:uppercase; color:rgba(255,255,255,0.62);display:block;line-height:1;margin-bottom:4px; } .contact-visual-info-val{color:#fff;font-size:15px;line-height:1.3} /* Le bloc Contact englobe les DEUX colonnes (visual + form). La couche glass se trouve en dessous des deux et dépasse légèrement pour faire un cadre visible tout autour. Visual et form s'empilent au-dessus en z-index:1. */ .contact-block{ position:relative; } .contact-form-glass{ position:absolute; inset:-14px; border-radius:28px; background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.04) 60%,rgba(255,255,255,0.08) 100%); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); border:1px solid rgba(255,255,255,0.16); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.18) inset, 0 -1px 0 rgba(0,0,0,0.25) inset; z-index:0; pointer-events:none; } /* La grid des 2 colonnes passe au-dessus de la couche glass */ .contact-block .contact-wrap{ position:relative; z-index:1; } form.contact-form{ padding:36px 32px; border-radius:20px; background:rgba(14,17,23,0.94); border:1px solid rgba(255,255,255,0.08); box-shadow:0 14px 44px -20px rgba(0,0,0,0.55); backdrop-filter:none;-webkit-backdrop-filter:none; } .contact-form-head{margin-bottom:28px} .contact-form-head h2{ font-family:'Sintony',sans-serif;font-weight:700; font-size:32px;letter-spacing:-0.015em;color:var(--text);margin:0 0 12px;line-height:1.15; } .contact-form-head p{font-size:15px;color:var(--text-dim);margin:0;line-height:1.6;max-width:42ch} .field{margin-bottom:20px} .field label{ display:block;font-family:'Geist',sans-serif;font-size:14px; letter-spacing:0;text-transform:none;color:var(--text); font-weight:500;margin-bottom:10px; } .field input,.field textarea,.field select{ width:100%;padding:14px 16px;border-radius:12px; background:transparent;border:1px solid rgba(255,255,255,0.14); color:var(--text);font-family:inherit;font-size:15px; backdrop-filter:none;-webkit-backdrop-filter:none; transition:border-color .2s, box-shadow .2s; } .field input::placeholder,.field textarea::placeholder{color:var(--muted)} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:rgba(255,255,255,0.45); box-shadow:0 0 0 3px rgba(255,255,255,0.06);background:transparent; } .field textarea{min-height:140px;resize:vertical} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .btn-submit-pill{ width:100%;justify-content:center; padding:18px 24px;border-radius:999px; background:#fff;color:#0B0D12;font-weight:500;font-size:15px; border:1px solid #fff; display:inline-flex;align-items:center;gap:8px; transition:transform .2s, background .2s, box-shadow .2s; box-shadow:0 8px 30px -10px rgba(255,255,255,0.25); font-family:inherit;letter-spacing:-0.005em;cursor:pointer; margin-top:8px; } .btn-submit-pill:hover{background:#EDEEF2;transform:translateY(-1px)} .btn-submit-pill svg{width:14px;height:14px} .btn-submit-pill svg path{stroke:#0B0D12} /* ============ SERVICES — HOVER SLIDESHOW (port vanilla 21st.dev) ============ Layout 2 colonnes : à gauche, une liste d'expertises où chaque libellé anime ses caractères en stagger au survol ; à droite, une grille où toutes les images sont superposées et seule l'active est révélée via un clip-path qui descend "en rideau". Le composant React Motion de 21st.dev est porté en vanilla : split du texte en chars + délai progressif via custom-property `--d`, et toggle de classe `.active` côté JS sur mouseenter. */ .hslider{ position:relative;overflow:hidden; border-top:1px solid var(--border);border-bottom:1px solid var(--border); background:#0A0C12; /* Opacité du visuel de fond — un seul point de réglage pour tout doser */ --hslider-img-opacity:0.55; /* Section plein écran, contenu centré verticalement. `min-height` (et non `height`) pour que la section s'étire au lieu de rogner si le contenu dépasse sur un écran court. */ min-height:100vh; display:flex;align-items:center; } .hslider-inner{ position:relative;z-index:2; width:100%;max-width:1360px;margin:0 auto; /* Padding vertical adaptatif : la section vise 100vh, donc sur un écran court on resserre pour éviter de déborder au-delà d'un plein écran. */ padding:clamp(56px,7vh,110px) 32px; } .hslider-head{ display:flex;align-items:flex-end;justify-content:space-between; gap:32px;flex-wrap:wrap;margin-bottom:64px; } .hslider-head .eyebrow{margin-bottom:14px} .hslider-head h2{ font-family:'Sintony',sans-serif;font-weight:700; font-size:clamp(28px,3.4vw,48px); line-height:1.05;letter-spacing:-0.02em;color:var(--text); max-width:18ch;margin:0; } .hslider-sub{ font-size:15px;color:var(--text-dim);max-width:32ch;line-height:1.6;margin:0; } /* La liste occupe désormais toute la largeur (le visuel est passé en fond) */ .hslider-grid{ display:block; } /* ---- Liste des libellés (pleine largeur) ---- */ .hslider-list{ list-style:none;margin:0;padding:0; display:flex;flex-direction:column; } .hslider-list{position:relative} .hslider-item{ position:relative; display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:24px; padding:24px 0; color:inherit;text-decoration:none;cursor:pointer; } /* Séparateurs : demi-largeur, ancrés à gauche. En pseudo-élément absolu (et non en `border-top`) pour pouvoir contrôler la longueur. Hors flux, donc sans impact sur les colonnes de la grille. */ .hslider-item::before{ content:""; position:absolute;top:0;left:0; width:50%;height:1px; background:rgba(255,255,255,0.14); } /* Trait de fermeture sous le dernier item — porté par la liste, sinon il entrerait en conflit avec le ::after qui dessine la flèche. */ .hslider-list::after{ content:""; position:absolute;bottom:0;left:0; width:50%;height:1px; background:rgba(255,255,255,0.14); } /* Flèche générée en CSS (pas de markup en plus) — apparaît sur l'item actif et occupe l'espace libéré à droite maintenant que la liste est full-width. */ .hslider-item::after{ content:""; width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") no-repeat center / 18px 18px; opacity:0;transform:translateX(-12px); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), background-color .3s, border-color .3s; } .hslider-item.active::after{ opacity:1;transform:translateX(0); border-color:rgba(255,255,255,0.42); background-color:rgba(255,255,255,0.12); } .hslider-item .num{ font-family:'Geist Mono',monospace;font-size:13px;color:var(--muted); transition:color .3s; } .hslider-item.active .num{color:var(--text)} /* ---- Stagger text (port de TextStaggerHover) ---- */ .hslider-text{ position:relative; display:flex;flex-wrap:wrap;column-gap:0.32em;row-gap:0.05em; font-family:'Sintony',sans-serif;font-weight:700; font-size:clamp(28px,3.4vw,52px); line-height:1.05;letter-spacing:-0.02em;color:#fff; user-select:none; } .hslider-text .word{ display:inline-flex;white-space:nowrap; } .hslider-text .char{ position:relative;display:inline-block;overflow:hidden;line-height:1; } .hslider-text .t{ display:inline-block; transition:transform .3s cubic-bezier(0.25,0.46,0.45,0.94); transition-delay:var(--d, 0s); will-change:transform; } .hslider-text .t.a{ opacity:0.20; transform:translateY(0%); } .hslider-text .t.b{ position:absolute;left:0;top:0; opacity:1;color:#fff; transform:translateY(110%); } .hslider-item.active .hslider-text .t.a{ transform:translateY(-110%); } .hslider-item.active .hslider-text .t.b{ transform:translateY(0%); } /* ---- Fond de section : les visuels services en plein cadre ---- Toutes les images sont empilées en absolu derrière le contenu ; seule la `.active` est visible, à opacité réduite (le "filtre") pour que la liste reste lisible. Crossfade + léger dézoom au changement de service. */ .hslider-bg{ position:absolute;inset:0;z-index:0; overflow:hidden;pointer-events:none; } .hslider-img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block; /* Les visuels ont des luminosités très inégales (dashboards clairs vs photos sombres). On les assombrit à la source pour que le contraste du texte reste constant quel que soit le service survolé. */ filter:brightness(0.68) saturate(1.05); opacity:0;transform:scale(1.08); transition:opacity 1s var(--ease-out), transform 1.8s var(--ease-out); will-change:opacity,transform; } .hslider-img.active{ opacity:var(--hslider-img-opacity,0.32); transform:scale(1); } /* Voile dégradé par-dessus les visuels → contraste du texte garanti quelle que soit l'image affichée (claire ou sombre), et fondu propre avec les sections voisines en haut / bas. */ /* ATTENTION : deux dégradés superposés de la même couleur se COMPOSENT (0.94 sur 0.30 → 0.958, pas 0.94). Le fondu vertical est donc rendu totalement transparent au centre, pour que seul le dégradé horizontal pilote l'assombrissement dans la zone de lecture. */ .hslider-overlay{ position:absolute;inset:0;z-index:1;pointer-events:none; background: /* Raccord avec les sections voisines — actif uniquement sur les bords */ linear-gradient(180deg, rgba(10,12,18,0.85) 0%, rgba(10,12,18,0) 15%, rgba(10,12,18,0) 85%, rgba(10,12,18,0.85) 100%), /* Assombrissement principal : dense à gauche (texte), léger à droite pour laisser le visuel respirer */ linear-gradient(90deg, rgba(10,12,18,0.72) 0%, rgba(10,12,18,0.48) 48%, rgba(10,12,18,0.16) 100%); } @media (max-width:900px){ .hslider-inner{padding:80px 20px} .hslider-head{flex-direction:column;align-items:flex-start;margin-bottom:40px} .hslider-item{grid-template-columns:38px 1fr auto;gap:16px;padding:18px 0} .hslider-item::after{width:38px;height:38px;background-size:15px 15px} .hslider-text{font-size:clamp(24px,7vw,38px)} } /* ============ RÉALISATIONS — CARTES EMPILÉES (glassmorphisme) ============ Chaque réalisation est une carte `position:sticky`. Comme leur `top` augmente de 14px à chaque index, elles se figent en cascade : la nouvelle vient se poser sur la précédente en laissant dépasser son bord. D'où l'effet de pile, obtenu sans JavaScript ni librairie d'animation. Le `--i` est posé en style inline et recalculé au filtrage, pour que la cascade reste continue même quand des cartes sont masquées. */ /* ---- Barre de filtres (reste accessible pendant le défilement) ---- */ .rcar-filters-section{ position:sticky; top:78px; z-index:30; padding:12px 0; pointer-events:none; /* conteneur transparent aux clics ; les boutons les reprennent */ } .rcar-filters{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; pointer-events:auto; } .rcar-filter{ font-family:'Geist Mono',monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; padding:10px 18px; border-radius:999px; background:rgba(14,17,23,0.78); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); border:1px solid var(--border); color:var(--text-dim); cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .25s; } .rcar-filter:hover{ background:rgba(255,255,255,0.08); color:var(--text); transform:translateY(-1px); } .rcar-filter.active{ background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%); border-color:var(--accent); color:#fff; box-shadow:0 6px 20px -8px var(--accent-glow); } .rp-section{ position:relative; padding:0 0 40px; } .rp-list{ max-width:min(1660px, 95vw); margin:0 auto; padding:0 24px; display:flex; flex-direction:column; gap:56px; } .rp-card{ --i:0; /* Teinte du verre, reprise de la couleur dominante du projet. Trois variables séparées : un lavis noir rendrait le liseré et le halo invisibles s'ils partageaient la même couleur. Valeurs par défaut neutres — les cartes photo restent en verre incolore. */ --teinte:255,255,255; /* lavis coloré du fond */ --force:0.10; /* intensité du lavis (dosage par carte) */ --lisere:255,255,255; /* couleur du contour */ --lueur:59,130,246; /* halo extérieur */ position:sticky; /* Se figent SOUS la barre de filtres (sticky à 90px, ~74px de haut), sinon elles défileraient derrière elle. */ top:calc(146px + var(--i) * 13px); /* Un cran de défilement = une carte. Le point d'ancrage est décalé de la hauteur d'accroche : sans ce `scroll-margin-top`, la page s'arrêterait sur le haut réel de la carte, donc trop bas — elle se serait retrouvée masquée derrière la barre de filtres. Les deux valeurs doivent rester identiques, sinon l'accrochage se décale. */ scroll-snap-align:start; scroll-snap-stop:always; scroll-margin-top:calc(146px + var(--i) * 13px); /* Hauteur proche du plein écran : une carte = un écran. Le plafond évite qu'elle devienne démesurée sur un très grand moniteur, et la soustraction garantit que le bas de la carte (donc le bouton) reste visible malgré le décalage d'accroche. */ min-height:min(calc(100vh - 226px), 880px); align-content:center; display:grid; grid-template-columns:1.15fr 1fr; gap:56px; padding:36px; border-radius:28px; /* Glassmorphisme : lavis teinté par-dessus un verre neutre, le tout posé sur un flou d'arrière-plan. */ background: linear-gradient(150deg, rgba(var(--teinte), var(--force)) 0%, rgba(var(--teinte), calc(var(--force) * 0.35)) 55%, rgba(var(--teinte), calc(var(--force) * 0.7)) 100%), linear-gradient(150deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.05) 100%); backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%); border:1px solid rgba(var(--lisere),0.22); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -1px 0 rgba(0,0,0,0.22) inset, 0 34px 80px -28px rgba(0,0,0,0.78), 0 0 52px -16px rgba(var(--lueur),0.42); transition:border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); } /* ---- Teintes par projet (dosage volontairement discret) ---- */ .rp-card[data-teinte="bleu-ciel"]{ --teinte:135,206,250; --force:0.26; --lisere:150,205,240; --lueur:120,190,245; } .rp-card[data-teinte="beige"] { --teinte:224,198,158; --force:0.25; --lisere:222,200,165; --lueur:214,186,140; } .rp-card[data-teinte="rouge"] { --teinte:214,72,60; --force:0.28; --lisere:222,110,95; --lueur:214,80,66; } /* Le noir ne « teinte » pas sur fond sombre : il assombrit. On pousse donc le lavis et on garde un liseré/halo clairs pour conserver la lisibilité. */ .rp-card[data-teinte="noir"] { --teinte:4,5,9; --force:0.72; --lisere:190,198,214; --lueur:150,165,190; } .rp-card:hover{ border-color:rgba(var(--lisere),0.4); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.22) inset, 0 36px 80px -28px rgba(0,0,0,0.8), 0 0 66px -16px rgba(var(--lueur),0.5); } .rp-card[hidden]{ display:none; } /* ---- Colonne gauche : visuel principal + miniatures ---- */ .rp-media{ display:flex; flex-direction:column; gap:12px; min-width:0; } .rp-frame{ position:relative; overflow:hidden; border-radius:18px; aspect-ratio:16/10; background:#0b0e15; border:1px solid rgba(255,255,255,0.09); cursor:zoom-in; } .rp-card[data-category="photo"] .rp-frame{ aspect-ratio:4/3; } .rp-shot{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out), opacity .35s ease; } .rp-frame:hover .rp-shot{ transform:scale(1.03); } .rp-zoom{ position:absolute; right:12px; bottom:12px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(10,13,20,0.72); border:1px solid rgba(255,255,255,0.2); color:#fff; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; pointer-events:none; } .rp-frame:hover .rp-zoom{ opacity:1; transform:translateY(0); } .rp-zoom svg{ width:15px; height:15px; } .rp-thumbs{ display:flex; gap:10px; } .rp-thumb{ flex:1 1 0; min-width:0; /* Hauteur plafonnée plutôt qu'un ratio : sur une carte large, un ratio 16/10 rendait les miniatures si hautes que le bas de la carte (donc le bouton) sortait de l'écran. */ height:clamp(76px, 9vh, 116px); padding:0; overflow:hidden; border-radius:10px; cursor:pointer; border:1px solid rgba(255,255,255,0.12); background:none; opacity:0.5; transition:opacity .3s, border-color .3s, transform .3s; } .rp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .rp-thumb:hover{ opacity:0.85; transform:translateY(-2px); } .rp-thumb.active{ opacity:1; border-color:rgba(150,190,255,0.75); } /* ---- Colonne droite : description ---- */ .rp-info{ display:flex; flex-direction:column; justify-content:center; gap:18px; padding:8px 6px; } .rp-eyebrow{ font-family:'Geist Mono',monospace; font-size:14px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--accent); } .rp-title{ font-family:'Sintony',sans-serif; font-weight:700; font-size:clamp(28px,3vw,46px); line-height:1.06; letter-spacing:-0.022em; color:#fff; margin:0; } .rp-desc{ font-size:17.5px; line-height:1.72; color:rgba(255,255,255,0.78); margin:0; } .rp-tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:2px 0 0; padding:0; } .rp-tags li{ font-family:'Geist Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.72); } .rp-cta{ align-self:flex-start; margin-top:6px; display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; font-family:'Geist Mono',monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:#fff; text-decoration:none; background:rgba(14,17,23,0.6); border:1px solid rgba(110,168,250,0.45); transition:transform .25s var(--ease-out), background .25s, border-color .25s, box-shadow .25s; } .rp-cta:hover{ transform:translateY(-2px); background:rgba(22,30,48,0.85); border-color:rgba(150,190,255,0.85); box-shadow:0 0 28px -6px rgba(59,130,246,0.55); } .rp-cta svg{ width:13px; height:13px; flex-shrink:0; } .rp-cta--disabled{ opacity:0.45; cursor:not-allowed; pointer-events:none; border-color:rgba(255,255,255,0.14); } @media (max-width:900px){ .rp-list{ padding:0 20px; gap:26px; } .rp-card{ grid-template-columns:1fr; gap:24px; padding:22px; top:calc(132px + var(--i) * 10px); scroll-margin-top:calc(132px + var(--i) * 10px); min-height:auto; /* hauteur dictée par le contenu */ border-radius:20px; } .rp-title{ font-size:clamp(21px,5.5vw,28px); } .rp-desc{ font-size:14.5px; } } @media (max-width:640px){ .rp-list{ padding:0 16px; } .rp-card{ padding:16px; top:calc(124px + var(--i) * 8px); scroll-margin-top:calc(124px + var(--i) * 8px); } .rp-thumbs{ gap:7px; } .rp-tags li{ font-size:10px; padding:5px 9px; } } /* ============ LIGHTBOX RÉALISATIONS ============ Au clic sur une card (ou son titre), un overlay plein écran s'ouvre avec l'image en grand. Navigation prev/next + ESC pour fermer. */ .rcar-card{cursor:pointer} .rcar-lightbox{ position:fixed;inset:0;z-index:1000; background:rgba(5,7,12,0.95); backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%); display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none; transition:opacity .35s var(--ease-out); } .rcar-lightbox[aria-hidden="false"]{opacity:1;pointer-events:auto} .rcar-lightbox-img{ max-width:92vw;max-height:88vh; object-fit:contain; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,0.65); transform:scale(0.96); transition:transform .4s var(--ease-out); } .rcar-lightbox[aria-hidden="false"] .rcar-lightbox-img{transform:scale(1)} .rcar-lightbox-btn{ position:absolute; background:rgba(255,255,255,0.06); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); border:1px solid rgba(255,255,255,0.18); color:#fff;cursor:pointer; width:48px;height:48px;border-radius:50%; display:grid;place-items:center; transition:background .2s, border-color .2s, transform .2s; } .rcar-lightbox-btn:hover{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.36); } .rcar-lightbox-btn svg{width:20px;height:20px} .rcar-lightbox-close{top:24px;right:24px} .rcar-lightbox-prev{left:24px;top:50%;transform:translateY(-50%)} .rcar-lightbox-next{right:24px;top:50%;transform:translateY(-50%)} .rcar-lightbox-prev:hover{transform:translateY(-50%) scale(1.05)} .rcar-lightbox-next:hover{transform:translateY(-50%) scale(1.05)} .rcar-lightbox-counter{ position:absolute;bottom:28px;left:50%;transform:translateX(-50%); font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:0.18em; color:rgba(255,255,255,0.6);text-transform:uppercase; pointer-events:none; } .rcar-lightbox-caption{ position:absolute;top:24px;left:24px; font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.18em; color:rgba(255,255,255,0.55);text-transform:uppercase; pointer-events:none;max-width:60%; } @media (max-width:780px){ /* Sites web mobile : paysage compact */ .rcar-filters-section{top:70px} .rcar-lightbox-btn{width:40px;height:40px} .rcar-lightbox-close{top:16px;right:16px} .rcar-lightbox-prev{left:12px} .rcar-lightbox-next{right:12px} } /* ============ FOOTER ============ */ footer{border-top:1px solid var(--border);padding:90px 0 0;margin-top:120px;position:relative;z-index:1;overflow:hidden} .footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:56px;margin-bottom:80px;align-items:start} .footer-brand .logo{margin-bottom:18px} .footer-copyright{font-size:14px;color:var(--muted);line-height:1.55;max-width:32ch} .footer-tag{font-size:14px;color:var(--text-dim);margin-top:14px;max-width:32ch;line-height:1.6} .footer-tag strong{color:var(--text);font-weight:500} .footer-location{ font-family:'Geist Mono',monospace;font-size:11.5px; letter-spacing:0.04em;color:var(--muted); margin-top:14px;text-transform:uppercase; } .footer-col h5{font-family:'Sintony',sans-serif;font-size:17px;font-weight:700;color:var(--text);letter-spacing:-0.005em;text-transform:none;margin-bottom:24px} .footer-col a{display:block;color:var(--text-dim);font-size:16px;padding:7px 0;transition:color .2s;cursor:pointer} .footer-col a:hover{color:var(--text)} .footer-watermark{font-family:'Sintony',sans-serif;font-weight:700;font-size:clamp(96px,22vw,360px);line-height:0.78;letter-spacing:-0.06em;color:rgba(255,255,255,0.045);text-align:center;white-space:nowrap;user-select:none;pointer-events:none;margin:0 -20px -0.18em;overflow:hidden} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:1px solid var(--border);font-size:13px;color:var(--muted);font-family:'Geist Mono',monospace;position:relative;z-index:2} .footer-bottom .sig{display:flex;align-items:center;gap:8px} .footer-bottom .sig .dot{width:6px;height:6px;border-radius:50%;background:#6EE7B7;box-shadow:0 0 8px #6EE7B7} /* ============ REVEAL ANIMATIONS ============ Système d'apparition au scroll : un IntersectionObserver ajoute la classe `.in` quand l'élément entre dans le viewport. Le `.reveal` est invisible au départ, puis se révèle via opacity + transform + (optionnel) filter. Variantes possibles : `.from-left`, `.from-right`, `.scale-in`, `.blur-in`, `.fade-only` — combinables (ex: `.reveal.from-left.scale-in`). Le stagger se contrôle via `data-delay="1..8"` (0.08s par cran). */ .reveal{ opacity:0; transform:translateY(28px); transition: opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1), filter .9s cubic-bezier(0.16,1,0.3,1); will-change:opacity, transform; } .reveal.in{opacity:1;transform:none;filter:none} /* Variantes de direction / effet (à combiner avec .reveal) */ .reveal.from-left{transform:translateX(-36px)} .reveal.from-right{transform:translateX(36px)} .reveal.scale-in{transform:scale(0.92)} .reveal.blur-in{filter:blur(10px)} .reveal.fade-only{transform:none} /* Combinaisons utiles */ .reveal.from-left.scale-in{transform:translateX(-36px) scale(0.94)} .reveal.from-right.scale-in{transform:translateX(36px) scale(0.94)} .reveal.from-left.blur-in{transform:translateX(-36px);filter:blur(10px)} /* Stagger — chaque cran = +0.08s */ .reveal[data-delay="1"]{transition-delay:.08s} .reveal[data-delay="2"]{transition-delay:.16s} .reveal[data-delay="3"]{transition-delay:.24s} .reveal[data-delay="4"]{transition-delay:.32s} .reveal[data-delay="5"]{transition-delay:.40s} .reveal[data-delay="6"]{transition-delay:.48s} .reveal[data-delay="7"]{transition-delay:.56s} .reveal[data-delay="8"]{transition-delay:.64s} /* Respect des préférences accessibilité — pas d'animations si demandé */ @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:opacity .3s ease; } } /* ============ MOBILE NAV ============ */ .mobile-nav{ position:fixed;top:0;left:0;right:0;bottom:0;z-index:99; background:rgba(7,8,11,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); padding:100px 32px 40px; transform:translateY(-100%);transition:transform .4s var(--ease); overflow-y:auto; } .mobile-nav.open{transform:translateY(0)} .mobile-nav a{display:block;padding:16px 0;font-size:20px;font-weight:500;border-bottom:1px solid var(--border);color:var(--text)} .mobile-nav .group{font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;margin-top:32px;margin-bottom:4px} /* ============ HERO PARALLAX (creation page) ============ */ .hero-parallax{ position:relative; height:300vh; } .hero-parallax-pin{ position:sticky;top:0; height:100vh; overflow:hidden; perspective:1000px; transform-style:preserve-3d; } .hero-parallax-header{ position:absolute;top:0;left:0;right:0;z-index:3; padding:160px 0 0; pointer-events:none; } .hero-parallax-header .container{pointer-events:auto;position:relative} .hero-parallax-header .sub-hero-breadcrumb{ font-family:'Geist Mono',monospace;font-size:12px;color:var(--muted); letter-spacing:0.05em;margin-bottom:24px;display:flex;align-items:center;gap:8px; } .hero-parallax-header .sub-hero-breadcrumb span{color:var(--text-dim)} .hero-parallax-header .sub-hero-breadcrumb .sep{color:var(--muted);opacity:.5} .hero-parallax-header h1{font-size:clamp(36px,5vw,64px);font-weight:600;letter-spacing:-0.03em;line-height:1.05;max-width:18ch;text-wrap:balance} .hero-parallax-header p.intro{font-size:18px;color:var(--text-dim);max-width:62ch;margin-top:24px;line-height:1.6} .hero-parallax-header .hero-actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap} .hero-parallax-stage{ position:absolute;top:0;left:0;right:0; display:flex;flex-direction:column;gap:40px; padding-top:80px; will-change:transform,opacity; transform-origin:center top; transform:rotateX(15deg) rotateZ(20deg) translateY(-700px); opacity:0.2; } .hero-parallax-row{ display:flex;gap:20px; flex-direction:row; flex-wrap:nowrap; width:max-content; will-change:transform; } .hero-parallax-row.reverse{ margin-left:auto; flex-direction:row-reverse; } .hero-parallax-card{ flex:0 0 auto; width:30rem;height:18rem; border-radius:14px; overflow:hidden; position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease); background:var(--surface); border:1px solid var(--border); box-shadow:0 20px 40px -20px rgba(0,0,0,0.5); } .hero-parallax-card:hover{transform:translateY(-12px);box-shadow:0 30px 60px -25px rgba(59,130,246,0.35)} .parallax-mock{ width:100%;height:100%;display:flex;flex-direction:column; background:var(--bg-2); } .parallax-mock-chrome{ display:flex;align-items:center;gap:6px; padding:10px 14px; background:rgba(10,13,20,0.7); border-bottom:1px solid rgba(255,255,255,0.05); flex-shrink:0; } .parallax-mock-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.14)} .parallax-mock-url{ flex:1;margin-left:10px; height:14px;border-radius:4px; background:rgba(255,255,255,0.05); } .parallax-mock-body{flex:1;position:relative;overflow:hidden;padding:28px 28px 24px} .parallax-mock-body::before{ content:"";position:absolute;inset:0; background:radial-gradient(ellipse at 10% 120%, rgba(59,130,246,0.35) 0%, transparent 55%), radial-gradient(ellipse at 90% 10%, rgba(96,165,250,0.22) 0%, transparent 55%); pointer-events:none; } .parallax-mock-body > *{position:relative;z-index:1} .parallax-mock-title{ display:block;width:65%;height:18px;border-radius:4px; background:rgba(255,255,255,0.9); margin-bottom:10px; } .parallax-mock-sub{ display:block;width:45%;height:11px;border-radius:3px; background:rgba(255,255,255,0.4); margin-bottom:24px; } .parallax-mock-hero{ width:100%;height:55%;border-radius:8px; background:linear-gradient(135deg,#3B82F6 0%,#1D4ED8 50%,#0c1424 100%); box-shadow:0 10px 24px -10px rgba(59,130,246,0.5); position:relative; overflow:hidden; } .parallax-mock-hero::before{ content:"";position:absolute;top:20%;left:20%;right:40%;height:10px;border-radius:3px;background:rgba(255,255,255,0.85); } .parallax-mock-hero::after{ content:"";position:absolute;top:40%;left:20%;right:55%;height:7px;border-radius:2px;background:rgba(255,255,255,0.45); } .parallax-mock-grid{ position:absolute;bottom:24px;left:28px;right:28px; display:flex;gap:10px; } .parallax-mock-grid span{ flex:1;height:32px;border-radius:6px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); } /* Card variants */ .parallax-mock.v1 .parallax-mock-hero{background:linear-gradient(135deg,#3B82F6 0%,#1D4ED8 100%)} .parallax-mock.v2 .parallax-mock-hero{background:radial-gradient(ellipse at 30% 50%, #60A5FA 0%, #1E40AF 60%, #0a0f1a 100%)} .parallax-mock.v3 .parallax-mock-hero{background:linear-gradient(160deg,#0ea5e9 0%,#1d4ed8 60%,#0c1424 100%)} .parallax-mock.v4 .parallax-mock-hero{background:linear-gradient(45deg,#1E40AF 0%,#3B82F6 50%,#60A5FA 100%)} .parallax-mock.v5 .parallax-mock-hero{background:radial-gradient(circle at 80% 20%, #60A5FA 0%, #1E40AF 55%, #0a0f1a 100%)} .parallax-mock.v6 .parallax-mock-hero{background:linear-gradient(135deg,#0c1424 0%,#1D4ED8 50%,#60A5FA 100%)} .parallax-mock.dense .parallax-mock-hero{height:40%} .parallax-mock.dense .parallax-mock-grid{display:flex} .parallax-mock.minimal .parallax-mock-hero{height:70%} .parallax-mock.minimal .parallax-mock-grid{display:none} /* ============ HERO GALLERY (graphisme page — 3D photo gallery) ============ */ .hero-gallery{ position:relative; width:100%; height:100vh; min-height:640px; overflow:hidden; border-bottom:1px solid var(--border); background:#05070c; } .hero-gallery canvas{ position:absolute;inset:0; width:100%!important;height:100%!important; display:block; z-index:1; } .hero-gallery::before{ content:"";position:absolute;inset:0; z-index:2; background: linear-gradient(90deg,rgba(7,8,11,0.82) 0%,rgba(7,8,11,0.55) 38%,rgba(7,8,11,0.15) 70%,rgba(7,8,11,0.35) 100%), linear-gradient(180deg,rgba(7,8,11,0.5) 0%,rgba(7,8,11,0) 20%,rgba(7,8,11,0) 70%,rgba(7,8,11,0.6) 100%); pointer-events:none; } .hero-gallery-overlay{ position:absolute;inset:0; z-index:3; display:flex; align-items:center; pointer-events:none; padding-top:60px; } .hero-gallery-overlay .container{ width:100%; pointer-events:auto; } .hero-gallery-overlay .sub-hero-breadcrumb{ font-family:'Geist Mono',monospace;font-size:12px;color:rgba(255,255,255,0.72); letter-spacing:0.05em;margin-bottom:24px;display:flex;align-items:center;gap:8px; } .hero-gallery-overlay .sub-hero-breadcrumb span{color:rgba(255,255,255,0.92)} .hero-gallery-overlay .sub-hero-breadcrumb .sep{opacity:.5} .hero-gallery-overlay h1{ font-size:clamp(38px,5.4vw,72px); font-weight:600;letter-spacing:-0.03em;line-height:1.02; max-width:18ch;text-wrap:balance; color:#fff; text-shadow:0 2px 40px rgba(0,0,0,0.45); } .hero-gallery-overlay h1 .soft{color:rgba(255,255,255,0.55);font-style:italic;font-weight:500} .hero-gallery-overlay p.intro{ font-size:18px;color:rgba(255,255,255,0.85); max-width:58ch;margin-top:24px;line-height:1.6; text-shadow:0 2px 20px rgba(0,0,0,0.5); } .hero-gallery-overlay .hero-actions{ margin-top:32px;display:flex;gap:12px;flex-wrap:wrap; } .hero-gallery-hint{ position:absolute;bottom:28px;left:0;right:0; z-index:4; text-align:center; font-family:'Geist Mono',monospace;font-size:10.5px; letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.6); pointer-events:none; } .hero-gallery-hint p{margin:0} .hero-gallery-hint p + p{opacity:0.45;margin-top:6px} /* ============ LAMP (home promise — ported from Aceternity Lamp) ============ */ /* The lamp now reacts to scroll position continuously: a single CSS variable `--lp` (lamp-progress, 0..1) drives every lit-state value. JS updates it on every scroll based on the section's distance from the viewport center, so the lamp grows when entering AND retracts when leaving — symmetric in both directions. No CSS transitions on the animated values: scroll itself is the smoothing (transitions would lag/fight the per-frame updates). */ .lamp-section{ position:relative; width:100%; /* Section plein écran. `min-height` (et non `height`) pour que la section s'étire au lieu de rogner sur un écran court. */ min-height:100vh; overflow:hidden; background:#05070c; display:flex;flex-direction:column;align-items:center;justify-content:center; isolation:isolate; z-index:0; --lp:0; } .lamp-scene{ position:relative; width:100%; /* `flex:0 0 auto` (et non `1 1 auto`) : la scène garde sa hauteur propre au lieu d'absorber tout l'espace disponible. Sans ça, sur un grand écran la scène s'étirerait, le halo descendrait de moitié moins vite que le texte (décalé de -15rem) et la composition lampe/texte se délierait. Ici le groupe scène+texte reste soudé et se centre en bloc. */ flex:0 0 auto; display:flex;align-items:center;justify-content:center; transform:scaleY(1.25); isolation:isolate; z-index:0; min-height:560px; } /* Left conic gradient — cyan cone fanning right-down from the bar's left end. Width 15rem → 30rem and opacity 0.5 → 1 driven by --lp (0 → 1). */ .lamp-cone-left{ position:absolute;inset:auto; right:50%; height:14rem; width:calc(15rem + 15rem * var(--lp)); background-image:conic-gradient(from 70deg at center top, #3B82F6 0%, rgba(59,130,246,0) 30%, rgba(59,130,246,0) 100%); overflow:visible; opacity:calc(0.5 + 0.5 * var(--lp)); } .lamp-cone-left::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:10rem; background:#05070c; -webkit-mask-image:linear-gradient(to top,#fff,transparent); mask-image:linear-gradient(to top,#fff,transparent); z-index:20; } .lamp-cone-left::before{ content:"";position:absolute;left:0;bottom:0;width:10rem;height:100%; background:#05070c; -webkit-mask-image:linear-gradient(to right,#fff,transparent); mask-image:linear-gradient(to right,#fff,transparent); z-index:20; } /* Right conic gradient — mirror of left, same --lp curve. */ .lamp-cone-right{ position:absolute;inset:auto; left:50%; height:14rem; width:calc(15rem + 15rem * var(--lp)); background-image:conic-gradient(from 290deg at center top, rgba(59,130,246,0) 0%, rgba(59,130,246,0) 70%, #3B82F6 100%); overflow:visible; opacity:calc(0.5 + 0.5 * var(--lp)); } .lamp-cone-right::after{ content:"";position:absolute;right:0;bottom:0;width:100%;height:10rem; background:#05070c; -webkit-mask-image:linear-gradient(to top,#fff,transparent); mask-image:linear-gradient(to top,#fff,transparent); z-index:20; } .lamp-cone-right::before{ content:"";position:absolute;right:0;bottom:0;width:10rem;height:100%; background:#05070c; -webkit-mask-image:linear-gradient(to left,#fff,transparent); mask-image:linear-gradient(to left,#fff,transparent); z-index:20; } /* Bottom blocker — prevents light from bleeding down past the lamp */ .lamp-bottom-blocker{ position:absolute;top:50%;height:12rem;width:100%; transform:translateY(3rem) scaleX(1.5); background:#05070c; filter:blur(32px); z-index:10; } /* Glass refraction layer (subtle) */ .lamp-glass{ position:absolute;top:50%;height:12rem;width:100%; background:transparent;opacity:0.1; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:50;pointer-events:none; } /* Main diffuse bulb glow */ .lamp-bulb{ position:absolute;inset:auto; height:9rem;width:28rem; transform:translateY(-50%); border-radius:9999px; background:#3B82F6; opacity:0.5; filter:blur(48px); z-index:50; } /* Animated inner halo — width 8rem → 16rem driven by --lp. */ .lamp-halo{ position:absolute;inset:auto; height:9rem;width:calc(8rem + 8rem * var(--lp)); transform:translateY(-6rem); border-radius:9999px; background:#60A5FA; filter:blur(32px); z-index:30; } /* Thin horizontal light-bar — width 15rem → 30rem driven by --lp. */ .lamp-bar{ position:absolute;inset:auto; height:2px;width:calc(15rem + 15rem * var(--lp)); transform:translateY(-7rem); background:#60A5FA; z-index:50; box-shadow:0 0 24px #60A5FA, 0 0 60px rgba(96,165,250,0.4); } /* Top ceiling — hides the top half of the cones so they look like rays */ .lamp-ceiling{ position:absolute;inset:auto; height:11rem;width:100%; transform:translateY(-12.5rem); background:#05070c; z-index:40; } /* Content sits above the lamp visuals. Opacity 0 → 1 and translateY -15rem → -18rem driven by --lp. */ .lamp-content{ position:relative; z-index:50; display:flex;flex-direction:column;align-items:center; padding:0 24px; text-align:center; max-width:880px; /* Le bloc est remonté de 15rem par `transform`, mais un transform ne libère pas la place dans le flux : 15rem de vide fantôme restaient en bas de section. La marge négative compense, sinon la section dépassait d'un plein écran sans raison visible. */ margin:0 auto -15rem; transform:translateY(calc(-15rem - 3rem * var(--lp))); opacity:var(--lp); } .lamp-content .eyebrow{ font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.2em; text-transform:uppercase;color:var(--muted);margin-bottom:24px; } .lamp-content h2{ font-size:clamp(40px,5.4vw,76px); font-weight:500; letter-spacing:-0.03em; line-height:1.02; background:linear-gradient(180deg,#E8EEF8 0%,#8892A8 100%); -webkit-background-clip:text;background-clip:text; color:transparent; -webkit-text-fill-color:transparent; text-wrap:balance; margin:0; } .lamp-content h2 .soft{ /* Solid accent blue — gradient bg-clip on text was rendering each text line with its own top-to-bottom gradient, so multi-line wraps showed a darker bottom that read as "not entirely blue". */ background:none; color:var(--accent); -webkit-text-fill-color:var(--accent); } .lamp-content p.lead{ margin-top:28px; font-size:17px; color:var(--text-dim); line-height:1.65; max-width:62ch; } /* ============ REALISATIONS GALLERY (ported from shadcn GalleryGridBlock) ============ React sources used framer-motion + Tailwind. Here: • Filter pills with an animated "active" underline (CSS transitions) • 3-col grid (2-col sm, 1-col mobile) of aspect-square cards • Hover overlay with zoom icon + title + category badge • Lightbox modal with prev / next / close + keyboard (Esc / ← / →) The fade+scale layout animation on filter change is done by toggling a .filtering class: items scale to 0.92 + opacity 0 for ~200ms, then back. */ .gallery-filters{ display:flex;flex-wrap:wrap;justify-content:center; gap:10px; margin-bottom:48px; } .gallery-filter-btn{ position:relative; display:inline-flex;align-items:center;gap:8px; padding:10px 18px; border-radius:999px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); color:var(--text-dim); font-family:'Geist Mono',monospace; font-size:12px;letter-spacing:0.02em; cursor:pointer; transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } .gallery-filter-btn:hover{ color:var(--text); border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); } .gallery-filter-btn.active{ color:#fff; background:linear-gradient(180deg,rgba(59,130,246,0.22),rgba(29,78,216,0.18)); border-color:rgba(96,165,250,0.45); box-shadow:0 0 0 1px rgba(96,165,250,0.15) inset, 0 8px 30px -12px rgba(59,130,246,0.5); } .gallery-filter-btn .ic{width:14px;height:14px;flex:0 0 auto} .gallery-filter-btn .count{ display:inline-grid;place-items:center; min-width:20px;height:20px;padding:0 6px; border-radius:999px; background:rgba(255,255,255,0.06); font-size:10px;color:var(--muted); } .gallery-filter-btn.active .count{ background:rgba(96,165,250,0.22);color:#DBEAFE; } .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .gallery-item{ position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#0E1117; border:1px solid rgba(255,255,255,0.06); cursor:zoom-in; transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s ease, border-color .3s ease, box-shadow .3s ease; will-change:transform,opacity; } .gallery-item:hover{ transform:translateY(-4px); border-color:rgba(96,165,250,0.25); box-shadow:0 20px 60px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(96,165,250,0.1) inset; } .gallery-item img{ width:100%;height:100%; object-fit:cover;display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; } .gallery-item:hover img{transform:scale(1.06); filter:brightness(0.7)} .gallery-grid.filtering .gallery-item{opacity:0;transform:scale(0.94)} /* ============ PHOTO CAROUSEL (used when category === "photo") ============ Scroll-driven: the wrapper is tall (N-1 steps + 1 viewport) and the carousel sticks at the top of the viewport while scroll progress is mapped onto centerIdx. Cards stay mounted; only data-pos changes. Center (pos 0) is straight; sides are progressively tilted out. The center card's color tints a soft glowing background. */ .photo-scroll-wrapper{ position:relative; grid-column:1 / -1; --photo-step:80vh; /* height = (N-1) * step + 100vh, set inline at render time */ } .photo-sticky{ position:sticky;top:0; height:100vh; display:flex;align-items:center;justify-content:center; width:100%; } .photo-carousel{ position:relative; display:flex;align-items:center;justify-content:center; width:100%;height:100%; perspective:1400px; isolation:isolate; overflow:visible; } .photo-carousel-bg{ position:absolute;left:50%;top:50%; width:140%;height:140%; transform:translate(-50%,-50%); background:#0E1117; transition:background 0.9s cubic-bezier(.4,0,.2,1); filter:blur(110px) saturate(1.15); opacity:0.55; z-index:-1;border-radius:50%; pointer-events:none; } .photo-carousel-track{ position:relative; width:100%;height:100%; display:flex;align-items:center;justify-content:center; } .photo-card{ position:absolute;left:50%;top:50%; width:300px;aspect-ratio:3/4; margin:-200px 0 0 -150px; /* center on the track */ border-radius:18px; overflow:hidden; background:#0E1117; box-shadow:0 30px 80px -20px rgba(0,0,0,0.55); cursor:pointer; transform-origin:center center; transition:transform 0.7s cubic-bezier(.4,0,.2,1), opacity 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease; will-change:transform,opacity; border:1px solid rgba(255,255,255,0.08); } .photo-card img{ width:100%;height:100%;object-fit:cover;display:block; pointer-events:none; } /* Off-screen / hidden cards (anything not in -2..2) */ .photo-card{opacity:0;pointer-events:none;transform:translateX(0) rotate(0) scale(0.6)} .photo-card[data-pos="-2"]{transform:translateX(-460px) rotate(-12deg) scale(0.78);opacity:0.78;pointer-events:auto;z-index:1;filter:brightness(0.85)} .photo-card[data-pos="-1"]{transform:translateX(-250px) rotate(-7deg) scale(0.9); opacity:0.95;pointer-events:auto;z-index:2;filter:brightness(0.95)} .photo-card[data-pos="0"] {transform:translateX(0) rotate(0deg) scale(1); opacity:1; pointer-events:auto;z-index:5;filter:none; box-shadow:0 50px 120px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08) inset; } .photo-card[data-pos="1"] {transform:translateX(250px) rotate(7deg) scale(0.9); opacity:0.95;pointer-events:auto;z-index:2;filter:brightness(0.95)} .photo-card[data-pos="2"] {transform:translateX(460px) rotate(12deg) scale(0.78);opacity:0.78;pointer-events:auto;z-index:1;filter:brightness(0.85)} .photo-carousel-nav{ position:absolute;top:50%;transform:translateY(-50%); width:48px;height:48px;border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); color:#fff;display:grid;place-items:center; cursor:pointer;z-index:10; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:background .25s, border-color .25s, transform .25s; } .photo-carousel-nav:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.35)} .photo-carousel-nav.prev{left:24px} .photo-carousel-nav.next{right:24px} .photo-carousel-nav svg{width:20px;height:20px} .photo-carousel-caption{ position:absolute;bottom:24px;left:50%;transform:translateX(-50%); text-align:center;z-index:10; font-family:'Geist',sans-serif;color:#fff; pointer-events:none; } .photo-carousel-caption .title{ font-family:'Sintony',sans-serif;font-weight:700;font-size:18px; letter-spacing:-0.01em;margin-bottom:6px; text-shadow:0 2px 12px rgba(0,0,0,0.5); } .photo-carousel-caption .index{ font-family:'Geist Mono',monospace;font-size:11px; color:rgba(255,255,255,0.7);letter-spacing:0.1em; } @media (max-width:900px){ .photo-carousel{min-height:480px;perspective:900px} .photo-card{width:220px;margin:-147px 0 0 -110px} .photo-card[data-pos="-2"]{transform:translateX(-300px) rotate(-12deg) scale(0.7)} .photo-card[data-pos="-1"]{transform:translateX(-160px) rotate(-7deg) scale(0.85)} .photo-card[data-pos="1"] {transform:translateX(160px) rotate(7deg) scale(0.85)} .photo-card[data-pos="2"] {transform:translateX(300px) rotate(12deg) scale(0.7)} .photo-carousel-nav{width:40px;height:40px} .photo-carousel-nav.prev{left:8px} .photo-carousel-nav.next{right:8px} } @media (max-width:600px){ .photo-card{width:180px;margin:-120px 0 0 -90px} .photo-card[data-pos="-2"]{transform:translateX(-200px) rotate(-12deg) scale(0.65);opacity:0.55} .photo-card[data-pos="-1"]{transform:translateX(-110px) rotate(-7deg) scale(0.85)} .photo-card[data-pos="1"] {transform:translateX(110px) rotate(7deg) scale(0.85)} .photo-card[data-pos="2"] {transform:translateX(200px) rotate(12deg) scale(0.65);opacity:0.55} } .gallery-overlay{ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:space-between; padding:20px; background:linear-gradient(180deg,rgba(5,7,12,0) 0%,rgba(5,7,12,0) 40%,rgba(5,7,12,0.85) 100%); opacity:0; transition:opacity .3s ease; pointer-events:none; } .gallery-item:hover .gallery-overlay{opacity:1} .gallery-overlay-top{display:flex;justify-content:flex-end} .gallery-zoom-chip{ display:inline-grid;place-items:center; width:38px;height:38px; border-radius:999px; background:rgba(255,255,255,0.1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.2); color:#fff; transform:translateY(-8px); transition:transform .3s ease; } .gallery-item:hover .gallery-zoom-chip{transform:translateY(0)} .gallery-zoom-chip svg{width:16px;height:16px} .gallery-overlay-bottom{transform:translateY(8px);transition:transform .35s ease} .gallery-item:hover .gallery-overlay-bottom{transform:translateY(0)} .gallery-overlay-title{ font-family:'Instrument Serif',serif; font-size:22px;line-height:1.15; color:#fff; margin:0 0 10px; } .gallery-overlay-badge{ display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(96,165,250,0.18); border:1px solid rgba(96,165,250,0.35); color:#DBEAFE; font-family:'Geist Mono',monospace; font-size:10px;letter-spacing:0.04em;text-transform:uppercase; } .gallery-empty{ grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--muted); font-family:'Geist Mono',monospace; font-size:13px; } /* ----- Lightbox ----- */ .gallery-lightbox{ position:fixed;inset:0; z-index:300; background:rgba(2,3,6,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:none; align-items:center;justify-content:center; padding:40px 20px; opacity:0; transition:opacity .3s ease; } .gallery-lightbox.open{display:flex;opacity:1} .gallery-lightbox-inner{ position:relative; width:100%;max-width:1100px; max-height:88vh; display:flex;flex-direction:column;align-items:center;gap:20px; } .gallery-lightbox-frame{ position:relative; width:100%; aspect-ratio:16/10; max-height:72vh; border-radius:14px;overflow:hidden; background:#0E1117; border:1px solid rgba(255,255,255,0.08); box-shadow:0 40px 120px -20px rgba(0,0,0,0.8); } .gallery-lightbox-frame img{ width:100%;height:100%;object-fit:cover;display:block; transition:opacity .25s ease; } .gallery-lightbox-frame.swapping img{opacity:0} .gallery-lightbox-caption{ text-align:center; } .gallery-lightbox-caption h3{ font-family:'Instrument Serif',serif; font-size:28px;line-height:1.15; color:#fff; margin:0 0 10px; } .gallery-lightbox-caption span{ display:inline-block; padding:4px 12px;border-radius:999px; background:rgba(96,165,250,0.18); border:1px solid rgba(96,165,250,0.35); color:#DBEAFE; font-family:'Geist Mono',monospace; font-size:11px;letter-spacing:0.04em;text-transform:uppercase; } .gallery-lightbox-btn{ position:absolute; top:50%;transform:translateY(-50%); width:48px;height:48px; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:#fff; display:grid;place-items:center; cursor:pointer; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .2s ease, transform .2s ease, border-color .2s ease; z-index:2; } .gallery-lightbox-btn:hover{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.32); } .gallery-lightbox-btn svg{width:20px;height:20px} .gallery-lightbox-btn.prev{left:-8px} .gallery-lightbox-btn.next{right:-8px} .gallery-lightbox-close{ position:absolute; top:-48px;right:0; width:40px;height:40px; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:#fff; display:grid;place-items:center; cursor:pointer; transition:background .2s ease, transform .2s ease; } .gallery-lightbox-close:hover{background:rgba(255,255,255,0.16);transform:rotate(90deg)} .gallery-lightbox-close svg{width:18px;height:18px} .gallery-lightbox-counter{ position:absolute; top:-42px;left:0; font-family:'Geist Mono',monospace; font-size:12px; color:var(--muted); letter-spacing:0.06em; } /* ============ CLASSES UTILITAIRES ============ Remplacent les `style="..."` inline répétés (audit SEO : éviter les styles en ligne). À utiliser dans le markup au lieu d'attributs style. */ .muted{color:var(--muted)} .text-center{text-align:center} .page-title{ /* Hook sémantique : sub-page title (h2 visuellement h1) */ } .aside-note{ color:var(--muted); font-size:14.5px; margin-top:20px; line-height:1.6; } .cta-center{ margin:20px auto 0; text-align:center; } .form-status{ text-align:center; margin-top:14px; font-size:13px; color:var(--muted); font-family:'Geist Mono',monospace; } .lead-center{ margin:20px auto 0; text-align:center; } .cta-actions{ display:flex;gap:12px;justify-content:center; margin-top:36px;flex-wrap:wrap; } /* ============ TYPOGRAPHIE UNIFIÉE ============ Toutes les pages, sous-titres et paragraphes du site partagent les MÊMES définitions ici. La police, le poids, la taille et l'espacement sont centralisés ; les règles per-section ne contrôlent plus que la couleur, l'alignement, la max-width et les marges. Ce bloc est placé en fin de CSS (avant les media queries) → il override par source-order toutes les règles précédentes de même spécificité. */ /* H1 — titre principal de page (home hero, sub-hero, hero-parallax) */ .h1, .sub-hero h1, .hero-parallax-header h1, .hero-gallery-overlay h1{ font-family:'Sintony',sans-serif; font-weight:700; font-size:clamp(38px,5.4vw,72px); letter-spacing:-0.025em; line-height:1.05; } /* H2 — titre de section, identique partout (sauf .lamp-content h2 — la "Promesse" garde son style gradient spécifique + l'italique de son span .soft "pour votre acquisition digitale.") */ .h2, .tl-header h2, .helix-header h2, .hslider-head h2, .contact-form-head h2, .bh-head h2, .bh-head .h2{ font-family:'Sintony',sans-serif; font-weight:700; font-size:clamp(30px,3.8vw,50px); letter-spacing:-0.02em; line-height:1.1; } /* Bleu accent sur "orientée résultats mesurables." dans la section "Pourquoi travailler avec moi" (override le gris .soft hérité). */ .bh-head .h2 .soft, .bh-head h2 .soft{ color:var(--accent); } /* Sous-titres / paragraphes d'intro — taille uniforme partout */ .hero-sub, .lead, p.intro, .sub-hero p.intro, .hero-parallax-header p.intro, .hero-gallery-overlay p.intro, .tl-header p, .helix-header p, .hslider-sub, .contact-form-head p{ font-family:'Geist',sans-serif; font-weight:400; font-size:clamp(16px,1.3vw,18px); line-height:1.6; color:var(--text-dim); } /* ============ RESPONSIVE ============ */ @media (max-width: 1100px){ .hero-visual-inner{grid-template-columns:1fr;gap:32px} .services-grid{grid-template-columns:repeat(2,1fr)} .content-grid{grid-template-columns:1fr;gap:40px} .content-aside{position:static} .contact-wrap{grid-template-columns:1fr;gap:24px} .contact-visual{min-height:auto;padding:40px 28px} .contact-form-glass{inset:-8px;border-radius:22px} form.contact-form{padding:28px 22px} .footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:60px} .footer-brand{grid-column:1/-1} .footer-tag{max-width:48ch} .footer-watermark{font-size:clamp(72px,24vw,260px)} .included-grid{grid-template-columns:repeat(2,1fr)} .hero-parallax{height:260vh} .hero-parallax-card{width:24rem;height:15rem} .hero-parallax-stage{gap:28px} .gallery-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width: 720px){ .container{padding:0 20px} nav.primary,.header-cta .btn-ghost{display:none} .menu-toggle{display:flex} .hero{padding:130px 0 60px} .section{padding:80px 0} .services-grid,.benefits-grid,.works-grid{grid-template-columns:1fr} .field-row{grid-template-columns:1fr} .hero-visual-inner{padding:24px} .cta-band{padding:48px 28px} .included-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:32px;margin-bottom:48px} .footer-brand{grid-column:1/-1} .footer-watermark{font-size:clamp(64px,26vw,200px);letter-spacing:-0.05em} .footer-bottom{flex-direction:column;gap:12px;text-align:center} .hero-parallax{height:240vh} .hero-parallax-header{padding:130px 0 0} .hero-parallax-card{width:18rem;height:12rem} /* margin-top:0 sur mobile → l'animation démarre SOUS le titre, pas par-dessus. padding-top:60px laisse respirer l'aperçu des cards. */ .hero-parallax-stage{gap:18px;padding-top:60px;margin-top:0} .parallax-mock-body{padding:20px} .gallery-grid{grid-template-columns:1fr;gap:16px} .gallery-filters{gap:8px;margin-bottom:32px} .gallery-filter-btn{padding:8px 14px;font-size:11px} .gallery-lightbox-btn.prev{left:4px} .gallery-lightbox-btn.next{right:4px} .gallery-lightbox-frame{aspect-ratio:4/5} } /* ============================================================ RESPONSIVE OPTIMIZATION — Pass complète Bloc final qui consolide les comportements mobile/tablet : 1. Fixes iOS (viewport 100vh → 100dvh, safe-area, no-zoom inputs) 2. Header mobile (CTA visible, tap-targets ≥ 44px) 3. Helix 3D adapté (perspective ↓, cards ↓, sticky title centré) 4. Services slider en colonne sur mobile (image au-dessus) 5. Réalisations carousel 3D : taille adaptée + filtres scrollables 6. Lightbox plein écran avec marges sûres 7. Contact form : padding ↓, glass plus discret 8. Footer : layout simplifié, watermark contenue 9. Tap-targets, line-height, espacement cohérents 10. prefers-reduced-motion : désactive animations lourdes ============================================================ */ /* ---------- iOS / dynamic viewport fixes ---------- */ /* 100vh sur Safari iOS inclut la barre d'URL → on bascule en `svh` SUR DESKTOP/TABLET seulement. Sur téléphone (≤760px), bh-sticky et hslider reviennent en height:auto pour permettre l'empilement vertical. */ @supports (height: 100svh) { @media (min-width: 761px){ .helix-sticky, } .rcar-lightbox{ height:100svh; } /* Sections plein écran — `svh` évite le saut dû à la barre d'URL mobile ; `min-height` conserve l'étirement si le contenu déborde. */ .hslider, .lamp-section{ min-height:100svh; } } /* Inputs/selects ≥ 16px → empêche le zoom auto Safari iOS au focus */ @media (max-width: 720px){ .field input, .field textarea, .field select{ font-size:16px; } } /* ---------- Tablet large : 1100px → 901px ---------- */ @media (max-width: 1100px) and (min-width: 901px){ .container{padding:0 32px} .h1{font-size:clamp(38px,5.6vw,64px)} .hero-sub{font-size:17px} } /* ---------- Tablet : ≤ 900px ---------- */ @media (max-width: 900px){ /* Header : on rend le CTA principal légèrement plus compact */ .header-cta .btn{font-size:14px;padding:10px 16px} .header{padding:12px 0} /* Hero home : padding plus court, CTA en colonne */ .hero{padding:120px 0 40px} .hero-actions{flex-direction:column;align-items:flex-start;gap:12px} .hero-actions .btn{width:100%;justify-content:center} /* H1 / H2 / paragraphes : échelle ajustée */ .h1{font-size:clamp(34px,7.5vw,56px);max-width:none} .h2{max-width:none} .lead, p.intro, .hero-sub{font-size:16px} /* Helix : centrage du titre + cards plus petites (déjà géré dans .helix-card mais on s'assure que le titre garde une marge propre) */ .helix-header{padding:0 20px} .helix-header h2{font-size:clamp(28px,7vw,44px)} .helix-header p{font-size:14.5px;margin-top:14px} /* Réalisations : filtres dans une bande horizontale scrollable */ .rcar-filters{ flex-wrap:nowrap;overflow-x:auto; padding:6px 16px;justify-content:flex-start; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .rcar-filters::-webkit-scrollbar{display:none} .rcar-filter{flex-shrink:0} /* Lamp section (Promesse) : titre plus contenu */ .lamp-content h2{font-size:clamp(34px,7vw,52px)} /* Sub-hero (sous-pages) : padding tassé */ .sub-hero{padding:120px 0 40px} } /* ---------- Mobile : ≤ 640px ---------- */ @media (max-width: 640px){ .container{padding:0 18px} /* Header : logo réduit, mais lisible */ .logo{font-size:18px} .logo-text small{display:none} /* on cache le mono à côté du logo */ .logo-mark{width:28px;height:28px} .header-cta .btn{font-size:13px;padding:9px 14px} .header-cta .btn svg{display:none} /* pour économiser l'espace */ /* Sections : padding vertical tassé */ .section{padding:64px 0} .section-sm{padding:48px 0} /* Boutons taille uniforme (tap target ≥ 44px) */ .btn{min-height:44px;padding:12px 18px} .btn-primary{padding:12px 20px} .btn-lg{padding:14px 22px;font-size:15px;min-height:48px} /* Sub-hero — h1 plus contrôlé */ .sub-hero h1{font-size:clamp(30px,8.5vw,42px);max-width:none} .sub-hero{padding:110px 0 36px} /* Hero principale */ .hero{padding:120px 0 48px} .hero-eyebrow{font-size:11.5px;margin-bottom:24px} /* Promesse (lamp) : on réduit pour ne pas déborder */ .lamp-section{padding:60px 0 40px} .lamp-content h2{font-size:clamp(28px,8vw,40px)} .lamp-content p.lead{font-size:15.5px} /* Helix : on désactive le tilt souris-driven pour les écrans tactiles (déjà fait via @media hover:none, mais on s'assure que le titre reste lisible et que les cards restent visibles) */ .helix-header h2{font-size:clamp(26px,8vw,36px)} .helix-header p{display:none} /* sous-titre caché sur très petit écran pour libérer l'espace */ /* Carousel Réalisations : cells encore plus compactes + radius réduit (read par JS via --rcar-radius → cells ne sortent plus du cadre). */ /* Lightbox : plein écran réel + boutons gros */ .rcar-lightbox-img{max-width:96vw;max-height:78vh} .rcar-lightbox-btn{width:44px;height:44px} .rcar-lightbox-close{top:12px;right:12px} .rcar-lightbox-prev{left:8px} .rcar-lightbox-next{right:8px} .rcar-lightbox-counter{bottom:14px;font-size:11px} .rcar-lightbox-caption{top:12px;left:12px;font-size:10.5px;max-width:55%} /* Contact : form encore plus compact */ .contact-form-glass{inset:-6px;border-radius:18px} form.contact-form{padding:24px 18px} .contact-form-head h2{font-size:24px} .contact-form-head p{font-size:14px} .contact-visual{padding:32px 22px} .contact-visual-quote{font-size:18px} .contact-visual-mark{font-size:90px} /* Footer : grille simple en colonne */ .footer-grid{grid-template-columns:1fr;gap:32px} .footer-col{text-align:left} .footer-watermark{font-size:clamp(72px,32vw,180px);margin-top:24px} /* hslider services : visuel en fond → on renforce le voile et on retire la flèche pour laisser toute la largeur au libellé. */ .hslider{--hslider-img-opacity:0.40} .hslider-text{font-size:clamp(22px,7vw,32px)} .hslider-item{padding:14px 0;grid-template-columns:32px 1fr;gap:14px} .hslider-item::after{display:none} .hslider-head{margin-bottom:28px} .hslider-overlay{ background:linear-gradient(180deg, rgba(10,12,18,0.88) 0%, rgba(10,12,18,0.55) 26%, rgba(10,12,18,0.55) 74%, rgba(10,12,18,0.90) 100%); } /* bh-cards : on accepte le scroll vertical natif */ .bh-card{width:100%;height:auto;padding:28px 22px} .bh-card-body h3{font-size:22px} .bh-card-body p{font-size:15px} /* Réduction des effets gourmands pour préserver les FPS sur mobile */ .bh-card{box-shadow:0 0 0 1px rgba(255,255,255,0.06);animation:none} .bh-card::before{display:none} /* couronne neon désactivée sur mobile */ /* Réalisations : h1 réduit */ .rcar-filters-section{top:78px} } /* ---------- Très petit mobile : ≤ 380px ---------- */ @media (max-width: 380px){ .container{padding:0 14px} .h1{font-size:clamp(28px,9vw,40px)} .sub-hero h1{font-size:clamp(26px,9vw,36px)} .hero-eyebrow{flex-wrap:wrap;gap:8px} .helix-header h2{font-size:24px} .rcar-filter{font-size:10.5px;padding:8px 12px} .footer-watermark{font-size:clamp(60px,32vw,140px)} } /* ---------- Landscape mobile (téléphone tenu horizontal, faible hauteur) ---------- */ @media (max-height: 520px) and (orientation: landscape){ .hero{padding:90px 0 40px;min-height:auto} .hero-actions{flex-direction:row;gap:12px} .helix-sticky,.bh-sticky,.rcar-scene{height:auto;min-height:520px} .helix-header h2{font-size:28px} } /* ---------- Safe-area pour iPhone notched ---------- */ @supports (padding:max(0px)){ .header{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))} footer{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right));padding-bottom:max(0px,env(safe-area-inset-bottom))} .container{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))} .rcar-lightbox-close{top:max(12px,env(safe-area-inset-top))} } /* ---------- prefers-reduced-motion : performance + accessibilité ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.2s !important; scroll-behavior:auto !important; } .helix-card,.bh-card,.rcar-card{transform:none !important} } /* ---------- Hi-DPI (Retina) : pas d'effets vraiment, mais qualité images ---------- */ @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){ .helix-card-bg,.hslider-img,.rcar-card-face{image-rendering:-webkit-optimize-contrast} }