/* Ported verbatim from rhillane-web/pages/website-creation/index.html <style> block. */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'Poppins', sans-serif; color: #041135; -webkit-font-smoothing: antialiased; }

.grad-attention { background-image: linear-gradient(155deg, #3943FF 58%, #E4004D 85%, #FA9329 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-beyond    { background-image: linear-gradient(148deg, #E4004D 0%, #EE453C 50%, #FA9329 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-projets   { background-image: linear-gradient(144deg, #3943FF 40%, #E4004D 70%, #FA9329 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-cta        { background-image: linear-gradient(90deg, #D7045A 50%, #FC8831 100%); }

.marquee-track { display: flex; width: max-content; }
.marquee-track > * { flex: 0 0 auto; }

.partner-logo {
    filter: grayscale(1) opacity(0.5);
    transition: filter 0.25s ease, transform 0.25s ease;
    height: 2rem;
    width: 6rem;
    object-fit: contain;
}
.partner-logo:hover { filter: grayscale(0) opacity(1); }
.partner-logo[src*="woocommerce"] { transform: scale(2.5); }

#site-header { transition: padding 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
#site-header.scrolled { padding-top: 0.625rem; padding-bottom: 0.625rem; box-shadow: 0 2px 8px -4px rgba(4,17,53,0.08); background-color: rgba(255,255,255,0.98); }
#site-header.scrolled .header-inner { padding-top: 0; padding-bottom: 0; }
.header-fdu { transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease; max-height: 20px; overflow: hidden; }
#site-header.scrolled .header-fdu { max-height: 0; opacity: 0; margin: 0; }

.timeline-connector { position: absolute; top: 30px; bottom: -6px; left: 11px; width: 2px; background: #E9EAF2; }
.timeline-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 9999px; background: white; border: 2px solid #3943FF; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.timeline-dot::after { content: ''; width: 8px; height: 8px; border-radius: 9999px; background: #3943FF; }

.price-tab { transition: all 0.2s ease; }
.price-tab.active { background-color: #041135; color: white; }
.price-pane { display: none !important; }
.price-pane.active { display: grid !important; }

.testimonial-slide { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.testimonial-slide.active { opacity: 1; pointer-events: auto; }
.testimonial-dot { width: 8px; height: 8px; border-radius: 9999px; background: #E9EAF2; transition: background 0.25s ease, width 0.25s ease; cursor: pointer; border: none; padding: 0; }
.testimonial-dot.active { background: #041135; width: 24px; border-radius: 4px; }

.faq-item { transition: background-color 0.2s ease; }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform 0.2s ease; }
.faq-item[open] summary .chev { transform: rotate(45deg); }

details > summary { list-style: none; }
details > summary::marker { content: ''; }

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 60s linear infinite; }