/* ============ Reset & base ============ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #F7F7F4; color: #171717; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } section { padding: 88px 0; } /* ============ Reveal animation ============ */ .reveal { opacity: 1; transform: none; } /* N'applique l'animation que si le JS a démarré (voir classe .js posée en tête de ) : sans JS, tout le contenu reste visible par défaut. */ @media (prefers-reduced-motion: no-preference) { html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .reveal.is-visible { opacity: 1; transform: none; } /* Apparition en cascade : chaque élément part masqué et se révèle avec un léger décalage une fois que la section parente devient visible. */ html.js .problem-list li, html.js .service-card { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } html.js .problems.is-visible .problem-list li, html.js .services.is-visible .service-card { opacity: 1; transform: none; } html.js .problem-list li:nth-child(1), html.js .service-card:nth-child(1) { transition-delay: 0.05s; } html.js .problem-list li:nth-child(2), html.js .service-card:nth-child(2) { transition-delay: 0.15s; } html.js .problem-list li:nth-child(3), html.js .service-card:nth-child(3) { transition-delay: 0.25s; } html.js .problem-list li:nth-child(4), html.js .service-card:nth-child(4) { transition-delay: 0.35s; } html.js .problem-list li:nth-child(5) { transition-delay: 0.45s; } html.js .problem-list li:nth-child(6) { transition-delay: 0.55s; } } /* ============ Buttons ============ */ .btn { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; padding: 14px 28px; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn-primary { background: #2F6B5F; color: #F7F7F4; } .btn-primary:hover { background: #24544a; } .btn-ghost { background: transparent; color: #2F6B5F; border: 1px solid #2F6B5F; border-radius: 999px; } .btn-ghost:hover { background: #2F6B5F; color: #F7F7F4; } .btn-small { padding: 9px 18px; font-size: 14px; } /* ============ Header ============ */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(247, 247, 244, 0.97); border-bottom: 1px solid #D9DAD4; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; } .site-header.is-compact .header-inner { padding-top: 8px; padding-bottom: 8px; } .site-header.is-compact .logo img { height: 22px; } @media (prefers-reduced-motion: no-preference) { .header-inner { transition: padding 0.25s ease; } .logo img { transition: height 0.25s ease; } } .logo { display: flex; align-items: center; text-decoration: none; } .logo img { display: block; height: 32px; width: auto; } .footer-brand { display: flex; align-items: center; gap: 6px; } .footer-made { display: inline-flex; align-items: center; gap: 4px; } .heart-icon { flex-shrink: 0; } /* ============ Hero ============ */ .hero { padding-top: 64px; padding-bottom: 48px; } .hero-grid { display: flex; flex-direction: column; gap: 40px; } .eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #2F6B5F; margin: 0 0 20px; } .hero-text h1 { font-size: 34px; margin-bottom: 18px; } .highlight-green { color: #2F6B5F; } .services-line { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 16px; color: #666666; margin: 0 0 32px; } /* Portrait shown inline on mobile, right after headline */ .hero-portrait-mobile { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; padding: 16px; background: #ECEDE8; border: 1px solid #D9DAD4; border-radius: 8px; } .hero-portrait-mobile img { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; flex-shrink: 0; } .portrait-link { display: block; position: relative; flex-shrink: 0; border-radius: 50%; transition: opacity 0.2s ease; } .portrait-link:hover { opacity: 0.85; } .linkedin-hint { position: absolute; top: -20px; right: -32px; display: block; pointer-events: none; } .hint-badge { position: absolute; top: 20px; left: 30px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #F7F7F4; border: 1.5px solid #171717; opacity: 0; transform: scale(0.6); } .hint-arrow-line { stroke-dasharray: 80; stroke-dashoffset: 80; } .hint-arrow-head { opacity: 0; } .portrait-link:hover .hint-arrow-line { stroke-dashoffset: 0; } .portrait-link:hover .hint-arrow-head { opacity: 1; } .portrait-link:hover .hint-badge { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: no-preference) { .hint-arrow-line { transition: stroke-dashoffset 0.4s ease; } .hint-arrow-head { transition: opacity 0.15s ease 0.35s; } .hint-badge { transition: opacity 0.25s ease 0.4s, transform 0.25s ease 0.4s; } } /* Version mobile/tactile : même indice visuel, mais en cycle automatique (apparaît puis disparaît régulièrement) plutôt qu'au survol, qui n'existe pas vraiment au doigt. Placé à gauche (mord moins sur le prénom) et mirroré plutôt que redessiné à la main. Un simple fondu global — plutôt qu'un tracé segment par segment — pour rester fiable sur Firefox mobile. */ .linkedin-hint-auto { top: -10px; left: -16px; right: auto; transform: scaleX(-1); opacity: 0; } .linkedin-hint-auto .hint-arrow-line { stroke-dasharray: none; stroke-dashoffset: 0; } .linkedin-hint-auto .hint-arrow-head { opacity: 1; } .linkedin-hint-auto .hint-badge { top: 12px; left: 17px; width: 16px; height: 16px; opacity: 1; transform: scaleX(-1); } @media (prefers-reduced-motion: no-preference) { .linkedin-hint-auto { animation: hint-cycle-fade 4.5s ease-in-out infinite; } } @keyframes hint-cycle-fade { 0%, 100% { opacity: 0; } 10%, 55% { opacity: 1; } 70% { opacity: 0; } } .portrait-caption { display: flex; flex-direction: column; font-size: 14px; } .portrait-caption strong { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; } .portrait-caption span { color: #666666; margin-top: 2px; } .hero-portrait-desktop { display: none; } /* ============ Problems ============ */ .problems { padding-top: 48px; padding-bottom: 56px; border-top: 1px solid #D9DAD4; } .problems-title { font-size: 28px; margin-bottom: 28px; } .problem-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 18px; } .problem-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; font-weight: 400; color: #171717; } .bullet-dot { width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: #2F6B5F; flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { html.js .problems.is-visible .bullet-dot { animation: bullet-wave 5s ease-in-out infinite; } html.js .problems.is-visible .problem-list li:nth-child(1) .bullet-dot { animation-delay: 0.4s; } html.js .problems.is-visible .problem-list li:nth-child(2) .bullet-dot { animation-delay: 0.55s; } html.js .problems.is-visible .problem-list li:nth-child(3) .bullet-dot { animation-delay: 0.7s; } html.js .problems.is-visible .problem-list li:nth-child(4) .bullet-dot { animation-delay: 0.85s; } html.js .problems.is-visible .problem-list li:nth-child(5) .bullet-dot { animation-delay: 1s; } html.js .problems.is-visible .problem-list li:nth-child(6) .bullet-dot { animation-delay: 1.15s; } } @keyframes bullet-wave { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.8); } 16% { transform: scale(1); } } /* ============ Services ============ */ .services { background: #ECEDE8; } .services-title { font-size: 28px; margin-bottom: 12px; } .services-subtitle { color: #666666; font-size: 16px; margin: 0 0 36px; } .services-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } .service-card { background: #F7F7F4; border: 1px solid #D9DAD4; border-radius: 10px; padding: 32px 28px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .service-card:hover { transform: translateY(-4px); border-color: #2F6B5F; box-shadow: 0 10px 24px rgba(23, 23, 23, 0.08); } .service-icon { color: #2F6B5F; margin-bottom: 20px; } @media (prefers-reduced-motion: no-preference) { .service-card:hover .service-icon { animation: icon-pop 0.4s ease; } } @keyframes icon-pop { 0% { transform: scale(1) rotate(0deg); } 35% { transform: scale(1.18) rotate(-6deg); } 65% { transform: scale(0.95) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } } .service-card h3 { font-size: 19px; margin-bottom: 10px; } .service-card p { color: #666666; margin: 0; font-size: 15px; } /* ============ About ============ */ .about-inner { max-width: 640px; display: flex; gap: 24px; align-items: stretch; } .about-accent { width: 3px; flex-shrink: 0; background: #2F6B5F; transform: scaleY(0); transform-origin: top; } html.js .about.is-visible .about-accent { transform: scaleY(1); } @keyframes accent-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .about-text-group { min-width: 0; } .about-text { font-size: 20px; margin: 0 0 20px; } .about-text-secondary { font-size: 16px; color: #666666; } @media (prefers-reduced-motion: no-preference) { .about-accent { transition: transform 0.7s ease; } html.js .about.is-visible .about-accent { animation: accent-breathe 4.5s ease-in-out infinite; animation-delay: 1s; } html.js .about-text { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } html.js .about.is-visible .about-text { opacity: 1; transform: none; } html.js .about.is-visible .about-text:nth-of-type(1) { transition-delay: 0.1s; } html.js .about.is-visible .about-text:nth-of-type(2) { transition-delay: 0.45s; } } /* ============ Contact ============ */ .contact { background: #ECEDE8; text-align: center; } .contact-inner { max-width: 560px; margin: 0 auto; } .contact h2 { font-size: 28px; margin-bottom: 16px; } .contact-text { color: #666666; font-size: 17px; margin: 0 0 12px; } .contact-down-arrow { display: block; margin: 0 auto 20px; color: #EF4444; } @media (prefers-reduced-motion: no-preference) { .contact-down-arrow { animation: arrow-vibrate 2s ease-in-out infinite; } } @keyframes arrow-vibrate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } .contact-links { display: flex; justify-content: center; align-items: center; gap: 24px; } .contact-links a { display: flex; color: #666666; transition: color 0.2s ease; } .contact-links a:hover { color: #2F6B5F; } @media (prefers-reduced-motion: no-preference) { .contact-links a:hover svg { animation: icon-bounce 0.5s ease-in-out infinite; } } @keyframes icon-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ============ Footer ============ */ .site-footer { border-top: 1px solid #D9DAD4; padding: 28px 0 40px; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #666666; } /* ============ Focus visibility ============ */ a:focus-visible, .btn:focus-visible { outline: 2px solid #2F6B5F; outline-offset: 2px; } /* ============ Back to top ============ */ .back-to-top { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; border-radius: 50%; background: #EF4444; color: #F7F7F4; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(23, 23, 23, 0.2); cursor: pointer; z-index: 50; opacity: 0; visibility: hidden; } .back-to-top.is-visible { opacity: 1; visibility: visible; } .back-to-top:hover { background: #DC2626; } .back-to-top:focus-visible { outline: 2px solid #171717; outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .back-to-top { transform: translateY(12px) scale(0.9); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease; } .back-to-top.is-visible { transform: translateY(0) scale(1); } .back-to-top:hover { transform: scale(1.08); } } /* ============ Desktop layout ============ */ @media (min-width: 860px) { section { padding: 120px 0; } .hero { padding-top: 80px; padding-bottom: 100px; } .hero-grid { flex-direction: row; align-items: center; gap: 64px; } .hero-text { flex: 1.1; } .hero-text h1 { font-size: 46px; } .hero-portrait-mobile { display: none; } .hero-portrait-desktop { display: block; flex: 0 0 180px; align-self: flex-start; } .hero-portrait-desktop img { width: 180px; height: 180px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; } .hero-portrait-desktop .portrait-caption { margin-top: 12px; font-size: 13px; } .problem-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 22px; } .services-grid { grid-template-columns: repeat(2, 1fr); } .contact h2 { font-size: 34px; } .problems { padding-top: 120px; padding-bottom: 120px; } } @media (min-width: 1180px) { .hero-text h1 { font-size: 52px; } }