/* ============================================================================
R3STO — Jetons de design
Source unique de vérité pour toutes les surfaces.
Créé le 02.10.2026
Usage :
navy + or (app, auth, admin, pro)
crème + cuivre (r3sto.com, sites vitrines)
noir + or (carat)
vert forêt + or (pass)
Règle absolue : aucune couleur en dur ailleurs que dans ce fichier.
Si une teinte manque ici, on l'ajoute ici — on ne l'invente pas sur place.
============================================================================ */
:root {
/* ---- PALETTE DE MARQUE — 6 couleurs validées, ne jamais modifier ---- */
--r3-carat: #202020; /* Carat — noir riche, 1,44 % lum. */
--r3-pass: #113628; /* Pass — vert forêt, 2,91 % lum. */
--r3-navy: #1c2e58; /* Pro — bleu nuit */
--r3-laiton-fonce: #a9732d; /* Laiton — sur fonds clairs */
--r3-laiton-clair: #dba661; /* Laiton — sur fonds sombres */
--r3-cuivre: #b8632b; /* Cuivre — accent B2C */
/* Anciens noms, conservés comme alias — même teinte 34° */
--r3-or-sobre: var(--r3-laiton-fonce);
--r3-or-vif: var(--r3-laiton-clair);
/* ---- NEUTRES ---- */
--r3-noir: #0b0d12;
--r3-gris-900: #15181f;
--r3-gris-800: #1f2430;
--r3-gris-700: #2b3240;
--r3-gris-500: #6b7280;
--r3-gris-300: #cbd2dc;
--r3-gris-100: #eef1f5;
--r3-creme: #faf6ef;
--r3-blanc: #ffffff;
/* ---- ÉTATS ---- */
--r3-succes: #1f7a4d;
--r3-alerte: #b8632b; /* le cuivre sert aussi d'alerte douce */
--r3-erreur: #a8321f;
--r3-info: #2f5d8a;
/* ---- TYPOGRAPHIE ---- */
--r3-font-titre: "Playfair Display", Georgia, "Times New Roman", serif;
--r3-font-texte: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--r3-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--r3-taille-xs: 0.75rem;
--r3-taille-sm: 0.875rem;
--r3-taille-md: 1rem;
--r3-taille-lg: 1.25rem;
--r3-taille-xl: 1.75rem;
--r3-taille-2xl: 2.5rem;
/* ---- ESPACEMENT ---- */
--r3-esp-1: 4px;
--r3-esp-2: 8px;
--r3-esp-3: 12px;
--r3-esp-4: 16px;
--r3-esp-5: 24px;
--r3-esp-6: 32px;
--r3-esp-7: 48px;
/* ---- RAYONS ET OMBRES ---- */
--r3-rayon-sm: 6px;
--r3-rayon-md: 10px;
--r3-rayon-lg: 16px;
--r3-rayon-pill: 999px;
--r3-ombre-sm: 0 1px 2px rgba(0,0,0,.08);
--r3-ombre-md: 0 4px 14px rgba(0,0,0,.12);
--r3-ombre-lg: 0 12px 32px rgba(0,0,0,.20);
/* ---- CIBLE TACTILE — iPad 9 pouces en service ---- */
--r3-touch: 40px;
/* ---- TRANSITIONS ---- */
--r3-transition: 160ms ease;
}
/* Sur téléphone on touche au pouce, pas au doigt posé : la cible monte à 48 px.
Un seul réglage ici, et tous les produits suivent (Pro, Starter, Guide, sites vitrines). */
@media (max-width: 760px) {
:root { --r3-touch: 48px; }
}
/* ============================================================================
THÈME PRO — navy + or · app, auth, admin, r3sto.com/pro
Sombre par défaut (verrouillé).
============================================================================ */
:root,
[data-theme="pro"] {
--fond: #111827; /* navy encre */
--fond-eleve: #172033;
--fond-carte: #20293f;
--fond-accent: var(--r3-navy);
--texte: var(--r3-gris-100);
--texte-doux: #c7d0dc;
--texte-faible: #7a879f;
--texte-inverse: var(--r3-noir);
--accent: var(--r3-or-vif);
--accent-fort: var(--r3-or-sobre);
--accent-texte: #111827;
--bordure: #2f3c5b;
--bordure-douce: rgba(255,255,255,.08);
--succes: var(--r3-succes);
--alerte: var(--r3-or-vif);
--erreur: var(--r3-erreur);
--info: var(--r3-info);
}
/* ============================================================================
THÈME PRO CLAIR — même marque, fond clair · bascule optionnelle
Le sombre reste la base. Le clair est un confort, pas une alternative.
Fond D « ardoise claire », validé le 08.10.2026 : surfaces et cartes en blanc pur.
============================================================================ */
[data-theme="pro-clair"] {
--fond: #e8eaf0; /* ardoise claire */
--fond-eleve: var(--r3-blanc);
--fond-carte: var(--r3-blanc);
--fond-accent: var(--r3-navy);
--texte: #10172a;
--texte-doux: #41506e;
--texte-faible: #5d6982; /* 4,58:1 sur le fond, 5,51:1 sur blanc */
--texte-inverse: var(--r3-blanc);
--accent: var(--r3-or-sobre);
--accent-fort: #895d24; /* laiton foncé assombri, même teinte 34° */
--accent-texte: var(--r3-blanc);
--bordure: #d4dbe8;
--bordure-douce: rgba(16,23,42,.10);
--succes: var(--r3-succes);
--alerte: var(--r3-cuivre);
--erreur: var(--r3-erreur);
--info: var(--r3-info);
}
/* ============================================================================
THÈME GUIDE — crème + cuivre · r3sto.com, sites vitrines
Clair par défaut : c'est une surface publique, lue au soleil comme au lit.
============================================================================ */
[data-theme="guide"] {
--fond: var(--r3-creme);
--fond-eleve: var(--r3-blanc);
--fond-carte: var(--r3-blanc);
--fond-accent: var(--r3-cuivre);
--texte: var(--r3-noir);
--texte-doux: var(--r3-gris-700);
--texte-faible: var(--r3-gris-500);
--texte-inverse: var(--r3-creme);
--accent: var(--r3-cuivre);
--accent-fort: #975123; /* cuivre assombri, même teinte 24° — jamais de laiton sur le Guide */
--accent-texte: var(--r3-blanc);
--bordure: var(--r3-gris-300);
--bordure-douce: rgba(11,13,18,.08);
--succes: var(--r3-succes);
--alerte: var(--r3-cuivre);
--erreur: var(--r3-erreur);
--info: var(--r3-info);
}
/* ============================================================================
THÈME CARAT — noir + or
============================================================================ */
[data-theme="carat"] {
--fond: var(--r3-carat);
--fond-eleve: #121212;
--fond-carte: #1a1a1a;
--fond-accent: var(--r3-or-sobre);
--texte: #f2efe9;
--texte-doux: #bdb6a8;
--texte-faible: #807a6e;
--texte-inverse: var(--r3-carat);
--accent: var(--r3-or-vif);
--accent-fort: var(--r3-or-sobre);
--accent-texte: var(--r3-carat);
--bordure: #2a2a2a;
--bordure-douce: rgba(200,151,82,.18);
--succes: var(--r3-succes);
--alerte: var(--r3-or-vif);
--erreur: var(--r3-erreur);
--info: var(--r3-info);
}
/* ============================================================================
THÈME PASS — vert forêt + or
============================================================================ */
[data-theme="pass"] {
--fond: var(--r3-pass);
--fond-eleve: #22483a;
--fond-carte: #2a5546;
--fond-accent: var(--r3-or-sobre);
--texte: #eef3f0;
--texte-doux: #bcd0c7;
--texte-faible: #7d9a8d;
--texte-inverse: var(--r3-pass);
--accent: var(--r3-or-vif);
--accent-fort: var(--r3-or-sobre);
--accent-texte: var(--r3-pass);
--bordure: #32614f;
--bordure-douce: rgba(200,151,82,.18);
--succes: #3fa06a;
--alerte: var(--r3-or-vif);
--erreur: var(--r3-erreur);
--info: var(--r3-info);
}
/* ============================================================================
PRIMITIVES — le strict minimum partagé.
Rien d'autre ne vit ici : chaque surface garde ses propres composants.
============================================================================ */
/* ----------------------------------------------------------------------------
MARQUE — le logo, puis le nom de la sous-marque : Pro, Starter, Gourmet Guide…
On n'écrit jamais « R3STO » à côté du logo : il le contient déjà.
Pro
Taille du logo : --r3-marque-taille
52 connexion · 46 site (défaut) · 42 mise en route · 40 bandeau · 34 pied de page
Le nom fait toujours 40 % de la hauteur du logo, en Playfair, de la couleur du texte
(jamais en or). Sans , la marque est le logo seul : pied de page, rail de l'application.
---------------------------------------------------------------------------- */
.r3-marque {
--r3-marque-taille: 46px;
display: inline-flex;
align-items: center;
gap: calc(var(--r3-marque-taille) * .26);
color: var(--texte);
text-decoration: none;
}
.r3-marque img {
width: var(--r3-marque-taille);
height: var(--r3-marque-taille);
display: block;
border-radius: 0;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 16%, transparent); /* le filet sur fond sombre */
}
.r3-marque b {
font-family: var(--r3-font-titre);
font-weight: 600;
font-size: calc(var(--r3-marque-taille) * .4);
line-height: 1;
white-space: nowrap;
color: var(--texte);
}
.r3-corps {
background: var(--fond);
color: var(--texte);
font-family: var(--r3-font-texte);
font-size: var(--r3-taille-md);
line-height: 1.55;
margin: 0;
-webkit-font-smoothing: antialiased;
}
.r3-titre {
font-family: var(--r3-font-titre);
color: var(--texte);
line-height: 1.15;
margin: 0 0 var(--r3-esp-4);
}
.r3-bouton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--r3-esp-2);
min-height: var(--r3-touch);
padding: 0 var(--r3-esp-5);
border: 0;
border-radius: var(--r3-rayon-md);
background: var(--accent);
color: var(--accent-texte);
font: 600 var(--r3-taille-md) / 1 var(--r3-font-texte);
cursor: pointer;
transition: background var(--r3-transition), transform var(--r3-transition);
}
.r3-bouton:hover { background: var(--accent-fort); }
.r3-bouton:active { transform: translateY(1px); }
.r3-bouton--secondaire {
background: transparent;
color: var(--accent);
border: 1px solid var(--bordure);
}
.r3-bouton--secondaire:hover {
background: var(--bordure-douce);
color: var(--accent-fort);
}
.r3-carte {
background: var(--fond-carte);
border: 1px solid var(--bordure-douce);
border-radius: var(--r3-rayon-lg);
padding: var(--r3-esp-5);
box-shadow: var(--r3-ombre-sm);
}
.r3-champ {
width: 100%;
min-height: var(--r3-touch);
padding: 0 var(--r3-esp-3);
background: var(--fond-eleve);
color: var(--texte);
border: 1px solid var(--bordure);
border-radius: var(--r3-rayon-sm);
font: var(--r3-taille-md) / 1 var(--r3-font-texte);
}
.r3-champ:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* ── La garantie ──────────────────────────────────────────────────────────────
« 30 jours satisfait ou remboursé » : le créneau de R3STO (fondateur, 11.10.2026).
Un seul bloc, les mêmes mots sur Pro, Starter, le Guide et les sites. Ne pas le
restyler page par page, ne pas reformuler (« résiliable » n'est pas « remboursé »).
30 jours satisfait ou remboursé…