6e796a0980
All checks were successful
Build & Deploy Landing / build-and-deploy (push) Successful in 25s
- Remplace les formulaires waitlist par des CTA "Lancer Rubis"
pointant vers app.rubis.pro (nav, hero, section finale)
- Met à jour la trust line ("3 mois gratuits puis Free 5 factures")
- Footer : ajoute liens Mentions légales / Confidentialité, casse
"Rubis sur l'ongle" + lien Lancer Rubis
- Supprime le script de binding waitlist (plus utilisé)
- Migre les références au domaine vers rubis.pro
Nouvelles pages :
- mentions-legales.html : conformité LCEN (9 sections)
- confidentialite.html : politique RGPD (10 sections, sous-traitants
Stripe/Resend/Mistral, droits utilisateur, durées de conservation)
- _legal-shell.css : shell graphique partagé (palette rubis,
Bricolage Grotesque + Inter, header/footer brandés, TOC)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
332 lines
5.5 KiB
CSS
332 lines
5.5 KiB
CSS
/*
|
|
* Styles partagés pour les pages légales (mentions-legales, confidentialite).
|
|
* Reprend la palette + typo de la landing pour l'unité visuelle, mais en
|
|
* version "longue lecture" — pas de hero, pas d'animations, juste un
|
|
* container central confortable avec hiérarchie typographique soignée.
|
|
*/
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,500;10..48,600;10..48,700;10..48,800&family=Inter:wght@400;500;600;700&display=swap");
|
|
|
|
:root {
|
|
--rubis: #9f1239;
|
|
--rubis-deep: #771328;
|
|
--rubis-glow: #fbe4ea;
|
|
--cream: #faf7f2;
|
|
--cream-2: #f5efe7;
|
|
--ink: #1a1410;
|
|
--ink-2: #4f4640;
|
|
--ink-3: #8a7f76;
|
|
--line: #e8e0d6;
|
|
--display: "Bricolage Grotesque", system-ui, sans-serif;
|
|
--body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--body);
|
|
background: var(--cream);
|
|
color: var(--ink);
|
|
font-size: 16px;
|
|
line-height: 1.65;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a {
|
|
color: var(--rubis);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
/* === Header sobre (même brand que landing) === */
|
|
.legal-header {
|
|
background: var(--cream);
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 18px 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
backdrop-filter: blur(10px);
|
|
background: rgba(250, 247, 242, 0.92);
|
|
}
|
|
|
|
.legal-header .container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.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:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.brand-suffix {
|
|
font-family: var(--display);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--ink-3);
|
|
font-size: 12.5px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.gem-svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: var(--ink-3);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: var(--rubis);
|
|
}
|
|
|
|
/* === Container & contenu === */
|
|
.container {
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.legal-main {
|
|
padding: 56px 0 80px;
|
|
}
|
|
|
|
.legal-main > .container > .eyebrow {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--rubis);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--display);
|
|
font-size: clamp(32px, 5vw, 44px);
|
|
font-weight: 800;
|
|
letter-spacing: -0.022em;
|
|
line-height: 1.1;
|
|
margin-bottom: 12px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
h1 em {
|
|
color: var(--rubis);
|
|
font-style: normal;
|
|
}
|
|
|
|
.lede {
|
|
font-size: 16px;
|
|
color: var(--ink-2);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.last-updated {
|
|
font-size: 12.5px;
|
|
color: var(--ink-3);
|
|
margin-bottom: 40px;
|
|
font-style: italic;
|
|
}
|
|
|
|
h2 {
|
|
font-family: var(--display);
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.018em;
|
|
line-height: 1.2;
|
|
margin: 48px 0 14px;
|
|
color: var(--ink);
|
|
scroll-margin-top: 80px;
|
|
}
|
|
|
|
h3 {
|
|
font-family: var(--display);
|
|
font-size: 16.5px;
|
|
font-weight: 700;
|
|
margin: 28px 0 10px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
p,
|
|
ul,
|
|
ol {
|
|
margin-bottom: 16px;
|
|
color: var(--ink-2);
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
ul li,
|
|
ol li {
|
|
margin-bottom: 8px;
|
|
color: var(--ink-2);
|
|
}
|
|
|
|
ul li strong,
|
|
ol li strong,
|
|
p strong {
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Bloc info "callout" pour les emails de contact */
|
|
.callout {
|
|
background: var(--cream-2);
|
|
border-left: 3px solid var(--rubis);
|
|
padding: 16px 20px;
|
|
border-radius: 4px;
|
|
margin: 24px 0;
|
|
font-size: 14.5px;
|
|
}
|
|
|
|
.callout strong {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.callout p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* TOC compact en haut */
|
|
.toc {
|
|
background: var(--cream-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 20px 24px;
|
|
margin: 32px 0 40px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.toc-title {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-3);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.toc ol {
|
|
padding-left: 20px;
|
|
margin-bottom: 0;
|
|
counter-reset: toc;
|
|
list-style: none;
|
|
}
|
|
|
|
.toc li {
|
|
counter-increment: toc;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.toc li::before {
|
|
content: counter(toc) ".";
|
|
color: var(--rubis);
|
|
font-weight: 600;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.toc a {
|
|
color: var(--ink-2);
|
|
}
|
|
|
|
.toc a:hover {
|
|
color: var(--rubis);
|
|
}
|
|
|
|
/* Tableau définitions (sous-traitants etc.) */
|
|
.def-table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 16px 0 24px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.def-table th,
|
|
.def-table td {
|
|
text-align: left;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.def-table th {
|
|
background: var(--cream-2);
|
|
color: var(--ink-3);
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.def-table td:first-child {
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
white-space: nowrap;
|
|
width: 30%;
|
|
}
|
|
|
|
/* === Footer (identique landing minimal) === */
|
|
.legal-footer {
|
|
border-top: 1px solid var(--line);
|
|
background: var(--cream-2);
|
|
padding: 32px 0 40px;
|
|
font-size: 13px;
|
|
color: var(--ink-3);
|
|
}
|
|
|
|
.legal-footer .container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 24px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.legal-footer nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 18px;
|
|
}
|
|
|
|
.legal-footer nav a {
|
|
color: var(--ink-3);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.legal-footer nav a:hover {
|
|
color: var(--rubis);
|
|
}
|