/* ============================================================ OpusRH — site vitrine. Design system. Palette ancrée dans le produit : fond nuit, accent bleu #3b82f6, vert "activité" #22c55e (les couleurs réelles des timelines). Zéro dépendance externe (pas de webfont, pas de CDN) : RGPD + perf. ============================================================ */ :root{ --bg:#0b1220; --panel:#0f172a; --panel2:#111b31; --line:#1e293b; --text:#e2e8f0; --muted:#94a3b8; --dim:#64748b; --accent:#3b82f6; --accent2:#60a5fa; --ok:#22c55e; --amber:#fbbf24; --orange:#f59e0b; --red:#ef4444; --radius:14px; --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Consolas,monospace; --maxw:1140px; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:4px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} /* ---------- typographie ---------- */ h1,h2,h3{line-height:1.12;margin:0 0 14px;font-weight:800;letter-spacing:-.03em} h1{font-size:clamp(2.1rem,4.6vw,3.4rem)} h2{font-size:clamp(1.5rem,2.8vw,2.1rem)} h3{font-size:1.12rem;letter-spacing:-.015em} p{margin:0 0 14px} .lead{font-size:1.13rem;color:var(--muted);max-width:46rem} .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2);margin:0 0 12px;display:flex;align-items:center;gap:10px} .eyebrow::before{content:"";display:inline-block;width:22px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--ok) 60%,var(--amber) 60%)} .muted{color:var(--muted)} .mono{font-family:var(--mono)} /* ---------- header ---------- */ .site-header{position:sticky;top:0;z-index:40;background:rgba(11,18,32,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .site-header .wrap{display:flex;align-items:center;gap:26px;height:64px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.14rem;letter-spacing:-.02em;color:var(--text)} .brand:hover{text-decoration:none} .brand .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#2563eb);display:grid;place-items:center;flex:none} .brand .mark span{display:block;width:12px;height:12px;border-radius:3px;background: linear-gradient(90deg,var(--ok) 0 55%,var(--amber) 55% 75%,var(--ok) 75%)} .nav{display:flex;align-items:center;gap:22px;margin-left:auto} .nav a{color:var(--muted);font-size:.95rem} .nav a:hover{color:var(--text);text-decoration:none} .nav a[aria-current="page"]{color:var(--text);font-weight:600} .lang{font-family:var(--mono);font-size:.78rem;border:1px solid var(--line);padding:4px 9px;border-radius:8px;color:var(--muted)} .lang:hover{color:var(--text);border-color:var(--dim);text-decoration:none} .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--text);border-radius:9px;padding:8px 11px;font-size:1rem;cursor:pointer} @media (max-width:900px){ .nav{position:fixed;inset:64px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:18px 22px;gap:16px;display:none} .nav.open{display:flex} .burger{display:block} } /* ---------- boutons ---------- */ .btn{display:inline-block;padding:12px 22px;border-radius:11px;font-weight:700;font-size:.98rem;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn-primary{background:linear-gradient(135deg,var(--accent),#2563eb);color:#fff;box-shadow:0 8px 24px rgba(59,130,246,.28)} .btn-primary:hover{box-shadow:0 10px 28px rgba(59,130,246,.4)} .btn-ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.02)} .btn-ghost:hover{border-color:var(--dim)} .btn-sm{padding:8px 16px;font-size:.9rem;border-radius:9px} /* ---------- hero ---------- */ .hero{padding:84px 0 40px;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:-40% -20% auto;height:80%; background:radial-gradient(60% 60% at 30% 30%,rgba(59,130,246,.16),transparent 70%), radial-gradient(50% 50% at 75% 20%,rgba(34,197,94,.08),transparent 70%); pointer-events:none} .hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} @media (max-width:960px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:56px}} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 18px} .hero-note{font-family:var(--mono);font-size:.78rem;color:var(--dim)} /* badges de preuve */ .proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .proof span{font-family:var(--mono);font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.02)} .proof b{color:var(--ok);font-weight:700} /* ---------- la signature : timeline produit ---------- */ .tlcard{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.45)} .tlcard .tlhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px} .tlcard .tlhead .who{font-weight:700} .tlcard .tlhead .rate{font-family:var(--mono);font-size:.8rem;color:var(--ok)} .tlrow{margin-bottom:14px} .tlrow .lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-bottom:5px} .tl{display:flex;height:26px;border-radius:7px;overflow:hidden;background:#0a1020;border:1px solid var(--line)} .tl i{display:block;height:100%;transform-origin:left;animation:grow .9s cubic-bezier(.2,.7,.2,1) both} .tl .a{background:var(--ok)} .tl .i2{background:var(--orange)} .tl .off{background:transparent} .tl i:nth-child(2){animation-delay:.12s}.tl i:nth-child(3){animation-delay:.22s} .tl i:nth-child(4){animation-delay:.3s}.tl i:nth-child(5){animation-delay:.38s} .tl i:nth-child(6){animation-delay:.46s}.tl i:nth-child(7){animation-delay:.54s} @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){.tl i{animation:none}} .legend{display:flex;gap:16px;font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:4px} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px} .legend .la{background:var(--ok)} .legend .li{background:var(--orange)} .legend .lo{background:#0a1020;border:1px solid var(--line)} /* ---------- sections ---------- */ .section{padding:72px 0;border-top:1px solid var(--line)} .section.alt{background:linear-gradient(180deg,rgba(15,23,42,.55),transparent)} .section-head{max-width:52rem;margin-bottom:38px} .grid{display:grid;gap:18px} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c2{grid-template-columns:repeat(2,1fr)} @media (max-width:960px){.grid.c3{grid-template-columns:1fr 1fr}} @media (max-width:640px){.grid.c3,.grid.c2{grid-template-columns:1fr}} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px} .card h3{margin-bottom:8px} .card p{color:var(--muted);font-size:.95rem;margin:0} .card .k{font-family:var(--mono);font-size:.7rem;color:var(--accent2);letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:10px} /* mesuré / jamais — les variantes .yes/.no sont stylées HORS de .split pour rester identiques partout (elles servent aussi dans une .grid, cf. « ce que le produit ne fait pas ») */ .split{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:820px){.split{grid-template-columns:1fr}} .card.yes ul,.card.no ul{margin:0;padding:0;list-style:none} .card.yes li,.card.no li{padding:9px 0;border-bottom:1px dashed var(--line);color:var(--muted);font-size:.95rem;display:flex;gap:10px;align-items:baseline} .card.yes li:last-child,.card.no li:last-child{border-bottom:none} .card.yes li::before{content:"▮";color:var(--ok);font-size:.8rem;flex:none} .card.no li::before{content:"✕";color:var(--red);font-weight:700;font-size:.85rem;flex:none} .card.yes h3,.card.no h3{display:flex;align-items:center;gap:10px} /* ---------- captures d'écran ---------- */ .shot{margin:34px 0} .browser{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)} .browser .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)} .browser .bar i{width:10px;height:10px;border-radius:50%;background:#22304d} .browser .bar .url{margin-left:10px;font-family:var(--mono);font-size:.7rem;color:var(--dim)} .browser img{width:100%} .shot figcaption{font-family:var(--mono);font-size:.74rem;color:var(--dim);margin-top:10px;text-align:center} /* ---------- tarifs ---------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} @media (max-width:960px){.plans{grid-template-columns:1fr}} .plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column} .plan.hot{border-color:var(--accent);box-shadow:0 18px 50px rgba(59,130,246,.18);position:relative} .plan.hot .pin{position:absolute;top:-11px;left:24px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;background:var(--accent);color:#fff;border-radius:999px;padding:4px 11px} .plan .price{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin:10px 0 2px} .plan .price small{font-size:.85rem;color:var(--muted);font-weight:500;letter-spacing:0} .plan ul{margin:16px 0 22px;padding:0;list-style:none;flex:1} .plan li{padding:8px 0;border-bottom:1px dashed var(--line);color:var(--muted);font-size:.93rem} .plan li::before{content:"▮ ";color:var(--ok);font-size:.75rem} .plan li:last-child{border-bottom:none} /* ---------- FAQ ---------- */ .faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:12px} .faq summary{cursor:pointer;padding:16px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);color:var(--accent2);font-weight:700} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 18px 16px;color:var(--muted);font-size:.95rem} /* ---------- formulaire contact ---------- */ .form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:640px){.form .row{grid-template-columns:1fr}} .form label{display:block;font-size:.85rem;color:var(--muted);margin:14px 0 6px} .form input,.form select,.form textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#0a1020;color:var(--text);font-family:var(--font);font-size:.95rem} .form textarea{min-height:120px;resize:vertical} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent)} .form .consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--muted);margin:16px 0} .form .consent input{width:16px;height:16px;margin-top:3px;accent-color:var(--accent);flex:none} .form .status{font-size:.9rem;margin-top:12px;display:none} .form .status.ok{display:block;color:var(--ok)} .form .status.err{display:block;color:var(--red)} .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden} /* ---------- CTA final ---------- */ .cta-final{padding:76px 0;text-align:center;border-top:1px solid var(--line); background:radial-gradient(60% 80% at 50% 0%,rgba(59,130,246,.14),transparent 70%)} .cta-final .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px} /* ---------- footer ---------- */ .site-footer{border-top:1px solid var(--line);padding:46px 0 30px;background:#0a101d} .site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px} @media (max-width:820px){.site-footer .cols{grid-template-columns:1fr 1fr}} @media (max-width:520px){.site-footer .cols{grid-template-columns:1fr}} .site-footer h4{font-size:.8rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 12px} .site-footer a{display:block;color:var(--muted);font-size:.92rem;padding:4px 0} .site-footer a:hover{color:var(--text)} .site-footer .base{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--dim)} /* ---------- check-list de fonctionnalites ---------- Une puce verte = livre et utilisable aujourd'hui. La variante .soon (puce ambre) sert aux fonctions partielles : on n'annonce jamais comme acquis ce qui ne l'est pas. */ .checks{margin:0;padding:0;list-style:none} .checks li{position:relative;padding:8px 0 8px 26px;border-bottom:1px dashed var(--line);color:var(--muted);font-size:.94rem} .checks li:last-child{border-bottom:none} .checks li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--ok);font-weight:800;font-size:.9rem} .checks li b{color:var(--text);font-weight:600} .checks li.soon::before{content:"◔";color:var(--amber)} .checks-legend{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-bottom:26px} .checks-legend b{color:var(--ok);font-weight:800} .checks-legend i{color:var(--amber);font-style:normal;font-weight:800} /* ---------- galerie de captures ---------- */ .shots{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:34px 0} @media (max-width:820px){.shots{grid-template-columns:1fr}} .shots .shot{margin:0} /* ---------- etapes numerotees ---------- NOM DISTINCT de .steps : cette derniere existe deja dans les pages Documentation pour des listes
    /