/* ════════════════════════════════════════════════════════ KommIA — Editorial Luxury Design System ════════════════════════════════════════════════════════ */ /* ────── Uncut Sans (self-hosted) ────── On utilise la variable woff2 pour couvrir les poids 200→800 roman en 1 seul fichier (~76 KB), puis 4 fichiers italic statiques. Self-hosting = pas de dépendance CDN externe (Termly ne bloque rien) + meilleure perf (pas de DNS + TLS handshake fontshare au 1er render). */ @font-face { font-family: 'Uncut Sans'; src: url('/fonts/uncut-sans/UncutSans-Variable.woff2') format('woff2-variations'), url('/fonts/uncut-sans/UncutSans-Variable.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Uncut Sans'; src: url('/fonts/uncut-sans/UncutSans-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Uncut Sans'; src: url('/fonts/uncut-sans/UncutSans-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Uncut Sans'; src: url('/fonts/uncut-sans/UncutSans-SemiboldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Uncut Sans'; src: url('/fonts/uncut-sans/UncutSans-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } :root { --paper: #FFFFFF; --paper-deep: #F7F7F7; --paper-deeper: #EFEFF3; --espresso: #0E0E14; --espresso-soft: #1B1B25; --terracotta: #876AFF; /* violet — primaire */ --clay-light: #B8A5FF; /* violet-soft */ --sage: #5AD3FF; /* bleu clair — accent 20% */ --gold: #4C67DF; /* bleu profond — liserets premium */ --blue-mid: #168EFF; /* bleu mid — liens / info */ --ink-60: #4F4F5C; --ink-40: #8B8B95; --hairline: rgba(14, 14, 20, 0.08); --hairline-strong: rgba(14, 14, 20, 0.12); --ease-apple: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-editorial: cubic-bezier(0.65, 0, 0.35, 1); } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; /* Bloque le scroll horizontal sur mobile (iOS Safari / Android Chrome) */ /* overflow-x: hidden sur seul ne suffit pas, il faut aussi sur */ overflow-x: hidden; overflow-x: clip; /* override moderne, plus strict (Safari 16+, Chrome 90+) */ /* Tue le rubber band (l'effet "elastic" qui fait scroller puis revenir sur iOS) */ overscroll-behavior-x: none; /* Force le viewport à coller exactement à la largeur de l'écran */ width: 100%; max-width: 100vw; /* Bloque explicitement le pan tactile horizontal (le clip CSS seul ne suffit pas sur iOS Safari quand un enfant déborde — on autorise pan-y + pinch-zoom uniquement) */ touch-action: pan-y pinch-zoom; } body { letter-spacing: -0.012em; /* Renforcement au cas où la classe Tailwind ne serait pas appliquée */ overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; width: 100%; max-width: 100vw; position: relative; touch-action: pan-y pinch-zoom; } ::selection { background: var(--terracotta); color: #FFFFFF; } /* ────── Grain texture overlay (subtil) ────── */ .grain-overlay { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.022; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* ────── Dot grid background overlay (fixed) ────── */ .dot-grid-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(14, 14, 20, 0.06) 1px, transparent 0); background-size: 28px 28px; mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%); } /* ────── Ambient glow blobs (boostés, multiples) ────── */ .ambient-glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(150px); opacity: 0.85; z-index: 0; } .ambient-glow--top { top: -260px; right: -150px; width: 800px; height: 800px; background: radial-gradient(circle, rgba(135, 106, 255, 0.55), transparent 70%); } .ambient-glow--mid-left { top: 40%; left: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(90, 211, 255, 0.4), transparent 70%); filter: blur(160px); opacity: 0.7; } .ambient-glow--bottom { top: 75%; right: -100px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(76, 103, 223, 0.35), transparent 70%); filter: blur(160px); opacity: 0.6; } /* ────── Mobile : contraindre les ambient-glow pour ne pas créer d'overflow caché qui permet le rubber band tactile sur iOS Safari. On colle les glows aux bords du viewport (right: 0 / left: 0) — le blur étale la couleur, donc l'effet ambient reste visible sans débordement. ────── */ @media (max-width: 768px) { .ambient-glow--top { width: 320px; height: 320px; top: -140px; right: 0; } .ambient-glow--mid-left { width: 280px; height: 280px; left: 0; } .ambient-glow--bottom { width: 320px; height: 320px; right: 0; } } /* ────── Animated gradient text effect (clé pour le punch) ────── */ .gradient-text { background: linear-gradient(110deg, var(--terracotta) 20%, #A78BFF 40%, var(--blue-mid) 60%, var(--terracotta) 80%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 8s ease-in-out infinite; font-style: italic; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ────── Glow aura under primary CTA (animated pulse) ────── */ .btn-primary-wrap { position: relative; display: inline-flex; isolation: isolate; } .btn-primary-wrap::before { content: ""; position: absolute; inset: -8px; border-radius: 9999px; background: radial-gradient(ellipse at center, rgba(135, 106, 255, 0.55), transparent 65%); filter: blur(20px); z-index: -1; opacity: 0.85; animation: pulse-aura 3.5s ease-in-out infinite; } @keyframes pulse-aura { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } /* ────── Status bar tech (above hero eyebrow) ────── */ .status-bar { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 11px; border-radius: 9999px; background: rgba(14, 14, 20, 0.04); border: 1px solid rgba(14, 14, 20, 0.06); font-family: 'Uncut Sans', system-ui, sans-serif; font-feature-settings: "tnum"; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-40); margin-bottom: 14px; } .status-bar__dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; position: relative; } .status-bar__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: #34d399; opacity: 0.4; animation: livePulse 1.8s ease-in-out infinite; } .status-bar__sep { opacity: 0.4; } .status-bar__key { color: var(--ink-60); font-weight: 600; } .status-bar__val { color: var(--ink-60); } /* ────── Cursor blink (next to hero gradient text) ────── */ .cursor-blink { display: inline-block; color: var(--terracotta); font-style: normal; font-weight: 200; margin-left: 2px; vertical-align: baseline; animation: cursorBlink 1.05s steps(2) infinite; -webkit-text-fill-color: var(--terracotta); background: none; } @keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* ────── Terminal console (floating near hero phone) ────── */ .terminal-console { position: absolute; z-index: 9; width: 270px; background: rgba(14, 14, 20, 0.96); border-radius: 14px; padding: 0; font-family: 'Uncut Sans', system-ui, sans-serif; font-feature-settings: "tnum"; box-shadow: 0 24px 60px -20px rgba(14, 14, 20, 0.4), 0 0 0 1px rgba(135, 106, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); overflow: hidden; bottom: 32px; left: -90px; transform: rotate(-2deg); animation: stickerFloat 7s ease-in-out infinite; --rot: -2deg; } .terminal-console__header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .terminal-console__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .terminal-console__dot--red { background: #ff5f57; } .terminal-console__dot--yellow { background: #febc2e; } .terminal-console__dot--green { background: #28c840; } .terminal-console__title { margin-left: 6px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.4); font-weight: 500; } .terminal-console__body { padding: 12px 14px 14px; font-size: 11.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); } .terminal-console__line { display: block; white-space: nowrap; overflow: hidden; } .terminal-console__prompt { color: var(--clay-light); margin-right: 6px; font-weight: 600; } .terminal-console__check { color: #34d399; margin-left: 4px; } .terminal-console__hl { color: var(--clay-light); font-weight: 500; } .terminal-console__cursor { display: inline-block; width: 7px; height: 11px; background: var(--clay-light); vertical-align: -1px; margin-left: 4px; animation: cursorBlink 1.05s steps(2) infinite; } @media (max-width: 1024px) { .terminal-console { display: none; } } /* ────── Mini chart (Analytics pillar card) ────── */ .mini-chart { display: flex; align-items: flex-end; gap: 6px; padding: 14px 12px 10px; background: rgba(255, 255, 255, 0.7); border-radius: 14px; border: 1px solid var(--hairline); margin-bottom: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } .mini-chart__bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; flex: 1; } .mini-chart__bar { flex: 1; background: linear-gradient(180deg, var(--blue-mid), var(--sage)); border-radius: 3px 3px 0 0; transform-origin: bottom; transform: scaleY(0); animation: barGrow 1.2s var(--ease-apple) forwards; animation-delay: var(--delay, 0ms); } @keyframes barGrow { to { transform: scaleY(1); } } .mini-chart__legend { display: flex; flex-direction: column; align-items: flex-start; margin-left: 4px; flex-shrink: 0; } .mini-chart__metric { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-40); font-weight: 500; } .mini-chart__delta { font-size: 18px; font-weight: 600; font-style: italic; color: var(--blue-mid); letter-spacing: -0.01em; margin-top: 1px; } /* ────── Hover gradient hairline (sweep effect) ────── */ .pillar-card__shell { position: relative; } .pillar-card__shell::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(135, 106, 255, 0.6), rgba(90, 211, 255, 0.6), transparent); opacity: 0; transition: opacity 600ms var(--ease-apple); pointer-events: none; z-index: 5; } .pillar-card:hover .pillar-card__shell::after { opacity: 1; } /* ────── Live indicator (point pulsant) ────── */ .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #34d399; position: relative; margin-right: 8px; vertical-align: middle; } .live-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: #34d399; opacity: 0.4; animation: livePulse 1.8s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0; transform: scale(2); } } /* ────── Numéro de section (01 / 02 / 03) ────── */ .section-num { font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.18em; color: var(--ink-40); font-feature-settings: "tnum"; margin-right: 4px; } .section-num__digit { color: var(--terracotta); font-weight: 600; } /* ────── Live activity strip ────── */ .live-strip { position: relative; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: linear-gradient(90deg, transparent, rgba(135, 106, 255, 0.04), transparent); overflow: hidden; padding: 14px 0; } .live-strip__track { display: flex; gap: 56px; width: max-content; animation: marquee 60s linear infinite; white-space: nowrap; } .live-strip__item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: -0.005em; color: var(--ink-60); } .live-strip__item strong { color: var(--espresso); font-weight: 600; font-variant-numeric: tabular-nums; } .live-strip__item .dot-violet { width: 5px; height: 5px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 3px rgba(135, 106, 255, 0.2); } /* ────── AI signal cards (stickers flottants hero) ────── */ .ai-sticker { position: absolute; z-index: 8; background: var(--paper); border: 1px solid var(--hairline); border-radius: 16px; padding: 12px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 20px 40px -15px rgba(135, 106, 255, 0.3), 0 4px 12px -4px rgba(14, 14, 20, 0.06); display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: -0.005em; } .ai-sticker__icon { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--terracotta), var(--clay-light)); display: flex; align-items: center; justify-content: center; color: var(--paper); flex-shrink: 0; } .ai-sticker__label { font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 500; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-40); } .ai-sticker__value { font-weight: 600; font-size: 13px; color: var(--espresso); margin-top: 1px; } .ai-sticker--top-left { top: 30px; left: -50px; transform: rotate(-3deg); animation: stickerFloat 6s ease-in-out infinite; /* Fond violet pâle — écho à l'icône violette + au debrief IA du screen */ background: #EFEAFF; border-color: rgba(135, 106, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 20px 40px -15px rgba(135, 106, 255, 0.36), 0 4px 12px -4px rgba(135, 106, 255, 0.14); } .ai-sticker--bottom-right { bottom: 80px; right: -60px; transform: rotate(2.5deg); animation: stickerFloat 7s ease-in-out infinite reverse; animation-delay: 1.2s; /* Fond bleu pâle — écho à l'icône bleu/sage gradient */ background: #E5F4FF; border-color: rgba(22, 142, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 20px 40px -15px rgba(22, 142, 255, 0.32), 0 4px 12px -4px rgba(22, 142, 255, 0.14); } @keyframes stickerFloat { 0%, 100% { transform: translateY(0) rotate(var(--rot, -3deg)); } 50% { transform: translateY(-8px) rotate(var(--rot, -3deg)); } } .ai-sticker--top-left { --rot: -3deg; } .ai-sticker--bottom-right { --rot: 2.5deg; } @media (max-width: 1024px) { .ai-sticker { display: none; } } /* ────── Scanning beam dans le téléphone (effet "live AI") ────── */ .scan-beam { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; } .scan-beam::before { content: ""; position: absolute; left: 0; right: 0; height: 80px; top: -80px; background: linear-gradient(180deg, transparent, rgba(135, 106, 255, 0.18), transparent); animation: scan 4s ease-in-out infinite; } @keyframes scan { 0% { top: -80px; } 60%, 100% { top: 100%; } } /* ────── Glow border on key dark sections ────── */ .glow-border { position: relative; } .glow-border::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(135, 106, 255, 0.5), transparent 40%, rgba(90, 211, 255, 0.4) 80%); z-index: -1; opacity: 0.6; } /* ════════════════════════════════════════════════════════ SECTION DIVIDERS & FLOATING PANELS (Neural Flow style) ════════════════════════════════════════════════════════ */ /* Divider 70% width entre sections — gradient hairline + dot central */ .section-divider { position: relative; display: flex; align-items: center; justify-content: center; width: 70%; max-width: 920px; margin: 0 auto; padding: 0; height: 1px; } .section-divider::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent); } .section-divider::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 4px rgba(135, 106, 255, 0.12); left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Variante avec numéro/label central — rythme compact */ .section-divider--labeled { height: auto; padding: 6px 0; margin-top: 2.5rem; /* 40px mobile */ margin-bottom: 1.25rem; /* 20px mobile */ } @media (min-width: 768px) { .section-divider--labeled { margin-top: 3.5rem; /* 56px desktop */ margin-bottom: 1.5rem; /* 24px desktop */ } } .section-divider--labeled::after { content: none; } .section-divider__label { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--paper); border-radius: 9999px; border: 1px solid var(--hairline); font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-40); z-index: 1; } .section-divider__label .num { color: var(--terracotta); font-weight: 600; } .section-divider__label .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 3px rgba(135, 106, 255, 0.15); } /* Floating panel — pleine largeur, coins arrondis 4 angles */ .floating-panel { position: relative; width: 100%; border-radius: 54px; overflow: hidden; isolation: isolate; } .floating-panel--grey { background: var(--paper-deep); border: none; box-shadow: none; } .floating-panel--grey::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(14, 14, 20, 0.05) 1px, transparent 0); background-size: 28px 28px; mask-image: radial-gradient(ellipse at 30% 0%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 30% 0%, black 0%, transparent 70%); pointer-events: none; } .floating-panel__inner { position: relative; z-index: 1; padding: 56px 40px; max-width: 1320px; margin: 0 auto; } @media (max-width: 768px) { .floating-panel { border-radius: 36px; } .floating-panel__inner { padding: 40px 20px; } } /* Padding bas pour les panels qui contiennent un carrousel ou élément full-bleed */ .floating-panel__pad-bottom { height: 56px; } @media (max-width: 768px) { .floating-panel__pad-bottom { height: 40px; } } /* ════════════════════════════════════════════════════════ SECTOR CAROUSEL — grosses cards photo défilantes ════════════════════════════════════════════════════════ */ .sector-carousel { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); } /* Pause de l'animation auto au survol souris desktop (UX confort de lecture) */ .sector-carousel:hover .sector-carousel__track { animation-play-state: paused; } .sector-carousel__track { display: flex; gap: 18px; width: max-content; animation: marquee 60s linear infinite; } .sector-card { flex-shrink: 0; width: 220px; margin: 0; } .sector-card__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--paper-deep); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 16px 32px -16px rgba(135, 106, 255, 0.25); } .sector-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease-apple); } .sector-card:hover .sector-card__photo img { transform: scale(1.05); } .sector-card__label { margin-top: 14px; padding-left: 4px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--espresso); } /* Cards gradient pour les secteurs sans photo (placeholder élégant) */ .sector-card--gradient .sector-card__photo { display: flex; align-items: center; justify-content: center; position: relative; } .sector-card--gradient .sector-card__photo::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--paper); font-weight: 500; text-align: center; padding: 16px; } .sector-card--archi .sector-card__photo { background: linear-gradient(135deg, #2A2940, #4C67DF); } .sector-card--fitness .sector-card__photo { background: linear-gradient(135deg, #876AFF, #5AD3FF); } .sector-card--retail .sector-card__photo { background: linear-gradient(135deg, #B8A5FF, #876AFF); } .sector-card--services .sector-card__photo { background: linear-gradient(135deg, #168EFF, #5AD3FF); } @media (max-width: 768px) { .sector-card { width: 160px; } .sector-card__photo { border-radius: 18px; } .sector-card__label { font-size: 13px; } } /* ════════════════════════════════════════════════════════ NAVIGATION ════════════════════════════════════════════════════════ */ .nav-island { transition: transform 600ms var(--ease-apple), background 400ms var(--ease-apple); } .nav-island.is-scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: 0 12px 36px -16px rgba(14, 14, 20, 0.12); } /* ════════════════════════════════════════════════════════ NAVIGATION — Modern top bar (Neural Flow style) ════════════════════════════════════════════════════════ */ .nav-top { position: fixed; top: 0; inset-inline: 0; z-index: 40; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); transition: background 400ms var(--ease-apple), box-shadow 400ms var(--ease-apple); } .nav-top.is-scrolled { background: rgba(255, 255, 255, 0.88); box-shadow: 0 12px 36px -20px rgba(14, 14, 20, 0.12); } .nav-top__inner { max-width: 1400px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } @media (max-width: 768px) { .nav-top__inner { padding: 12px 16px; gap: 8px; } } .nav-top__divider { height: 1px; background: linear-gradient(90deg, transparent 15%, var(--hairline-strong) 50%, transparent 85%); } /* Brand */ .nav-brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .nav-brand__logo { height: 28px; width: auto; display: block; } @media (max-width: 768px) { .nav-brand__logo { height: 24px; } } /* Brand cluster — logo glued with slash-separated links */ .nav-cluster { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .nav-slash { font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 700; font-size: 18px; color: var(--espresso); opacity: 1; user-select: none; line-height: 1; transform: translateY(-1px); } .nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 9999px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-60); text-decoration: none; transition: color 300ms var(--ease-apple), background 300ms var(--ease-apple); } .nav-link:hover { color: var(--espresso); background: rgba(14, 14, 20, 0.04); } /* Inline variant — pas de pill background, juste du texte qui change de couleur */ .nav-link--inline { padding: 4px 0; background: transparent !important; font-size: 14px; color: var(--ink-60); } .nav-link--inline:hover { background: transparent !important; color: var(--espresso); } @media (max-width: 768px) { .nav-link--inline, .nav-slash { display: none; } } /* Right cluster */ .nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Social icons (taille augmentée +50%) */ .nav-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 9999px; color: var(--espresso); text-decoration: none; transition: background 300ms var(--ease-apple), transform 300ms var(--ease-apple), color 300ms var(--ease-apple); } .nav-social svg { width: 24px; height: 24px; } .nav-social:hover { background: rgba(14, 14, 20, 0.05); transform: translateY(-1px); } .nav-social:active { transform: translateY(0); } @media (max-width: 480px) { .nav-social { display: none; } } /* Hamburger morph */ .hamburger { position: relative; } .hamburger__line { position: absolute; left: 50%; width: 16px; height: 1.5px; background: var(--espresso); border-radius: 1px; transform-origin: center; transition: transform 500ms var(--ease-apple); } .hamburger__line--top { transform: translate(-50%, -3px); } .hamburger__line--bottom { transform: translate(-50%, 3px); } .hamburger.is-open .hamburger__line--top { transform: translate(-50%, 0) rotate(45deg); } .hamburger.is-open .hamburger__line--bottom { transform: translate(-50%, 0) rotate(-45deg); } /* ────── Language switcher (FR / EN) dans la navbar ────── Pill avec 2 boutons drapeaux. État actif = pill blanche pleine. Pattern inspiré de Stripe / Notion. Compatible mobile (compact). */ .lang-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper-deep); border: 1px solid var(--hairline); font-family: 'Uncut Sans', system-ui, sans-serif; } .lang-switcher__btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-60); text-decoration: none; transition: background 0.2s var(--ease-apple), color 0.2s var(--ease-apple); cursor: pointer; border: 0; background: transparent; } .lang-switcher__btn:hover { color: var(--espresso); } .lang-switcher__btn--active { background: var(--paper); color: var(--espresso); box-shadow: 0 1px 2px rgba(14, 14, 20, 0.06), inset 0 0 0 1px rgba(14, 14, 20, 0.04); cursor: default; } .lang-switcher__btn--active:hover { color: var(--espresso); } .lang-switcher__flag { font-size: 13px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; } @media (max-width: 480px) { /* Sur très petits mobiles, on cache le label texte (FR/EN) pour ne garder que les drapeaux */ .lang-switcher__btn span:not(.lang-switcher__flag) { display: none; } .lang-switcher__btn { padding: 4px 7px; } } /* ────── Bannière auto-suggest "Available in English" ────── S'affiche en haut de la page si le navigateur est en EN ET si on est sur une page FR. Dismissible, mémorisée via localStorage. */ .lang-suggest-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; background: var(--espresso); color: var(--paper); font-family: 'Uncut Sans', system-ui, sans-serif; font-size: 13px; letter-spacing: -0.005em; transform: translateY(-100%); transition: transform 320ms var(--ease-apple); } .lang-suggest-banner.is-visible { transform: translateY(0); } .lang-suggest-banner__flag { font-size: 14px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; } .lang-suggest-banner__text { display: inline-flex; align-items: center; gap: 8px; } .lang-suggest-banner__cta { color: var(--clay-light); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; transition: color 0.2s var(--ease-apple); } .lang-suggest-banner__cta:hover { color: var(--paper); } .lang-suggest-banner__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: transparent; color: var(--paper); opacity: 0.5; cursor: pointer; font-size: 18px; line-height: 1; transition: opacity 0.2s var(--ease-apple); } .lang-suggest-banner__close:hover { opacity: 1; } /* Si la bannière est visible, décale la nav-top pour ne pas la chevaucher */ body.has-lang-suggest .nav-top { top: 40px; } body.has-lang-suggest { padding-top: 40px; } /* ────── Mobile menu — panneau dropdown sous la navbar ────── Ouvre un panneau compact arrondi juste sous la nav, avec liens stackés en sans-serif, alignés à gauche, flèche → à droite, CTA séparé en bas. Beaucoup plus léger qu'un overlay fullscreen + animations GPU-only. */ .mobile-menu { position: fixed; top: 60px; /* juste sous la navbar mobile (≈58 px de haut) */ left: 12px; right: 12px; z-index: 35; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--ease-apple), transform 220ms var(--ease-apple); will-change: opacity, transform; } .mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .mobile-menu__panel { background: var(--paper); border: 1px solid var(--hairline); border-radius: 20px; padding: 8px; box-shadow: 0 24px 48px -12px rgba(14, 14, 20, 0.18), 0 4px 12px -4px rgba(14, 14, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .mobile-menu__link { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-family: 'Uncut Sans', system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--espresso); border-radius: 12px; transition: background 0.15s var(--ease-apple); text-decoration: none; } .mobile-menu__link:hover, .mobile-menu__link:active { background: var(--paper-deep); } .mobile-menu__arrow { color: var(--ink-40); font-size: 15px; transition: transform 0.2s var(--ease-apple), color 0.15s var(--ease-apple); } .mobile-menu__link:hover .mobile-menu__arrow, .mobile-menu__link:active .mobile-menu__arrow { color: var(--terracotta); transform: translateX(3px); } .mobile-menu__divider { height: 1px; background: var(--hairline); margin: 6px 12px; } .mobile-menu__cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; padding: 14px 16px; background: var(--espresso); color: var(--paper); border-radius: 12px; font-family: 'Uncut Sans', system-ui, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; transition: background 0.2s var(--ease-apple); text-decoration: none; } .mobile-menu__cta:hover, .mobile-menu__cta:active { background: var(--terracotta); } .mobile-menu__cta-icon { display: inline-flex; align-items: center; } /* Cascade subtile des items à l'ouverture (compositor-only, ultra-rapide) */ .mobile-menu__panel > * { opacity: 0; transform: translateY(6px); transition: opacity 200ms var(--ease-apple), transform 200ms var(--ease-apple); } .mobile-menu.is-open .mobile-menu__panel > * { opacity: 1; transform: translateY(0); } .mobile-menu.is-open .mobile-menu__panel > *:nth-child(1) { transition-delay: 30ms; } .mobile-menu.is-open .mobile-menu__panel > *:nth-child(2) { transition-delay: 60ms; } .mobile-menu.is-open .mobile-menu__panel > *:nth-child(3) { transition-delay: 90ms; } .mobile-menu.is-open .mobile-menu__panel > *:nth-child(4) { transition-delay: 120ms; } .mobile-menu.is-open .mobile-menu__panel > *:nth-child(5) { transition-delay: 150ms; } .mobile-menu.is-open .mobile-menu__panel > *:nth-child(6) { transition-delay: 180ms; } /* ════════════════════════════════════════════════════════ PRIMITIVES — Eyebrow, Buttons, Links ════════════════════════════════════════════════════════ */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 9999px; background: var(--paper-deep); border: 1px solid var(--hairline); font-family: 'Uncut Sans', system-ui, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-60); font-weight: 500; font-feature-settings: "ss01"; } .eyebrow--dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); } .eyebrow__dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 3px rgba(135, 106, 255, 0.18); } /* ────── Primary button ────── */ .btn-primary { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 22px; border-radius: 9999px; background: var(--espresso); color: var(--paper); font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px -10px rgba(14, 14, 20, 0.4), 0 1px 2px rgba(14, 14, 20, 0.18); transition: transform 500ms var(--ease-apple), box-shadow 500ms var(--ease-apple); position: relative; isolation: isolate; text-decoration: none; } .btn-primary > span:first-child { padding-right: 10px; } .btn-primary:hover { transform: scale(1.015); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 36px -10px rgba(135, 106, 255, 0.45), 0 1px 2px rgba(14, 14, 20, 0.2); } .btn-primary:active { transform: scale(0.98); } .btn-primary--sm { padding: 4px 4px 4px 16px; font-size: 13.5px; } .btn-primary--sm > span:first-child { padding-right: 6px; } .btn-primary--sm .btn-icon { width: 30px; height: 30px; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); color: var(--paper); transition: transform 500ms var(--ease-apple), background 500ms var(--ease-apple), box-shadow 500ms var(--ease-apple); } .btn-primary:hover .btn-icon { background: var(--terracotta); transform: translate(2px, -1px) scale(1.05); box-shadow: inset 0 0 0 1px rgba(184, 165, 255, 0.5), 0 4px 14px rgba(135, 106, 255, 0.6); } /* Inverted variant */ .btn-primary--inverted { background: var(--paper); color: var(--espresso); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 24px -10px rgba(0, 0, 0, 0.5); } .btn-primary--inverted .btn-icon { background: rgba(14, 14, 20, 0.06); box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.1); color: var(--espresso); } .btn-primary--inverted:hover .btn-icon { background: var(--terracotta); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(184, 165, 255, 0.5), 0 4px 14px rgba(135, 106, 255, 0.6); } /* ────── Link arrow ────── */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; position: relative; transition: color 400ms var(--ease-apple); } .link-arrow::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0.4); transform-origin: left; transition: transform 600ms var(--ease-apple); opacity: 0.4; } .link-arrow:hover::after { transform: scaleX(1); opacity: 0.8; } .link-arrow:hover svg { transform: translateX(3px); } .link-arrow svg { transition: transform 500ms var(--ease-apple); } /* ════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════ */ .hero-underline { position: absolute; left: -2%; bottom: -8px; width: 104%; height: 14px; color: var(--terracotta); opacity: 0.85; pointer-events: none; } .hero-underline path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawUnderline 1400ms var(--ease-editorial) 700ms forwards; } @keyframes drawUnderline { to { stroke-dashoffset: 0; } } /* ────── Phone mockup ────── */ .phone-bezel { padding: 8px; border-radius: 44px; background: linear-gradient(180deg, rgba(14, 14, 20, 0.06), rgba(14, 14, 20, 0.02)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.4), 0 30px 60px -25px rgba(14, 14, 20, 0.2), 0 60px 100px -30px rgba(135, 106, 255, 0.18); border: 1px solid rgba(14, 14, 20, 0.06); transform: rotate(-1.5deg); transition: transform 800ms var(--ease-apple); } .phone-bezel:hover { transform: rotate(0deg) translateY(-4px); } .phone-screen { position: relative; border-radius: 36px; background: var(--espresso); /* Ratio iPhone 17 Pro Max natif (1320 × 2868) */ aspect-ratio: 1320 / 2868; overflow: hidden; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.4); } .phone-screen__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; /* L'image arrive sous le scan-beam mais au-dessus du fond espresso */ position: relative; z-index: 0; } .day-cell { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.5); position: relative; } .day-cell--post { background: rgba(135, 106, 255, 0.22); color: var(--clay-light); box-shadow: inset 0 0 0 1px rgba(135, 106, 255, 0.4); } .day-cell--post::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--terracotta); } .day-cell--reel { background: rgba(184, 165, 255, 0.2); color: var(--clay-light); } .day-cell--story { background: rgba(90, 211, 255, 0.18); color: var(--sage); } /* Floating badge — fond gris pâle (contraste avec le screen blanc de l'app) */ .badge-floating { position: absolute; top: -8px; right: -32px; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; background: #F1F0F8; border: 1px solid rgba(135, 106, 255, 0.12); border-radius: 20px; padding: 14px 18px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 40px -15px rgba(14, 14, 20, 0.18), 0 4px 12px -4px rgba(135, 106, 255, 0.22); transform: rotate(3deg); min-width: 120px; } @media (max-width: 1024px) { .badge-floating { right: 8px; top: -16px; } } /* Spring-in animation */ .spring-in { opacity: 0; transform: scale(0.6) rotate(3deg); transition: opacity 700ms var(--ease-spring), transform 700ms var(--ease-spring); transition-delay: var(--delay, 0ms); } .spring-in.is-visible { opacity: 1; transform: scale(1) rotate(3deg); } /* ════════════════════════════════════════════════════════ TRUST + PROOF ════════════════════════════════════════════════════════ */ .logo-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 16px; background: var(--paper-deep); border: 1px solid var(--hairline); border-radius: 18px; transition: transform 500ms var(--ease-apple), background 500ms var(--ease-apple), border-color 500ms var(--ease-apple), box-shadow 500ms var(--ease-apple); min-height: 88px; position: relative; overflow: hidden; } .logo-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(135, 106, 255, 0.08), transparent 60%); opacity: 0; transition: opacity 500ms var(--ease-apple); } .logo-card:hover { transform: translateY(-2px); background: var(--paper); border-color: rgba(135, 106, 255, 0.3); box-shadow: 0 12px 28px -16px rgba(135, 106, 255, 0.3); } .logo-card:hover::before { opacity: 1; } .logo-card__handle { font-family: 'Uncut Sans', system-ui, sans-serif; font-style: italic; font-weight: 500; font-size: clamp(0.95rem, 1.4vw, 1.1rem); color: var(--espresso); letter-spacing: -0.015em; position: relative; word-break: break-word; hyphens: auto; line-height: 1.15; text-align: center; } .logo-card__handle::before { content: "·"; color: var(--terracotta); margin-right: 4px; font-size: 1.2em; vertical-align: middle; } .logo-card__label { font-family: 'Uncut Sans', system-ui, sans-serif; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-40); margin-top: 6px; } /* Mobile : si on a un nombre impair de logos, on centre le dernier (orphelin) sur 2 colonnes */ @media (max-width: 767px) { .logo-row .logo-card:nth-child(5):last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } } /* ────── Cas star eyebrow renforcé (visibilité) ────── */ .cas-star__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 9999px; background: rgba(184, 165, 255, 0.16); border: 1px solid rgba(184, 165, 255, 0.32); font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--clay-light); } .cas-star__eyebrow-diamond { font-size: 14px; color: var(--clay-light); display: inline-block; transform: translateY(-1px); } /* ────── Cas star ────── */ .cas-star { padding: 8px; border-radius: 32px; background: linear-gradient(180deg, rgba(14, 14, 20, 0.04), rgba(14, 14, 20, 0.01)); border: 1px solid var(--hairline); } .cas-star__inner { position: relative; background: var(--espresso); border-radius: 26px; padding: 48px 48px; color: var(--paper); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.4); overflow: hidden; } .cas-star__inner::before { content: ""; position: absolute; top: -150px; right: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(135, 106, 255, 0.45), transparent 60%); pointer-events: none; } .cas-star__inner::after { content: ""; position: absolute; bottom: -100px; left: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(90, 211, 255, 0.18), transparent 60%); pointer-events: none; } .cas-star__inner > * { position: relative; z-index: 1; } /* Dot grid sur fond dark */ .cas-star__inner { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0), linear-gradient(180deg, var(--espresso), var(--espresso)); background-size: 32px 32px, 100% 100%; } @media (max-width: 768px) { .cas-star__inner { padding: 32px 24px; } } /* ════════════════════════════════════════════════════════ POUR QUI — Marquee ════════════════════════════════════════════════════════ */ .marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee 50s linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } } .sector-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 18px; border-radius: 9999px; background: var(--paper-deep); border: 1px solid var(--hairline); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .sector-pill__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9999px; background: var(--paper); color: var(--terracotta); font-size: 14px; border: 1px solid var(--hairline); } /* Variante avec photo métier (rond, plus gros, débord léger pour le punch) */ .sector-pill__thumb { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; overflow: hidden; background: var(--paper); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--hairline-strong), 0 4px 12px -4px rgba(135, 106, 255, 0.15); flex-shrink: 0; margin: -4px 0; margin-right: -2px; } .sector-pill__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ════════════════════════════════════════════════════════ 80/20 SPLIT ════════════════════════════════════════════════════════ */ .split-card { position: relative; transition: transform 800ms var(--ease-apple); } .split-card--80 { transform: rotate(-0.7deg); } .split-card--20 { transform: rotate(1.4deg); } .split-card:hover { transform: rotate(0deg) translateY(-4px); } @media (max-width: 1024px) { .split-card, .split-card--80, .split-card--20 { transform: rotate(0deg); } } .split-card__shell { padding: 6px; border-radius: 28px; background: linear-gradient(180deg, var(--paper-deep), var(--paper)); border: 1px solid var(--hairline); box-shadow: 0 30px 60px -30px rgba(14, 14, 20, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8); } /* Côté humain : liseré blanc autour du noir pour créer le contraste */ .split-card__shell--dark { background: var(--paper); border: 1px solid var(--hairline); box-shadow: 0 30px 60px -30px rgba(14, 14, 20, 0.25), 0 1px 0 rgba(255, 255, 255, 0.8); } .split-card__inner { background: var(--paper); border-radius: 22px; padding: 28px 28px 32px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -1px 0 var(--hairline); position: relative; overflow: hidden; height: 100%; } .split-card__inner--dark { background: var(--espresso); color: var(--paper); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06); } @media (max-width: 768px) { .split-card__inner { padding: 24px 22px 28px; } } .split-card__icon-bezel { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--paper-deep); border: 1px solid var(--hairline); color: var(--terracotta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .split-card__icon-bezel--dark { background: rgba(135, 106, 255, 0.15); border-color: rgba(135, 106, 255, 0.25); color: var(--clay-light); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Variante picto image — pas de couleur, juste l'image */ .split-card__icon-bezel--picto { background: var(--paper); padding: 4px; } .split-card__icon-bezel--picto img { width: 100%; height: 100%; object-fit: contain; display: block; } .split-card__big-number { font-family: 'Uncut Sans', system-ui, sans-serif; font-style: italic; font-weight: 700; font-size: clamp(5.5rem, 10vw, 9rem); line-height: 0.88; letter-spacing: -0.05em; margin-top: 16px; position: relative; } .split-card__big-number--80 { color: var(--terracotta); background: linear-gradient(135deg, var(--terracotta), #A78BFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .split-card__big-number--20 { color: var(--sage); background: linear-gradient(135deg, var(--sage), var(--blue-mid)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Card 20% plus étroite — taille réduite pour rester lisible */ font-size: clamp(3.75rem, 6vw, 5.75rem); letter-spacing: -0.04em; } .split-card__big-number--20 .split-card__big-number__pct { font-size: 0.45em; } .split-card__big-number__pct { font-size: 0.42em; vertical-align: top; margin-left: 4px; font-style: normal; font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 500; letter-spacing: -0.02em; -webkit-text-fill-color: currentColor; } .split-card__big-number--80 .split-card__big-number__pct { color: var(--terracotta); } .split-card__big-number--20 .split-card__big-number__pct { color: var(--sage); } .split-card__sub { font-size: 1rem; color: var(--ink-60); letter-spacing: -0.005em; font-weight: 500; } .split-card__sub--dark { color: rgba(255, 255, 255, 0.6); } .split-card__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hairline); } .split-card__list--dark { border-color: rgba(255, 255, 255, 0.08); } .split-card__list li { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 0.92rem; letter-spacing: -0.005em; line-height: 1.4; } .split-card__list--dark li { border-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.88); } .split-card__bullet { color: var(--terracotta); font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 600; width: 16px; text-align: center; flex-shrink: 0; margin-top: 2px; } .split-card__bullet--dark { color: var(--sage); } /* ════════════════════════════════════════════════════════ TIMELINE — Comment ça marche ════════════════════════════════════════════════════════ */ .timeline { position: relative; } .timeline::before { content: ""; position: absolute; left: 27px; top: 32px; bottom: 32px; width: 1px; background: var(--hairline); } .timeline__progress { position: absolute; left: 27px; top: 32px; width: 1px; height: 0; background: linear-gradient(180deg, var(--terracotta), rgba(135, 106, 255, 0.2)); transform-origin: top; transition: height 200ms linear; pointer-events: none; } .timeline-step { display: flex; align-items: flex-start; gap: 32px; padding: 16px 0; position: relative; } .timeline-step__num { flex-shrink: 0; } .timeline-step__num-shell { display: inline-flex; padding: 4px; border-radius: 9999px; background: var(--paper); border: 1px solid rgba(135, 106, 255, 0.35); box-shadow: 0 8px 20px -8px rgba(135, 106, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .timeline-step__num-inner { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 9999px; background: var(--paper-deep); font-size: 1.5rem; font-weight: 600; font-style: italic; line-height: 1; } .timeline-step__body { flex: 1; padding-top: 14px; } /* Inclus pills */ .incl-pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 9999px; background: var(--paper); border: 1px solid var(--hairline); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-60); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: transform 400ms var(--ease-apple), color 400ms var(--ease-apple); } .incl-pill:hover { color: var(--espresso); transform: translateY(-1px); } /* ════════════════════════════════════════════════════════ PILIERS — Bento ════════════════════════════════════════════════════════ */ .pillar-card { position: relative; transition: transform 600ms var(--ease-apple); } .pillar-card:hover { transform: translateY(-4px); } .pillar-card__shell { padding: 6px; border-radius: 32px; background: linear-gradient(180deg, var(--paper-deep), var(--paper)); border: 1px solid var(--hairline); height: 100%; box-shadow: 0 24px 48px -28px rgba(14, 14, 20, 0.1), 0 1px 0 rgba(255, 255, 255, 0.7); transition: border-color 500ms var(--ease-apple), box-shadow 500ms var(--ease-apple); } .pillar-card:hover .pillar-card__shell { border-color: rgba(135, 106, 255, 0.3); box-shadow: 0 32px 60px -28px rgba(135, 106, 255, 0.28), 0 1px 0 rgba(255, 255, 255, 0.7); } .pillar-card__shell--dark { background: linear-gradient(180deg, rgba(14, 14, 20, 0.96), rgba(27, 27, 37, 0.92)); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 24px 48px -24px rgba(14, 14, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .pillar-card__shell--sage { background: linear-gradient(180deg, rgba(90, 211, 255, 0.2), rgba(135, 106, 255, 0.08)); border-color: rgba(90, 211, 255, 0.25); } .pillar-card__inner { background: var(--paper); border-radius: 26px; padding: 36px 36px 40px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7); height: 100%; display: flex; flex-direction: column; } .pillar-card__inner--dark { background: var(--espresso-soft); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05); } .pillar-card__inner--sage { background: var(--paper); } @media (max-width: 768px) { .pillar-card__inner { padding: 28px 24px 32px; } } .pillar-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(135, 106, 255, 0.1); border: 1px solid rgba(135, 106, 255, 0.2); color: var(--terracotta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); margin-bottom: 28px; } .pillar-card__icon--dark { background: rgba(135, 106, 255, 0.15); border-color: rgba(135, 106, 255, 0.3); color: var(--clay-light); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .pillar-card__icon--sage { background: rgba(90, 211, 255, 0.15); border-color: rgba(90, 211, 255, 0.3); color: var(--blue-mid); } .pillar-card__title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 14px; color: var(--espresso); } .pillar-card__title--dark { color: var(--paper); } .pillar-card__desc { color: var(--ink-60); line-height: 1.55; font-size: 1rem; letter-spacing: -0.005em; } .pillar-card__desc--dark { color: rgba(255, 255, 255, 0.65); } /* Pillar card visual (small image top-right corner) */ .pillar-card__visual { position: absolute; top: 24px; right: 24px; width: 110px; height: 110px; border-radius: 16px; overflow: hidden; background: var(--paper-deep); box-shadow: 0 12px 28px -16px rgba(135, 106, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); z-index: 2; pointer-events: none; } .pillar-card__visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease-apple); } .pillar-card:hover .pillar-card__visual img { transform: scale(1.08); } .pillar-card__inner { position: relative; } @media (max-width: 768px) { .pillar-card__visual { width: 72px; height: 72px; top: 18px; right: 18px; border-radius: 12px; } } /* Full-width banner "tous secteurs" */ .secteurs-banner { position: relative; width: 100%; margin-top: 4rem; border-radius: 28px; overflow: hidden; isolation: isolate; aspect-ratio: 21 / 9; background: var(--espresso); } .secteurs-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .secteurs-banner__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(14, 14, 20, 0.7) 100%); z-index: 1; } .secteurs-banner__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 48px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .secteurs-banner__title { font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--paper); max-width: 520px; } .secteurs-banner__title em { font-style: italic; color: var(--clay-light); font-weight: 500; } .secteurs-banner__chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 360px; justify-content: flex-end; } .secteurs-banner__chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 500; font-size: 11px; color: var(--paper); letter-spacing: 0.01em; } @media (max-width: 768px) { .secteurs-banner { aspect-ratio: 4 / 5; border-radius: 20px; } .secteurs-banner__content { padding: 24px 24px; flex-direction: column; align-items: flex-start; } .secteurs-banner__chips { justify-content: flex-start; } } .day-mini { display: block; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); } .day-mini--filled { background: rgba(135, 106, 255, 0.45); } .day-mini--filled-2 { background: rgba(90, 211, 255, 0.4); } /* ════════════════════════════════════════════════════════ CAS GABY ════════════════════════════════════════════════════════ */ .gaby-photo { position: relative; } .gaby-photo__shell { padding: 8px; border-radius: 32px; background: linear-gradient(180deg, var(--paper-deep), var(--paper)); border: 1px solid var(--hairline); box-shadow: 0 30px 60px -25px rgba(135, 106, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.6); transform: rotate(-2deg); transition: transform 700ms var(--ease-apple); overflow: hidden; } .gaby-photo:hover .gaby-photo__shell { transform: rotate(0) translateY(-4px); } .gaby-photo__inner { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } @media (max-width: 1024px) { .gaby-photo__shell { transform: rotate(0deg); } } /* Stat cards */ .stat-card { padding: 6px; border-radius: 24px; background: linear-gradient(180deg, var(--paper-deep), var(--paper)); border: 1px solid var(--hairline); } .stat-card > * { display: block; } .stat-card { position: relative; } .stat-card::before { content: ""; position: absolute; inset: 6px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7); z-index: 0; } .stat-card__value, .stat-card__label, .stat-card__note { position: relative; z-index: 1; } .stat-card__value { font-family: 'Uncut Sans', system-ui, sans-serif; font-style: italic; font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: -0.04em; color: var(--espresso); padding: 24px 24px 6px; } .stat-card__label { padding: 0 24px; font-size: 0.95rem; color: var(--ink-60); letter-spacing: -0.005em; margin-top: 4px; } .stat-card__note { padding: 0 24px 22px; font-family: 'Uncut Sans', system-ui, sans-serif; font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-40); margin-top: 8px; } /* Pull quote */ /* Pull quote — bloc visuel renforcé */ .pull-quote { position: relative; margin-top: 36px; padding: 26px 28px; border-radius: 20px; background: var(--paper); border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 24px 48px -28px rgba(135, 106, 255, 0.18); overflow: hidden; } .pull-quote::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--terracotta), var(--blue-mid)); border-radius: 4px 0 0 4px; } .pull-quote::after { content: ""; position: absolute; top: -120px; right: -100px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(135, 106, 255, 0.08), transparent 65%); pointer-events: none; } .pull-quote > * { position: relative; z-index: 1; } @media (max-width: 768px) { .pull-quote { padding: 28px 24px; } } .quote-mark { position: absolute; font-family: 'Uncut Sans', system-ui, sans-serif; font-size: 5rem; color: var(--terracotta); line-height: 0.5; font-weight: 400; opacity: 0.45; } .quote-mark--open { top: -8px; left: -4px; } .quote-mark--close { display: inline; position: relative; font-size: 1.5em; vertical-align: -0.2em; margin-left: 4px; top: auto; left: auto; } .quote-mark--inline { position: relative; display: inline; font-family: 'Uncut Sans', system-ui, sans-serif; font-size: 1.5em; line-height: 1; color: var(--terracotta); font-style: normal; font-weight: 500; margin-right: 4px; margin-left: 4px; opacity: 0.65; vertical-align: -0.18em; } @media (max-width: 768px) { .quote-mark--inline { font-size: 1.2em; vertical-align: -0.1em; } } .cheesy-highlight { position: relative; display: inline-block; font-style: normal; font-weight: 600; padding: 0 4px; } .cheesy-highlight::before { content: ""; position: absolute; inset: 4px -2px; background: rgba(135, 106, 255, 0.28); border-radius: 4px 12px 4px 14px; transform: rotate(-1deg); z-index: -1; } /* ════════════════════════════════════════════════════════ CTA FINAL ════════════════════════════════════════════════════════ */ .cta-final { position: relative; padding: 8px; border-radius: 40px; background: linear-gradient(180deg, rgba(14, 14, 20, 0.06), rgba(14, 14, 20, 0.02)); border: 1px solid var(--hairline); } .cta-final__inner { position: relative; background: var(--espresso); border-radius: 32px; padding: 80px 80px 60px; color: var(--paper); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); overflow: hidden; } .cta-final__inner::before { content: ""; position: absolute; bottom: -240px; left: -120px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(135, 106, 255, 0.4), transparent 60%); pointer-events: none; } .cta-final__inner::after { content: ""; position: absolute; top: -180px; right: -80px; width: 540px; height: 540px; background: radial-gradient(circle, rgba(90, 211, 255, 0.18), transparent 60%); pointer-events: none; } .cta-final__inner > * { position: relative; z-index: 1; } .cta-final__inner { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0), linear-gradient(180deg, var(--espresso), var(--espresso)); background-size: 32px 32px, 100% 100%; } @media (max-width: 768px) { .cta-final__inner { padding: 48px 28px 40px; } } .cta-price-badge { position: absolute; top: 32px; right: 40px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; background: var(--paper); border-radius: 18px; padding: 14px 18px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 20px 40px -15px rgba(135, 106, 255, 0.45); transform: rotate(3deg); min-width: 150px; border: 1px solid rgba(135, 106, 255, 0.35); } @media (max-width: 768px) { .cta-price-badge { position: relative; top: auto; right: auto; transform: rotate(-1deg); margin-bottom: 32px; align-self: flex-start; } } /* ════════════════════════════════════════════════════════ REVEAL ANIMATIONS ════════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity 900ms var(--ease-apple), transform 900ms var(--ease-apple), filter 900ms var(--ease-apple); will-change: opacity, transform, filter; } .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal--delay-1.is-visible { transition-delay: 120ms; } .reveal--delay-2.is-visible { transition-delay: 240ms; } .reveal--delay-3.is-visible { transition-delay: 360ms; } .reveal--delay-4.is-visible { transition-delay: 480ms; } .reveal--delay-5.is-visible { transition-delay: 600ms; } /* ────── Store download badges (App Store / Play Store) ────── */ .store-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; } .store-badge { display: inline-flex; height: 44px; border-radius: 8px; transition: transform 0.25s var(--ease-apple), opacity 0.25s var(--ease-apple); will-change: transform; } .store-badge:hover { transform: translateY(-2px); opacity: 0.92; } .store-badge img { height: 100%; width: auto; display: block; border-radius: 8px; } @media (max-width: 480px) { .store-badge { height: 40px; } } /* Variant on dark backgrounds: add subtle ring so corners stay visible */ .store-badges--on-dark .store-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); } .store-badges--on-dark .store-badge:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32); } /* Disable will-change after animation */ .reveal.is-visible { will-change: auto; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal, .spring-in, .marquee__track, .hero-underline path { animation: none !important; transition: opacity 200ms ease !important; transform: none !important; filter: none !important; opacity: 1; } .reveal { opacity: 1; } .spring-in { opacity: 1; transform: rotate(3deg); } }