/* ────────────────────────────────────────────────────────────── * sitigo — landing.css * CSS partagé par les 26 landing pages métier + homepage fallback. * Dérivé de public/index.html (inline) — single source of truth * quand on regénère les landings. * ────────────────────────────────────────────────────────────── */ /* ── FONTS ── */ @font-face{font-family:'DM Serif Display';src:url('/fonts/DMSerifDisplay-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/PlusJakartaSans-Variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap} /* ── RESET + VARS ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --orange:#FF6B2C;--orange-dark:#E85A1E;--dark:#0C1222;--muted:#6B7280;--border:#E5E7EB; --bg:#FAFAFA;--card:#fff;--blue:#3B82F6;--green:#10B981; --fd:'DM Serif Display',Georgia,serif;--fb:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif; --r:12px; --trade:#1565C0; /* overridable par style inline sur */ } html{scroll-behavior:smooth} body{font-family:var(--fb);color:var(--dark);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{cursor:pointer;font-family:inherit} /* ── CONTAINER ── */ .c{max-width:1100px;margin:0 auto;padding:0 1.5rem} /* ── NAV ── */ .nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0.8rem 0} .nav-inner{display:flex;align-items:center;justify-content:space-between} .logo{display:flex;align-items:center;gap:0.5rem;font-family:var(--fd);font-size:1.4rem;font-weight:700} .logo-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--orange);color:#fff;border-radius:8px;font-size:1.1rem} .nav-r{display:flex;align-items:center;gap:1rem} .nav-link{font-size:0.85rem;color:var(--muted);font-weight:500} .nav-link:hover{color:var(--dark)} /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;justify-content:center;padding:0.85rem 1.8rem;border-radius:10px;font-weight:700;font-size:0.92rem;border:none;transition:all 0.2s} .btn-primary{background:#C2410C;color:#fff;box-shadow:0 4px 14px rgba(194,65,12,0.3)} .btn-primary:hover{background:#9A3412;transform:translateY(-1px);box-shadow:0 6px 20px rgba(194,65,12,0.35)} .btn-outline{background:transparent;color:var(--dark);border:2px solid var(--border)} .btn-outline:hover{border-color:var(--dark)} .btn-sm{padding:0.55rem 1.2rem;font-size:0.82rem} .btn-lg{padding:1rem 2.2rem;font-size:1rem} .btn-full{width:100%} /* ── HERO ── */ .hero{position:relative;padding:5rem 0 4rem;overflow:hidden;background:linear-gradient(160deg,#0C1222 0%,#1a2744 100%);color:#fff} .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(255,107,44,0.12) 0%,transparent 60%);pointer-events:none} .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:1} .hero-pill{display:inline-block;background:rgba(255,107,44,0.15);color:var(--orange);padding:0.4rem 1rem;border-radius:50px;font-size:0.78rem;font-weight:700;margin-bottom:1.2rem;border:1px solid rgba(255,107,44,0.25)} .hero h1{font-family:var(--fd);font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.15;margin-bottom:1rem} .hero h1 span{color:var(--orange)} .hero-sub{font-size:1.05rem;color:rgba(255,255,255,0.7);max-width:480px;margin-bottom:1.8rem;line-height:1.7} .hero-ctas{display:flex;gap:0.8rem;margin-bottom:1.5rem;flex-wrap:wrap} .hero-micro{display:flex;gap:1.2rem;font-size:0.78rem;color:rgba(255,255,255,0.7);font-weight:500} .hero-micro span::before{content:'✓ ';color:var(--green)} /* ── BROWSER MOCKUP ── */ .hero-vis{opacity:0;animation:fadeSlideUp .9s cubic-bezier(.16,1,.3,1) 1s forwards} .browser{background:#1E293B;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.4);transition:transform 0.4s cubic-bezier(.2,.8,.3,1),box-shadow 0.4s} .browser:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 28px 70px rgba(0,0,0,0.5)} .browser-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#0F172A} .browser-bar i{width:10px;height:10px;border-radius:50%} .browser-url{margin-left:12px;font-size:0.72rem;color:rgba(255,255,255,0.35);font-family:monospace} .browser-body{padding:2rem;text-align:center;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;background:linear-gradient(135deg,var(--trade),#0D47A1)} .browser-badge{text-align:center;padding:8px;font-size:0.72rem;color:rgba(255,255,255,0.7)} /* ── TRUST ROW ── */ .trust{display:flex;justify-content:center;gap:2rem;padding:1.5rem 0;flex-wrap:wrap;margin-top:2rem;border-top:1px solid rgba(255,255,255,0.08)} .trust span{font-size:0.78rem;color:rgba(255,255,255,0.7);font-weight:500} /* ── SECTIONS ── */ .section{padding:5rem 0} .section-dark{background:var(--dark);color:#fff} .sh{text-align:center;max-width:600px;margin:0 auto 3rem} .overline{display:block;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#C2410C;margin-bottom:0.6rem} .h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.25} .sh-sub{color:var(--muted);margin-top:0.6rem;font-size:0.95rem} /* ── STEPS ── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .step{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:2rem 1.5rem;text-align:center;transition:box-shadow 0.3s} .step:hover{box-shadow:0 8px 30px rgba(0,0,0,0.06)} .step-num{font-family:var(--fd);font-size:2.5rem;color:var(--orange);opacity:0.2;margin-bottom:0.3rem} .step-icon{font-size:2rem;margin-bottom:0.8rem} .step h3{font-size:1rem;font-weight:700;margin-bottom:0.5rem} .step p{font-size:0.85rem;color:var(--muted);line-height:1.6} /* ── FEATURES ── */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .feat{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r);padding:1.5rem} .feat-icon{font-size:1.5rem;margin-bottom:0.8rem} .feat h3{font-size:0.92rem;font-weight:700;margin-bottom:0.4rem} .feat p{font-size:0.82rem;color:rgba(255,255,255,0.7);line-height:1.6} /* ── SERVICES (landing-spécifique) ── */ .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem} .svc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.2rem 1.3rem;transition:all 0.25s cubic-bezier(.2,.8,.3,1)} .svc-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.06);border-color:var(--trade)} .svc-card h3{font-size:0.95rem;font-weight:700;margin-bottom:0.3rem;color:var(--dark)} .svc-card p{font-size:0.8rem;color:var(--muted);line-height:1.55} /* ── PRICING ── */ .pricing-wrap{max-width:480px;margin:0 auto} .pricing{background:var(--card);border:2px solid var(--orange);border-radius:16px;padding:2.5rem 2rem;position:relative;overflow:hidden;text-align:center} .pricing-ribbon{position:absolute;top:0;left:0;right:0;background:#9A3412;color:#fff;font-size:0.72rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:6px 0} .pricing-price{margin-top:2rem;margin-bottom:0.5rem} .pricing-old{font-size:1.1rem;color:var(--muted);text-decoration:line-through;margin-right:0.5rem} .pricing-amount{font-family:var(--fd);font-size:4rem;line-height:1} .pricing-eur{font-size:1.5rem} .pricing-sub{color:var(--muted);font-size:0.88rem;margin-bottom:1.5rem} .pricing-list{text-align:left;margin-bottom:1.5rem} .pricing-item{padding:0.4rem 0;font-size:0.85rem;display:flex;align-items:center;gap:0.5rem} .pricing-item .ck{color:var(--green);font-weight:700} .pricing-secure{font-size:0.75rem;color:var(--muted);margin-top:0.8rem} /* ── FAQ (HTML natif

, zéro JS) ── */ .faq{border-bottom:1px solid var(--border)} .faq > summary{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 0;font-weight:600;font-size:0.95rem;cursor:pointer;min-height:48px;list-style:none;color:inherit} .faq > summary::-webkit-details-marker{display:none} .faq > summary::marker{display:none;content:""} .faq > summary::after{content:"+";font-size:1.3rem;color:var(--muted);transition:transform 0.3s ease;margin-left:1rem;flex-shrink:0} .faq[open] > summary::after{transform:rotate(45deg)} .faq > div{padding:0 0 1.2rem 0;color:var(--muted);font-size:0.88rem;line-height:1.7} /* Safari/Firefox ne supportent pas la transition sur

ouverture, on applique une animation d'apparition du contenu pour tous les navigateurs */ .faq[open] > div{animation:faqFade 0.25s ease-out} @keyframes faqFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.faq[open] > div{animation:none}} /* ── CTA FINAL ── */ .cta-final{padding:5rem 0;background:linear-gradient(160deg,#0C1222,#1a2744);color:#fff;text-align:center;position:relative;overflow:hidden} .cta-final h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.25;margin-bottom:1rem} .cta-final p{color:rgba(255,255,255,0.6);margin-bottom:1.8rem;font-size:1rem} /* ── FOOTER ── */ footer{padding:2rem 0 5rem;background:#f5f5f5;border-top:1px solid var(--border)} .footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem} .footer-links{display:flex;gap:0.5rem;font-size:0.78rem;color:#4B5563;flex-wrap:wrap} .footer-links a{color:#4B5563}.footer-links a:hover{color:var(--dark)} .footer-copy{font-size:0.72rem;color:#4B5563} /* ── BREADCRUMB ── */ .crumb{padding:0.8rem 0;font-size:0.8rem;color:var(--muted);background:#F7F7F7;border-bottom:1px solid var(--border)} .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--dark);text-decoration:underline} .crumb-sep{margin:0 0.5rem;opacity:0.5} .crumb-cur{color:var(--dark);font-weight:600} /* ── AUTRES MÉTIERS (inter-pages) ── */ .related{background:#FFFBF5;padding:3rem 0} .related h2{font-family:var(--fd);font-size:1.3rem;text-align:center;margin-bottom:1.5rem} .related-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:0.6rem} .related .chip{display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:50px;font-size:0.82rem;font-weight:600;background:var(--card);border:1px solid var(--border);transition:all 0.2s;color:var(--dark);text-decoration:none} .related .chip:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)} /* ── RESPONSIVE ── */ @media(max-width:768px){ .hero-grid{grid-template-columns:1fr} .hero{padding:3rem 0 2.5rem} .steps,.features,.services-grid{grid-template-columns:1fr} .hero-vis{order:-1} .nav-link:not(.nav-link-essential){display:none} body{padding-bottom:76px} /* Hero CTAs : stack pleine largeur, plus jamais de CTA coupé */ .hero-ctas{flex-direction:column;align-items:stretch;gap:0.55rem;margin-bottom:1.2rem} .hero-ctas .btn{width:100%;justify-content:center;padding:0.85rem 1.2rem;font-size:0.95rem;white-space:nowrap} /* Reassurance hero (3 ✓ items) : grille compacte 2 colonnes */ .hero-micro{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem 1rem;font-size:0.74rem;line-height:1.4} .hero-micro span:nth-child(3){grid-column:1 / -1} /* Trust row bas hero : pilules alignées, doublon "Remboursé 14j" caché */ .trust{gap:0.5rem;padding:1rem 0;justify-content:center;flex-wrap:wrap;margin-top:1.4rem} .trust span{font-size:0.7rem;background:rgba(255,255,255,0.06);padding:0.3rem 0.7rem;border-radius:16px;border:1px solid rgba(255,255,255,0.08);white-space:nowrap} .trust span:nth-child(3){display:none} /* Sticky CTA : barre compacte, accent orange à gauche, 2 lignes max */ .sticky{padding:0.6rem 0.8rem 0.6rem 1rem;gap:0.7rem;border-top:none;box-shadow:0 -1px 0 var(--border),0 -8px 24px rgba(0,0,0,0.06);background:#fff} .sticky::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange)} .sticky-copy{flex:1;min-width:0;overflow:hidden} .sticky-copy strong{font-size:0.9rem;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sticky-copy span{font-size:0.72rem;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sticky-copy span b{color:var(--orange);font-weight:700} .sticky .btn{padding:0.72rem 1rem;font-size:0.88rem;font-weight:600;white-space:nowrap;flex-shrink:0;box-shadow:0 4px 12px rgba(255,107,53,0.35);animation:stickyPulse 2.4s ease-in-out infinite} @keyframes stickyPulse{0%,100%{box-shadow:0 4px 12px rgba(255,107,53,0.35)}50%{box-shadow:0 4px 18px rgba(255,107,53,0.55)}} /* Chatbot FAB : à droite, remonté au-dessus de la sticky, plus compact */ .sitigo-chat-fab{bottom:84px !important;right:14px !important;left:auto !important;width:48px !important;height:48px !important;font-size:22px !important} .sitigo-chat-panel{bottom:144px !important;right:14px !important;left:14px !important;max-width:none !important} } @media(max-width:900px){ .services-grid{grid-template-columns:repeat(2,1fr)} } /* ── HERO CASCADE ── */ @keyframes fadeSlideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} .hero h1,.hero-sub,.hero-ctas,.hero-micro,.hero-pill{opacity:0;animation:fadeSlideUp .8s cubic-bezier(.16,1,.3,1) forwards} .hero-pill{animation-delay:.1s} .hero h1{animation-delay:.25s} .hero-sub{animation-delay:.45s} .hero-ctas{animation-delay:.65s} .hero-micro{animation-delay:.85s} /* ── SHIMMER sur CTA principal ── */ @keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} .btn-primary{position:relative;overflow:hidden} .btn-primary::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);animation:shimmer 3s ease-in-out infinite;pointer-events:none} /* ── SCROLL REVEAL ── */ .reveal{opacity:0;transform:translateY(50px);transition:opacity 0.7s cubic-bezier(.16,1,.3,1),transform 0.7s cubic-bezier(.16,1,.3,1)} .reveal.visible{opacity:1;transform:translateY(0)} .feat,.step,.svc-card{opacity:0;transform:translateY(20px);transition:opacity 0.5s cubic-bezier(.16,1,.3,1),transform 0.35s cubic-bezier(.2,.8,.3,1),box-shadow 0.3s,border-color 0.3s} .reveal.visible .feat,.reveal.visible .step,.reveal.visible .svc-card{opacity:1;transform:translateY(0)} .reveal.visible .feat:nth-child(2),.reveal.visible .step:nth-child(2),.reveal.visible .svc-card:nth-child(2){transition-delay:.06s} .reveal.visible .feat:nth-child(3),.reveal.visible .step:nth-child(3),.reveal.visible .svc-card:nth-child(3){transition-delay:.12s} .reveal.visible .feat:nth-child(4),.reveal.visible .svc-card:nth-child(4){transition-delay:.18s} .reveal.visible .feat:nth-child(5),.reveal.visible .svc-card:nth-child(5){transition-delay:.24s} .reveal.visible .feat:nth-child(6),.reveal.visible .svc-card:nth-child(6){transition-delay:.3s} .reveal.visible .svc-card:nth-child(7){transition-delay:.36s} .feat:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,0.1);border-color:var(--orange)} .step:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.08);border-color:var(--orange)} .btn-primary{transition:all 0.25s cubic-bezier(.2,.8,.3,1)} .btn-primary:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 24px rgba(194,65,12,0.35)} .btn-lg:hover{transform:translateY(-2px) scale(1.03)} .btn-outline{transition:all 0.2s} /* ── SKIP LINK ── */ .skip{position:absolute;top:-100%;left:1rem;padding:0.6rem 1.2rem;background:var(--orange);color:#fff;font-weight:700;border-radius:6px;z-index:200;font-size:0.85rem} .skip:focus{top:0.5rem} /* ── PREFERS-REDUCED-MOTION ── */ @media(prefers-reduced-motion:reduce){ .reveal{transition:none;opacity:1;transform:none} .hero h1,.hero-sub,.hero-ctas,.hero-micro,.hero-pill,.hero-vis{animation:none;opacity:1} .btn-primary::after{animation:none;display:none} .feat,.btn,.btn-primary,.btn-lg,.step,.chip,.btn-outline,.svc-card{transition:none} .feat,.step,.svc-card{transition:none;opacity:1;transform:none} }