2567 lines
76 KiB
HTML
2567 lines
76 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Rubis Sur l'Ongle — Vos factures relancées toutes seules pendant que vous travaillez</title>
|
||
<meta name="description"
|
||
content="Le SaaS de relance de factures impayées pour TPE-PME françaises. Glissez vos factures, choisissez un plan, récupérez 5 heures par semaine.">
|
||
<meta property="og:title" content="Rubis Sur l'Ongle — Vos factures relancées toutes seules">
|
||
<meta property="og:description"
|
||
content="L'app de relance de factures pensée pour les TPE-PME françaises. 3 clics, OCR, plans de relance automatiques.">
|
||
<meta property="og:type" content="website">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap"
|
||
rel="stylesheet">
|
||
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||
<link rel="shortcut icon" href="favicon.ico" />
|
||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
|
||
<meta name="apple-mobile-web-app-title" content="Rubis" />
|
||
<link rel="manifest" href="site.webmanifest" />
|
||
<meta name="theme-color" content="#9F1239" />
|
||
<style>
|
||
:root {
|
||
--rubis: #9F1239;
|
||
--rubis-deep: #771328;
|
||
--rubis-light: #C9415C;
|
||
--rubis-glow: #FBE4EA;
|
||
--ink: #1A1410;
|
||
--ink-2: #4F4640;
|
||
--ink-3: #8A7F76;
|
||
--line: #E8E0D6;
|
||
--cream: #FAF7F2;
|
||
--cream-2: #F5EFE7;
|
||
--display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--max: 1180px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
background: var(--cream);
|
||
color: var(--ink);
|
||
font-family: var(--body);
|
||
font-size: 16px;
|
||
line-height: 1.55;
|
||
font-feature-settings: "ss01", "cv11";
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--rubis);
|
||
color: white;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
button {
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
input,
|
||
select {
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
/* === LAYOUT PRIMITIVES === */
|
||
.container {
|
||
max-width: var(--max);
|
||
margin: 0 auto;
|
||
padding: 0 32px;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.container {
|
||
padding: 0 20px;
|
||
}
|
||
}
|
||
|
||
.eyebrow {
|
||
font-family: var(--body);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.14em;
|
||
color: var(--rubis);
|
||
text-transform: uppercase;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.eyebrow::before {
|
||
content: "";
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--rubis);
|
||
transform: rotate(45deg);
|
||
display: inline-block;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4 {
|
||
font-family: var(--display);
|
||
letter-spacing: -0.018em;
|
||
}
|
||
|
||
h1 {
|
||
font-weight: 700;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.028em;
|
||
}
|
||
|
||
h2 {
|
||
font-weight: 600;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.022em;
|
||
font-size: 40px;
|
||
}
|
||
|
||
h3 {
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
font-size: 22px;
|
||
}
|
||
|
||
h4 {
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
font-size: 17px;
|
||
}
|
||
|
||
p {
|
||
color: var(--ink-2);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
em {
|
||
font-style: italic;
|
||
color: var(--rubis);
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
h2 {
|
||
font-size: 30px;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 19px;
|
||
}
|
||
}
|
||
|
||
/* === BUTTONS === */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 13px 22px;
|
||
border-radius: 6px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
transition: transform 0.1s, box-shadow 0.2s;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--rubis);
|
||
color: white;
|
||
box-shadow: 0 2px 8px rgba(159, 18, 57, 0.25);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--rubis-deep);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 6px 16px rgba(159, 18, 57, 0.35);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: var(--ink);
|
||
border: 1px solid var(--ink);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--ink);
|
||
color: white;
|
||
}
|
||
|
||
/* Layout commun pour 1-2 boutons côte-à-côte */
|
||
.cta-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
/* === BRAND MARK === */
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-family: var(--display);
|
||
font-weight: 800;
|
||
font-size: 19px;
|
||
letter-spacing: -0.02em;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.brand .gem-svg {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.brand-suffix {
|
||
font-family: var(--display);
|
||
font-style: italic;
|
||
font-weight: 500;
|
||
font-size: 12.5px;
|
||
color: var(--ink-3);
|
||
letter-spacing: -0.005em;
|
||
margin-left: 3px;
|
||
}
|
||
|
||
/* === HEADER === */
|
||
.site-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: rgba(250, 247, 242, 0.92);
|
||
backdrop-filter: saturate(140%) blur(8px);
|
||
-webkit-backdrop-filter: saturate(140%) blur(8px);
|
||
border-bottom: 1px solid transparent;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.site-header.scrolled {
|
||
border-bottom-color: var(--line);
|
||
}
|
||
|
||
.site-header .container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 18px;
|
||
padding-bottom: 18px;
|
||
}
|
||
|
||
.nav {
|
||
display: flex;
|
||
gap: 28px;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.nav a {
|
||
color: var(--ink-2);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.nav a:hover {
|
||
color: var(--rubis);
|
||
}
|
||
|
||
.nav .nav-cta {
|
||
background: var(--ink);
|
||
color: white;
|
||
padding: 9px 18px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.nav .nav-cta:hover {
|
||
background: var(--rubis);
|
||
color: white;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.nav .nav-link {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* === HERO === */
|
||
.hero {
|
||
padding: 80px 0 96px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -150px;
|
||
right: -200px;
|
||
width: 600px;
|
||
height: 600px;
|
||
background: radial-gradient(circle, rgba(251, 228, 234, 0.6), transparent 60%);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.hero .container {
|
||
display: grid;
|
||
grid-template-columns: 1.15fr 1fr;
|
||
gap: 64px;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
@media (max-width: 920px) {
|
||
.hero {
|
||
padding: 56px 0 72px;
|
||
}
|
||
|
||
.hero .container {
|
||
grid-template-columns: 1fr;
|
||
gap: 48px;
|
||
}
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(40px, 5.5vw, 64px);
|
||
margin: 18px 0 24px;
|
||
max-width: 620px;
|
||
}
|
||
|
||
.hero .lede {
|
||
font-size: 18px;
|
||
color: var(--ink-2);
|
||
line-height: 1.55;
|
||
margin-bottom: 32px;
|
||
max-width: 540px;
|
||
}
|
||
|
||
.hero .trust {
|
||
margin-top: 16px;
|
||
font-size: 12.5px;
|
||
color: var(--ink-3);
|
||
display: flex;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hero .trust span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.hero .trust .dot {
|
||
width: 4px;
|
||
height: 4px;
|
||
background: var(--ink-3);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* === WAITLIST FORM === */
|
||
.waitlist-form {
|
||
display: flex;
|
||
gap: 8px;
|
||
max-width: 480px;
|
||
background: white;
|
||
padding: 8px;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--line);
|
||
box-shadow: 0 4px 16px rgba(26, 20, 16, 0.04);
|
||
}
|
||
|
||
.waitlist-form input[type="email"] {
|
||
flex: 1;
|
||
border: none;
|
||
outline: none;
|
||
padding: 12px 14px;
|
||
font-size: 15px;
|
||
background: transparent;
|
||
color: var(--ink);
|
||
min-width: 0;
|
||
}
|
||
|
||
.waitlist-form input[type="email"]::placeholder {
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
.waitlist-form button {
|
||
background: var(--rubis);
|
||
color: white;
|
||
padding: 12px 20px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.waitlist-form button:hover {
|
||
background: var(--rubis-deep);
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.waitlist-form {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.waitlist-form button {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* === HERO VISUAL (dashboard preview) === */
|
||
.hero-visual {
|
||
position: relative;
|
||
perspective: 1400px;
|
||
}
|
||
|
||
.preview-card {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
padding: 28px;
|
||
box-shadow:
|
||
0 16px 40px -16px rgba(26, 20, 16, 0.18),
|
||
0 4px 8px -2px rgba(26, 20, 16, 0.06);
|
||
position: relative;
|
||
}
|
||
|
||
.preview-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 14px;
|
||
right: 14px;
|
||
width: 64px;
|
||
height: 4px;
|
||
background: var(--rubis-glow);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.preview-rubis {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
padding-bottom: 18px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.preview-rubis .gem-big {
|
||
filter: drop-shadow(0 4px 8px rgba(159, 18, 57, 0.3));
|
||
}
|
||
|
||
.preview-rubis .num {
|
||
font-family: var(--display);
|
||
font-size: 38px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
letter-spacing: -0.025em;
|
||
}
|
||
|
||
.preview-rubis .sub {
|
||
font-size: 13px;
|
||
color: var(--ink-2);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.preview-kpis {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.preview-kpi {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.preview-kpi .label {
|
||
color: var(--ink-3);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.preview-kpi .value {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 20px;
|
||
margin-top: 2px;
|
||
letter-spacing: -0.015em;
|
||
}
|
||
|
||
.preview-kpi .delta {
|
||
color: var(--rubis);
|
||
font-size: 11.5px;
|
||
font-weight: 500;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.preview-card .activity {
|
||
margin-top: 18px;
|
||
padding-top: 18px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.preview-card .activity .head {
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.preview-card .activity ul {
|
||
list-style: none;
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
.preview-card .activity li {
|
||
padding: 6px 0;
|
||
color: var(--ink-2);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.preview-card .activity li b {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.preview-card .activity li time {
|
||
color: var(--ink-3);
|
||
font-size: 11px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.floating-badge {
|
||
position: absolute;
|
||
bottom: -22px;
|
||
left: -22px;
|
||
background: var(--ink);
|
||
color: white;
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
box-shadow: 0 8px 24px rgba(26, 20, 16, 0.25);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.floating-badge svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
color: var(--rubis-light);
|
||
}
|
||
|
||
@media (max-width: 920px) {
|
||
.floating-badge {
|
||
left: 8px;
|
||
bottom: -16px;
|
||
}
|
||
}
|
||
|
||
/* === SECTION COMMON === */
|
||
section {
|
||
padding: 96px 0;
|
||
position: relative;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
section {
|
||
padding: 64px 0;
|
||
}
|
||
}
|
||
|
||
.section-head {
|
||
text-align: center;
|
||
max-width: 700px;
|
||
margin: 0 auto 56px;
|
||
}
|
||
|
||
.section-head h2 {
|
||
margin: 14px 0 14px;
|
||
}
|
||
|
||
.section-head p {
|
||
font-size: 17px;
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
/* === STATS === */
|
||
.stats {
|
||
background: var(--cream-2);
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
padding: 32px 28px;
|
||
text-align: left;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 20px rgba(26, 20, 16, 0.06);
|
||
}
|
||
|
||
.stat-card .num {
|
||
font-family: var(--display);
|
||
font-size: 56px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
color: var(--rubis);
|
||
letter-spacing: -0.03em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-card .desc {
|
||
font-size: 15px;
|
||
color: var(--ink);
|
||
line-height: 1.4;
|
||
margin-bottom: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stat-card .source {
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
border-top: 1px solid var(--line);
|
||
padding-top: 10px;
|
||
}
|
||
|
||
/* === PROMISE === */
|
||
.promise .container {
|
||
max-width: 920px;
|
||
}
|
||
|
||
.promise blockquote {
|
||
font-family: var(--display);
|
||
font-size: clamp(32px, 4.5vw, 52px);
|
||
font-weight: 600;
|
||
line-height: 1.15;
|
||
letter-spacing: -0.025em;
|
||
color: var(--ink);
|
||
border-left: 4px solid var(--rubis);
|
||
padding: 12px 0 12px 32px;
|
||
margin: 0 0 32px;
|
||
}
|
||
|
||
.promise blockquote em {
|
||
font-style: italic;
|
||
}
|
||
|
||
.promise .body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
margin-top: 32px;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.promise .body {
|
||
grid-template-columns: 1fr;
|
||
gap: 32px;
|
||
}
|
||
}
|
||
|
||
.promise .body p {
|
||
font-size: 16px;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.promise .calc {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
padding: 28px;
|
||
}
|
||
|
||
.promise .calc h4 {
|
||
font-size: 13px;
|
||
color: var(--rubis);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
font-family: var(--body);
|
||
margin-bottom: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.promise .calc .row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
padding: 10px 0;
|
||
border-bottom: 1px dashed var(--line);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.promise .calc .row:last-child {
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.promise .calc .row .label {
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
.promise .calc .row .val {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.promise .calc .row.total .label {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.promise .calc .row.total .val {
|
||
color: var(--rubis);
|
||
font-size: 22px;
|
||
}
|
||
|
||
/* === HOW IT WORKS (editorial light) === */
|
||
.how-it-works {
|
||
background: var(--cream-2);
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.how-it-works .head-block {
|
||
margin-bottom: 32px;
|
||
max-width: 640px;
|
||
}
|
||
|
||
.how-it-works .head-block h2 {
|
||
margin: 14px 0 12px;
|
||
font-size: clamp(34px, 4.2vw, 48px);
|
||
}
|
||
|
||
.how-it-works .head-block p {
|
||
font-size: 17px;
|
||
}
|
||
|
||
.step-row {
|
||
display: grid;
|
||
grid-template-columns: 320px 1fr;
|
||
gap: 56px;
|
||
align-items: center;
|
||
padding: 48px 0;
|
||
border-top: 1px dashed var(--line);
|
||
}
|
||
|
||
.step-row.flip {
|
||
grid-template-columns: 1fr 320px;
|
||
}
|
||
|
||
.step-num-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 14px;
|
||
}
|
||
|
||
.step-row.flip .step-num-block {
|
||
order: 2;
|
||
}
|
||
|
||
.step-row.flip .step-prose {
|
||
order: 1;
|
||
}
|
||
|
||
.step-tag {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 12.5px;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--rubis);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.step-tag::before {
|
||
content: "";
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--rubis);
|
||
transform: rotate(45deg);
|
||
display: inline-block;
|
||
}
|
||
|
||
.step-widget {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
box-shadow: 0 12px 32px -16px rgba(26, 20, 16, 0.14), 0 2px 6px rgba(26, 20, 16, 0.04);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* Widget 1 — Dropzone */
|
||
.widget-dropzone {
|
||
background: white;
|
||
border: 2px dashed var(--rubis-light);
|
||
padding: 26px 22px 22px;
|
||
text-align: center;
|
||
}
|
||
|
||
.widget-dropzone .dz-arrow {
|
||
font-family: var(--display);
|
||
font-size: 26px;
|
||
font-weight: 600;
|
||
color: var(--rubis);
|
||
line-height: 1;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.widget-dropzone .dz-invoice {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 16px 18px 14px;
|
||
box-shadow: 0 8px 22px -10px rgba(26, 20, 16, 0.18);
|
||
text-align: left;
|
||
position: relative;
|
||
margin: 0 auto 12px;
|
||
max-width: 220px;
|
||
}
|
||
|
||
.widget-dropzone .dz-line {
|
||
height: 6px;
|
||
background: #E5DFD3;
|
||
border-radius: 2px;
|
||
margin-bottom: 7px;
|
||
}
|
||
|
||
.widget-dropzone .dz-line.short {
|
||
width: 50%;
|
||
}
|
||
|
||
.widget-dropzone .dz-line.med {
|
||
width: 75%;
|
||
}
|
||
|
||
.widget-dropzone .dz-amount {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 21px;
|
||
color: var(--ink);
|
||
letter-spacing: -0.018em;
|
||
margin-top: 12px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid var(--line);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.widget-dropzone .dz-extracts {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.widget-dropzone .dz-extract-gem {
|
||
width: 7px;
|
||
height: 7px;
|
||
background: var(--rubis);
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.widget-dropzone .dz-extract-gem:nth-child(2) {
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.widget-dropzone .dz-extract-gem:nth-child(3) {
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.widget-dropzone .dz-filename {
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||
}
|
||
|
||
/* Widget 2 — Calendar */
|
||
.widget-calendar {
|
||
padding: 22px 22px 18px;
|
||
}
|
||
|
||
.widget-calendar .cal-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.widget-calendar .cal-month {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
color: var(--ink);
|
||
letter-spacing: -0.012em;
|
||
}
|
||
|
||
.widget-calendar .cal-nav {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.widget-calendar .cal-nav-btn {
|
||
width: 22px;
|
||
height: 22px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
.widget-calendar .cal-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
gap: 3px 2px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.widget-calendar .cal-weekday {
|
||
text-align: center;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: var(--ink-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
padding: 4px 0 6px;
|
||
}
|
||
|
||
.widget-calendar .cal-day {
|
||
aspect-ratio: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12.5px;
|
||
color: var(--ink-2);
|
||
border-radius: 50%;
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.widget-calendar .cal-day.empty {
|
||
color: transparent;
|
||
}
|
||
|
||
.widget-calendar .cal-day.is-marked {
|
||
background: var(--rubis);
|
||
color: white;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.widget-calendar .cal-foot {
|
||
border-top: 1px dashed var(--line);
|
||
padding-top: 12px;
|
||
margin-top: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
.widget-calendar .cal-legend {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.widget-calendar .cal-legend-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--rubis);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* Widget 3 — Assistant (recolored undraw) */
|
||
.widget-assistant {
|
||
padding: 12px;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 280px;
|
||
}
|
||
|
||
.widget-assistant svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
max-height: 280px;
|
||
}
|
||
|
||
.step-prose h3 {
|
||
font-family: var(--display);
|
||
font-size: clamp(24px, 2.6vw, 30px);
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.018em;
|
||
margin-bottom: 14px;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.step-prose p {
|
||
font-size: 17px;
|
||
line-height: 1.65;
|
||
color: var(--ink-2);
|
||
max-width: 560px;
|
||
}
|
||
|
||
.step-prose .reward {
|
||
margin-top: 18px;
|
||
padding: 14px 18px;
|
||
background: white;
|
||
border-left: 3px solid var(--rubis);
|
||
font-style: italic;
|
||
color: var(--ink);
|
||
font-size: 15.5px;
|
||
border-radius: 0 6px 6px 0;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
|
||
.step-row,
|
||
.step-row.flip {
|
||
grid-template-columns: 1fr;
|
||
gap: 14px;
|
||
padding: 36px 0;
|
||
}
|
||
|
||
.step-row.flip .step-num-block {
|
||
order: 0;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.step-row.flip .step-num-big {
|
||
text-align: left;
|
||
}
|
||
|
||
.step-row.flip .step-prose {
|
||
order: 1;
|
||
}
|
||
|
||
.step-num-big {
|
||
font-size: 96px;
|
||
}
|
||
|
||
.step-icon {
|
||
width: 52px;
|
||
height: 52px;
|
||
}
|
||
}
|
||
|
||
/* === GAMIFICATION === */
|
||
.game .container {
|
||
max-width: 1080px;
|
||
}
|
||
|
||
.game-card {
|
||
background: linear-gradient(135deg, var(--rubis-glow) 0%, white 100%);
|
||
border-radius: 20px;
|
||
padding: 64px 56px;
|
||
border: 1px solid var(--line);
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.game-card::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -100px;
|
||
right: -100px;
|
||
width: 360px;
|
||
height: 360px;
|
||
background: radial-gradient(circle, rgba(159, 18, 57, 0.08) 0%, transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.game-card .gem-huge {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin: 0 auto 20px;
|
||
filter: drop-shadow(0 8px 16px rgba(159, 18, 57, 0.35));
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.game-card h2 {
|
||
font-size: clamp(34px, 4vw, 50px);
|
||
margin-bottom: 16px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.game-card .lead {
|
||
font-size: 18px;
|
||
color: var(--ink-2);
|
||
max-width: 640px;
|
||
margin: 0 auto 32px;
|
||
line-height: 1.6;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.game-counter {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
padding: 18px 32px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 4px 16px rgba(26, 20, 16, 0.06);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.game-counter .big {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 56px;
|
||
line-height: 1;
|
||
letter-spacing: -0.03em;
|
||
color: var(--rubis);
|
||
}
|
||
|
||
.game-counter .unit {
|
||
font-family: var(--display);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.game-counter .equals {
|
||
font-size: 14px;
|
||
color: var(--ink-2);
|
||
margin-left: 8px;
|
||
border-left: 1px solid var(--line);
|
||
padding-left: 16px;
|
||
}
|
||
|
||
.game-counter .equals b {
|
||
font-family: var(--display);
|
||
color: var(--ink);
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.game-card {
|
||
padding: 48px 24px;
|
||
}
|
||
|
||
.game-counter {
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: 18px 22px;
|
||
}
|
||
|
||
.game-counter .equals {
|
||
border-left: none;
|
||
border-top: 1px solid var(--line);
|
||
padding-left: 0;
|
||
padding-top: 8px;
|
||
margin-left: 0;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
/* === LEGAL (clipping de presse) === */
|
||
.legal {
|
||
background: var(--cream-2);
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.legal .container {
|
||
max-width: 1100px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 72px;
|
||
align-items: center;
|
||
}
|
||
|
||
@media (max-width: 880px) {
|
||
.legal .container {
|
||
grid-template-columns: 1fr;
|
||
gap: 40px;
|
||
}
|
||
}
|
||
|
||
.legal h2 {
|
||
font-size: clamp(30px, 3.6vw, 42px);
|
||
margin: 14px 0 20px;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.legal p {
|
||
font-size: 16px;
|
||
margin-bottom: 16px;
|
||
line-height: 1.7;
|
||
max-width: 480px;
|
||
}
|
||
|
||
.legal .law-tag {
|
||
display: inline-block;
|
||
background: var(--ink);
|
||
color: var(--cream);
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||
font-size: 12.5px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.clipping {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 40px 44px 32px;
|
||
position: relative;
|
||
box-shadow: 0 4px 20px rgba(26, 20, 16, 0.05);
|
||
}
|
||
|
||
.clipping::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: var(--ink);
|
||
border-radius: 6px 6px 0 0;
|
||
}
|
||
|
||
.clipping .headline {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: var(--ink-3);
|
||
border-bottom: 1px solid var(--line);
|
||
padding-bottom: 14px;
|
||
margin-bottom: 28px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.clipping .big-number {
|
||
font-family: var(--display);
|
||
font-weight: 800;
|
||
font-size: clamp(80px, 11vw, 132px);
|
||
line-height: 0.88;
|
||
letter-spacing: -0.045em;
|
||
color: var(--rubis);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.clipping .lead {
|
||
font-family: var(--display);
|
||
font-size: 19px;
|
||
font-weight: 500;
|
||
color: var(--ink);
|
||
line-height: 1.35;
|
||
margin-bottom: 28px;
|
||
letter-spacing: -0.012em;
|
||
}
|
||
|
||
.clipping .names-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding-top: 18px;
|
||
border-top: 1px dashed var(--line);
|
||
}
|
||
|
||
.clipping .names-list li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
padding: 7px 0;
|
||
color: var(--ink-2);
|
||
align-items: baseline;
|
||
}
|
||
|
||
.clipping .names-list li b {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
font-family: var(--display);
|
||
font-size: 15px;
|
||
}
|
||
|
||
.clipping .names-list li .amount {
|
||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||
font-size: 13px;
|
||
color: var(--ink-2);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.clipping .source-line {
|
||
margin-top: 20px;
|
||
padding-top: 14px;
|
||
border-top: 1px solid var(--line);
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* === PRICING (anchor on Pro, asides conversationnels) === */
|
||
.pricing .head-block {
|
||
margin-bottom: 48px;
|
||
max-width: 700px;
|
||
}
|
||
|
||
.pricing .head-block h2 {
|
||
margin: 14px 0 12px;
|
||
font-size: clamp(34px, 4.2vw, 48px);
|
||
}
|
||
|
||
.pricing .head-block p {
|
||
font-size: 17px;
|
||
}
|
||
|
||
.pricing-anchor {
|
||
display: grid;
|
||
grid-template-columns: 1.25fr 1fr;
|
||
gap: 0;
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
box-shadow: 0 12px 36px -16px rgba(159, 18, 57, 0.18);
|
||
}
|
||
|
||
.pricing-anchor::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -100px;
|
||
right: -100px;
|
||
width: 360px;
|
||
height: 360px;
|
||
background: radial-gradient(circle, rgba(251, 228, 234, 0.6), transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.pricing-anchor .left {
|
||
padding: 48px 48px 44px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.pricing-anchor .plan-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: var(--body);
|
||
font-weight: 600;
|
||
font-size: 12.5px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--rubis);
|
||
background: var(--rubis-glow);
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.pricing-anchor .plan-tag::before {
|
||
content: "";
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--rubis);
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.pricing-anchor .plan-name {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: clamp(36px, 4.4vw, 52px);
|
||
letter-spacing: -0.025em;
|
||
line-height: 1.05;
|
||
margin-bottom: 18px;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.pricing-anchor .plan-name em {
|
||
font-style: italic;
|
||
color: var(--rubis);
|
||
}
|
||
|
||
.pricing-anchor .price-mega {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.pricing-anchor .price-mega .num {
|
||
font-family: var(--display);
|
||
font-weight: 800;
|
||
font-size: clamp(64px, 8vw, 96px);
|
||
line-height: 0.88;
|
||
letter-spacing: -0.035em;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.pricing-anchor .price-mega .per {
|
||
font-family: var(--body);
|
||
font-size: 16px;
|
||
color: var(--ink-3);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.pricing-anchor .pitch {
|
||
font-size: 17px;
|
||
line-height: 1.65;
|
||
color: var(--ink-2);
|
||
margin-bottom: 24px;
|
||
max-width: 520px;
|
||
}
|
||
|
||
.pricing-anchor .pitch b {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.pricing-anchor .cta-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.pricing-anchor .cta-row .meta {
|
||
font-size: 13px;
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
.pricing-anchor .right {
|
||
background: var(--cream);
|
||
border-left: 1px solid var(--line);
|
||
padding: 48px 44px 44px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.pricing-anchor .features-title {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: var(--ink-3);
|
||
font-weight: 700;
|
||
margin-bottom: 22px;
|
||
font-family: var(--body);
|
||
}
|
||
|
||
.pricing-anchor .features {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 14.5px;
|
||
}
|
||
|
||
.pricing-anchor .features li {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
padding: 9px 0;
|
||
color: var(--ink-2);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.pricing-anchor .features svg {
|
||
flex-shrink: 0;
|
||
margin-top: 3px;
|
||
color: var(--rubis);
|
||
}
|
||
|
||
.pricing-anchor .features li b {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.pricing-asides-intro {
|
||
text-align: center;
|
||
margin: 40px auto 18px;
|
||
font-family: var(--display);
|
||
font-style: italic;
|
||
font-size: 16px;
|
||
color: var(--ink-3);
|
||
font-weight: 500;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
|
||
.pricing-asides {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
a.pricing-aside {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 28px 30px 24px;
|
||
border: 1px dashed var(--line);
|
||
border-radius: 12px;
|
||
background: transparent;
|
||
position: relative;
|
||
transition: border 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
a.pricing-aside:hover {
|
||
border-style: solid;
|
||
border-color: var(--ink);
|
||
background: white;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 16px 32px -16px rgba(26, 20, 16, 0.18);
|
||
}
|
||
|
||
.pricing-aside .name-line {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.pricing-aside .name {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 19px;
|
||
color: var(--ink);
|
||
letter-spacing: -0.012em;
|
||
}
|
||
|
||
.pricing-aside .price-small {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 22px;
|
||
color: var(--rubis);
|
||
letter-spacing: -0.015em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pricing-aside .price-small .per {
|
||
font-family: var(--body);
|
||
font-size: 12.5px;
|
||
color: var(--ink-3);
|
||
font-weight: 400;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.pricing-aside .qualifier {
|
||
font-size: 12.5px;
|
||
color: var(--rubis);
|
||
font-style: italic;
|
||
margin-bottom: 14px;
|
||
font-family: var(--display);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pricing-aside p {
|
||
font-size: 14.5px;
|
||
line-height: 1.6;
|
||
color: var(--ink-2);
|
||
margin: 0 0 18px;
|
||
flex: 1;
|
||
}
|
||
|
||
.pricing-aside p b {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.pricing-aside code {
|
||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||
font-size: 12px;
|
||
background: var(--cream-2);
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.pricing-aside .aside-cta {
|
||
font-family: var(--display);
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
color: var(--ink);
|
||
border-top: 1px dashed var(--line);
|
||
padding-top: 16px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
transition: color 0.2s, gap 0.2s;
|
||
}
|
||
|
||
.pricing-aside:hover .aside-cta {
|
||
color: var(--rubis);
|
||
gap: 14px;
|
||
}
|
||
|
||
.pricing-aside .arrow {
|
||
font-family: var(--body);
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.pricing-aside:hover .arrow {
|
||
transform: translateX(2px);
|
||
}
|
||
|
||
@media (max-width: 880px) {
|
||
.pricing-anchor {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.pricing-anchor .left {
|
||
padding: 36px 32px 32px;
|
||
}
|
||
|
||
.pricing-anchor .right {
|
||
border-left: none;
|
||
border-top: 1px solid var(--line);
|
||
padding: 32px;
|
||
}
|
||
|
||
.pricing-asides {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
}
|
||
|
||
.pricing-footnote {
|
||
margin-top: 32px;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
/* === FAQ === */
|
||
.faq .container {
|
||
max-width: 760px;
|
||
}
|
||
|
||
.faq-item {
|
||
border-bottom: 1px solid var(--line);
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.faq-item summary {
|
||
font-family: var(--display);
|
||
font-weight: 600;
|
||
font-size: 17px;
|
||
color: var(--ink);
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
list-style: none;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.faq-item summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.faq-item summary::after {
|
||
content: "+";
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
color: var(--rubis);
|
||
transition: transform 0.2s;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.faq-item[open] summary::after {
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.faq-item .answer {
|
||
padding-top: 12px;
|
||
font-size: 15px;
|
||
color: var(--ink-2);
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* === FINAL CTA === */
|
||
.final-cta {
|
||
background: var(--rubis);
|
||
color: white;
|
||
padding: 96px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.final-cta::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -200px;
|
||
right: -200px;
|
||
width: 500px;
|
||
height: 500px;
|
||
opacity: 0.08;
|
||
background: radial-gradient(circle, white, transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.final-cta .container {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 720px;
|
||
}
|
||
|
||
.final-cta h2 {
|
||
color: white;
|
||
font-size: clamp(34px, 4.5vw, 52px);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.final-cta p {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-size: 17px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.final-cta .waitlist-form {
|
||
margin: 0 auto;
|
||
background: white;
|
||
}
|
||
|
||
.final-cta .waitlist-form button {
|
||
background: var(--ink);
|
||
}
|
||
|
||
.final-cta .waitlist-form button:hover {
|
||
background: var(--rubis-deep);
|
||
}
|
||
|
||
.final-cta .micro {
|
||
margin-top: 16px;
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
/* === FOOTNOTES === */
|
||
.footnotes {
|
||
background: var(--cream);
|
||
padding: 36px 0 28px;
|
||
border-top: 1px dashed var(--line);
|
||
}
|
||
|
||
.footnotes .container {
|
||
max-width: 760px;
|
||
}
|
||
|
||
.footnotes p {
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
color: var(--ink-3);
|
||
font-style: italic;
|
||
margin: 0;
|
||
}
|
||
|
||
.footnotes p .marker {
|
||
font-style: normal;
|
||
color: var(--rubis);
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.footnotes p b {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-family: var(--display);
|
||
}
|
||
|
||
.footnotes p i {
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
/* === FOOTER === */
|
||
.site-footer {
|
||
background: var(--cream-2);
|
||
color: var(--ink-2);
|
||
padding: 56px 0 40px;
|
||
font-size: 13px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.site-footer .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
}
|
||
|
||
.site-footer .brand {
|
||
color: var(--ink);
|
||
}
|
||
|
||
.site-footer nav {
|
||
display: flex;
|
||
gap: 24px;
|
||
}
|
||
|
||
.site-footer nav a {
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
.site-footer nav a:hover {
|
||
color: var(--rubis);
|
||
}
|
||
|
||
.site-footer .copy {
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.site-footer .container {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
|
||
/* === FORM SUCCESS STATE (after submit) === */
|
||
.form-success {
|
||
background: white;
|
||
border: 1px solid var(--rubis);
|
||
color: var(--rubis-deep);
|
||
padding: 16px 18px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
display: none;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.form-success.visible {
|
||
display: flex;
|
||
}
|
||
</style>
|
||
|
||
<!-- Privacy-friendly analytics by Plausible (RGPD-friendly, no cookies) -->
|
||
<script async src="https://plausible.io/js/pa-zLenWxEI1wBQxOWaZrS94.js"></script>
|
||
<script>
|
||
window.plausible = window.plausible || function () { (plausible.q = plausible.q || []).push(arguments) }, plausible.init = plausible.init || function (i) { plausible.o = i || {} };
|
||
plausible.init()
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- ============== HEADER ============== -->
|
||
<header class="site-header" id="siteHeader">
|
||
<div class="container">
|
||
<a href="#" class="brand">
|
||
<svg class="gem-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239" />
|
||
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.55)" stroke-width="3" />
|
||
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2" />
|
||
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2" />
|
||
</svg>
|
||
<span>Rubis<span class="brand-suffix">sur l'ongle</span></span>
|
||
</a>
|
||
<nav class="nav">
|
||
<a href="#how" class="nav-link">Comment ça marche</a>
|
||
<a href="#pricing" class="nav-link">Tarifs</a>
|
||
<a href="#faq" class="nav-link">FAQ</a>
|
||
<a href="https://app.rubis.pro" class="nav-cta">Lancer Rubis</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============== HERO ============== -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div>
|
||
<div class="eyebrow">L'outil de relance pour TPE-PME françaises</div>
|
||
<h1>Vos factures relancées <em>toutes seules</em> pendant que vous travaillez.</h1>
|
||
<p class="lede">L'app de relance de factures impayées pensée pour les TPE-PME françaises. Glissez-déposez vos
|
||
factures, choisissez un plan de relance, oubliez-les. Rubis envoie, suit, relance — et vous récupérez en
|
||
moyenne
|
||
<b>5 heures par semaine</b>.
|
||
</p>
|
||
<div class="cta-row">
|
||
<a href="https://app.rubis.pro" class="btn btn-primary">
|
||
Lancer Rubis →
|
||
</a>
|
||
<a href="#pricing" class="btn btn-secondary">
|
||
Voir les tarifs
|
||
</a>
|
||
</div>
|
||
<div class="trust">
|
||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg> 3 mois gratuits puis Free 5 factures</span>
|
||
<span class="dot"></span>
|
||
<span>Hébergement souverain</span>
|
||
<span class="dot"></span>
|
||
<span>Made in France 🇫🇷</span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="preview-card">
|
||
<div class="preview-rubis">
|
||
<svg class="gem-big" width="56" height="56" viewBox="0 0 200 200">
|
||
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239" />
|
||
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.6)" stroke-width="3" />
|
||
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2" />
|
||
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2" />
|
||
</svg>
|
||
<div>
|
||
<div class="num">124 rubis</div>
|
||
<div class="sub">≈ 24 h 48 que vous n'avez pas passées à relancer.</div>
|
||
</div>
|
||
</div>
|
||
<div class="preview-kpis">
|
||
<div class="preview-kpi">
|
||
<div class="label">Encaissé</div>
|
||
<div class="value">14 320 €</div>
|
||
<div class="delta">+ 2 800 € vs avril</div>
|
||
</div>
|
||
<div class="preview-kpi">
|
||
<div class="label">DSO</div>
|
||
<div class="value">38 j</div>
|
||
<div class="delta">↘ −6 j depuis Rubis</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity">
|
||
<div class="head">Aujourd'hui</div>
|
||
<ul>
|
||
<li><span>📤 Relance envoyée à <b>Atelier Durand</b></span><time>11:14</time></li>
|
||
<li><span>✓ Facture <b>F-2024-0035</b> encaissée</span><time>10:02</time></li>
|
||
<li><span>📥 3 factures importées et OCRisées</span><time>09:48</time></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="floating-badge">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<polyline points="12 6 12 12 16 14" />
|
||
</svg>
|
||
~3 minutes le matin
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== STATS ============== -->
|
||
<section class="stats">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow">L'état des paiements en France</div>
|
||
<h2>Trois chiffres qui devraient vous fâcher.</h2>
|
||
<p>Si vous lisez ça, vous avez probablement une facture impayée à l'heure où on parle. Vous n'êtes pas un cas
|
||
isolé.</p>
|
||
</div>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="num">44 j</div>
|
||
<div class="desc">Le retard moyen de paiement pour une facture émise par une TPE en France.</div>
|
||
<div class="source">Source : Altares · Observatoire des délais de paiement, 2024</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="num">15 Md€</div>
|
||
<div class="desc">De trésorerie bloquée chez les PME françaises à cause des retards de paiement.</div>
|
||
<div class="source">Source : Banque de France · Rapport annuel 2024</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="num">−26 %</div>
|
||
<div class="desc">De chances d'être payé si vous attendez plus de 30 jours pour relancer.</div>
|
||
<div class="source">Source : AFDCC · Étude crédit management</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== PROMISE ============== -->
|
||
<section class="promise">
|
||
<div class="container">
|
||
<div class="eyebrow">Notre conviction</div>
|
||
<blockquote>Votre temps vaut <em>plus que ça</em>.</blockquote>
|
||
<div class="body">
|
||
<div>
|
||
<p>Vous n'avez pas créé votre boîte pour passer vos lundis soirs à rédiger des relances polies. Pendant que
|
||
vous écrivez "je me permets un petit rappel concernant…", vous ne facturez pas, vous ne vendez pas, vous ne
|
||
créez pas.</p>
|
||
<p>Les PME qui automatisent leurs relances passent de <b>8 heures par semaine</b> à <b>moins de 3</b>. Soit 5
|
||
heures de votre vie récupérées. Toutes les semaines. Pour toujours.</p>
|
||
</div>
|
||
<div class="calc">
|
||
<h4>Votre temps en chiffres</h4>
|
||
<div class="row"><span class="label">Heures perdues / semaine</span><span class="val">5 h</span></div>
|
||
<div class="row"><span class="label">Sur un mois</span><span class="val">~ 21 h</span></div>
|
||
<div class="row"><span class="label">À 50 €/h facturés</span><span class="val">1 050 €</span></div>
|
||
<div class="row total"><span class="label">Coût annuel d'une relance manuelle</span><span class="val">12 600
|
||
€</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== HOW IT WORKS ============== -->
|
||
<section class="how-it-works" id="how">
|
||
<div class="container">
|
||
<div class="head-block">
|
||
<div class="eyebrow">Comment ça marche</div>
|
||
<h2>Trois étapes. C'est tout.</h2>
|
||
<p>Vraiment. Parfois deux, si votre plan par défaut est bien réglé.</p>
|
||
</div>
|
||
|
||
<div class="step-row">
|
||
<div class="step-num-block">
|
||
<div class="step-tag">Étape 01</div>
|
||
<div class="step-widget widget-dropzone">
|
||
<div class="dz-extracts" aria-hidden="true">
|
||
<span class="dz-extract-gem"></span>
|
||
<span class="dz-extract-gem"></span>
|
||
<span class="dz-extract-gem"></span>
|
||
</div>
|
||
<div class="dz-arrow">↓</div>
|
||
<div class="dz-invoice">
|
||
<div class="dz-line med"></div>
|
||
<div class="dz-line short"></div>
|
||
<div class="dz-line"></div>
|
||
<div class="dz-line med"></div>
|
||
<div class="dz-amount">1 240,00 €</div>
|
||
</div>
|
||
<div class="dz-filename">facture-2024-0042.pdf</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-prose">
|
||
<h3>Vous importez vos factures.</h3>
|
||
<p>PDF, photo prise depuis votre téléphone à la caisse, scan reçu par mail — peu importe. L'OCR* lit, extrait
|
||
montant, client, échéance, RIB. Vous vérifiez. Vingt secondes par facture, montre en main.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-row flip">
|
||
<div class="step-num-block">
|
||
<div class="step-tag">Étape 02</div>
|
||
<div class="step-widget widget-calendar">
|
||
<div class="cal-head">
|
||
<div class="cal-month">Mai 2026</div>
|
||
<div class="cal-nav">
|
||
<span class="cal-nav-btn">‹</span>
|
||
<span class="cal-nav-btn">›</span>
|
||
</div>
|
||
</div>
|
||
<div class="cal-grid" role="grid" aria-label="Calendrier des relances">
|
||
<div class="cal-weekday">L</div>
|
||
<div class="cal-weekday">M</div>
|
||
<div class="cal-weekday">M</div>
|
||
<div class="cal-weekday">J</div>
|
||
<div class="cal-weekday">V</div>
|
||
<div class="cal-weekday">S</div>
|
||
<div class="cal-weekday">D</div>
|
||
<div class="cal-day empty">·</div>
|
||
<div class="cal-day empty">·</div>
|
||
<div class="cal-day empty">·</div>
|
||
<div class="cal-day empty">·</div>
|
||
<div class="cal-day">1</div>
|
||
<div class="cal-day">2</div>
|
||
<div class="cal-day">3</div>
|
||
<div class="cal-day">4</div>
|
||
<div class="cal-day">5</div>
|
||
<div class="cal-day">6</div>
|
||
<div class="cal-day">7</div>
|
||
<div class="cal-day is-marked" aria-label="Relance J+3, 8 mai">8</div>
|
||
<div class="cal-day">9</div>
|
||
<div class="cal-day">10</div>
|
||
<div class="cal-day">11</div>
|
||
<div class="cal-day">12</div>
|
||
<div class="cal-day">13</div>
|
||
<div class="cal-day">14</div>
|
||
<div class="cal-day is-marked" aria-label="Relance J+10, 15 mai">15</div>
|
||
<div class="cal-day">16</div>
|
||
<div class="cal-day">17</div>
|
||
<div class="cal-day">18</div>
|
||
<div class="cal-day">19</div>
|
||
<div class="cal-day">20</div>
|
||
<div class="cal-day">21</div>
|
||
<div class="cal-day">22</div>
|
||
<div class="cal-day">23</div>
|
||
<div class="cal-day">24</div>
|
||
<div class="cal-day is-marked" aria-label="Relance J+20, 25 mai">25</div>
|
||
<div class="cal-day">26</div>
|
||
<div class="cal-day">27</div>
|
||
<div class="cal-day">28</div>
|
||
<div class="cal-day">29</div>
|
||
<div class="cal-day">30</div>
|
||
<div class="cal-day">31</div>
|
||
</div>
|
||
<div class="cal-foot">
|
||
<span class="cal-legend"><span class="cal-legend-dot"></span>Relances programmées</span>
|
||
<span>3 étapes · plan B2B</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-prose">
|
||
<h3>Vous choisissez un plan de relance.</h3>
|
||
<p>Nous en avons décliné plusieurs — par exemple, un standard B2B (J+3, J+10, J+20), adapter le ton en
|
||
fonction
|
||
de l'échéance et de l'historique du client.
|
||
</p>
|
||
<p>
|
||
Et bien sûr, vous pouvez aussi créer les vôtres sur mesure.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-row">
|
||
<div class="step-num-block">
|
||
<div class="step-tag">Étape 03</div>
|
||
<div class="step-widget widget-assistant">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 714" role="img"
|
||
aria-label="Assistant Rubis qui prend le relais">
|
||
<g transform="translate(-560 -183)">
|
||
<path
|
||
d="M636.792,734.1H86.15a41.067,41.067,0,0,1-41.019-41.021V212.236A41.067,41.067,0,0,1,86.15,171.217H636.792a41.067,41.067,0,0,1,41.021,41.019V693.082A41.067,41.067,0,0,1,636.792,734.1Z"
|
||
transform="translate(612.014 98.186)" fill="#fff" />
|
||
<rect width="302.419" height="302.419" rx="16" transform="translate(832.276 399.557)" fill="#F5EFE7" />
|
||
<path
|
||
d="M636.567,735.17H85.925a42.36,42.36,0,0,1-42.312-42.313V212.011A42.36,42.36,0,0,1,85.925,169.7H636.567a42.36,42.36,0,0,1,42.313,42.312V692.857a42.361,42.361,0,0,1-42.313,42.313ZM85.925,172.285A39.772,39.772,0,0,0,46.2,212.011V692.857a39.773,39.773,0,0,0,39.727,39.729H636.567a39.774,39.774,0,0,0,39.73-39.729V212.011a39.773,39.773,0,0,0-39.728-39.727Z"
|
||
transform="translate(612.238 98.41)" fill="#1A1410" />
|
||
<g transform="translate(560 506.899)">
|
||
<path
|
||
d="M35.521,589.284a15.77,15.77,0,0,1-15.438-12.817L.5,473.547a15.694,15.694,0,0,1,12-18.31l87.719-19.869a15.754,15.754,0,0,1,18.912,12.182l21.341,103.388a15.806,15.806,0,0,1-12.092,18.584L38.9,588.92a15.928,15.928,0,0,1-3.376.365Z"
|
||
transform="translate(-0.211 -434.978)" fill="#F5EFE7" />
|
||
<path
|
||
d="M32.96,503.407a4.524,4.524,0,0,1-.825-8.972l70.916-13.249a4.524,4.524,0,0,1,1.661,8.894L33.8,503.329a4.5,4.5,0,0,1-.836.078Z"
|
||
transform="translate(-4.392 -441.811)" fill="#9F1239" />
|
||
<path
|
||
d="M40.548,534.809a4.524,4.524,0,0,1-1.044-8.926l66.756-15.9a4.524,4.524,0,1,1,2.1,8.8L41.6,534.684a4.567,4.567,0,0,1-1.051.124Z"
|
||
transform="translate(-5.516 -446.07)" fill="#9F1239" />
|
||
<path
|
||
d="M45.857,566.724a4.524,4.524,0,0,1-.933-8.95l45.543-9.644a4.523,4.523,0,1,1,1.874,8.85L46.8,566.624a4.56,4.56,0,0,1-.943.1Z"
|
||
transform="translate(-6.303 -451.723)" fill="#9F1239" />
|
||
</g>
|
||
<path
|
||
d="M798.03,218.558a15.775,15.775,0,0,1-2.434-.191l-90.452-14.191a15.76,15.76,0,0,1-13.056-18.4l18.87-103.056a15.706,15.706,0,0,1,17.8-12.75l88.979,13.119a15.76,15.76,0,0,1,13.242,18.182L813.577,205.4A15.817,15.817,0,0,1,798.03,218.558Z"
|
||
transform="translate(516.228 113.208)" fill="#F5EFE7" />
|
||
<path
|
||
d="M807.55,134.169a4.481,4.481,0,0,1-.833-.078l-70.922-13.229a4.524,4.524,0,1,1,1.659-8.894L808.374,125.2a4.524,4.524,0,0,1-.825,8.972Z"
|
||
transform="translate(510.263 106.973)" fill="#9F1239" />
|
||
<path
|
||
d="M800.2,162.651a4.449,4.449,0,0,1-.618-.042l-68-9.26a4.524,4.524,0,0,1,1.222-8.964l68,9.26a4.524,4.524,0,0,1-.6,9.006Z"
|
||
transform="translate(510.918 102.166)" fill="#9F1239" />
|
||
<path
|
||
d="M771.994,191.5a4.617,4.617,0,0,1-.728-.06L725.31,184a4.524,4.524,0,1,1,1.448-8.931l45.956,7.437A4.524,4.524,0,0,1,772,191.5Z"
|
||
transform="translate(511.831 97.624)" fill="#9F1239" />
|
||
<g transform="translate(1085.785 351.147)">
|
||
<path
|
||
d="M892.5,355.374c-6.55,3.974-18.219,8.952-30.144,3.836l-7.709-3.308,15.447-17.517a75.267,75.267,0,0,1,.1-100.383,73.171,73.171,0,0,1,98.794-9.466,75.191,75.191,0,0,1,18.733,98.579A73.318,73.318,0,0,1,892.5,355.374Z"
|
||
transform="translate(-850.963 -213.622)" fill="#9F1239" />
|
||
<g transform="translate(33.689 52.818)">
|
||
<path d="M5.111,0H75.818a5.111,5.111,0,1,1,0,10.223H5.111A5.111,5.111,0,0,1,5.111,0Z"
|
||
transform="translate(0 0)" fill="#fff" />
|
||
<path d="M5.111,0H75.818a5.111,5.111,0,1,1,0,10.223H5.111A5.111,5.111,0,0,1,5.111,0Z"
|
||
transform="translate(0 17.038)" fill="#fff" />
|
||
<path d="M5.111,0H51.965a5.111,5.111,0,1,1,0,10.223H5.111A5.111,5.111,0,0,1,5.111,0Z"
|
||
transform="translate(0 34.075)" fill="#fff" />
|
||
</g>
|
||
</g>
|
||
<g transform="translate(-722.805 76.855)">
|
||
<path
|
||
d="M715.395,371.522c-.688.042-1.375.1-2.054.2-13.8,1.8-24.2,12.709-24.569,25.789s9.385,24.5,23.067,26.985c.679.119,1.357.221,2.044.3A67.315,67.315,0,0,1,715.395,371.522Z"
|
||
transform="translate(914.324 72.024)" fill="#1A1410" />
|
||
<circle cx="83.229" cy="83.229" r="83.229" transform="translate(1622.642 390.761)" fill="#1A1410" />
|
||
<circle cx="81.564" cy="81.564" r="81.564" transform="translate(1624.307 392.426)" fill="#fff" />
|
||
<path
|
||
d="M688.762,371.522c.688.042,1.375.1,2.054.2,13.8,1.8,24.2,12.709,24.57,25.789S706,422,692.317,424.491c-.678.119-1.357.221-2.044.3A67.315,67.315,0,0,0,688.762,371.522Z"
|
||
transform="translate(1094.099 72.024)" fill="#1A1410" />
|
||
<path d="M795.29,379.647H728.326a13.317,13.317,0,1,0,0,26.633H795.29a13.317,13.317,0,0,0,0-26.633Z"
|
||
transform="translate(944.064 77.216)" fill="#1A1410" />
|
||
<g transform="translate(1703.823 512.796)">
|
||
<path
|
||
d="M812.8,480.485a10.1,10.1,0,0,0-5.826-1.874H768.79a10.029,10.029,0,1,0,0,20.059h38.186a9.915,9.915,0,0,0,2.029-.2,11.016,11.016,0,0,0,1.942-.612,10.026,10.026,0,0,0,1.854-17.37Z"
|
||
transform="translate(-758.761 -478.611)" fill="#1A1410" />
|
||
<circle cx="5.092" cy="5.092" r="5.092" transform="translate(7.48 4.938)" fill="#FAF7F2" />
|
||
<circle cx="5.092" cy="5.092" r="5.092" transform="translate(24.028 4.938)" fill="#FAF7F2" />
|
||
<circle cx="5.092" cy="5.092" r="5.092" transform="translate(40.576 4.938)" fill="#9F1239" />
|
||
</g>
|
||
</g>
|
||
<g transform="translate(1219.648 767.361)">
|
||
<path
|
||
d="M31.861,129.844a11.633,11.633,0,0,1-11.373-9.378L.213,15.892A11.586,11.586,0,0,1,11.336,2.109L109.311,0A11.509,11.509,0,0,1,120.94,9.423l19.216,101.414A11.586,11.586,0,0,1,129.4,124.56l-96.914,5.266c-.21.011-.419.018-.626.018Z"
|
||
transform="translate(-0.002 0.005)" fill="#F5EFE7" />
|
||
<g transform="matrix(0.966, -0.259, 0.259, 0.966, 45.045, 42.921)">
|
||
<path
|
||
d="M21.136,39.382c-4.969,2.73-10.307,4.528-16.034,4.25l1.506,3.636a26.105,26.105,0,0,0,7.3-10.715,2.168,2.168,0,0,0-1.487-2.62C6.683,31.879,3.342,25.02,4.4,19.161,5.623,12.377,11.179,7.018,17.671,5.1a20.2,20.2,0,0,1,20.591,5.37,17.9,17.9,0,0,1,3.452,19.153,16.449,16.449,0,0,1-7.98,8.344,17.791,17.791,0,0,1-10.958,1.2,2.194,2.194,0,0,0-2.62,1.487,2.147,2.147,0,0,0,1.487,2.62,26.835,26.835,0,0,0,5.928.536,21.077,21.077,0,0,0,6.58-1.409,20.558,20.558,0,0,0,9.977-8.25A21.968,21.968,0,0,0,43.3,9.963,24.268,24.268,0,0,0,19.356.349C10.988,1.728,3.387,7.752.81,15.935-1.944,24.674,2.516,34.9,11.291,38.041L9.8,35.421A21.7,21.7,0,0,1,3.6,44.256c-1.45,1.3-.231,3.551,1.506,3.636,6.456.313,12.586-1.757,18.184-4.832,2.4-1.32.256-5-2.15-3.678Z"
|
||
transform="translate(0 0)" fill="#9F1239" />
|
||
<path
|
||
d="M4.209,5.3l.9-2.4-3.56.94C3.395,5.781,5.487,7.86,8.2,8.486A6.88,6.88,0,0,0,15.36,6.23c.124-.166.717-1.037.723-1.033l-.908.226q-.428-.284-.008.082A5.7,5.7,0,0,0,15.506,6a4.467,4.467,0,0,0,3.657,2.164c3.2,0,4.737-2.87,5.536-5.534.789-2.631-3.321-3.756-4.107-1.132-.213.71-.426,1.877-1.11,2.31-.392.248-.346-.042-.621-.427a4.656,4.656,0,0,0-2.82-2.1A3.446,3.446,0,0,0,12.571,2.8c-.455.611-.683,1.2-1.383,1.485a3.431,3.431,0,0,1-1.722.125C7.437,4.048,5.9,2.237,4.56.822A2.155,2.155,0,0,0,1,1.762l-.9,2.4a2.148,2.148,0,0,0,1.487,2.62A2.176,2.176,0,0,0,4.209,5.3h0Z"
|
||
transform="translate(10.664 13.688)" fill="#9F1239" />
|
||
<path
|
||
d="M4.1,2.234a1.419,1.419,0,0,1-.433,1.861,1.24,1.24,0,0,1-1.172.017c.385.2-.19-.267.1.077q.121.124.231.258-.2-.272-.073-.1c.2.079.408.54.577.741a4.139,4.139,0,0,0,.322.346,3.9,3.9,0,0,0,1.582.944c1.658.449,3.033-.374,4.18-1.491.184-.18.365-.363.556-.536q.064-.059.13-.116.255-.212-.167.122a2.784,2.784,0,0,1,.272-.176c.282-.24-.462.146-.13.055q.327-.075-.267.026.333,0-.252-.053l.142.036a.826.826,0,0,1-.448-.27,1.518,1.518,0,0,1,.157.15q.157.172-.1-.144c.221.138.41.7.526.93a5.782,5.782,0,0,0,.479.785,3.854,3.854,0,0,0,3.047,1.751,2.146,2.146,0,0,0,2.13-2.13,2.175,2.175,0,0,0-2.13-2.13.964.964,0,0,1,.526.166q-.291-.175.077.091a2.3,2.3,0,0,1-.209-.212q.258.35.057.062c-.2-.355-.38-.721-.582-1.074A4.2,4.2,0,0,0,10.686.1C8.821-.37,7.47.869,6.229,2.041a3.615,3.615,0,0,0-.347.31q.428-.321.164-.132-.089.061-.182.113c-.266.223.481-.148.13-.053q-.327.076.267-.025-.333,0,.251.055-.341-.1.085.056-.29-.189.065.059c-.086,0-.379-.4-.422-.469Q6.5,2.3,6.278,2L5.945,1.57a4.651,4.651,0,0,0-.463-.512A3.353,3.353,0,0,0,1.515.417,2.869,2.869,0,0,0,.42,4.384a2.174,2.174,0,0,0,2.914.764A2.156,2.156,0,0,0,4.1,2.234h0Z"
|
||
transform="translate(14.565 23.809)" fill="#9F1239" />
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="step-prose">
|
||
<h3>Et puis c'est tout.</h3>
|
||
<p>Sérieusement. Pendant que vous travaillez, Rubis envoie les emails au moment prévu, suit qui a ouvert, qui
|
||
n'a pas répondu, et avant chaque relance vous demande discrètement par email : « Cette facture a-t-elle été
|
||
réglé ? ». Vous répondez en deux secondes. La machine fait le reste.</p>
|
||
<div class="reward">La récompense : votre compteur de rubis grimpe. Tranquillement. Comme une bonne nouvelle
|
||
régulière.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== GAMIFICATION ============== -->
|
||
<section class="game">
|
||
<div class="container">
|
||
<div class="game-card">
|
||
<div class="eyebrow">La devise du temps gagné</div>
|
||
<h2>1 rubis = 10 minutes de votre vie.</h2>
|
||
<p class="lead">À chaque relance que Rubis envoie à votre place, vous gagnez un rubis. À la fin du mois, vous
|
||
voyez exactement combien d'heures vous avez récupérées. Pas un graphique de DSO. Pas un PDF abscons. Du temps.
|
||
Concret.</p>
|
||
<div class="game-counter">
|
||
<span class="big">124</span><span class="unit">rubis</span>
|
||
<span class="equals">≈ <b>24 h 48</b> de votre mois</span>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--ink-3); max-width: 460px; margin: 0 auto;">Et oui, on garde un
|
||
classement amical. Les meilleurs utilisateurs libèrent <b>30 heures par mois</b>. Plus de quoi prendre un long
|
||
week-end. Toutes les 4 semaines.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== LEGAL ============== -->
|
||
<section class="legal">
|
||
<div class="container">
|
||
<div>
|
||
<div class="eyebrow">Vous êtes dans votre droit</div>
|
||
<h2>La loi est de votre côté. On vous évite juste de la brandir.</h2>
|
||
<p>La <span class="law-tag">loi LME</span> plafonne les délais de paiement entre entreprises à <b>60 jours</b>
|
||
(ou 45 jours fin de mois). Les sanctions peuvent atteindre <b>2 millions d'euros</b>. En 2025, le Sénat a voté
|
||
à l'unanimité un durcissement supplémentaire des règles.</p>
|
||
<p>Mais vous n'avez pas envie d'envoyer un commissaire de justice à votre meilleur client. Rubis fait le boulot intermédiaire
|
||
— relances pro, courtoises, espacées dans le temps. Le ton monte progressivement, jamais d'un coup. Et vous
|
||
gardez le contrôle total : la mise en demeure, c'est <b>vous</b> qui l'envoyez, sur validation manuelle.</p>
|
||
</div>
|
||
<div class="clipping">
|
||
<div class="headline">
|
||
<span>Sanctions DGCCRF</span>
|
||
<span>2025</span>
|
||
</div>
|
||
<div class="big-number">47 M€</div>
|
||
<div class="lead">de pénalités prononcées contre les mauvais payeurs français l'an dernier.</div>
|
||
<ul class="names-list">
|
||
<li><b>Fnac Darty</b><span class="amount">3,9 M€</span></li>
|
||
<li><b>Cdiscount</b><span class="amount">2,1 M€</span></li>
|
||
<li><b>Sanofi</b><span class="amount">1,65 M€</span></li>
|
||
<li><b>LCL</b><span class="amount">1,5 M€</span></li>
|
||
<li style="color: var(--ink-3); font-style: italic; font-size: 13px;">… et 405 autres entreprises contrôlées
|
||
</li>
|
||
</ul>
|
||
<div class="source-line">Source · DGCCRF, bilan annuel 2025 · economie.gouv.fr</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== PRICING ============== -->
|
||
<section class="pricing" id="pricing">
|
||
<div class="container">
|
||
<div class="head-block">
|
||
<div class="eyebrow">Tarifs</div>
|
||
<h2>Moins cher qu'une heure de votre temps mensuel.</h2>
|
||
<p>On va droit au but. Un plan principal qu'on recommande à 99 % d'entre vous, et deux options autour. C'est
|
||
tout.</p>
|
||
</div>
|
||
|
||
<div class="pricing-anchor">
|
||
<div class="left">
|
||
<span class="plan-tag">Le plan qu'on recommande</span>
|
||
<div class="plan-name">Le plan <em>Pro</em>.</div>
|
||
<div class="price-mega">
|
||
<span class="num">19 €</span>
|
||
<span class="per">par mois<br>hors taxes</span>
|
||
</div>
|
||
<p class="pitch">Pour ce prix, vous avez Rubis dans son <b>intégralité</b>. Factures et OCR illimités, plans
|
||
de relance personnalisés, statistiques détaillées, support prioritaire. Aucun palier caché, aucun surcoût à
|
||
l'usage.</p>
|
||
<div class="cta-row">
|
||
<a href="https://app.rubis.pro" class="btn btn-primary">Commencer l'essai 30 jours →</a>
|
||
<span class="meta">Sans engagement, annulable à tout moment</span>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="features-title">Ce qui est inclus</div>
|
||
<ul class="features">
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span><b>Factures illimitées.</b> Que vous en émettiez 10 ou 500 par mois, c'est le même prix.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span><b>OCR illimité.</b> Drag & drop, photo mobile, batch de 20 d'un coup.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span><b>Relances signées de votre nom.</b> Vos clients voient votre nom et répondent directement à votre
|
||
email. Aucune mention de Rubis.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span><b>Plans personnalisables</b> avec variables et tonalités sur-mesure.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span><b>Stats détaillées</b> + export CSV pour vos comptables.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span><b>Support prioritaire.</b> Réponse sous 4 h ouvrées, par un humain en France.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span>App mobile et desktop, hébergement français.</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pricing-asides-intro">— ou —</div>
|
||
|
||
<div class="pricing-asides">
|
||
<a class="pricing-aside" href="https://app.rubis.pro">
|
||
<div class="name-line">
|
||
<span class="name">Plan Free</span>
|
||
<span class="price-small">0 €<span class="per">/mois</span></span>
|
||
</div>
|
||
<div class="qualifier">Pour tester ou démarrer en freelance</div>
|
||
<p>Le plan Free fait tourner Rubis sur <b>5 factures actives</b> en permanence. Gratuit, pour de bon. Notre
|
||
façon de prouver que la promesse tient.</p>
|
||
<span class="aside-cta">Démarrer Free maintenant <span class="arrow">→</span></span>
|
||
</a>
|
||
<a class="pricing-aside" href="https://app.rubis.pro">
|
||
<div class="name-line">
|
||
<span class="name">Plan Business</span>
|
||
<span class="price-small">49 €<span class="per">/mois</span></span>
|
||
</div>
|
||
<div class="qualifier">Pour les équipes & les pros exigeants</div>
|
||
<p>Tout du Pro, plus : <b>jusqu'à 5 collaborateurs</b> dans la boîte, chacun avec son accès. Vos relances
|
||
partent de <b>votre vraie adresse pro</b> (<code>compta@votre-entreprise.fr</code>), pas d'une adresse Rubis
|
||
— vos clients ne se rendent compte de rien et vos emails arrivent mieux en boîte principale.</p>
|
||
<span class="aside-cta">Démarrer Business maintenant <span class="arrow">→</span></span>
|
||
</a>
|
||
</div>
|
||
|
||
<p class="pricing-footnote">Pas de palier caché. Pas de surcoût à l'usage. Annulation en un clic, sans question
|
||
posée.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== FAQ ============== -->
|
||
<section class="faq" id="faq">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow">Questions fréquentes</div>
|
||
<h2>Vous vous demandez sûrement…</h2>
|
||
</div>
|
||
<details class="faq-item">
|
||
<summary>Et si mon client paie hors plateforme — comment Rubis le sait ?</summary>
|
||
<div class="answer">Avant chaque relance, Rubis vous envoie un email rapide : <i>« Avez-vous été payé pour la
|
||
facture F-2024-0042 ? »</i> avec deux boutons. Vous cliquez "Oui" en 3 secondes, le plan s'arrête. Vous
|
||
cliquez "Non" (ou ne répondez pas), la relance part comme prévu. Vous configurez la cadence et le timing de
|
||
ces vérifications dans vos plans.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Mes factures et données restent-elles privées ?</summary>
|
||
<div class="answer">Évidemment. Hébergement français, conforme RGPD. Vos PDF sont stockés chiffrés. Aucune
|
||
donnée n'est partagée avec des tiers. Vous pouvez exporter ou supprimer vos données à tout moment.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Puis-je personnaliser le contenu des emails ?</summary>
|
||
<div class="answer">Oui, dès le plan Pro. Tous les emails sont des templates avec variables
|
||
(<code>{{prenom_client}}</code>, <code>{{numero}}</code>, <code>{{montant}}</code>…). Vous pouvez réécrire
|
||
chaque étape, ajuster le ton, ajouter votre signature email et votre logo.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Mes clients verront-ils que j'utilise Rubis ?</summary>
|
||
<div class="answer">Pas vraiment. En plan <b>Pro</b>, vos clients voient <b>votre nom</b> en grand comme
|
||
expéditeur, et quand ils cliquent « Répondre », leur message revient directement sur <b>votre email</b>. Aucun
|
||
pied de page ne mentionne Rubis. Suffisant pour 95 % des freelances et TPE.<br><br>
|
||
En plan <b>Business</b>, on va plus loin : vos emails partent vraiment depuis <b>votre propre adresse</b>
|
||
(<code>compta@votre-entreprise.fr</code>). Personne ne devine que vous utilisez un outil, et vos relances
|
||
atterrissent <b>mieux en boîte principale</b> plutôt qu'en spam ou en promotions — gain typique de 10 à 15 %
|
||
sur le taux d'ouverture.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Et si je veux relancer manuellement, sans plan ?</summary>
|
||
<div class="answer">Toujours possible. Sur n'importe quelle facture, vous avez un bouton "Relancer maintenant"
|
||
qui envoie un email immédiat. Pratique quand vous venez d'avoir le client au téléphone et qu'il vous a demandé
|
||
un récapitulatif.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Et la mise en demeure, elle part toute seule ?</summary>
|
||
<div class="answer">Non. Jamais. C'est une décision produit forte : la mise en demeure a des conséquences
|
||
légales et relationnelles importantes. Rubis prépare le brouillon à l'étape prévue de votre plan, vous
|
||
notifie, et c'est <b>vous</b> qui cliquez "Envoyer" sur une modale de confirmation. Vous gardez la main sur le
|
||
moment où le ton change vraiment.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Combien de temps pour démarrer ?</summary>
|
||
<div class="answer">Inscription en 30 secondes. Configuration de votre signature email et de votre première
|
||
facture en 5 minutes. La première relance peut partir dans la foulée. Si vous avez un plan par défaut bien
|
||
configuré, créer une nouvelle facture en relance prend <b>2 clics</b>.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Pourquoi cette histoire de "rubis" ?</summary>
|
||
<div class="answer">Parce que les chiffres comptables (DSO, taux de recouvrement, AR aging) ne réveillent
|
||
personne le matin. Le temps gagné, oui. <b>1 rubis = 10 minutes libérées</b> = 1 relance que vous n'avez pas
|
||
eu à écrire. À la fin du mois, vous voyez "124 rubis ≈ 24 h 48". C'est concret. Et c'est plus fun que de
|
||
regarder un graphique de courbes.</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== FINAL CTA ============== -->
|
||
<section class="final-cta" id="lancer">
|
||
<div class="container">
|
||
<h2>Récupérez vos premières heures dès aujourd'hui.</h2>
|
||
<p>3 mois gratuits illimités, puis le plan Free continue avec 5 factures actives. Pas de carte demandée pour démarrer.</p>
|
||
<div class="cta-row" style="justify-content: center; margin-top: 24px;">
|
||
<a href="https://app.rubis.pro" class="btn btn-primary">
|
||
Lancer Rubis →
|
||
</a>
|
||
</div>
|
||
<p class="micro">Inscription en 30 secondes. Annulation 1-clic à tout moment.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== FOOTNOTES ============== -->
|
||
<aside class="footnotes">
|
||
<div class="container">
|
||
<p>
|
||
<span class="marker">*</span><b>OCR</b> — pour <i>Optical Character Recognition</i>. La reconnaissance
|
||
automatique du texte sur un PDF ou une photo. La machine lit votre facture par-dessus votre épaule, en somme.
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ============== FOOTER ============== -->
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<a href="#" class="brand">
|
||
<svg class="gem-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239" />
|
||
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.55)" stroke-width="3" />
|
||
</svg>
|
||
Rubis sur l'ongle
|
||
</a>
|
||
<nav>
|
||
<a href="#how">Comment ça marche</a>
|
||
<a href="#pricing">Tarifs</a>
|
||
<a href="#faq">FAQ</a>
|
||
<a href="https://app.rubis.pro">Lancer Rubis</a>
|
||
<a href="/mentions-legales.html">Mentions légales</a>
|
||
<a href="/confidentialite.html">Confidentialité</a>
|
||
</nav>
|
||
<div class="copy">© 2026 · Made in France 🇫🇷</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Sticky header shadow on scroll
|
||
const header = document.getElementById('siteHeader');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 8) header.classList.add('scrolled');
|
||
else header.classList.remove('scrolled');
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |