ordinarthur/rubis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

betterm landigng

Browse Source
This commit is contained in:
ordinarthur 2026-05-05 15:53:57 +02:00
parent 0bda0d6d69
commit 9a95107cc0
1 changed files with 476 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

724
landing.html
View File

@ -257,7 +257,6 @@
box-shadow:
0 16px 40px -16px rgba(26, 20, 16, 0.18),
0 4px 8px -2px rgba(26, 20, 16, 0.06);
transform: rotate(0.6deg);
position: relative;
}
.preview-card::before {
@ -341,7 +340,6 @@
font-weight: 700;
font-size: 14px;
box-shadow: 0 8px 24px rgba(26, 20, 16, 0.25);
transform: rotate(-2deg);
display: flex;
align-items: center;
gap: 10px;
@ -434,63 +432,84 @@
.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 === */
/* === HOW IT WORKS (editorial light) === */
.how-it-works {
background: var(--ink);
color: var(--cream);
background: var(--cream-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.how-it-works .section-head h2 { color: var(--cream); }
.how-it-works .section-head p { color: rgba(250, 247, 242, 0.7); }
.how-it-works .eyebrow { color: var(--rubis-light); }
.how-it-works .eyebrow::before { background: var(--rubis-light); }
.steps {
.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: 1fr auto 1fr auto 1fr;
gap: 16px;
align-items: stretch;
}
@media (max-width: 880px) {
.steps { grid-template-columns: 1fr; }
.steps .arrow { display: none; }
}
.step {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 32px 24px 28px;
text-align: center;
display: flex;
flex-direction: column;
grid-template-columns: 320px 1fr;
gap: 56px;
align-items: center;
position: relative;
padding: 48px 0;
border-top: 1px dashed var(--line);
}
.step .step-num {
.step-row.flip {
grid-template-columns: 1fr 320px;
}
.step-row.flip .step-num-big {
order: 2;
text-align: right;
}
.step-row.flip .step-prose {
order: 1;
}
.step-num-big {
font-family: var(--display);
font-size: 13px;
color: var(--rubis-light);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
margin-bottom: 16px;
font-weight: 800;
font-size: clamp(120px, 16vw, 196px);
line-height: 0.82;
letter-spacing: -0.04em;
color: var(--rubis);
user-select: none;
}
.step h3 { color: var(--cream); margin-bottom: 8px; font-size: 20px; }
.step p { color: rgba(250, 247, 242, 0.65); font-size: 14px; line-height: 1.55; }
.step .visual {
margin: 16px 0 22px;
width: 100%;
height: 110px;
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
border: 1px dashed rgba(255, 255, 255, 0.18);
display: flex;
align-items: center;
justify-content: center;
color: rgba(250, 247, 242, 0.6);
.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);
}
.steps .arrow {
align-self: center;
color: rgba(250, 247, 242, 0.3);
font-size: 24px;
.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-big {
order: 0;
text-align: left;
}
.step-row.flip .step-prose {
order: 1;
}
.step-num-big { font-size: 96px; }
}
/* === GAMIFICATION === */
@ -575,49 +594,26 @@
.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 === */
/* === 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: 980px;
max-width: 1100px;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 56px;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
@media (max-width: 720px) { .legal .container { grid-template-columns: 1fr; gap: 32px; } }
.legal .visual {
display: flex;
align-items: center;
justify-content: 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-shield {
width: 220px; height: 240px;
background: white;
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 16px rgba(26, 20, 16, 0.04);
}
.legal-shield .top { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.legal-shield .num {
font-family: var(--display);
font-size: 56px;
font-weight: 700;
color: var(--rubis);
line-height: 1;
letter-spacing: -0.03em;
}
.legal-shield .desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.legal-shield hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.legal h2 { margin-bottom: 16px; }
.legal p { font-size: 16px; margin-bottom: 14px; line-height: 1.65; }
.legal p { font-size: 16px; margin-bottom: 16px; line-height: 1.7; max-width: 480px; }
.legal .law-tag {
display: inline-block;
background: var(--ink);
@ -625,84 +621,305 @@
padding: 4px 10px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 12px;
margin-right: 6px;
font-size: 12.5px;
margin-right: 4px;
}
/* === PRICING === */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 24px;
}
@media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 24px auto 0; } }
.price-card {
.clipping {
background: white;
border: 1px solid var(--line);
border-radius: 14px;
padding: 32px 28px;
display: flex;
flex-direction: column;
transition: transform 0.2s, box-shadow 0.2s;
}
.price-card.featured {
border-color: var(--rubis);
box-shadow: 0 12px 32px -12px rgba(159, 18, 57, 0.25);
border-radius: 6px;
padding: 40px 44px 32px;
position: relative;
box-shadow: 0 4px 20px rgba(26, 20, 16, 0.05);
}
.price-card.featured::before {
content: "Recommandé";
.clipping::before {
content: "";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--rubis);
color: white;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 12px;
border-radius: 12px;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--ink);
border-radius: 6px 6px 0 0;
}
.price-card .name {
.clipping .headline {
font-family: var(--display);
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
}
.price-card .for { font-size: 13px; color: var(--ink-3); margin-bottom: 24px; }
.price-card .price {
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;
gap: 6px;
}
.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;
}
.price-card .price .amount {
.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-size: 48px;
font-weight: 700;
line-height: 1;
font-size: clamp(36px, 4.4vw, 52px);
letter-spacing: -0.025em;
line-height: 1.05;
margin-bottom: 18px;
color: var(--ink);
}
.price-card .price .unit { font-size: 14px; color: var(--ink-3); }
.price-card ul {
list-style: none;
margin-bottom: 28px;
flex: 1;
font-size: 14px;
}
.price-card li {
padding: 8px 0;
color: var(--ink-2);
.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;
gap: 10px;
padding: 9px 0;
color: var(--ink-2);
line-height: 1.5;
}
.price-card li svg { flex-shrink: 0; margin-top: 4px; color: var(--rubis); }
.price-card .btn { width: 100%; }
.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 {
margin-top: 32px;
display: grid;
grid-template-columns: auto 1fr 1fr;
gap: 28px;
align-items: start;
}
.pricing-asides .or-divider {
font-family: var(--display);
font-style: italic;
font-size: 22px;
font-weight: 500;
color: var(--ink-3);
padding-top: 24px;
white-space: nowrap;
}
.pricing-aside {
padding: 26px 28px;
border: 1px dashed var(--line);
border-radius: 10px;
background: transparent;
}
.pricing-aside .name-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.pricing-aside .name {
font-family: var(--display);
font-weight: 600;
font-size: 18px;
color: var(--ink);
}
.pricing-aside .price-small {
font-family: var(--display);
font-weight: 700;
font-size: 22px;
color: var(--rubis);
letter-spacing: -0.015em;
}
.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 p {
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-2);
margin: 0;
}
.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;
}
@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-asides .or-divider { padding: 8px 0 0; text-align: center; }
}
.pricing-footnote {
margin-top: 32px;
text-align: center;
font-size: 13px;
color: var(--ink-3);
}
/* === FAQ === */
.faq .container { max-width: 760px; }
@ -782,10 +999,11 @@
/* === FOOTER === */
.site-footer {
background: var(--ink);
color: rgba(250, 247, 242, 0.7);
padding: 48px 0 32px;
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;
@ -794,10 +1012,11 @@
flex-wrap: wrap;
gap: 24px;
}
.site-footer .brand { color: var(--cream); }
.site-footer .brand { color: var(--ink); }
.site-footer nav { display: flex; gap: 24px; }
.site-footer nav a:hover { color: var(--rubis-light); }
.site-footer .copy { font-size: 12px; }
.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; }
}
@ -846,7 +1065,7 @@
<section class="hero">
<div class="container">
<div>
<div class="eyebrow">MVP en préparation · printemps 2026</div>
<div class="eyebrow">Le SaaS 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 PDF, 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>
<form class="waitlist-form" id="heroForm" action="#" method="post" novalidate>
@ -858,9 +1077,9 @@
On vous écrit dès qu'on ouvre les premiers comptes. Merci.
</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> Aucune carte bancaire</span>
<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> 14 jours offerts au lancement</span>
<span class="dot"></span>
<span>14 jours offerts au lancement</span>
<span>Hébergement souverain</span>
<span class="dot"></span>
<span>Made in France 🇫🇷</span>
</div>
@ -960,56 +1179,34 @@
<!-- ============== HOW IT WORKS ============== -->
<section class="how-it-works" id="how">
<div class="container">
<div class="section-head">
<div class="head-block">
<div class="eyebrow">Comment ça marche</div>
<h2>3 clics. C'est tout.</h2>
<p>Vraiment. Si votre plan de relance par défaut est bien configuré, c'est même 2.</p>
<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="steps">
<div class="step">
<div class="step-num">Étape 1</div>
<div class="visual">
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
<div class="step-row">
<div class="step-num-big">01</div>
<div class="step-prose">
<h3>Vous lâchez 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. Votre seul boulot : vérifier que la machine n'a pas halluciné. Trente secondes par facture, montre en main.</p>
</div>
<h3>Glissez vos factures</h3>
<p>PDF, photo, scan. Notre OCR extrait client, montant et échéance en 3 secondes.</p>
</div>
<div class="arrow">→</div>
<div class="step">
<div class="step-num">Étape 2</div>
<div class="visual">
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" y1="21" x2="4" y2="14"/>
<line x1="4" y1="10" x2="4" y2="3"/>
<line x1="12" y1="21" x2="12" y2="12"/>
<line x1="12" y1="8" x2="12" y2="3"/>
<line x1="20" y1="21" x2="20" y2="16"/>
<line x1="20" y1="12" x2="20" y2="3"/>
<line x1="1" y1="14" x2="7" y2="14"/>
<line x1="9" y1="8" x2="15" y2="8"/>
<line x1="17" y1="16" x2="23" y2="16"/>
</svg>
<div class="step-row flip">
<div class="step-num-big">02</div>
<div class="step-prose">
<h3>Vous choisissez un plan de relance.</h3>
<p>On vous en a préparé quatre — un standard B2B (J+3, J+10, J+20), un doux pour vos bons clients, un ferme quand le cash est tendu, et un quatrième que vous pouvez bricoler à votre sauce. Un clic, et la facture est associée.</p>
</div>
<h3>Choisissez un plan</h3>
<p>4 plans pré-fournis (J+3, J+10, J+20…) ou créez le vôtre. Le ton monte progressivement, jamais d'un coup.</p>
</div>
<div class="arrow">→</div>
<div class="step">
<div class="step-num">Étape 3</div>
<div class="visual">
<svg width="44" height="44" viewBox="0 0 200 200">
<polygon points="100,10 190,100 100,190 10,100" fill="#C9415C"/>
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.7)" stroke-width="4"/>
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.45)" stroke-width="3"/>
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.45)" stroke-width="3"/>
</svg>
</div>
<h3>Récupérez vos rubis</h3>
<p>Rubis envoie, suit les ouvertures, relance. Vous voyez le compteur grimper. Vous, vous travaillez.</p>
<div class="step-row">
<div class="step-num-big">03</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 : « ça, c'est encore d'actualité&nbsp;? ». 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>
@ -1044,77 +1241,102 @@
<div class="container">
<div>
<div class="eyebrow">Vous êtes dans votre droit</div>
<h2>La loi est de votre côté. Rubis 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 de la DGCCRF peuvent atteindre <b>2 millions d'euros</b>. Le Sénat a voté à l'unanimité en 2025 un durcissement supplémentaire des règles.</p>
<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 huissier à 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="visual">
<div class="legal-shield">
<div>
<div class="top">Sanctions DGCCRF 2025</div>
<div class="num">47 M€</div>
<div class="desc">de pénalités prononcées contre les mauvais payeurs en 2025.</div>
</div>
<hr>
<div class="desc"><b style="color: var(--ink); font-family: var(--display);">Sanofi · LCL · Fnac Darty</b><br>parmi les sanctionnés notables.</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 id="pricing">
<section class="pricing" id="pricing">
<div class="container">
<div class="section-head">
<div class="head-block">
<div class="eyebrow">Tarifs</div>
<h2>Moins cher qu'une heure de votre temps.</h2>
<p>Démarrez gratuitement, sans carte bancaire. Passez Pro quand vous dépassez 5 factures actives.</p>
</div>
<div class="pricing-grid">
<div class="price-card">
<div class="name">Free</div>
<div class="for">Pour démarrer ou tester</div>
<div class="price"><span class="amount">0 €</span><span class="unit">/mois</span></div>
<ul>
<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>5 factures actives en relance</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>1 utilisateur</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>4 plans de relance standards</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>OCR jusqu'à 10 factures / mois</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>App mobile et desktop</li>
</ul>
<a href="#waitlist" class="btn btn-secondary">Démarrer gratuitement</a>
<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="price-card featured">
<div class="name">Pro</div>
<div class="for">Pour les TPE 1 — 5 salariés</div>
<div class="price"><span class="amount">19 €</span><span class="unit">/mois</span></div>
<ul>
<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><b>Factures illimitées</b></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>OCR illimité</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>Plans de relance personnalisés</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>Statistiques détaillées + export</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>Support email prioritaire</li>
<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="#waitlist" class="btn btn-primary">Commencer l'essai 14 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 &amp; 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>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>
<a href="#waitlist" class="btn btn-primary">Commencer l'essai 14 j</a>
</div>
</div>
<div class="price-card">
<div class="name">Business</div>
<div class="for">Pour les PME 5 — 50 salariés</div>
<div class="price"><span class="amount">49 €</span><span class="unit">/mois</span></div>
<ul>
<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>Tout Pro</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><b>Multi-utilisateurs</b> (5 inclus)</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>Branding email personnalisé</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>SMS de relance <span style="color: var(--ink-3); font-size: 12px;">(V2)</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>Onboarding dédié</li>
</ul>
<a href="#waitlist" class="btn btn-secondary">Demander une démo</a>
<div class="pricing-asides">
<div class="or-divider">— ou bien —</div>
<div class="pricing-aside">
<div class="name-line">
<span class="name">Plan Free</span>
<span class="price-small">0 €<span class="per">/mois, à vie</span></span>
</div>
<p>Vous voulez tester ? 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 sans qu'on vous tienne par la veine.</p>
</div>
<div class="pricing-aside">
<div class="name-line">
<span class="name">Plan Business</span>
<span class="price-small">49 €<span class="per">/mois</span></span>
</div>
<p>Vous êtes plusieurs dans la boîte ? Business ajoute le <b>multi-utilisateurs</b> (5 inclus), votre adresse d'envoi <code>compta@votre-entreprise.fr</code>, et — quand on aura sorti la V2 — le <b>SMS de relance</b>.</p>
</div>
</div>
<p style="text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 32px;">Tous les tarifs hors taxes. Annulation à tout moment, sans question.</p>
<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>
@ -1169,7 +1391,7 @@
<svg width="18" height="18" 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>
On vous écrit dès qu'on ouvre les premiers comptes. Merci.
</div>
<p class="micro">Aucun spam. Aucune carte bancaire. Désinscription en un clic.</p>
<p class="micro">On vous écrit une fois — quand on ouvre les premiers comptes. Pas avant.</p>
</div>
</section>
@ -1178,7 +1400,7 @@
<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="#C9415C"/>
<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