/* ============================================================ mtc-portfolio — Design system & styles communs Hérité de l'identité violet/teal/dark, partagé par tous les onglets. ============================================================ */ :root { --dark: #1B0442; --primary: #5818FF; --teal: #00D8A2; --lavender: #E6DEFA; --light: #F8F5FF; --white: #FFFFFF; --text: #1B0442; --grey: #6B7280; --purple: #7C3AED; --blue: #2563EB; --red: #DC2626; --shadow: 0 2px 16px rgba(27,4,66,0.10); --shadow-lg: 0 18px 50px -12px rgba(27,4,66,0.35); --radius: 14px; --surface-bg: rgba(22,10,46,0.82); --surface-border: 1px solid rgba(255,255,255,0.14); --surface-bezel: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.34); --scrim-dark: rgba(0,0,0,0.30); --font-heading: 'Kanit', sans-serif; --font-body: 'Inter', sans-serif; --maxw: 1040px; --nav-h: 62px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); /* Fond sombre par défaut : évite tout flash clair pendant que le routeur SPA remplace le body (le .cv-bg est momentanément absent entre deux pages). */ background: #0c0820; } body { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--text); background: transparent; -webkit-font-smoothing: antialiased; position: relative; min-height: 100vh; display: flex; flex-direction: column; } /* Le contenu principal occupe l'espace dispo → footer collé en bas */ body > main { flex: 1 0 auto; } .site-footer { flex-shrink: 0; } a { color: inherit; } img { max-width: 100%; display: block; } /* Constellation animée pleine page (points + lignes réactifs à la souris). Posée sur par app.js (persistante en SPA), au-dessus du .cv-bg. */ #bgCanvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.9; } /* ── Fond coloré Liquid Glass (commun) ────────────────────────── Dégradé profond + blobs vifs animés. Recouvre le fond clair sur les pages qui incluent
. Texte de ces pages en clair. */ html:has(.cv-bg) { background: #0c0820; } .cv-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, #2a1457 0%, #160a2e 45%, #0c0820 100%); } /* Mesh gradient animé : le fond "respire" — 3 nappes colorées qui dérivent lentement (background-position seulement = GPU, jamais filter:blur). Posé en ::before pour ne pas toucher le gradient de base, sous les blobs. */ .cv-bg::before { content: ''; position: absolute; inset: -10%; z-index: 0; background: radial-gradient(40% 45% at 25% 30%, rgba(124,58,237,0.34), transparent 60%), radial-gradient(38% 42% at 78% 25%, rgba(0,216,162,0.26), transparent 60%), radial-gradient(44% 48% at 60% 80%, rgba(37,99,235,0.30), transparent 62%); background-size: 160% 160%, 150% 150%, 170% 170%; background-position: 0% 0%, 100% 0%, 50% 100%; animation: cv-mesh 16s ease-in-out infinite alternate; } @supports (background: radial-gradient(in oklch, red, blue)) { .cv-bg::before { background: radial-gradient(40% 45% at 25% 30%, oklch(0.55 0.2 295 / 0.36), transparent 60%), radial-gradient(38% 42% at 78% 25%, oklch(0.78 0.15 175 / 0.28), transparent 60%), radial-gradient(44% 48% at 60% 80%, oklch(0.55 0.2 260 / 0.32), transparent 62%); background-size: 160% 160%, 150% 150%, 170% 170%; background-position: 0% 0%, 100% 0%, 50% 100%; } } /* Amplitudes plus larges → mouvement nettement visible (toujours GPU, position only) */ @keyframes cv-mesh { 0% { background-position: 0% 0%, 100% 0%, 50% 100%; } 50% { background-position: 70% 45%, 30% 60%, 20% 40%; } 100% { background-position: 25% 80%, 90% 20%, 80% 70%; } } @media (prefers-reduced-motion: reduce) { .cv-bg::before { animation: none; } } .cv-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.85; will-change: transform; } .cv-blob-1 { width: 42vw; height: 42vw; left: -6vw; top: 4vh; background: radial-gradient(circle at 35% 35%, #ff7a3c, #d6224e 70%); animation: cv-blob-a 26s ease-in-out infinite alternate; } .cv-blob-2 { width: 40vw; height: 40vw; right: -8vw; top: -6vh; background: radial-gradient(circle at 50% 50%, #c026d3, #7c3aed 72%); animation: cv-blob-b 30s ease-in-out infinite alternate; } .cv-blob-3 { width: 38vw; height: 38vw; left: 14vw; bottom: -10vh; background: radial-gradient(circle at 50% 50%, #2563eb, #1e3a8a 72%); animation: cv-blob-c 28s ease-in-out infinite alternate; } .cv-blob-4 { width: 34vw; height: 34vw; right: 4vw; bottom: -6vh; background: radial-gradient(circle at 50% 50%, #06b6d4, #0e7490 72%); animation: cv-blob-a 32s ease-in-out infinite alternate-reverse; } .cv-blob-5 { width: 30vw; height: 30vw; left: 38vw; top: 30vh; background: radial-gradient(circle at 50% 50%, #f59e0b, #ec4899 72%); animation: cv-blob-b 24s ease-in-out infinite alternate-reverse; } @keyframes cv-blob-a { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(8vw,6vh) scale(1.15)} } @keyframes cv-blob-b { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-7vw,8vh) scale(1.1)} } @keyframes cv-blob-c { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(6vw,-7vh) scale(1.12)} } @media (prefers-reduced-motion: reduce) { .cv-blob { animation: none; } } /* ── Layout ─────────────────────────────────────────────────── */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 2rem; } @media (max-width: 600px) { .container { padding: 0 1.25rem; } } .section-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.5rem; } .section-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.75rem; color: var(--dark); margin-bottom: 1.5rem; } /* ── Header / Nav (partagé) — pilule Liquid Glass flottante ───── */ .site-nav { position: sticky; top: 0.9rem; z-index: 100; margin: 0.9rem auto 0; width: calc(100% - 2.4rem); max-width: 1100px; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.6rem 0 1.25rem; border-radius: 999px; /* Verre translucide */ background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(1.05); backdrop-filter: blur(16px) saturate(160%) brightness(1.05); border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 16px 40px -18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.5); transition: transform 0.35s cubic-bezier(.22,1,.36,1), opacity 0.35s ease; isolation: isolate; } /* Voile de contraste sous le texte de la nav (Point B) */ .site-nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--scrim-dark); z-index: 0; pointer-events: none; } /* Tous les enfants directs de la nav au-dessus du voile */ .site-nav > * { position: relative; z-index: 1; } /* Cachée au scroll vers le bas (réapparaît tout en haut) */ body.nav-hidden .site-nav { transform: translateY(-150%); opacity: 0; pointer-events: none; } @supports (backdrop-filter: url(#liquid-glass)) { .site-nav { -webkit-backdrop-filter: blur(10px) url(#liquid-glass) saturate(160%) brightness(1.05); backdrop-filter: blur(10px) url(#liquid-glass) saturate(160%) brightness(1.05); } } .nav-brand { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.12rem; color: rgba(255,255,255,0.6); /* volontairement gris/discret (le voile sous la nav assure la lisibilité) */ text-decoration: none; letter-spacing: 0.01em; display: inline-flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; } .nav-brand .brand-role { font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.5); } .nav-brand .brand-accent { color: var(--teal); } /* compat */ @media (max-width: 600px) { .nav-brand .brand-role { display: none; } /* (le masquage complet du brand est plus bas, après les règles de base) */ } .nav-links { position: relative; /* contexte de l'indicateur glissant */ display: flex; align-items: center; gap: 0.25rem; list-style: none; overflow-x: auto; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } /* Pilule blanche unique qui GLISSE sous l'onglet actif */ .nav-indicator { position: absolute; left: 0; top: 0; border-radius: 999px; background: rgba(255,255,255,0.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); pointer-events: none; z-index: 0; opacity: 0; transition: transform 0.4s cubic-bezier(.22,1,.36,1), width 0.4s cubic-bezier(.22,1,.36,1), opacity 0.25s ease; } .nav-links a { position: relative; z-index: 1; /* au-dessus de l'indicateur */ display: inline-flex; align-items: center; min-height: 44px; /* cible tactile WCAG 2.2 (2.5.8) */ color: rgba(255,255,255,0.78); text-decoration: none; font-size: 0.86rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 999px; white-space: nowrap; /* soft-click ressort : --fx-press piloté en JS (pointerdown→0.9, relâche→1) */ --fx-press: 1; transform: scale(var(--fx-press)); transition: color 0.2s, transform 0.32s cubic-bezier(.34,1.56,.64,1); } @media (prefers-reduced-motion: reduce) { .nav-links a { transition: color 0.2s; transform: none; } } .nav-links a:hover { color: #fff; } .nav-links a.active { color: #fff; } /* ── Nav MOBILE / TABLETTE ÉTROITE (≤ 720px) ─────────────────────────────── Placé APRÈS les règles de base pour les surcharger (même spécificité). On masque le nom « Matthias Carmillet » et on répartit les 4 onglets sur toute la largeur, sinon « Architecture IA » et « Projets » débordaient. Seuil à 720px : en dessous, pas assez de place pour le brand + 4 onglets. N'affecte QUE le mobile/tablette étroite — le desktop garde tout intact. */ @media (max-width: 720px) { .nav-brand { display: none; } .site-nav { justify-content: center; padding: 0 0.5rem; } .nav-links { width: 100%; justify-content: space-between; gap: 0; } .nav-links a { padding: 0.5rem 0.4rem; font-size: 0.78rem; letter-spacing: -0.01em; } } /* Très petits écrans (≤ 360px, ex. iPhone SE) : on resserre encore */ @media (max-width: 360px) { .nav-links a { padding: 0.5rem 0.25rem; font-size: 0.73rem; } } /* ── Dock plein écran : icône + flèche + texte, SANS encadré (flottants) ────── */ .fs-dock { position: fixed; /* reste en bas-gauche de l'écran, même au scroll */ left: 1.4rem; bottom: 80px; /* remonté pour ne pas chevaucher la bande/footer en bas */ z-index: 90; display: flex; align-items: center; /* bouton, flèche et texte alignés verticalement */ gap: 1.1rem; /* écart bouton ↔ flèche/texte (décalés vers la droite) */ /* Aucun fond / bordure / verre : seuls l'icône, la flèche et le texte sont visibles. */ } .fs-zone { display: flex; align-items: center; gap: 0.65rem; } /* compat ancienne classe */ /* Incitation : flèche + texte (à droite du bouton dans le dock). Purement décoratif → ne doit JAMAIS intercepter les clics du bouton plein écran (le translate de la flèche la fait déborder par-dessus le bouton). */ .fs-hint { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--teal); pointer-events: none; } .fs-hint-text { font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; line-height: 1.15; text-align: left; color: #fff; white-space: nowrap; margin-left: -0.7rem; /* décalage vers la gauche */ transform: translateY(6px); /* descendu pour s'aligner au bas-droite de la flèche */ } .fs-arrow { width: 58px; height: 36px; flex-shrink: 0; overflow: visible; /* Légère rotation horaire : la pointe (à gauche) remonte pour mieux viser l'icône du bouton. Pivot côté texte (droite) pour ne décaler que la pointe. translate : descend un peu (+Y) et décale vers la gauche (−X). */ transform: translate(-16px, 9px) rotate(22deg); transform-origin: 80% 50%; } /* Tracé de base (discret) */ .fs-arrow .arrow-rail { fill: none; stroke: rgba(0,216,212,0.28); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* Segment lumineux qui parcourt la flèche */ .fs-arrow .arrow-glow { fill: none; stroke: var(--teal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(0,216,162,0.9)); stroke-dasharray: 26 150; animation: fs-arrow-run 1.8s linear infinite; } @keyframes fs-arrow-run { 0% { stroke-dashoffset: 176; } 100% { stroke-dashoffset: 0; } } /* Bouton plein écran */ .fs-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .fs-btn svg { width: 19px; height: 19px; } .fs-btn:hover { /* lift via --fx-lift (voir bloc micro-interactions) pour composer avec le magnétique */ background: var(--primary); border-color: var(--primary); box-shadow: 0 8px 22px -8px rgba(88,24,255,0.8); } /* Petite pulsation d'appel tant qu'on n'est pas en plein écran */ .fs-btn.nudge { animation: fs-nudge 2.4s ease-in-out infinite; } @keyframes fs-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,216,162,0); } 50% { box-shadow: 0 0 0 6px rgba(0,216,162,0.12); } } /* En plein écran : masquer le dock (bouton + flèche + phrase) */ body.is-fullscreen .fs-dock { display: none; } @media (max-width: 720px) { .fs-hint { display: none; } /* sur mobile : juste le bouton, pas l'incitation */ .nav-right { gap: 0.5rem; } } @media (prefers-reduced-motion: reduce) { .fs-arrow, .fs-btn.nudge { animation: none; } } /* ── Footer (partagé) ───────────────────────────────────────── */ .site-footer { margin-top: 4rem; background: var(--dark); color: rgba(255,255,255,0.5); text-align: center; padding: 2.5rem 2rem; font-size: 0.82rem; } .site-footer strong { color: var(--teal); } .site-footer a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.15s; } .site-footer a:hover { color: var(--teal); } /* ── Composants partagés ────────────────────────────────────── */ .card { background: rgba(255,255,255,0.86); border: 1px solid rgba(255,255,255,0.55); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; padding: 0.7rem 1.3rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .btn-primary { background: var(--primary); color: var(--white); box-shadow: 0 8px 24px -8px rgba(88,24,255,0.6); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(88,24,255,0.7); } .btn-ghost { background: rgba(255,255,255,0.7); border-color: rgba(27,4,66,0.12); color: var(--dark); } .btn-ghost:hover { transform: translateY(-2px); background: var(--white); } /* ── Bouton CTA unifié (standard du site) ────────────────────── Tous les boutons .btn-cta sont IDENTIQUES : même dégradé violet→teal, glassmorphism, halo flou diffus, crescendo de couleurs au survol. Réutiliser pour tout futur bouton. */ @keyframes btnCtaFlow { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } } .btn-cta { position: relative; isolation: isolate; overflow: hidden; /* clippe le balayage lumineux à la pilule */ border: none; color: #fff; background: linear-gradient(100deg, var(--primary) 0%, var(--purple) 22%, var(--blue) 46%, var(--teal) 70%, var(--purple) 88%, var(--primary) 100%); background-size: 250% 100%; background-position: 0% 50%; -webkit-backdrop-filter: blur(12px) saturate(135%); backdrop-filter: blur(12px) saturate(135%); /* Halo de profondeur en box-shadow (non clippé par overflow:hidden) */ box-shadow: 0 10px 30px -8px rgba(88,24,255,0.6), 0 4px 16px -6px rgba(0,216,162,0.35), inset 0 1px 0 rgba(255,255,255,0.25); text-shadow: 0 1px 2px rgba(20,4,60,0.4); transition: transform 0.25s ease, box-shadow 0.3s ease; } /* Trait de lumière flou qui traverse le bouton en boucle (effet "vivant"). Contenu DANS le bouton grâce à overflow:hidden du parent : propre à chaque bouton, ne déborde jamais entre ou à droite des boutons. z-index 1 = au-dessus du dégradé de fond ; le label (z-index 2) reste lisible. */ .btn-cta::before { content: ''; position: absolute; top: -20%; bottom: -20%; /* dépasse en hauteur pour un balayage net une fois biaisé */ left: 0; width: 38%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.50) 50%, transparent 100%); filter: blur(7px); pointer-events: none; z-index: 1; transform: translateX(-180%) skewX(-14deg); animation: btnCtaShine 4.2s ease-in-out infinite; } .btn-cta-label { position: relative; z-index: 2; } @keyframes btnCtaShine { 0% { transform: translateX(-180%) skewX(-14deg); } 45% { transform: translateX(320%) skewX(-14deg); } 100% { transform: translateX(320%) skewX(-14deg); } /* pause avant de recommencer */ } .btn-cta:hover, .btn-cta:focus-visible { transform: translateY(-2px); animation: btnCtaFlow 6s linear infinite; box-shadow: 0 16px 40px -8px rgba(88,24,255,0.8), 0 6px 22px -6px rgba(0,216,162,0.5), inset 0 1px 0 rgba(255,255,255,0.3); } .btn-cta:focus-visible { outline: 2px solid rgba(88,24,255,0.55); outline-offset: 3px; } .btn-cta:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .btn-cta, .btn-cta:hover, .btn-cta:focus-visible { animation: none !important; transition: none; transform: none; } .btn-cta::before { animation: none !important; opacity: 0; } } /* ── Finitions a11y + typo (Lot 1 quick wins) ─────────────────── Focus visible global, cibles tactiles, équilibrage du texte, ancres. */ /* Focus visible double couche (WCAG 2.4.13) — visible sur fond clair ET sombre. Ne s'affiche qu'au clavier (:focus-visible), jamais au clic souris. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 85%, transparent); } /* Les ancres internes ne sont pas masquées par la nav sticky (WCAG 2.4.11) */ [id] { scroll-margin-top: calc(var(--nav-h) + 16px); } /* Équilibrage typographique (dégradation invisible si non supporté) */ h1, h2, h3, .section-title, .hero-title, .cv-hero-title, .stub-title { text-wrap: balance; } p, .hero-sub, li { text-wrap: pretty; } /* Longueur de ligne confortable pour le corps de texte */ .hero-sub, .stub-card p, .pillar p { max-width: 65ch; } /* ── Reveal au scroll ───────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .bg-mesh { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ── Pages "stub" (Liquid Glass) — page en construction ──────── */ .stub-section { min-height: calc(100vh - var(--nav-h) - 4rem); display: flex; align-items: center; padding: 4rem 0; } .stub-eyebrow { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1.3rem; } .stub-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.08; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.3); margin-bottom: 1.6rem; } .stub-title .grad { background: linear-gradient(120deg, #c4b5fd 0%, #5eead4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stub-card { display: inline-block; padding: 1.4rem 1.7rem; border-radius: 18px; background: var(--surface-bg); border: var(--surface-border); box-shadow: var(--surface-bezel), 0 18px 44px -22px rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .stub-card p { color: rgba(255,255,255,0.85); font-size: 1rem; line-height: 1.6; max-width: 600px; } /* Pendant une transition de page : on neutralise les backdrop-filter du contenu animé (sinon les blocs en verre se recomposent mal → "carré" qui se décale). Le verre revient net à la fin de la transition. La nav et le dock (fixes, non animés) gardent leur verre. */ body.is-transitioning main *, body.is-transitioning header.header, body.is-transitioning .stats-band, body.is-transitioning .nav, body.is-transitioning section * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ════════ Micro-interactions : magnétique + soft-click (variables --fx-*) ════════ Une SEULE transform composite par cible : translate magnétique + lift (hover) + scale (press). Les valeurs par défaut sont neutres → aucun effet tant que le JS ne les pilote pas. Le lift de hover passe par --fx-lift pour ne pas entrer en conflit avec le translate magnétique. */ .btn-cta, .hero-linkedin, .fs-btn, .cv-testi-cta { --fx-mx: 0px; --fx-my: 0px; --fx-lift: 0px; --fx-press: 1; transform: translate(var(--fx-mx), calc(var(--fx-my) + var(--fx-lift))) scale(var(--fx-press)); } /* Le lift de survol → variable (remplace les translateY(-2px) directs sur ces cibles) */ .btn-cta:hover, .btn-cta:focus-visible, .hero-linkedin:hover, .fs-btn:hover, .cv-testi-cta:hover { --fx-lift: -2px; } .fs-btn:hover { --fx-lift: -2px; } /* Le press (soft-click) anime en ressort ; transition transform pilotée par JS au survol magnétique, sinon transition douce pour le press/lift. */ .btn-cta, .hero-linkedin, .cv-testi-cta { transition: transform 0.2s cubic-bezier(.22,1,.36,1), box-shadow 0.3s ease, background 0.2s ease; } .btn-cta:active, .hero-linkedin:active, .fs-btn:active, .cv-testi-cta:active { --fx-press: 0.96; } @media (pointer: coarse) { /* tactile : pas de magnétique (le JS ne le branche pas), on neutralise le translate */ .btn-cta, .hero-linkedin, .fs-btn, .cv-testi-cta { --fx-mx: 0px; --fx-my: 0px; } } @media (prefers-reduced-motion: reduce) { .btn-cta, .hero-linkedin, .fs-btn, .cv-testi-cta { --fx-mx: 0px !important; --fx-my: 0px !important; --fx-press: 1 !important; transition: none; } } /* Caractères en cours de « décodage » (text-scramble) — teintés pour l'effet IA */ .scramble-char { color: var(--teal); opacity: 0.85; }