/* ========================================================================== Footer moderne + Next-step CTA + Sticky mobile CTA — dethie.fr Inclus par includes/footer.php (charge dans de chaque page). ========================================================================== */ /* ----- Next-step CTA bar (juste avant le footer) ----- */ .next-step-bar { background: var(--primary); color: #fff; padding: var(--rhythm-block, 3rem) var(--space-4); } .next-step-bar__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .next-step-bar__text { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } .next-step-bar__btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; } .next-step-bar__btn svg { transition: transform 0.25s ease; } .next-step-bar__btn:hover svg { transform: translateX(4px); } @media (max-width: 640px) { .next-step-bar__inner { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; } .next-step-bar__btn { justify-content: center; } } /* ----- Footer moderne sobre ----- */ .site-footer { background: var(--primary); color: rgba(255, 255, 255, 0.78); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 4rem var(--space-4) 0; } .site-footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; } .site-footer__col { min-width: 0; } .site-footer__logo { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; color: #fff; margin-bottom: 1rem; } .site-footer__logo strong { font-size: 1.125rem; font-weight: 600; color: #fff; } .site-footer__logo span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); } .site-footer__tagline { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); } .site-footer__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #00D4AA); box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.22); } .site-footer__heading { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0 0 1rem; } .site-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .site-footer__list a, .site-footer__list span { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; } .site-footer__list a:hover, .site-footer__list a:focus-visible { color: var(--accent, #00D4AA); } .site-footer__list--social a { display: inline-flex; align-items: center; gap: 0.5rem; } .site-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.08); max-width: 1200px; margin: 0 auto; padding: 1.5rem 0 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); } .site-footer__legal p { margin: 0; } .site-footer__legal ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; } .site-footer__legal a { color: rgba(255, 255, 255, 0.7); text-decoration: none; } .site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: #fff; text-decoration: underline; } @media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } @media (max-width: 540px) { .site-footer { padding-top: 3rem; } .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; } .site-footer__legal { flex-direction: column; align-items: flex-start; text-align: left; } .site-footer__legal ul { flex-wrap: wrap; } } /* ----- Mobile sticky CTA bar (Tel / Mail / LinkedIn) ----- */ .mobile-cta-bar { display: none; position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: var(--z-sticky, 1020); padding: 0.5rem; background: rgba(10, 22, 40, 0.88); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5); gap: 0.375rem; transform: translateY(150%); opacity: 0; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; pointer-events: none; } .mobile-cta-bar[hidden] { display: none !important; } .mobile-cta-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-cta-bar__btn { flex: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.55rem 0.25rem; text-decoration: none; color: #fff; font-size: 0.75rem; font-weight: 500; border-radius: 10px; transition: background 0.2s ease; } .mobile-cta-bar__btn:hover, .mobile-cta-bar__btn:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; } .mobile-cta-bar__btn svg { color: var(--accent, #00D4AA); } @media (max-width: 767px) { .mobile-cta-bar { display: flex; } /* Décaler les FAB/back-to-top qui occupent le coin bas-droit */ .back-to-top { bottom: 5rem !important; } .audio-controls { bottom: 5.5rem !important; } } /* ----- Scroll-reveal (data-reveal) ----- */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; } [data-reveal].revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .next-step-bar__btn:hover svg { transform: none; } .mobile-cta-bar { transition: opacity 0.15s ease; } }