/* ════════════════════════════════════════════════════════════════════ AGENCE Web-Conseil-Digital — CINEMA (v3.0.0) Refonte premium : aurora, kinetic typo, illustrations dorées, timeline scrub, CTA mesh, magnetic buttons, spotlight cursor. Surcharge style.css — chargé APRÈS lui dans le . ════════════════════════════════════════════════════════════════════ */ /* ═══ EXTENSIONS DE TOKENS ═══════════════════════════════════════════ */ :root { /* Lumières premium additionnelles */ --gold-glow: 0 0 0 0 rgba(200, 161, 101, 0.6); --gold-glow-pulse: 0 0 60px 0 rgba(200, 161, 101, 0); /* Aurora — gradients animés */ --aurora-1: radial-gradient(60% 80% at 20% 30%, rgba(200, 161, 101, 0.18) 0%, transparent 60%); --aurora-2: radial-gradient(70% 60% at 80% 20%, rgba(31, 78, 95, 0.14) 0%, transparent 65%); --aurora-3: radial-gradient(50% 70% at 50% 100%, rgba(217, 189, 139, 0.12) 0%, transparent 60%); /* Easing cinéma */ --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1); --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); } /* ═══ AURORA — gradients radiaux quasi-statiques ════════════════════ IMPORTANT : pour la fluidité du scroll, on utilise un blur plus léger et des animations en `transform` uniquement (pas de filter ni opacity qui forcent le navigateur à recompositer en continu). Le grain papier est définitivement retiré — il causait du repaint pendant le scroll sur les machines moins puissantes. */ .aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint; } .aurora::before, .aurora::after, .aurora__layer { content: ''; position: absolute; inset: -10%; border-radius: 50%; filter: blur(60px); opacity: 0.85; transform: translateZ(0); /* hardware compositing */ } .aurora::before { background: var(--aurora-1); animation: aurora-drift-1 28s ease-in-out infinite alternate; } .aurora::after { background: var(--aurora-2); animation: aurora-drift-2 34s ease-in-out infinite alternate; } .aurora__layer { background: var(--aurora-3); animation: aurora-drift-3 40s ease-in-out infinite alternate; } @keyframes aurora-drift-1 { 0% { transform: translate3d(-4%, -3%, 0); } 100% { transform: translate3d( 4%, 3%, 0); } } @keyframes aurora-drift-2 { 0% { transform: translate3d( 3%, 2%, 0); } 100% { transform: translate3d(-3%, -2%, 0); } } @keyframes aurora-drift-3 { 0% { transform: translate3d( 0%, 3%, 0); } 100% { transform: translate3d(-2%, -3%, 0); } } /* L'élément .aurora__grain est conservé en HTML pour rétro-compatibilité mais ne porte plus de background coûteux. */ .aurora__grain { display: none; } /* Pendant le scroll, on met en pause les animations infinies pour garantir un scroll 60 fps même sur machines modestes. */ body.is-scrolling .aurora::before, body.is-scrolling .aurora::after, body.is-scrolling .aurora__layer, body.is-scrolling .intro-team__badge, body.is-scrolling .intro-team--hero .intro-team__photo::before, body.is-scrolling .cta-call__inner, body.is-scrolling .cta-call__inner::before, body.is-scrolling .intro-team--hero .intro-team__title-em > span, body.is-scrolling .section__title-em { animation-play-state: paused; } /* ═══ SPOTLIGHT (curseur premium, desktop only) ══════════════════════ Plus discret pour limiter le coût du compositing. */ .spotlight { position: fixed; top: 0; left: 0; width: 480px; height: 480px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle at center, rgba(200, 161, 101, 0.08) 0%, rgba(200, 161, 101, 0.03) 30%, transparent 70%); transform: translate3d(var(--cw-mx, -1000px), var(--cw-my, -1000px), 0) translate(-50%, -50%); transition: opacity 600ms var(--ease-cinema); opacity: 0; will-change: transform; contain: layout paint; } .spotlight.is-active { opacity: 1; } /* Désactivé pendant le scroll pour le confort */ body.is-scrolling .spotlight { opacity: 0 !important; } @media (max-width: 1024px), (pointer: coarse) { .spotlight { display: none; } } /* ═══ HERO CINEMA (refonte du intro-team) ════════════════════════════ */ .intro-team--hero { position: relative; padding: clamp(80px, 12vw, 160px) 0 clamp(64px, 10vw, 128px); background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%); border-bottom: 1px solid var(--color-border); overflow: hidden; } /* On désactive le pseudo-halo statique pour laisser place à l'aurora animée */ .intro-team--hero::before { display: none; } .intro-team--hero .intro-team__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } /* ─── Photo équipe : carte premium qui flotte (avec parallax au scroll) ─── */ .intro-team--hero .intro-team__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: visible; /* on laisse les badges déborder */ background: transparent; box-shadow: none; transform-style: preserve-3d; perspective: 1200px; transition: transform 800ms var(--ease-cinema); will-change: transform; } .intro-team--hero .intro-team__photo:hover { transform: none; } /* Halo doré statique derrière la photo (animation supprimée pour la fluidité) Le mouvement vient désormais du léger float des badges, pas du halo. */ .intro-team--hero .intro-team__photo::before { content: ''; position: absolute; inset: -10% -8% -6% -8%; border-radius: 36px; background: radial-gradient(60% 60% at 50% 50%, rgba(200, 161, 101, 0.22) 0%, transparent 70%); z-index: 0; pointer-events: none; transform: translateZ(0); } /* L'image elle-même : carte avec ombre cinéma et léger tilt */ .intro-team--hero .intro-team__photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; border-radius: 28px; box-shadow: 0 30px 60px -15px rgba(14, 26, 44, 0.35), 0 60px 120px -30px rgba(14, 26, 44, 0.45), 0 0 0 1px rgba(200, 161, 101, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.08); transform: rotate(-1.5deg); transition: transform 800ms var(--ease-cinema), box-shadow 800ms var(--ease-cinema); } .intro-team--hero .intro-team__photo:hover img { transform: rotate(-0.5deg) translateY(-6px); box-shadow: 0 40px 80px -15px rgba(14, 26, 44, 0.42), 0 80px 160px -30px rgba(14, 26, 44, 0.55), 0 0 0 1px rgba(200, 161, 101, 0.30), 0 20px 40px rgba(200, 161, 101, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .intro-team--hero .intro-team__photo::after { content: ''; position: absolute; inset: 0; border-radius: 28px; background: linear-gradient(160deg, transparent 50%, rgba(14, 26, 44, 0.18) 100%); pointer-events: none; z-index: 2; transform: rotate(-1.5deg); } /* ─── Badges flottants sur la photo équipe ─── */ .intro-team__badges { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .intro-team__badge { position: absolute; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(14, 26, 44, 0.14), 0 24px 48px -16px rgba(14, 26, 44, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.8); display: flex; align-items: center; gap: 12px; font-size: 0.86rem; color: var(--color-ink-2); pointer-events: auto; will-change: transform; } .intro-team__badge strong { display: block; font-weight: 700; color: var(--color-ink-2); line-height: 1.2; font-size: 0.92rem; } .intro-team__badge span { display: block; color: var(--color-muted); font-size: 0.78rem; line-height: 1.3; margin-top: 2px; } .intro-team__badge-icon { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: #FFFFFF; box-shadow: 0 4px 12px rgba(200, 161, 101, 0.40); } .intro-team__badge--top { top: 8%; left: -14%; animation: float-badge-1 7s ease-in-out infinite; } .intro-team__badge--mid { top: 48%; right: -14%; animation: float-badge-2 8s ease-in-out infinite; } .intro-team__badge--bottom { bottom: 6%; left: -8%; animation: float-badge-3 6.5s ease-in-out infinite; } @keyframes float-badge-1 { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } } @keyframes float-badge-2 { 0%, 100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-12px) rotate(-1deg); } } @keyframes float-badge-3 { 0%, 100% { transform: translateY(0) rotate(-0.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } } /* ─── Titre kinétique : révèle ligne par ligne au load ─── */ .intro-team--hero .intro-team__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.028em; font-weight: 500; margin: 0; color: var(--color-ink-2); } .intro-team--hero .intro-team__title-em { display: block; margin-top: 18px; font-style: italic; font-weight: 400; } /* Le gradient or doit être appliqué SUR le span interne (porteur de l'animation kinétique). Sinon le span hérite color: transparent sans avoir de background, et devient totalement invisible. IMPORTANT : on combine les deux animations (kinetic-rise + gold-shimmer) en une seule déclaration, sinon la dernière écrase la première. */ .intro-team--hero .intro-team__title-em > span { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 200%; animation: kinetic-rise 1100ms var(--ease-cinema) 540ms forwards, gold-shimmer 8s ease-in-out 1700ms infinite; } @keyframes gold-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Animation au load : chaque ligne du titre se révèle */ .kinetic-line { display: block; overflow: hidden; } .kinetic-line > span { display: inline-block; transform: translateY(110%); opacity: 0; animation: kinetic-rise 1100ms var(--ease-cinema) forwards; } .kinetic-line:nth-child(1) > span { animation-delay: 100ms; } .kinetic-line:nth-child(2) > span { animation-delay: 320ms; } .kinetic-line:nth-child(3) > span { animation-delay: 540ms; } @keyframes kinetic-rise { to { transform: translateY(0); opacity: 1; } } /* ─── Eyebrow premium avec glow ─── */ .intro-team--hero .eyebrow { background: linear-gradient(135deg, #FFFFFF 0%, #FAF7F0 100%); box-shadow: 0 1px 2px rgba(14, 26, 44, 0.06), 0 8px 24px rgba(14, 26, 44, 0.08), 0 0 0 1px rgba(200, 161, 101, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); } /* ─── Lead avec accent doré subtil ─── */ .intro-team--hero .intro-team__text { font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.75; color: var(--color-muted); max-width: 56ch; } .intro-team--hero .intro-team__text strong { color: var(--color-ink-2); font-weight: 600; } /* ─── Bullets avec icônes premium ─── */ .intro-team--hero .intro-team__bullets { padding-top: 24px; border-top: 1px solid rgba(229, 222, 207, 0.5); } .intro-team--hero .intro-team__bullets li { color: var(--color-ink); font-weight: 500; } .intro-team--hero .intro-team__bullets .check { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: #FFFFFF; box-shadow: 0 2px 6px rgba(200, 161, 101, 0.30); } /* ─── Bouton appel premium avec ring qui pulse ─── Le ring est désormais un pseudo-élément en position absolue qui s'anime en transform/opacity (compositing only) — beaucoup moins coûteux que l'ancien box-shadow infinite qui forçait du repaint sur tout le bouton. */ .btn--call-hero { position: relative; background: linear-gradient(135deg, var(--color-ink-2) 0%, var(--color-ink) 50%, var(--color-ink-2) 100%); color: #FFFFFF; box-shadow: 0 8px 16px rgba(14, 26, 44, 0.20), 0 24px 48px -12px rgba(14, 26, 44, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10); overflow: visible; isolation: isolate; } /* Ring qui pulse — pseudo-element, compositing-friendly */ .btn--call-hero::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(200, 161, 101, 0.55); opacity: 0; pointer-events: none; z-index: -2; animation: call-ring 3s ease-out infinite; transform: translateZ(0); } @keyframes call-ring { 0% { transform: scale(1); opacity: 0.6; } 80% { transform: scale(1.18); opacity: 0; } 100% { transform: scale(1.18); opacity: 0; } } body.is-scrolling .btn--call-hero::after { animation-play-state: paused; } /* Hover : on bascule sur fond doré */ .btn--call-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); opacity: 0; transition: opacity 320ms var(--ease-cinema); z-index: -1; border-radius: inherit; } .btn--call-hero:hover { color: var(--color-ink-2); transform: translateY(-3px); } .btn--call-hero:hover::before { opacity: 1; } /* ═══ BANDEAU statique de réassurance sous le hero ═══════════════════ Mêmes couleurs que l'ancien ticker (fond ink-2 + accents dorés), mais centré et fixe — plus de saccade pendant le scroll. */ .cinema-ticker { background: var(--color-ink-2); color: rgba(255, 255, 255, 0.85); padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: relative; } /* Liseré doré subtil en haut et en bas */ .cinema-ticker::before, .cinema-ticker::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 161, 101, 0.55), transparent); pointer-events: none; } .cinema-ticker::before { top: 0; } .cinema-ticker::after { bottom: 0; } .cinema-ticker__static { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; flex-wrap: wrap; } .cinema-ticker__icon { color: var(--color-primary); display: inline-flex; align-items: center; line-height: 0; filter: drop-shadow(0 0 6px rgba(200, 161, 101, 0.35)); } .cinema-ticker__text { font-family: var(--font-sans); font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 500; letter-spacing: 0.02em; } .cinema-ticker__text strong { color: var(--color-primary); font-weight: 700; font-family: var(--font-serif); font-style: italic; font-size: 1.1em; margin-left: 4px; } /* ═══ TRUST STRIP : compteurs animés ═════════════════════════════════ */ .trust-strip { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); padding: clamp(40px, 5vw, 64px) 0; border: none; border-bottom: 1px solid var(--color-border); position: relative; } .trust-strip::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary-light), transparent); opacity: 0.5; } .trust-strip__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .trust-strip__item { position: relative; padding: 0 20px; text-align: center; } .trust-strip__item:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 60%; background: linear-gradient(180deg, transparent, var(--color-border-2), transparent); } .trust-strip__item strong { display: block; font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; color: var(--color-ink-2); letter-spacing: -0.03em; margin-bottom: 8px; background: linear-gradient(135deg, var(--color-ink-2) 0%, var(--color-ink) 50%, var(--color-primary-dark) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .trust-strip__item span { font-size: 0.88rem; color: var(--color-muted); font-weight: 500; letter-spacing: 0.01em; } /* ═══ SECTION HEAD CINEMA ════════════════════════════════════════════ */ .section__title { font-weight: 500; text-wrap: balance; } .section__title-em { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 200%; animation: gold-shimmer 8s ease-in-out infinite; } /* ═══ SERVICES : cartes vitrine (refonte complète) ═══════════════════ Cartes plus chaleureuses, avec une teinte d'accent par carte (subtil), un fond légèrement gradué, et des illustrations enrichies. */ .services-preview { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-warm) 100%); position: relative; overflow: hidden; } .services-preview::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 50% at 80% 20%, rgba(200, 161, 101, 0.06) 0%, transparent 60%), radial-gradient(40% 50% at 20% 80%, rgba(31, 78, 95, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } .services-preview > .container { position: relative; z-index: 1; } .services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; perspective: 1200px; } .service-card { /* Couleur d'accent (icône hover, halos, liseré) */ --accent: var(--color-primary); --accent-light: var(--color-primary-light); --accent-dark: var(--color-primary-dark); /* Fond de la carte : VRAI gradient coloré, pas un ivoire fadé */ --bg-1: #F9EAC9; --bg-2: #E5C383; /* Couleur de la "scène" derrière l'icône */ --scene-1: rgba(255, 255, 255, 0.55); --scene-2: rgba(200, 161, 101, 0.18); /* Numéro géant : couleur du gradient or */ --num-from: rgba(200, 161, 101, 0.85); --num-to: rgba(200, 161, 101, 0.20); position: relative; padding: 28px 28px 30px; background: linear-gradient(155deg, var(--bg-1) 0%, var(--bg-2) 100%); border: 1px solid rgba(200, 161, 101, 0.35); border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 14px; isolation: isolate; box-shadow: 0 4px 12px -2px rgba(14, 26, 44, 0.08), 0 16px 40px -12px rgba(14, 26, 44, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55); transition: transform 500ms var(--ease-cinema), box-shadow 500ms var(--ease-cinema), border-color 400ms var(--ease-cinema); will-change: transform; contain: layout paint; } /* Pattern décoratif en arrière-plan : nuage de points dorés + halo radial. C'est ce qui donne du caractère à la carte sans distraire du texte. */ .service-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(200, 161, 101, 0.30) 0%, transparent 60%), radial-gradient(circle at 30% 40%, rgba(200, 161, 101, 0.45) 0.8px, transparent 1.4px) 0 0 / 22px 22px; opacity: 0.85; pointer-events: none; z-index: -1; } /* Liseré supérieur doré qui se déploie au hover */ .service-card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(0.3); transform-origin: center; transition: transform 600ms var(--ease-cinema); } .service-card > * { position: relative; z-index: 1; } /* ─── Variantes par carte : chaque service a SA palette de fond ─── */ .service-card--sites { --bg-1: #FCEDD3; /* crème lumineux */ --bg-2: #E8C896; /* miel doré */ --scene-1: rgba(255, 246, 220, 0.85); --scene-2: rgba(200, 161, 101, 0.30); } .service-card--shop { --bg-1: #F7DCC8; /* pêche tendre */ --bg-2: #D9A57C; /* terre cuite */ --scene-1: rgba(255, 232, 210, 0.85); --scene-2: rgba(184, 122, 82, 0.32); } .service-card--apps { --bg-1: #DCE5E0; /* sauge clair */ --bg-2: #A8C4BC; /* eucalyptus */ --scene-1: rgba(232, 244, 240, 0.85); --scene-2: rgba(80, 130, 110, 0.28); } .service-card--solutions { --bg-1: #E8DEF0; /* lavande pâle */ --bg-2: #B89FD4; /* améthyste */ --scene-1: rgba(245, 235, 255, 0.85); --scene-2: rgba(140, 100, 180, 0.30); } /* Numéro géant : élément graphique fort MAIS contenu dans la carte. Position et taille calibrées pour qu'il soit entièrement visible. */ .service-card__big-num { position: absolute; top: 10px; right: 16px; font-family: var(--font-serif); font-weight: 700; font-size: clamp(5rem, 8.5vw, 7rem); line-height: 0.85; background: linear-gradient(180deg, var(--num-from) 0%, var(--num-to) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.50); letter-spacing: -0.05em; pointer-events: none; user-select: none; transition: transform 600ms var(--ease-cinema), opacity 500ms var(--ease-cinema); z-index: 0; filter: drop-shadow(0 4px 8px rgba(120, 80, 30, 0.20)); } .service-card:hover .service-card__big-num { transform: scale(1.10) translateY(-2px) translateX(-2px); } .service-card:hover { transform: translateY(-10px); border-color: rgba(200, 161, 101, 0.65); box-shadow: 0 18px 36px -8px rgba(14, 26, 44, 0.18), 0 36px 72px -16px rgba(14, 26, 44, 0.26), 0 8px 24px rgba(200, 161, 101, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7); color: inherit; } .service-card:hover::after { transform: scaleX(1); } /* Icône : "scène" colorée en arrière-fond + cadre net */ .service-card__icon { position: relative; width: 92px; height: 92px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, var(--scene-1) 0%, transparent 70%), linear-gradient(135deg, #FFFFFF 0%, var(--scene-1) 100%); border: 1px solid rgba(255, 255, 255, 0.85); color: var(--color-ink-2); box-shadow: 0 6px 16px rgba(14, 26, 44, 0.12), 0 16px 32px -10px var(--scene-2), inset 0 1px 0 rgba(255, 255, 255, 0.95); margin-bottom: 4px; transition: transform 500ms var(--ease-cinema), background 500ms var(--ease-cinema), color 500ms var(--ease-cinema), box-shadow 500ms var(--ease-cinema); } .service-card:hover .service-card__icon { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); color: #FFFFFF; border-color: var(--accent); transform: rotate(-4deg) scale(1.08); box-shadow: 0 10px 28px rgba(200, 161, 101, 0.55), 0 20px 50px rgba(200, 161, 101, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.40); } .service-card__title { font-family: var(--font-serif); font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 600; color: var(--color-ink-2); letter-spacing: -0.018em; line-height: 1.2; margin: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } /* Texte : on assombrit légèrement et on ajoute un voile blanc derrière pour garantir la lisibilité sur les fonds plus colorés. */ .service-card__text { color: rgba(14, 26, 44, 0.78); line-height: 1.65; font-size: 0.96rem; margin: 0; flex: 1; font-weight: 500; } .service-card__more { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink-2); font-weight: 700; font-size: 0.95rem; margin-top: 6px; padding: 8px 14px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 999px; align-self: flex-start; transition: gap 320ms var(--ease-cinema), background 320ms var(--ease-cinema), color 320ms var(--ease-cinema), transform 320ms var(--ease-cinema); } .service-card:hover .service-card__more { gap: 14px; background: var(--color-ink-2); color: #FFFFFF; transform: translateX(4px); } .service-card__more::after { content: '→'; display: inline-block; transition: transform 320ms var(--ease-cinema); } .service-card:hover .service-card__more::after { transform: translateX(4px); } /* ═══ POURQUOI NOUS : timeline verticale dorée ═══════════════════════ */ .pourquoi { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-warm) 60%, var(--color-bg) 100%); position: relative; overflow: hidden; } .pourquoi::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 40% at 0% 30%, rgba(200, 161, 101, 0.08) 0%, transparent 60%), radial-gradient(40% 30% at 100% 70%, rgba(31, 78, 95, 0.06) 0%, transparent 60%); pointer-events: none; } /* La nouvelle structure n'a plus de visual à droite : on centre le contenu sur une seule colonne large pour donner de l'espace au texte. */ .pourquoi__inner { position: relative; z-index: 1; display: block; max-width: 920px; margin: 0 auto; } .pourquoi__content { max-width: 100%; } /* La liste devient une vraie timeline */ .pourquoi__list { position: relative; padding-left: 0; counter-reset: timeline; } /* Ligne verticale dorée qui se remplit au scroll */ .pourquoi__list::before { content: ''; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 2px; background: var(--color-border-2); border-radius: 2px; z-index: 0; } .pourquoi__list::after { content: ''; position: absolute; left: 22px; top: 22px; width: 2px; height: var(--timeline-progress, 0%); background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark)); border-radius: 2px; z-index: 1; box-shadow: 0 0 12px rgba(200, 161, 101, 0.50); transition: height 200ms linear; max-height: calc(100% - 44px); } .pourquoi__list li { position: relative; padding: 18px 0 18px 70px; align-items: flex-start; display: block; } .pourquoi__num { position: absolute; left: 0; top: 18px; width: 46px; height: 46px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-2); color: var(--color-muted); font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; z-index: 2; transition: all 500ms var(--ease-cinema); box-shadow: 0 1px 2px rgba(14, 26, 44, 0.04), 0 6px 16px rgba(14, 26, 44, 0.06); } .pourquoi__list li.is-visible .pourquoi__num { border-color: var(--color-primary); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: #FFFFFF; box-shadow: 0 4px 12px rgba(200, 161, 101, 0.40), 0 12px 32px rgba(200, 161, 101, 0.25), 0 0 0 6px rgba(200, 161, 101, 0.12); transform: scale(1.05); } .pourquoi__list h3 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; color: var(--color-ink-2); letter-spacing: -0.015em; margin-bottom: 6px; } .pourquoi__list p { color: var(--color-muted); font-size: 0.98rem; line-height: 1.7; } /* ═══ CTA-CALL : gradient mesh animé ═════════════════════════════════ */ .cta-call__inner { background: radial-gradient(60% 50% at 20% 0%, rgba(200, 161, 101, 0.18) 0%, transparent 60%), radial-gradient(60% 60% at 80% 100%, rgba(31, 78, 95, 0.32) 0%, transparent 60%), linear-gradient(135deg, var(--color-ink-2) 0%, var(--color-ink-3) 100%); background-size: 200% 200%, 200% 200%, 100% 100%; animation: cta-mesh-shift 18s ease-in-out infinite alternate; box-shadow: 0 24px 48px rgba(14, 26, 44, 0.20), 0 60px 120px -24px rgba(14, 26, 44, 0.50), 0 0 0 1px rgba(200, 161, 101, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10); } @keyframes cta-mesh-shift { 0% { background-position: 0% 0%, 100% 100%, 0 0; } 100% { background-position: 100% 100%, 0% 0%, 0 0; } } .cta-call__inner::before { background: radial-gradient(circle, rgba(200, 161, 101, 0.30), transparent 70%); animation: cta-halo-pulse 6s ease-in-out infinite; } @keyframes cta-halo-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } .cta-call__phone { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); box-shadow: 0 8px 16px rgba(200, 161, 101, 0.30), 0 16px 40px rgba(200, 161, 101, 0.25); position: relative; overflow: hidden; } .cta-call__phone::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%); transform: translateX(-100%); transition: transform 800ms var(--ease-cinema); } .cta-call__phone:hover::before { transform: translateX(100%); } .cta-call__phone-icon { background: rgba(255, 255, 255, 0.25); box-shadow: 0 4px 12px rgba(14, 26, 44, 0.20); } /* ═══ TÉMOIGNAGES : design narratif premium ══════════════════════════ */ .temoignages { background: var(--color-surface); position: relative; overflow: hidden; } .temoignages::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 30% at 50% 0%, rgba(200, 161, 101, 0.06) 0%, transparent 60%); pointer-events: none; } .temoignages > .container { position: relative; z-index: 1; } .temoignages__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; } .testimonial { position: relative; padding: 40px 32px 32px; background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%); border: 1px solid var(--color-border); border-radius: 20px; transition: transform 500ms var(--ease-cinema), box-shadow 500ms var(--ease-cinema), border-color 400ms var(--ease-cinema); overflow: hidden; } .testimonial::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 0%, rgba(200, 161, 101, 0.10) 0%, transparent 70%); opacity: 0; transition: opacity 500ms var(--ease-cinema); pointer-events: none; } .testimonial:hover { transform: translateY(-8px); border-color: rgba(200, 161, 101, 0.35); box-shadow: 0 20px 40px -10px rgba(14, 26, 44, 0.16), 0 40px 80px -20px rgba(14, 26, 44, 0.24), 0 8px 24px rgba(200, 161, 101, 0.12); } .testimonial:hover::before { opacity: 1; } .testimonial > * { position: relative; } .testimonial__quote { top: 14px; left: 26px; font-size: 6rem; color: var(--color-primary); opacity: 0.20; font-family: var(--font-serif); font-weight: 700; line-height: 1; } .testimonial__stars { display: flex; gap: 4px; margin-bottom: 16px; color: var(--color-primary); } .testimonial__stars svg { filter: drop-shadow(0 1px 2px rgba(200, 161, 101, 0.30)); } .testimonial__text { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.6; color: var(--color-ink-2); font-style: italic; margin: 0 0 24px; font-weight: 400; } .testimonial__text::before { content: '« '; color: var(--color-primary); } .testimonial__text::after { content: ' »'; color: var(--color-primary); } .testimonial__author { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--color-border); } .testimonial__avatar { width: 48px; height: 48px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: #FFFFFF; box-shadow: 0 4px 12px rgba(200, 161, 101, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30); font-weight: 700; font-size: 1.15rem; } .testimonial__author strong { font-size: 0.98rem; color: var(--color-ink-2); font-weight: 600; } .testimonial__author span { font-size: 0.84rem; color: var(--color-muted); } /* ═══ MAGNETIC BUTTONS ═══════════════════════════════════════════════ */ .is-magnetic { transition: transform 200ms var(--ease-cinema); will-change: transform; } /* ═══ REVEAL STAGGER amélioré ════════════════════════════════════════ */ .reveal { transition: opacity 900ms var(--ease-cinema), transform 900ms var(--ease-cinema); transform: translateY(32px); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Variantes avec direction */ .reveal--left { transform: translate(-32px, 0); } .reveal--right { transform: translate(32px, 0); } .reveal--scale { transform: scale(0.96); opacity: 0; } .reveal--left.is-visible, .reveal--right.is-visible, .reveal--scale.is-visible { transform: translate(0, 0) scale(1); opacity: 1; } /* ═══ TRUST STRIP : compteurs ════════════════════════════════════════ */ .counter[data-counter] { font-variant-numeric: tabular-nums; } /* ═══ RESPONSIVE CINEMA ══════════════════════════════════════════════ */ /* ─── DESKTOP (≥881px) : refonte premium du hero ────────────────────── Objectif : présentation éditoriale équilibrée, sans espace mort. Principes : - Les deux colonnes (photo / texte) s'étirent sur la même hauteur (`align-items: stretch`) → plus d'espace vide au-dessus/dessous de la photo. - Le bloc texte reste centré verticalement dans cette hauteur (`align-self: center`) → rythme aéré, lecture confortable. - La photo n'a plus de ratio fixe : elle prend la hauteur naturelle du contenu, avec un min/max-height pour rester proportionnée et impactante. - `object-position: center` pour afficher la photo entière (toute l'équipe visible, plus de crop sur le haut). - Padding vertical resserré : moins d'air mort en début et fin de hero. - Bulle "horaires" cachée — la bulle "5 talents" reste. - Titre légèrement renforcé pour un poids éditorial premium. - Eyebrow et bullets respirent un poil plus. Mobile (≤880px) reste strictement intact (aucune règle ne s'applique). */ @media (min-width: 881px) { .intro-team--hero { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); } /* Grid : on aligne les deux colonnes sur la même hauteur. */ .intro-team--hero .intro-team__inner { align-items: stretch; grid-template-columns: 1.08fr 1fr; gap: clamp(48px, 6vw, 96px); } /* Photo équipe : ratio libre, hauteur calée sur le contenu, encadrée. */ .intro-team--hero .intro-team__photo { aspect-ratio: auto; height: 100%; min-height: 520px; max-height: 680px; } .intro-team--hero .intro-team__photo img { object-position: center center; } /* Bloc texte : verticalement centré dans la hauteur de la rangée. */ .intro-team--hero .intro-team__content { align-self: center; gap: 26px; } /* Léger ajustement éditorial : titre un poil plus présent. */ .intro-team--hero .intro-team__title { font-size: clamp(2.4rem, 4.8vw, 3.8rem); line-height: 1.02; letter-spacing: -0.03em; } /* Bullets de réassurance : plus d'espace pour un effet premium. */ .intro-team--hero .intro-team__bullets { margin-top: 4px; padding-top: 22px; gap: 12px 28px; } /* 4ème bullet "Une équipe de 5 talents" : affiché uniquement sur desktop pour compenser visuellement la suppression de la bulle "5 talents". Le message reste donc cohérent entre les deux formats. */ .intro-team__bullets-desktop { display: inline-flex !important; } /* Sur desktop, la photo est cadrée serrée (3 visages visibles sur 5) à cause des contraintes géométriques du layout (titre 3 lignes + 2 CTAs longs forcent une colonne texte haute, et donc une photo plutôt carrée qui rogne les côtés). Pour éviter toute contradiction visuelle entre l'image et le badge "5 talents", on masque les deux bulles flottantes : l'info "5 talents" est rappelée dans la liste de bullets ci-dessus, et les horaires sont rappelés dans le bandeau "6 j/7 · Lun – Sam · 8h–20h" juste en dessous. Mobile (≤880px) reste strictement intact : les deux bulles s'affichent toujours sur les petits écrans, où la photo en 5/4 laisse voir tout le monde et où l'overlay décoratif a tout son sens. */ .intro-team__badge--mid, .intro-team__badge--bottom { display: none; } } @media (max-width: 1024px) { .intro-team--hero .intro-team__inner { grid-template-columns: 1fr; gap: 56px; } .intro-team--hero .intro-team__photo { max-width: 480px; margin: 0 auto; aspect-ratio: 4 / 3; } .intro-team__badge--top { left: -8%; } .intro-team__badge--mid { right: -8%; } .intro-team__badge--bottom { left: -4%; } .pourquoi__inner { grid-template-columns: 1fr; gap: 56px; } } @media (max-width: 880px) { /* Sur tablette : on reste sur 3 colonnes pour garder l'unité */ .trust-strip__inner { grid-template-columns: repeat(3, 1fr); gap: 16px; } .trust-strip__item:not(:last-child)::after { display: block; } .cinema-ticker { padding: 18px 0; } } @media (max-width: 720px) { /* Photo plus aérée + badges plus discrets sur mobile */ .intro-team--hero { padding: 40px 0 56px; } .intro-team--hero .intro-team__photo { aspect-ratio: 5 / 4; } .intro-team__badge--top { top: 4%; left: 0; padding: 10px 12px; font-size: 0.78rem; } .intro-team__badge--mid { display: none; } .intro-team__badge--bottom { bottom: 4%; right: 0; left: auto; padding: 10px 12px; font-size: 0.78rem; } .intro-team__badge-icon { width: 30px; height: 30px; } .service-card { padding: 32px 24px 28px; } .service-card__big-num { font-size: 4.5rem; } .trust-strip__inner { grid-template-columns: 1fr; gap: 18px; } .trust-strip__item:not(:last-child)::after { display: none; } .trust-strip__item { padding: 0 8px; border-bottom: 1px solid var(--color-border); padding-bottom: 18px; } .trust-strip__item:last-child { border-bottom: 0; padding-bottom: 0; } .trust-strip__item strong { font-size: 1.7rem; } .pourquoi__list::before, .pourquoi__list::after { left: 18px; } .pourquoi__list li { padding-left: 60px; } .pourquoi__num { width: 38px; height: 38px; font-size: 0.85rem; } } /* (suppression du media 540px : devenu inutile depuis le passage à 3 colonnes) */ /* ═══ OPTIMISATION DU SCROLL : CSS containment ════════════════════════ `contain: layout paint` isole chaque grosse section pour que le navigateur ne recalcule pas la mise en page globale au moindre repaint intérieur. C'est le fix le plus sûr pour la fluidité du scroll, sans les effets de bord de content-visibility (sauts de scroll possibles). */ .services-preview, .pourquoi, .cta-call, .temoignages, .cinema-ticker, .trust-strip, .intro-team--hero { contain: layout paint; } /* ═══ MOBILE SCROLL PERFORMANCE (≤880px) ════════════════════════════ Sur mobile, on s'aligne sur l'objectif "100% responsive, scroll fluide dès la première frame, zéro tremblement". On retire systématiquement tout ce qui coûte cher au GPU et qu'aucun visiteur mobile n'ira jamais admirer en détail. L'identité visuelle est totalement préservée : mêmes couleurs, mêmes éléments, mêmes layouts — juste sans les effets décoratifs trop lourds. Ce qu'on désactive et pourquoi : 1. backdrop-filter sur tout élément fixe (header, mobile-cta) et sur les badges. C'est le filtre le plus coûteux du Web. Sur mobile c'est le coupable n°1 du jank au scroll. 2. filter: blur(80px) des hero__blob et filter: blur(60px) de l'aurora. Ces calques flous ne s'animent même pas sur mobile (déjà figés via animation: none) mais coûtent quand même de la mémoire vidéo. On les cache complètement. 3. Toutes les animations infinies, sans exception : - eyebrow__dot pulse (box-shadow, le pire à animer) - intro-team__title-em > span gold-shimmer - section__title-em gold-shimmer - btn--call-hero::after call-ring - cta-call mesh-shift / halo-pulse - cw-pulse du chatbot 4. Le rotate -1.5° et les ombres triple-couche de la photo équipe. Une rotation 3D + 4 box-shadow sur une grosse image = le pire combo pour un compositing mobile. On garde une seule ombre douce. 5. La transition du header (background, border, box-shadow) déclenchée à chaque passage de 8 px de scroll. Pas de transition mobile, le header reste consistant. 6. Les .reveal : 320 ms opacity uniquement, pas de translateY (qui crée une couche GPU au moment où le scroll commence). ════════════════════════════════════════════════════════════════════ */ @media (max-width: 880px) { /* ── 1. Backdrop-filters supprimés ─────────────────────────────── */ .site-header, .site-header.is-scrolled, .mobile-cta, .intro-team__badge, .humain__badge { backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header, .site-header.is-scrolled { background: rgba(247, 244, 237, 0.98); transition: none; } .mobile-cta { background: rgba(247, 244, 237, 0.98); } .intro-team__badge, .humain__badge { background: #FFFFFF; } /* ── 2. Aurora et hero__blob retirés (calques flous coûteux) ──── */ .aurora, .hero__blob, .hero__bg, .page-hero__bg { display: none !important; } /* ── 3. Toutes les animations infinies supprimées ─────────────── */ .eyebrow__dot, .intro-team__badge, .intro-team__badge--top, .intro-team__badge--mid, .intro-team__badge--bottom, .section__title-em, .intro-team--hero .intro-team__title-em > span, .btn--call-hero::after, .cta-call__inner, .cta-call__inner::before, .cw-axelle__bubble-pulse { animation: none !important; will-change: auto; } /* Le titre kinétique en italique conserve sa montée (kinetic-rise, one-shot) mais perd le shimmer infini. La transparence du gradient texte est conservée par les autres déclarations. NOTE : on doit redéclarer l'animation kinetic-rise seule pour que le span apparaisse correctement (sinon il reste à translateY 110%). */ .intro-team--hero .intro-team__title-em > span { animation: kinetic-rise 1100ms var(--ease-cinema) 540ms forwards !important; } /* ── 4. Photo équipe simplifiée (rotation + ombres allégées) ──── */ .intro-team--hero .intro-team__photo img { transform: none; box-shadow: 0 12px 24px -8px rgba(14, 26, 44, 0.25), 0 0 0 1px rgba(200, 161, 101, 0.12); } .intro-team--hero .intro-team__photo::after { transform: none; } .intro-team--hero .intro-team__photo:hover img { transform: none; } /* ── 5. Reveal : opacity-only, court ───────────────────────────── */ .reveal, .reveal--left, .reveal--right, .reveal--scale { transition: opacity 320ms var(--ease-cinema); transform: none; } .reveal.is-visible, .reveal--left.is-visible, .reveal--right.is-visible, .reveal--scale.is-visible { transform: none; opacity: 1; } /* ── 6. Pastille verte du chatbot : statique ─────────────────── */ .cw-axelle__bubble-pulse { box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.15); } /* ── 7. will-change inutile sur tactile ──────────────────────── Plusieurs éléments ont `will-change: transform` en prévision d'un hover/tilt/magnetic JS qui ne se déclenche jamais sur tactile (le JS vérifie `pointer: coarse`). Résultat : on crée des couches GPU qu'on ne transformera jamais — gaspillage de mémoire vidéo qui peut contribuer au jank. On reset. */ .intro-team--hero .intro-team__photo, .service-card, .is-magnetic { will-change: auto; } } /* ═══ ACCESSIBILITÉ : reduced motion ═════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after, .aurora__layer, .intro-team__badge, .intro-team--hero .intro-team__photo::before, .cta-call__inner, .cta-call__inner::before, .btn--call-hero, .intro-team--hero .intro-team__title-em, .section__title-em { animation: none !important; } .kinetic-line > span { animation: none !important; transform: none; opacity: 1; } .spotlight { display: none; } } /* ═══ FIN CINEMA ═════════════════════════════════════════════════════ */