/* * Theme Name: OSO * Theme URI: http://oso.local/ * Description: OSO — Performance Marketing & Commerce Terrain. Immersive Dark Cyber-SaaS. * Author: Emeric * Template: twentytwentyfour * Version: 2.0.0 * Text Domain: oso */ /* ═══════════════════════════════════════════════════════════════ DESIGN TOKENS — Dark Theme (default) Cyber-SaaS immersive palette — identity.md v2 compliant. Base: #000000 noir pur | Accent: #FFF742 jaune électrique .dark-theme class on activates dark mode (default). ═══════════════════════════════════════════════════════════════ */ :root, .dark-theme { /* ── Backgrounds (pure black system) ── */ --c-bg: #000000; /* base surface — noir pur */ --c-bg-deep: #030303; /* deepest layer */ --c-bg-elevated: #0D0D0D; /* cards / raised surfaces */ --c-bg-glass: rgba(255, 255, 255, 0.03); /* ── Accent (jaune électrique) ── */ --c-accent: #FFF742; --c-accent-glow: rgba(255, 247, 66, 0.40); --c-accent-soft: rgba(255, 247, 66, 0.12); --c-electric: #FFF742; /* alias — same electric yellow */ /* ── Text ── */ --c-white: #FFFFFF; --c-highlight: #E2E4E5; /* titres & éléments clés */ --c-text: #D8DADC; /* body text */ --c-muted: #A2A8AE; /* labels & meta */ /* ── Borders / Surfaces ── */ --c-border: rgba(255, 255, 255, 0.06); --c-border-glow: rgba(255, 255, 255, 0.12); --c-border-accent: rgba(255, 247, 66, 0.20); /* ── Logo ── */ --logo-width: 72px; /* adjust this single value to resize everywhere */ --logo-width-footer: 64px; --logo-width-preloader: 50vw; /* logo occupe 50% de la page */ /* ── Typography ── */ --f-heading: 'Inter', system-ui, sans-serif; --f-body: 'Inter', sans-serif; --f-mono: 'Space Grotesk', system-ui, sans-serif; --fs-label: 0.92rem; --fs-body: 1.18rem; --fs-lead: 1.4rem; --fs-h3: 1.85rem; --fs-h2: clamp(2.5rem, 6vw, 4rem); --fs-h1: clamp(3.2rem, 8vw, 6.5rem); /* ── Spacing ── */ --sp-xs: 0.5rem; --sp-sm: 1rem; --sp-md: 2rem; --sp-lg: 3rem; --sp-xl: 5rem; --sp-xxl: 7rem; /* ── Layout ── */ --w-content: 780px; --w-wide: 1200px; /* ── UI ── */ --radius: 4px; /* sharp geometry — elite */ --radius-sm: 2px; /* ultra-sharp */ --blur-glass: 20px; --shadow-glow: 0 0 30px var(--c-accent-glow); --c-cta-glow: rgba(255, 247, 66, 0.35); /* jaune électrique — glow hover CTAs */ --shadow-soft: 0 4px 40px rgba(0, 0, 0, 0.5); --shadow-header: 0 1px 40px rgba(0, 0, 0, 0.6); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 0.16s; --duration-base: 0.26s; --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ═══════════════════════════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* scroll-behavior: smooth removed — Lenis handles all scroll easing. Native smooth-scroll fights Lenis's programmatic scrollTo() calls, producing a "double-smooth" that manifests as wheel-scroll stutter. */ scroll-behavior: auto; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--c-bg); color: var(--c-text); font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.65; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } ::selection { background: var(--c-accent); color: #000000; } /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════════════════ */ h1, h2, h3, h4 { font-family: var(--f-heading); font-weight: 700; line-height: 1.08; color: var(--c-highlight); letter-spacing: -0.03em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; } /* max-width uniquement sur les paragraphes de contenu éditorial, pas dans les composants (footer, cards, formulaires) */ .oso-hero__sub, .oso-value__body, .oso-prestation__body, .oso-page-hero__sub, .oso-lead, .oso-section__intro { max-width: 60ch; } /* Accent text highlight — acid green electric glow */ .oso-accent { color: var(--c-electric); text-shadow: 0 0 24px rgba(255, 247, 66, 0.35); } /* Space Grotesk label */ .oso-label { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--c-accent); } /* ═══════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════ */ .oso-container { width: min(var(--w-content), 100% - var(--sp-md) * 2); margin-inline: auto; } .oso-container--wide { width: min(var(--w-wide), 100% - var(--sp-md) * 2); margin-inline: auto; } /* ═══════════════════════════════════════════════════════════════ GLASSMORPHISM SYSTEM Reusable .oso-glass class for any container. ═══════════════════════════════════════════════════════════════ */ .oso-glass { /* backdrop-filter removed: service cards sit on opaque #030303 — blur composites nothing, incurs a full GPU pass on every frame. */ background: rgba(255, 255, 255, 0.05); border: 1px solid var(--c-border); border-radius: var(--radius); } .oso-glass--accent { border-color: var(--c-border-accent); box-shadow: inset 0 1px 0 var(--c-border-accent), 0 0 60px rgba(255, 247, 66, 0.04); } /* ═══════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════ */ .oso-btn { display: inline-flex; align-items: center; gap: var(--sp-xs); font-family: var(--f-heading); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.9rem 2.2rem; border-radius: var(--radius-sm); /* 2px — ultra-sharp */ cursor: pointer; border: 1px solid transparent; transform-origin: center; transition: transform 0.15s ease, box-shadow 0.15s ease; /* Supprime le délai 300ms au tap sur iOS/Android */ touch-action: manipulation; } .oso-btn--accent { background: var(--c-accent); color: #000000; /* dark text on electric yellow */ border-color: var(--c-accent); box-shadow: 0 0 0 transparent; font-weight: 700; position: relative; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; } /* Scanning light sweep — 45° gradient sweeps on hover */ .oso-btn--accent::after { content: ''; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient( 105deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80% ); transform: translateX(-250%) skewX(-12deg); pointer-events: none; will-change: transform; } .oso-btn--accent:hover::after { transform: translateX(700%) skewX(-12deg); transition: transform 0.42s var(--ease-out); } .oso-btn--outline { background: transparent; color: var(--c-white); border-color: var(--c-border-glow); } .oso-btn--outline:hover { border-color: rgba(255, 255, 255, 0.3); } .oso-btn--ghost { background: transparent; color: var(--c-accent); border-color: transparent; padding-inline: 0; text-decoration: underline; text-underline-offset: 4px; } /* ═══════════════════════════════════════════════════════════════ HEADER — transparent → frosted glass on scroll Ref: AgentAI pill-style nav ═══════════════════════════════════════════════════════════════ */ .oso-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; /* backdrop-filter removed from transition list: animating blur forces a new composited layer on every tick — GPU budget killer. The blur simply appears on scroll instead of fading. */ transition: background var(--duration-base) ease, border-color var(--duration-base) ease; } .oso-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); width: min(var(--w-wide), 100% - var(--sp-md) * 2); margin-inline: auto; padding-block: 1.1rem; transition: padding var(--duration-base) ease; } /* ── Logo ── */ .oso-logo { flex-shrink: 0; display: flex; align-items: center; } .oso-logo__img { height: auto; width: var(--logo-width); transition: opacity var(--duration-fast) ease; } /* ── Logo auto-switch: dark bg → white, light bg → dark ── */ .oso-logo__img--dark { display: none; } .oso-logo__img--white { display: block; } /* Flip on light-themed containers */ .oso-theme--light .oso-logo__img--white, .light-theme .oso-logo__img--white { display: none; } .oso-theme--light .oso-logo__img--dark, .light-theme .oso-logo__img--dark { display: block; } .oso-logo:hover .oso-logo__img { opacity: 0.8; } /* ── Flat Nav Links (sharp / elite) ── */ .oso-nav__pill-bar { display: flex; align-items: center; gap: 2rem; background: transparent; border: none; border-radius: 0; padding: 0; } .oso-nav__pill { font-family: var(--f-body); font-size: 0.92rem; font-weight: 600; color: var(--c-text); padding: 0.35rem 0; border-radius: 0; letter-spacing: 0.1em; text-transform: uppercase; position: relative; transition: color var(--duration-fast) var(--ease-out); white-space: nowrap; } /* Underline reveal from center to edges */ .oso-nav__pill::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: rgba(255, 255, 255, 0.28); transition: width 0.28s var(--ease-out), left 0.28s var(--ease-out); } .oso-nav__pill:hover { color: var(--c-white); } .oso-nav__pill:hover::after { width: 100%; left: 0; } .oso-nav__pill.is-active { color: var(--c-accent); font-weight: 600; } .oso-nav__pill.is-active::after { width: 100%; left: 0; background: var(--c-accent); } /* ══════════════════════════════════════════════════════════════ DROPDOWN — Prestations sub-menu ══════════════════════════════════════════════════════════════ */ .oso-nav__dropdown-wrap { position: relative; } /* Invisible bridge that fills the gap between the pill and the panel — keeps :hover alive as the cursor travels from trigger to dropdown. */ .oso-nav__dropdown-wrap::after { content: ''; position: absolute; top: 100%; left: -1rem; right: -1rem; height: 0.9rem; /* slightly larger than the 0.75rem gap */ pointer-events: auto; } .oso-nav__pill--has-dropdown { display: inline-flex; align-items: center; gap: 0.3rem; } .oso-nav__chevron { transition: transform 0.2s var(--ease-out); flex-shrink: 0; opacity: 0.6; } .oso-nav__dropdown-wrap:hover .oso-nav__chevron, .oso-nav__dropdown-wrap:focus-within .oso-nav__chevron { transform: rotate(180deg); opacity: 1; } .oso-nav__dropdown { position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 260px; background: rgba(10, 10, 10, 0.96); border: 1px solid var(--c-border-accent); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 247, 66, 0.04) inset; padding: 0.5rem 0; opacity: 0; pointer-events: none; transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out); z-index: 200; backdrop-filter: blur(12px); } /* Arrow tip */ .oso-nav__dropdown::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px; background: rgba(10, 10, 10, 0.96); border-top: 1px solid var(--c-border-accent); border-left: 1px solid var(--c-border-accent); } .oso-nav__dropdown-wrap:hover .oso-nav__dropdown, .oso-nav__dropdown-wrap:focus-within .oso-nav__dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .oso-nav__dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.5rem; font-family: var(--f-body); font-size: 0.95rem; font-weight: 500; color: var(--c-text); letter-spacing: 0.03em; transition: color 0.14s ease, background 0.14s ease; border-radius: 0; } .oso-nav__dropdown-item:hover, .oso-nav__dropdown-item:focus-visible { color: var(--c-accent); background: rgba(255, 247, 66, 0.04); outline: none; } .oso-nav__dropdown-item.is-active { color: var(--c-accent); } .oso-nav__dropdown-num { font-family: var(--f-mono); font-size: 0.82rem; font-weight: 600; color: var(--c-accent); letter-spacing: 0.07em; opacity: 0.7; flex-shrink: 0; } /* Divider between items */ .oso-nav__dropdown-item + .oso-nav__dropdown-item { border-top: 1px solid var(--c-border); } /* ── Mobile sub-links ── */ .oso-mobile-menu__sub { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.25rem 0 0.5rem; margin-bottom: 0.5rem; } .oso-mobile-menu__sub-link { font-size: 1rem; color: var(--c-text); letter-spacing: 0.04em; transition: color 0.14s ease; padding: 0.2rem 0; } .oso-mobile-menu__sub-link:hover, .oso-mobile-menu__sub-link.is-active { color: var(--c-accent); } /* ── Nav CTA button ── */ .oso-nav__cta { font-size: 0.88rem !important; padding: 0.6rem 1.5rem !important; border-radius: 2px !important; /* ultra-sharp */ letter-spacing: 0.05em; } /* ── Burger (mobile) ── */ .oso-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 11px; /* zone tactile ~44px — recommandation Apple/Google */ z-index: 200; /* Empêche le double-tap zoom sur iOS */ touch-action: manipulation; } .oso-burger span { display: block; width: 22px; height: 2px; background: var(--c-white); border-radius: 2px; transition: transform var(--duration-base) ease, opacity var(--duration-base) ease; } .oso-burger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .oso-burger.is-open span:nth-child(2) { opacity: 0; } .oso-burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ── Mobile menu overlay ── */ .oso-mobile-menu { position: fixed; inset: 0; z-index: 99; /* Fond opaque sur mobile — pas de backdrop-filter coûteux */ background: rgba(0, 0, 0, 0.97); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.30s var(--ease-smooth); } /* backdrop-filter uniquement sur desktop où le GPU est disponible */ @media (min-width: 900px) { .oso-mobile-menu { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(0, 0, 0, 0.92); } } .oso-mobile-menu.is-open { opacity: 1; pointer-events: auto; } /* Liens du menu mobile — état initial (avant stagger GSAP) */ .oso-mobile-menu__link, .oso-mobile-menu__sub-link { will-change: opacity, transform; } .oso-mobile-menu__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); text-align: center; } .oso-mobile-menu__link { font-family: var(--f-heading); font-weight: 700; font-size: clamp(1.7rem, 6vw, 2.8rem); color: var(--c-text); transition: color var(--duration-fast) ease; } .oso-mobile-menu__link:hover, .oso-mobile-menu__link.is-active { color: var(--c-accent); } /* ── Scrolled state — toujours transparent ── */ .oso-header.is-scrolled { background: transparent; border-bottom-color: transparent; } /* ── Responsive header ── */ @media (max-width: 900px) { .oso-nav__pill-bar { display: none; } .oso-nav__cta { display: none; } .oso-burger { display: flex; } .oso-nav { padding-block: 1rem; } } /* ═══════════════════════════════════════════════════════════════ STICKY CALL BAR (mobile) ═══════════════════════════════════════════════════════════════ */ .oso-sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--c-accent); padding: 0.85rem 1.5rem; /* Safe area iPhone notch/home indicator */ padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)); text-align: center; box-shadow: 0 -4px 20px rgba(255, 247, 66, 0.30); } .oso-sticky-bar a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: #000000; font-family: var(--f-heading); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.03em; } @media (max-width: 768px) { .oso-sticky-bar { display: block; } /* Padding-bottom inclut la safe area pour les iPhones avec home indicator */ body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } } /* Masquer la sticky bar sur la page contact (CTA redondant) */ .page-id-contact .oso-sticky-bar, body.page-template-page-contact .oso-sticky-bar { display: none !important; } /* ═══════════════════════════════════════════════════════════════ SECTIONS ═══════════════════════════════════════════════════════════════ */ .oso-section { padding-block: var(--sp-xl); position: relative; z-index: 1; } .oso-section--deep { background: var(--c-bg-deep); } .oso-section__eyebrow { margin-bottom: var(--sp-sm); } .oso-section__title { margin-bottom: var(--sp-md); } .oso-section__body { font-size: var(--fs-lead); line-height: 1.8; color: var(--c-text); margin-bottom: var(--sp-lg); } .oso-section__intro { font-size: var(--fs-body); line-height: 1.8; color: var(--c-muted); max-width: var(--w-content); margin-bottom: var(--sp-lg); } .oso-lead { font-size: var(--fs-lead); line-height: 1.8; color: var(--c-text); max-width: var(--w-content); margin-inline: auto; } /* Subtle divider */ .oso-divider { border: none; height: 1px; background: var(--c-border); margin-block: var(--sp-xl); } /* ═══════════════════════════════════════════════════════════════ HOME — HERO (Desktop Multi-Column / Elite Expert) Col 1 (55%): editorial text + CTAs Col 2 (45%): modular stat boxes — update values in HTML only ═══════════════════════════════════════════════════════════════ */ .oso-hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-inline: 0; position: relative; overflow: hidden; gap: 0; } /* Subtle accent glow — left origin */ .oso-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 65% at 18% 55%, rgba(255, 247, 66, 0.04) 0%, transparent 60%); pointer-events: none; z-index: 0; } .oso-hero::after { content: none; } /* divider replaced by stats border-left */ /* ── Strategic Universe — full-viewport fixed canvas ── */ .oso-universe { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: block; /* Force hardware-accelerated compositor layer for the canvas. Ensures canvas repaints never trigger page repaints. */ transform: translateZ(0); will-change: transform; /* Contain paint within the canvas so the browser doesn't invalidate surrounding elements on canvas updates. */ contain: strict; } /* Ensure content layers sit above canvas */ .oso-hero__inner, .oso-logo3d { position: relative; z-index: 2; } /* ── Grid order ── */ .oso-hero__inner { order: 1; } .oso-logo3d { order: 2; } /* ── Left column: content ── */ .oso-hero__inner { display: flex; flex-direction: column; justify-content: center; width: 100%; padding-block: var(--sp-xxl) var(--sp-xl); padding-inline: clamp(2rem, 5vw, 7rem); position: relative; z-index: 2; } /* Label — accent left-tick */ .oso-hero__label { border-left: 2px solid var(--c-accent); padding-left: 0.75rem; margin-bottom: 2rem; } /* ── Mega H1 ── */ .oso-hero__title { font-size: clamp(4.5rem, 9vw, 9rem); line-height: 0.93; letter-spacing: -0.05em; color: var(--c-white); margin-block: 0 1.8rem; } .oso-hero__title .oso-accent { color: var(--c-electric); text-shadow: 0 0 48px rgba(255, 247, 66, 0.35); } .oso-hero__sub { font-size: var(--fs-lead); line-height: 1.75; color: var(--c-text); max-width: 52ch; margin-bottom: var(--sp-sm); } .oso-hero__sub--bold { font-weight: 700; color: var(--c-white); margin-bottom: var(--sp-xs, 0.5rem); } .oso-hero__sub + .oso-hero__cta { margin-top: var(--sp-md); } /* ── CTAs ── */ .oso-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--sp-md); } /* ═══════════════════════════════════════════════════════════════ HERO — COMPACT KPIs (left column, below CTAs) 3 inline metrics — update values in front-page.php only. ═══════════════════════════════════════════════════════════════ */ .oso-hero__kpis { display: flex; gap: 2rem; margin-top: var(--sp-md); padding-top: var(--sp-md); } .oso-kpi { display: flex; flex-direction: column; gap: 0.3rem; } .oso-kpi__value { font-family: var(--f-mono); font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; color: var(--c-white); line-height: 1; } .oso-kpi__value .oso-accent { color: var(--c-accent); } .oso-kpi__label { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-muted); } /* ═══════════════════════════════════════════════════════════════ HERO — 3D ROTATING LOGO (right column) Architecture: .oso-logo3d → grid cell, perspective container .oso-logo3d__scene → centering wrapper, holds perspective .oso-logo3d__anim → GSAP controls scale + opacity (entrance) .oso-logo3d__body → CSS keyframe rotateY (continuous spin) .oso-logo3d__img → the logo image with multi-layer relief shadows Relief technique: stacked drop-shadow() filters at 1px increments create a gold-tinted extrusion effect visible during rotation. The perspective on .oso-logo3d__scene provides realistic foreshortening. ═══════════════════════════════════════════════════════════════ */ /* Grid cell wrapper */ .oso-logo3d { display: flex; align-items: center; justify-content: center; padding-block: var(--sp-xxl) var(--sp-xl); padding-right: clamp(2.5rem, 6vw, 6rem); padding-left: var(--sp-md); position: relative; z-index: 2; } /* Perspective container — gives 3D depth to the rotation */ .oso-logo3d__scene { perspective: 900px; perspective-origin: 50% 50%; display: flex; align-items: center; justify-content: center; width: 100%; } /* GSAP entrance layer — animates scale + opacity on load */ .oso-logo3d__anim { transform-style: preserve-3d; will-change: transform, opacity; opacity: 0; /* GSAP will fade this in */ } /* Parallax 3D layer — GSAP drives transform via mouse tracking. CSS transition is removed; GSAP quickTo handles all easing. .has-parallax is set by JS once the effect initialises. */ .oso-logo3d__body { transform-style: preserve-3d; transform: rotateX(6deg) rotateY(0deg); will-change: transform; } /* Fallback hover spin — only active before JS loads */ .oso-logo3d:not(.has-parallax):hover .oso-logo3d__body { transform: rotateX(6deg) rotateY(360deg); transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Interactive state — JS has taken over */ .oso-logo3d.has-parallax { cursor: grab; user-select: none; } .oso-logo3d.has-parallax:active { cursor: grabbing; } .oso-logo3d.has-parallax img { pointer-events: none; /* clicks go to the parent, not the img */ } /* The logo image with embossed 3D relief via stacked drop-shadows. Each layer offset (+1px, +2px …) simulates physical extrusion depth. Front face: bright white. Extrusion side: gold gradient from bright → shadow. Final glow: soft yellow ambient halo. */ .oso-logo3d__img { display: block; width: min(2100px, 80vw); height: auto; transform: translateZ(20px); filter: /* ── Extrusion (4 layers — GPU-friendly) ── */ drop-shadow( 1px 1px 0 rgba(255, 225, 40, 1.00)) drop-shadow( 3px 3px 0 rgba(220, 185, 20, 0.75)) drop-shadow( 7px 7px 0 rgba(150, 120, 8, 0.40)) drop-shadow(12px 12px 0 rgba( 50, 40, 0, 0.12)) /* ── Ambient glow (un seul, blur modéré) ── */ drop-shadow( 0 0 30px rgba(255, 247, 66, 0.45)); } /* Keyframe removed — logo now rotates on hover via transition */ /* ── Responsive: tablet — logo shrinks + single column ── */ @media (max-width: 1100px) { .oso-hero { grid-template-columns: 1fr; } .oso-logo3d { padding: var(--sp-lg) 2.5rem; order: -1; /* logo appears above text on tablet */ } .oso-logo3d__img { width: min(1440px, 85vw); } } /* ── Responsive: large tablet ── */ @media (max-width: 900px) { .oso-hero__inner { padding-inline: 2.5rem; /* padding-top ≥ 5rem pour dégager la navbar fixe (~60px) */ padding-block: 5.5rem var(--sp-lg); } .oso-logo3d__img { width: min(1200px, 85vw); } } /* ── Responsive: mobile ── */ @media (max-width: 600px) { .oso-hero__inner { padding-block: 1rem var(--sp-lg); padding-inline: 1.5rem; } .oso-logo3d { padding: 0; margin-block: -1.5rem -4rem; } .oso-logo3d__img { width: min(2340px, 95vw); } .oso-hero__cta { flex-direction: column; align-items: stretch; } .oso-hero__cta .oso-btn { justify-content: center; width: 100%; } .oso-hero__title { font-size: clamp(3.2rem, 13vw, 5rem); } } /* ═══════════════════════════════════════════════════════════════ HOME — SERVICES (3-column grid, all centered) ═══════════════════════════════════════════════════════════════ */ /* Section wrapper */ .oso-services__wrap { width: min(var(--w-wide), 100% - var(--sp-md) * 2); margin-inline: auto; } /* Centered header */ .oso-services__head { text-align: center; margin-bottom: var(--sp-lg); } .oso-services__head .oso-label { margin-bottom: var(--sp-sm); } .oso-services__head h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; } /* 3-column grid */ .oso-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); } /* 2×2 grid for 4-service pages */ .oso-services__grid--4 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .oso-services__grid--4 { grid-template-columns: 1fr; } } /* Centered CTA below grid */ .oso-services__cta { text-align: center; margin-top: var(--sp-lg); } /* ── Cards — centered content, sharp edges ── */ .oso-card { padding: var(--sp-md) var(--sp-lg); position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: border-color var(--duration-base) ease, background var(--duration-base) ease, opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out); } /* Group hover — active card expands, siblings dim to 60% */ .oso-services__grid:has(.oso-card:hover) .oso-card { opacity: 0.55; transform: scale(0.975); } .oso-services__grid:has(.oso-card:hover) .oso-card:hover { opacity: 1; transform: scale(1.025); border-color: rgba(255, 247, 66, 0.40); background: rgba(255, 247, 66, 0.03); box-shadow: 0 0 40px rgba(255, 247, 66, 0.07), inset 0 1px 0 rgba(255, 247, 66, 0.15); } .oso-card__num { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 600; color: var(--c-accent); letter-spacing: 0.09em; margin-bottom: var(--sp-sm); } .oso-card__title { font-size: var(--fs-h3); margin-bottom: var(--sp-sm); color: var(--c-white); letter-spacing: -0.02em; } .oso-card__body { font-size: 1.02rem; line-height: 1.75; color: var(--c-text); max-width: 36ch; } @media (max-width: 900px) { .oso-services__grid { grid-template-columns: 1fr; } .oso-card { text-align: left; align-items: flex-start; } .oso-card__body { max-width: none; } } /* ═══════════════════════════════════════════════════════════════ HOME — SOCIAL PROOF (Ticker slide / infinite marquee) ═══════════════════════════════════════════════════════════════ */ .oso-proof { padding-block: var(--sp-md); overflow: hidden; position: relative; z-index: 1; } .oso-proof__inner { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); } .oso-proof__text { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 600; color: var(--c-muted); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; } /* Ticker track — holds two copies side-by-side for seamless loop */ .oso-proof__track { display: flex; width: max-content; animation: oso-ticker 28s linear infinite; } .oso-proof__track:hover { animation-play-state: paused; } .oso-proof__logos { display: flex; align-items: center; gap: var(--sp-xl); padding-inline: calc(var(--sp-xl) / 2); flex-shrink: 0; } .oso-proof__logo { font-family: var(--f-heading); font-weight: 600; font-size: 0.9rem; color: var(--c-muted); opacity: 0.5; letter-spacing: 0.05em; white-space: nowrap; transition: opacity var(--duration-fast) ease; } .oso-proof__logo:hover { opacity: 0.8; } @keyframes oso-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ═══════════════════════════════════════════════════════════════ HOME — VALUE PROPOSITION Perfectly centered single block, max whitespace balance. ═══════════════════════════════════════════════════════════════ */ .oso-value { text-align: center; } .oso-value__inner { width: min(680px, 100% - var(--sp-md) * 2); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 0; } .oso-value__inner .oso-label { margin-bottom: var(--sp-sm); } .oso-value__title { font-size: var(--fs-h2); letter-spacing: -0.04em; margin-block: 0 var(--sp-md); } .oso-value__body { font-size: var(--fs-lead); line-height: 1.8; color: var(--c-text); max-width: 56ch; text-align: center; margin-bottom: var(--sp-lg); } /* ═══════════════════════════════════════════════════════════════ HOME — CTA STRIP (high-impact, max padding) ═══════════════════════════════════════════════════════════════ */ .oso-cta-strip { background: var(--c-bg-deep); color: var(--c-white); padding-block: var(--sp-xxl); /* 10rem — high impact */ text-align: center; position: relative; z-index: 1; overflow: hidden; } /* Glow on CTA section */ .oso-cta-strip::before { content: ''; position: absolute; bottom: -40%; left: 50%; transform: translateX(-50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 247, 66, 0.06) 0%, transparent 70%); pointer-events: none; } .oso-cta-strip__inner { width: min(680px, 100% - var(--sp-md) * 2); margin-inline: auto; position: relative; z-index: 1; } .oso-cta-strip__title { font-size: clamp(2.8rem, 6.5vw, 5.5rem); letter-spacing: -0.04em; line-height: 0.95; color: var(--c-white); margin-bottom: var(--sp-sm); } .oso-cta-strip__sub { color: var(--c-text); font-size: var(--fs-lead); margin-bottom: var(--sp-lg); max-width: none; } .oso-cta-strip__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-sm); } /* ═══════════════════════════════════════════════════════════════ INNER PAGES — PAGE HERO ═══════════════════════════════════════════════════════════════ */ .oso-page-hero { padding-block: 6.5rem var(--sp-md); position: relative; z-index: 1; } .oso-page-hero__inner { width: min(860px, 100% - var(--sp-md) * 2); margin-inline: auto; } .oso-page-hero__title { margin-block: var(--sp-sm) var(--sp-md); } .oso-page-hero__sub { font-size: var(--fs-lead); line-height: 1.8; max-width: 58ch; color: var(--c-text); } /* ═══════════════════════════════════════════════════════════════ PRESTATIONS ═══════════════════════════════════════════════════════════════ */ .oso-prestation { padding-block: var(--sp-lg); } .oso-prestation:last-of-type { border-bottom: none; } .oso-prestation__inner { width: min(860px, 100% - var(--sp-md) * 2); margin-inline: auto; } .oso-prestation__num { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 600; color: var(--c-accent); letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: var(--sp-xs); } .oso-prestation__title { margin-block: var(--sp-xs) var(--sp-md); } .oso-prestation__body { font-size: var(--fs-lead); line-height: 1.8; margin-bottom: var(--sp-md); } .oso-prestation__cta { margin-top: var(--sp-md); } .oso-callout { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--c-border); border-left: 2px solid var(--c-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.4rem 2rem; font-size: 1.02rem; } .oso-callout__label { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 600; color: var(--c-accent); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.35rem; } .oso-callout__body { font-weight: 500; color: var(--c-white); } /* ═══════════════════════════════════════════════════════════════ NOTRE HISTOIRE — Timeline ═══════════════════════════════════════════════════════════════ */ .oso-timeline { display: flex; flex-direction: column; gap: var(--sp-md); margin-top: var(--sp-lg); } .oso-timeline__item { padding: var(--sp-md) var(--sp-lg); } .oso-timeline__tag { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 600; color: var(--c-accent); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.35rem; } .oso-timeline__title { font-size: var(--fs-h3); margin-bottom: var(--sp-sm); } /* ═══════════════════════════════════════════════════════════════ CONTACT — Hero 2 colonnes ═══════════════════════════════════════════════════════════════ */ .oso-contact-hero { padding-bottom: var(--sp-xl); } .oso-contact-hero__inner { width: min(var(--w-wide), 100% - var(--sp-md) * 2); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xxl); align-items: start; } /* Réassurance verticale dans la colonne gauche */ .oso-contact-hero__reassurance { display: flex; flex-direction: column; gap: 0.9rem; margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--c-border); } /* Cartes d'action — colonne droite */ .oso-contact-hero__actions { display: flex; flex-direction: column; gap: var(--sp-md); padding-top: 4rem; position: relative; } /* Halo ambient derrière les cartes */ .oso-contact-hero__actions::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 247, 66, 0.05) 0%, transparent 65%); pointer-events: none; z-index: 0; } .oso-contact-hero__actions .oso-contact-card { position: relative; z-index: 1; } /* Réassurance items — partagés hero + autres usages */ .oso-reassurance-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--c-muted); } .oso-reassurance-item strong { color: var(--c-highlight); font-weight: 600; } .oso-reassurance-item__icon { display: flex; align-items: center; color: var(--c-accent); flex-shrink: 0; } /* Responsive hero contact */ @media (max-width: 960px) { .oso-contact-hero__inner { grid-template-columns: 1fr; gap: var(--sp-xl); } .oso-contact-hero__actions { padding-top: 0; } .oso-contact-hero__actions::before { display: none; } } /* ═══════════════════════════════════════════════════════════════ CONTACT — Cards ═══════════════════════════════════════════════════════════════ */ .oso-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); margin-top: var(--sp-lg); } .oso-contact-card { padding: var(--sp-md) var(--sp-lg); } .oso-contact-card--accent { border-color: var(--c-border-accent); } .oso-contact-card__label { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 600; color: var(--c-accent); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.5rem; } .oso-contact-card__title { font-size: var(--fs-h3); margin-bottom: var(--sp-sm); } .oso-contact-card__body { font-size: 1.02rem; color: var(--c-text); margin-bottom: var(--sp-md); max-width: none; } .oso-contact-amelia { margin-top: var(--sp-md); padding: var(--sp-lg); } .oso-booking-fallback { display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); padding: var(--sp-lg) 0 var(--sp-sm); text-align: center; } .oso-booking-fallback__text { color: var(--c-text-muted); font-size: 1rem; line-height: 1.7; max-width: 480px; } .oso-booking-fallback__actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; } /* ═══════════════════════════════════════════════════════════════ CONTACT — Process steps ═══════════════════════════════════════════════════════════════ */ .oso-contact-process__title { font-size: var(--fs-h2); margin-block: var(--sp-sm) var(--sp-lg); } .oso-process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); list-style: none; } .oso-process-step { display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-md) var(--sp-lg); transition: border-color var(--duration-base) var(--ease-out); } .oso-process-step:hover { border-color: var(--c-border-glow); } .oso-process-step__num { font-family: var(--f-mono); font-size: 2.6rem; font-weight: 700; color: var(--c-accent); line-height: 1; letter-spacing: -0.03em; opacity: 0.9; } .oso-process-step__title { font-size: 1.25rem; font-weight: 600; color: var(--c-highlight); margin-bottom: 0.4rem; letter-spacing: -0.01em; } .oso-process-step__body { font-size: 1rem; color: var(--c-text); line-height: 1.65; } /* ── Booking header ── */ .oso-contact-booking__header { margin-bottom: var(--sp-lg); } .oso-contact-booking__title { font-size: var(--fs-h2); letter-spacing: -0.03em; margin-top: var(--sp-sm); } /* Responsive process steps */ @media (max-width: 768px) { .oso-process-steps { grid-template-columns: 1fr; gap: var(--sp-sm); } .oso-process-step { flex-direction: row; align-items: flex-start; gap: var(--sp-md); } .oso-process-step__num { font-size: 2.2rem; flex-shrink: 0; min-width: 2.8rem; } } /* ═══════════════════════════════════════════════════════════════ CONTACT — FAQ accordion ═══════════════════════════════════════════════════════════════ */ .oso-contact-faq__title { font-size: var(--fs-h2); margin-block: var(--sp-sm) var(--sp-lg); } .oso-faq-list { display: flex; flex-direction: column; gap: 0.5rem; } .oso-faq-item { overflow: hidden; transition: border-color var(--duration-base) var(--ease-out); } .oso-faq-item.is-open { border-color: var(--c-border-accent); } .oso-faq-item__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 1.25rem var(--sp-lg); background: none; border: none; cursor: pointer; font-family: var(--f-heading); font-size: 1.1rem; font-weight: 600; color: var(--c-highlight); text-align: left; letter-spacing: -0.01em; transition: color var(--duration-fast); } .oso-faq-item__btn:hover { color: var(--c-white); } .oso-faq-item__icon { flex-shrink: 0; color: var(--c-accent); transition: transform var(--duration-base) var(--ease-out); } .oso-faq-item.is-open .oso-faq-item__icon { transform: rotate(180deg); } .oso-faq-item__a { max-height: 0; overflow: hidden; padding-inline: var(--sp-lg); font-size: 1rem; color: var(--c-text); line-height: 1.7; transition: max-height 0.35s var(--ease-out), padding-bottom 0.35s var(--ease-out); } .oso-faq-item.is-open .oso-faq-item__a { max-height: 300px; padding-bottom: 1.5rem; } @media (max-width: 700px) { .oso-contact-grid { grid-template-columns: 1fr; } .oso-contact-reassurance__inner { gap: var(--sp-md); } .oso-reassurance-sep { display: none; } .oso-process-step { padding: var(--sp-md) 1.25rem; } .oso-process-step__num { font-size: 1.6rem; } .oso-faq-item__btn { padding: 1rem 1.25rem; font-size: 1rem; } .oso-faq-item__a { padding-inline: 1.25rem; } } /* ═══════════════════════════════════════════════════════════════ FOOTER — Dark multi-column (ref: AgentAI) ═══════════════════════════════════════════════════════════════ */ .oso-footer { background: var(--c-bg); color: var(--c-text); position: relative; z-index: 1; } /* ── Social proof strip ── */ .oso-footer__proof { padding-block: var(--sp-md); } .oso-footer__proof-inner { width: min(var(--w-wide), 100% - var(--sp-md) * 2); margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: var(--sp-lg); flex-wrap: wrap; } .oso-footer__proof-label { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 600; color: var(--c-muted); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; } .oso-footer__proof-logos { display: flex; align-items: center; gap: var(--sp-lg); flex-wrap: wrap; } .oso-footer__proof-logos span { font-family: var(--f-heading); font-weight: 600; font-size: 0.85rem; color: var(--c-muted); opacity: 0.45; letter-spacing: 0.04em; transition: opacity var(--duration-fast) ease; } .oso-footer__proof-logos span:hover { opacity: 0.75; } /* ── Main footer grid ── */ .oso-footer__main { padding-block: var(--sp-xl) var(--sp-lg); } .oso-footer__grid { width: min(var(--w-wide), 100% - var(--sp-md) * 2); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-lg); } /* Brand column */ .oso-footer__logo { height: auto; width: var(--logo-width-footer); opacity: 0.9; margin-bottom: var(--sp-sm); } .oso-footer__tagline { font-size: 1rem; color: var(--c-text); line-height: 1.6; max-width: none; margin-top: var(--sp-sm); } .oso-footer__tagline--muted { color: var(--c-text); font-size: 0.95rem; margin-top: 0.35rem; } /* Address line in contact column */ .oso-footer__address { font-size: 0.92rem; color: var(--c-muted); line-height: 1.6; padding-top: 0.5rem; margin-top: 0.25rem; list-style: none; } /* Column titles */ .oso-footer__col-title { font-family: var(--f-heading); font-weight: 600; font-size: 1.02rem; color: var(--c-white); letter-spacing: 0.04em; margin-bottom: var(--sp-sm); text-transform: none; } /* Links */ .oso-footer__links { display: flex; flex-direction: column; gap: 0.6rem; } .oso-footer__links a { font-size: 1rem; color: var(--c-text); transition: color var(--duration-fast) ease; } .oso-footer__links a:hover { color: var(--c-accent); } /* Footer CTA button */ .oso-footer__cta { margin-top: var(--sp-md); font-size: 0.92rem !important; padding: 0.65rem 1.4rem !important; } /* ── Bottom bar ── */ .oso-footer__bottom { padding-block: var(--sp-md); } .oso-footer__bottom-inner { width: min(var(--w-wide), 100% - var(--sp-md) * 2); margin-inline: auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-sm); } .oso-footer__bottom p { font-family: var(--f-mono); font-size: var(--fs-label); color: var(--c-muted); max-width: none; } /* ── Footer responsive ── */ @media (max-width: 768px) { .oso-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-md); } } @media (max-width: 480px) { .oso-footer__grid { grid-template-columns: 1fr; } .oso-footer__proof-inner { flex-direction: column; gap: var(--sp-sm); } } /* ═══════════════════════════════════════════════════════════════ PRELOADER — door-opening reveal Two halves sit over the viewport, each clipping half the logo. GSAP slides them apart like double doors. ═══════════════════════════════════════════════════════════════ */ .oso-preloader { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } /* Each half is a full-screen panel */ .oso-preloader__half { position: absolute; top: 0; width: 50%; height: 100%; background: #000000; overflow: hidden; will-change: transform; } /* Scanning light line — sweeps vertically across each panel. Uses transform: translateY() instead of top — compositor-only, no layout reflow on each animation tick. */ .oso-preloader__half::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 247, 66, 0.9) 50%, transparent 100%); box-shadow: 0 0 12px 2px rgba(255, 247, 66, 0.5); animation: oso-scan-line 0.65s linear infinite; will-change: transform; z-index: 2; } @keyframes oso-scan-line { 0% { transform: translateY(0); opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } /* Logo pulse on preloader */ @keyframes oso-logo-pulse { 0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 247, 66, 0.4)); } 50% { filter: drop-shadow(0 0 28px rgba(255, 247, 66, 0.85)); } } .oso-preloader__left { left: 0; } .oso-preloader__right { right: 0; } /* * Logo positioning trick: * Both halves contain the same logo image. Each wrapper is positioned * so the logo sits at the exact viewport center. The parent's * overflow:hidden clips it — left half shows the left side, right half * shows the right side. Together they form the complete logo. */ .oso-preloader__logo-wrap { position: absolute; top: 50%; width: 200%; /* twice the half-panel = full viewport width */ display: flex; justify-content: center; transform: translateY(-50%); } .oso-preloader__left .oso-preloader__logo-wrap { left: 0; /* logo centered within a virtual full-width */ } .oso-preloader__right .oso-preloader__logo-wrap { right: 0; } .oso-preloader__logo { height: auto; width: var(--logo-width-preloader); opacity: 0.9; animation: oso-logo-pulse 0.7s ease-in-out infinite; } /* Scroll lock while preloader is active */ html.is-loading { overflow: hidden; } /* ═══════════════════════════════════════════════════════════════ MOTION: pre-init (prevents FOUC) Note: will-change is NOT set here — GSAP promotes elements to their own compositor layers via force3D:'auto' during animation and demotes them when done. Permanent will-change on all scroll-animated elements wastes GPU memory. ═══════════════════════════════════════════════════════════════ */ .js-fade, .js-card { opacity: 0; } /* ═══════════════════════════════════════════════════════════════ FOCUS VISIBLE — keyboard navigation (WCAG 2.1 Level AA) Uses :focus-visible so mouse users don't see the ring. ═══════════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; } .oso-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(255, 247, 66, 0.20); } .oso-nav__pill:focus-visible, .oso-mobile-menu__link:focus-visible, .oso-footer__links a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; } .oso-logo:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 6px; border-radius: 2px; } /* ═══════════════════════════════════════════════════════════════ MOBILE MENU — CTA button (replaces inline style) ═══════════════════════════════════════════════════════════════ */ .oso-mobile-menu__cta { margin-top: 2rem; width: 100%; justify-content: center; } /* ═══════════════════════════════════════════════════════════════ PAGE HERO — italic variant (Notre Histoire) ═══════════════════════════════════════════════════════════════ */ .oso-page-hero__sub--italic { font-style: italic; } /* ═══════════════════════════════════════════════════════════════ VISION STRIP — La Vision block (Notre Histoire) Replaces inline styles on .oso-cta-strip and children. ═══════════════════════════════════════════════════════════════ */ .oso-cta-strip--left { text-align: left; } .oso-vision-inner { width: min(800px, 100% - 4rem); margin-inline: auto; position: relative; z-index: 1; } .oso-vision-quote { font-size: clamp(1.1rem, 2.5vw, 1.35rem); line-height: 1.85; font-style: italic; color: var(--c-white); margin-block: 1.5rem 2rem; border: none; padding: 0; } /* ═══════════════════════════════════════════════════════════════ BOOKING LABEL — Amelia section eyebrow (Contact page) ═══════════════════════════════════════════════════════════════ */ .oso-booking-label { margin-bottom: 1.5rem; } /* ═══════════════════════════════════════════════════════════════ ABSTRACT META LABEL — shared mono label styles Avoids duplication across .oso-label, .oso-card__num, .oso-timeline__tag, .oso-callout__label, etc. ═══════════════════════════════════════════════════════════════ */ .oso-meta-label { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-accent); } /* ═══════════════════════════════════════════════════════════════ CTA BADGES — micro-copy reassurance (Sans engagement, Gratuit) ═══════════════════════════════════════════════════════════════ */ .oso-btn__badge { display: inline-block; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(0, 0, 0, 0.25); border-radius: 2px; padding: 0.15em 0.5em; vertical-align: middle; margin-left: 0.4em; } /* ═══════════════════════════════════════════════════════════════ MOBILE OPTIMISATIONS Desktop intact — toutes les règles ci-dessous sont scoped à max-width: 640px ou hover:none (touch). Objectifs : 1. Espacement réduit (tokens overrides) 2. Typographie mobile adaptée 3. Filtres logo allégés (GPU) 4. Interactions hover désactivées sur touch 5. Hero, page-hero, CTA strip et footer peaufinés ═══════════════════════════════════════════════════════════════ */ /* ── Tokens mobile ──────────────────────────────────────────── */ @media (max-width: 640px) { :root { --sp-lg: 2rem; --sp-xl: 3rem; --sp-xxl: 4.5rem; --fs-lead: 1.18rem; --fs-h3: 1.5rem; } } /* ── Hero ───────────────────────────────────────────────────── */ @media (max-width: 640px) { .oso-hero { min-height: 100svh; /* svh : exclut la barre du navigateur */ padding-bottom: 2rem; } /* Label + titre légèrement resserrés */ .oso-hero__label { margin-bottom: 0.75rem; } .oso-hero__title { margin-bottom: 1rem; } /* KPIs : 3 métriques sur une ligne — gap réduit */ .oso-hero__kpis { gap: 1.25rem; flex-wrap: wrap; } } /* ── Logo 3D mobile — filtres allégés ──────────────────────── */ /* Sur smartphone le logo est animé en flottement simple (pas de parallax), 4 drop-shadow suffisent — identique visuellement, 60% plus léger */ @media (max-width: 640px) { .oso-logo3d__img { filter: drop-shadow( 1px 1px 0 rgba(255, 225, 40, 0.90)) drop-shadow( 4px 4px 0 rgba(200, 160, 15, 0.50)) drop-shadow( 0 0 18px rgba(255, 247, 66, 0.35)); transform: translateZ(0); } .oso-logo3d__scene { perspective: none; } } /* ── Page hero (pages internes) ─────────────────────────────── */ @media (max-width: 640px) { .oso-page-hero { padding-block: 4.5rem var(--sp-sm); } .oso-page-hero__sub { font-size: 1rem; } } /* ── Sections ───────────────────────────────────────────────── */ @media (max-width: 640px) { .oso-section { padding-block: var(--sp-lg); } } /* ── CTA Strip ──────────────────────────────────────────────── */ @media (max-width: 640px) { .oso-cta-strip { padding-block: var(--sp-xxl); } .oso-cta-strip__title { font-size: clamp(2rem, 9vw, 3rem); } .oso-cta-strip__btns { flex-direction: column; align-items: stretch; } .oso-cta-strip__btns .oso-btn { justify-content: center; } } /* ── Value section ──────────────────────────────────────────── */ @media (max-width: 640px) { .oso-value__title { font-size: clamp(1.9rem, 8vw, 2.8rem); } } /* ── Timeline ───────────────────────────────────────────────── */ @media (max-width: 640px) { .oso-timeline__item { padding: 1.25rem 1rem; } } /* ── Callout ────────────────────────────────────────────────── */ @media (max-width: 640px) { .oso-callout { padding: 1rem 1.25rem; } } /* ── Contact ────────────────────────────────────────────────── */ @media (max-width: 640px) { .oso-contact-grid { gap: var(--sp-sm); } .oso-contact-amelia { padding: var(--sp-md) 1.25rem; } .oso-contact-process__title, .oso-contact-faq__title { font-size: clamp(1.9rem, 8vw, 2.8rem); } } /* ── Footer ─────────────────────────────────────────────────── */ @media (max-width: 640px) { .oso-footer__grid { gap: var(--sp-md); } .oso-footer__bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; } } /* ── Mobile menu — liens plus compacts sur très petits écrans ── */ @media (max-width: 380px) { .oso-mobile-menu__link { font-size: clamp(1.25rem, 7vw, 1.8rem); } .oso-mobile-menu__inner { gap: 1.25rem; } } /* ── Preloader logo — pleine largeur sur petits écrans ─────── */ @media (max-width: 480px) { :root { --logo-width-preloader: 80vw; } } /* ── Touch devices — désactive tous les effets hover ────────── */ @media (hover: none) { /* Cards : pas de scale/dim au survol */ .oso-services__grid:has(.oso-card:hover) .oso-card { opacity: 1; transform: none; } .oso-services__grid:has(.oso-card:hover) .oso-card:hover { opacity: 1; transform: none; border-color: var(--c-border); background: transparent; } /* Buttons : pas de glow / scale */ .oso-btn--accent:hover, .oso-btn--outline:hover { transform: none; box-shadow: none; } /* Proof logos : pas de fade au survol */ .oso-proof__logo:hover { opacity: 0.5; } } /* ═══════════════════════════════════════════════════════════════ LEGAL PAGES — .oso-legal ═══════════════════════════════════════════════════════════════ */ .oso-legal { padding-block: var(--sp-lg) var(--sp-xxl); } .oso-legal__block { margin-bottom: var(--sp-lg); } .oso-legal__block:last-child { margin-bottom: 0; } .oso-legal__block h2 { font-size: var(--fs-h3); font-weight: 700; color: var(--c-highlight); margin-bottom: var(--sp-sm); } .oso-legal__block p { color: var(--c-text); line-height: 1.75; margin-bottom: 0.75rem; max-width: 75ch; } .oso-legal__block ul { list-style: none; padding-left: 0; margin-bottom: 1rem; } .oso-legal__block ul li { position: relative; padding-left: 1.5rem; color: var(--c-text); line-height: 1.75; margin-bottom: 0.4rem; } .oso-legal__block ul li::before { content: "—"; position: absolute; left: 0; color: var(--c-accent); } .oso-legal__block a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s; } .oso-legal__block a:hover { opacity: 0.8; } .oso-legal__date { font-size: var(--fs-label); color: var(--c-muted); font-style: italic; } /* RGPD table */ .oso-legal__table-wrap { overflow-x: auto; margin-block: 1rem; -webkit-overflow-scrolling: touch; } .oso-legal__table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); } .oso-legal__table th, .oso-legal__table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--c-border); color: var(--c-text); } .oso-legal__table th { color: var(--c-highlight); font-weight: 600; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.04em; } .oso-legal__table tr:last-child td { border-bottom: none; } @media (max-width: 600px) { .oso-legal__table { font-size: 0.85rem; } .oso-legal__table th, .oso-legal__table td { padding: 0.5rem 0.6rem; } } /* ═══════════════════════════════════════════════════════════════ PREFERS-REDUCED-MOTION — respect system accessibility setting Disables GSAP animations, canvas, preloader scan line. ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .js-fade, .js-card, .oso-label { opacity: 1 !important; transform: none !important; transition: none !important; } .oso-logo3d__body { transition: none !important; } .oso-proof__track { animation: none !important; } .oso-preloader__half::after { animation: none !important; } .oso-universe { display: none; } }