/* ============================================================
NUVY DESIGN SYSTEM — nuvy-design.css
Système de design partagé pour toutes les surfaces Nuvy
(dashboard, dashboard réseau, login, join, etc.)
Inspiration : design tokens de la vitrine nuvy.pro
+ principes d'élévation / grille / mouvement type Apple.
À charger dans le de chaque page :
(ajuste le chemin selon l'emplacement où tu déposes le fichier)
============================================================ */
/* ----------------------------------------------------------
1. FONTS
Charge les polices une fois (si déjà chargées dans la page,
tu peux retirer cet @import et garder le existant).
---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ----------------------------------------------------------
2. TOKENS
---------------------------------------------------------- */
:root {
/* Couleurs de marque */
--nv-teal: #2b8c9c;
--nv-teal-dark: #1f6b78;
--nv-teal-darker: #164d57;
--nv-teal-light: #e8f3f5;
--nv-teal-bg: #f4f9fa;
--nv-teal-soft: #7fd4e0; /* accent clair sur fond foncé */
--nv-ink: #0e1f23; /* texte principal / surfaces foncées */
--nv-ink-soft: #3a4a4e; /* texte secondaire */
--nv-ink-muted: #6b7a7e; /* texte tertiaire / légendes */
--nv-line: #e3ebed; /* bordures */
--nv-line-soft: #eef2f3; /* séparateurs discrets */
--nv-cream: #fafbfb; /* fond doux */
--nv-surface: #ffffff; /* cartes / surfaces */
--nv-bg: #f7f9fa; /* fond de page applicatif */
--nv-warm: #fff7ed;
--nv-accent: #f59e0b; /* alertes douces / "bientôt" */
--nv-success: #10b981;
--nv-danger: #ef4444;
--nv-danger-bg: #fef2f2;
/* Typographies */
--nv-bagel: 'Bagel Fat One', cursive;
--nv-serif: 'Fraunces', Georgia, serif;
--nv-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Rayons */
--nv-r-xs: 8px;
--nv-r-sm: 12px;
--nv-r-md: 16px;
--nv-r-lg: 22px;
--nv-r-xl: 30px;
--nv-r-pill: 100px;
/* Élévation étagée (style Apple : ombres douces, multi-couches) */
--nv-shadow-xs: 0 1px 2px rgba(14,31,35,0.04);
--nv-shadow-sm: 0 1px 2px rgba(14,31,35,0.04), 0 1px 3px rgba(14,31,35,0.03);
--nv-shadow: 0 4px 16px rgba(14,31,35,0.06), 0 2px 6px rgba(14,31,35,0.04);
--nv-shadow-md: 0 8px 24px rgba(14,31,35,0.08), 0 4px 10px rgba(14,31,35,0.05);
--nv-shadow-lg: 0 24px 48px -12px rgba(14,31,35,0.14), 0 12px 24px -8px rgba(14,31,35,0.08);
--nv-shadow-teal: 0 12px 28px -8px rgba(43,140,156,0.35);
/* Espacements — grille 8pt */
--nv-s1: 4px;
--nv-s2: 8px;
--nv-s3: 12px;
--nv-s4: 16px;
--nv-s5: 24px;
--nv-s6: 32px;
--nv-s7: 48px;
--nv-s8: 64px;
/* Mouvement */
--nv-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
--nv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--nv-fast: 0.18s;
--nv-base: 0.28s;
--nv-slow: 0.5s;
}
/* ----------------------------------------------------------
3. BASE
---------------------------------------------------------- */
.nv-reset *,
.nv-scope *,
.nv-scope *::before,
.nv-scope *::after { box-sizing: border-box; }
.nv-scope {
font-family: var(--nv-sans);
color: var(--nv-ink);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Helpers typographiques */
.nv-logo { font-family: var(--nv-bagel); color: var(--nv-teal); line-height: 1; }
.nv-display { font-family: var(--nv-serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.nv-display em { font-style: italic; font-weight: 400; color: var(--nv-teal); }
.nv-title { font-family: var(--nv-sans); font-weight: 800; letter-spacing: -0.01em; color: var(--nv-ink); }
.nv-muted { color: var(--nv-ink-muted); }
.nv-soft { color: var(--nv-ink-soft); }
/* ----------------------------------------------------------
4. SURFACES / CARTES
---------------------------------------------------------- */
.nv-card {
background: var(--nv-surface);
border: 1px solid var(--nv-line);
border-radius: var(--nv-r-lg);
box-shadow: var(--nv-shadow-sm);
padding: var(--nv-s5);
transition: box-shadow var(--nv-base) var(--nv-ease), transform var(--nv-base) var(--nv-ease);
}
.nv-card--hover:hover {
box-shadow: var(--nv-shadow-md);
transform: translateY(-2px);
}
.nv-card--flat { box-shadow: none; }
.nv-card--ink {
background: var(--nv-ink);
color: #fff;
border-color: var(--nv-ink);
}
.nv-card--ink .nv-muted { color: #9fb0b4; }
.nv-panel {
background: var(--nv-surface);
border: 1px solid var(--nv-line);
border-radius: var(--nv-r-md);
padding: var(--nv-s4);
}
/* Stat card (KPI) */
.nv-stat {
background: var(--nv-surface);
border: 1px solid var(--nv-line);
border-radius: var(--nv-r-md);
padding: var(--nv-s5);
box-shadow: var(--nv-shadow-sm);
}
.nv-stat__label {
font-size: 13px;
font-weight: 600;
color: var(--nv-ink-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--nv-s2);
}
.nv-stat__value {
font-family: var(--nv-serif);
font-size: 40px;
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1;
color: var(--nv-ink);
}
.nv-stat__delta {
font-size: 13px;
font-weight: 600;
margin-top: var(--nv-s2);
}
.nv-stat__delta--up { color: var(--nv-success); }
.nv-stat__delta--down { color: var(--nv-danger); }
/* ----------------------------------------------------------
5. BOUTONS
---------------------------------------------------------- */
.nv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--nv-s2);
font-family: inherit;
font-weight: 700;
font-size: 15px;
line-height: 1;
padding: 14px 22px;
border-radius: var(--nv-r-pill);
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--nv-fast) var(--nv-ease),
box-shadow var(--nv-base) var(--nv-ease),
background var(--nv-base) var(--nv-ease),
color var(--nv-base) var(--nv-ease),
border-color var(--nv-base) var(--nv-ease);
white-space: nowrap;
}
.nv-btn:active { transform: scale(0.98); }
.nv-btn--primary {
background: var(--nv-teal);
color: #fff;
box-shadow: var(--nv-shadow-teal);
}
.nv-btn--primary:hover {
background: var(--nv-teal-dark);
transform: translateY(-2px);
box-shadow: 0 18px 36px -10px rgba(43,140,156,0.45);
}
.nv-btn--ink {
background: var(--nv-ink);
color: #fff;
}
.nv-btn--ink:hover { background: #08171a; transform: translateY(-2px); }
.nv-btn--ghost {
background: var(--nv-surface);
color: var(--nv-ink);
border-color: var(--nv-line);
}
.nv-btn--ghost:hover { border-color: var(--nv-ink); transform: translateY(-2px); }
.nv-btn--soft {
background: var(--nv-teal-light);
color: var(--nv-teal-dark);
}
.nv-btn--soft:hover { background: #d9ecef; }
.nv-btn--danger { background: var(--nv-danger); color: #fff; }
.nv-btn--danger:hover { background: #d83333; transform: translateY(-2px); }
.nv-btn--block { width: 100%; }
.nv-btn--sm { padding: 10px 16px; font-size: 13.5px; }
.nv-btn--lg { padding: 17px 28px; font-size: 16px; }
.nv-btn:disabled,
.nv-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
/* ----------------------------------------------------------
6. CHAMPS DE FORMULAIRE
---------------------------------------------------------- */
.nv-field { margin-bottom: var(--nv-s4); }
.nv-label {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--nv-ink-soft);
margin-bottom: var(--nv-s2);
}
.nv-input,
.nv-select,
.nv-textarea {
width: 100%;
padding: 14px 16px;
font-family: inherit;
font-size: 16px;
color: var(--nv-ink);
background: #fbfaf8;
border: 1.5px solid var(--nv-line);
border-radius: var(--nv-r-md);
outline: none;
transition: border-color var(--nv-fast) var(--nv-ease),
background var(--nv-fast) var(--nv-ease),
box-shadow var(--nv-fast) var(--nv-ease);
}
.nv-input::placeholder,
.nv-textarea::placeholder { color: #a8b2b5; }
.nv-input:focus,
.nv-select:focus,
.nv-textarea:focus {
border-color: var(--nv-teal);
background: #fff;
box-shadow: 0 0 0 4px rgba(43,140,156,0.10);
}
.nv-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
/* Checkbox alignée */
.nv-check-row {
display: flex;
align-items: flex-start;
gap: var(--nv-s3);
text-align: left;
}
.nv-check-row input[type="checkbox"] {
margin-top: 2px;
width: 20px;
height: 20px;
accent-color: var(--nv-teal);
cursor: pointer;
flex-shrink: 0;
}
.nv-check-row label {
font-size: 13px;
color: var(--nv-ink-muted);
line-height: 1.5;
cursor: pointer;
}
/* ----------------------------------------------------------
7. BADGES / PILLS / TAGS
---------------------------------------------------------- */
.nv-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
padding: 4px 11px;
border-radius: var(--nv-r-pill);
background: var(--nv-teal-light);
color: var(--nv-teal-dark);
letter-spacing: 0.02em;
}
.nv-badge--ink { background: var(--nv-ink); color: #fff; }
.nv-badge--accent { background: #fef3e2; color: #b8770a; }
.nv-badge--success { background: #e7f7f1; color: #0a7d5c; }
.nv-badge--danger { background: var(--nv-danger-bg); color: #c23030; }
.nv-badge--dot::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
}
/* Étiquette de section (eyebrow) */
.nv-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--nv-s2);
background: var(--nv-teal-light);
color: var(--nv-teal);
padding: 6px 12px;
border-radius: var(--nv-r-pill);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.nv-eyebrow::before {
content: '';
width: 6px; height: 6px;
background: var(--nv-teal);
border-radius: 50%;
}
/* ----------------------------------------------------------
8. NAVIGATION LATÉRALE (dashboard)
---------------------------------------------------------- */
.nv-nav-item {
display: flex;
align-items: center;
gap: var(--nv-s3);
padding: 11px 14px;
border-radius: var(--nv-r-sm);
color: var(--nv-ink-soft);
font-weight: 600;
font-size: 14.5px;
cursor: pointer;
transition: background var(--nv-fast) var(--nv-ease), color var(--nv-fast) var(--nv-ease);
margin-bottom: 2px;
text-decoration: none;
}
.nv-nav-item:hover { background: var(--nv-teal-bg); color: var(--nv-teal-dark); }
.nv-nav-item.active,
.nv-nav-item[aria-current="page"] {
background: var(--nv-teal-light);
color: var(--nv-teal-dark);
font-weight: 700;
}
.nv-nav-item__icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; }
.nv-nav-item--locked { opacity: 0.5; }
.nv-nav-item--locked::after {
content: '🔒';
margin-left: auto;
font-size: 12px;
}
/* ----------------------------------------------------------
9. TABLEAUX
---------------------------------------------------------- */
.nv-table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
}
.nv-table thead th {
text-align: left;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--nv-ink-muted);
padding: 12px 16px;
border-bottom: 1px solid var(--nv-line);
background: var(--nv-cream);
}
.nv-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--nv-line-soft);
color: var(--nv-ink-soft);
}
.nv-table tbody tr { transition: background var(--nv-fast) var(--nv-ease); }
.nv-table tbody tr:hover { background: var(--nv-teal-bg); }
.nv-table tbody tr:last-child td { border-bottom: none; }
/* ----------------------------------------------------------
10. DIVERS UTILITAIRES
---------------------------------------------------------- */
.nv-divider { height: 1px; background: var(--nv-line); border: none; margin: var(--nv-s5) 0; }
.nv-divider--soft { background: var(--nv-line-soft); }
.nv-skeleton {
background: linear-gradient(100deg, #eef2f3 30%, #f6f9fa 50%, #eef2f3 70%);
background-size: 200% 100%;
animation: nv-shimmer 1.4s infinite linear;
border-radius: var(--nv-r-sm);
}
@keyframes nv-shimmer { to { background-position: -200% 0; } }
.nv-spinner {
width: 22px; height: 22px;
border: 2.5px solid rgba(43,140,156,0.25);
border-top-color: var(--nv-teal);
border-radius: 50%;
animation: nv-spin 0.7s linear infinite;
}
@keyframes nv-spin { to { transform: rotate(360deg); } }
/* Animations d'entrée */
@keyframes nv-fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes nv-pop {
0% { transform: scale(0); }
60% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.nv-animate-in { animation: nv-fade-up var(--nv-slow) var(--nv-ease-out) both; }
/* Rond de validation (succès) */
.nv-success-check {
width: 64px; height: 64px;
margin: 0 auto var(--nv-s4);
border-radius: 50%;
background: rgba(43,140,156,0.12);
display: flex; align-items: center; justify-content: center;
animation: nv-pop var(--nv-slow) var(--nv-ease);
}
.nv-success-check svg { width: 32px; height: 32px; }
/* Modale upgrade / gating plan */
.nv-upgrade {
background: linear-gradient(135deg, var(--nv-teal-bg), #fff);
border: 1px solid var(--nv-teal-light);
border-radius: var(--nv-r-lg);
padding: var(--nv-s6);
text-align: center;
}
.nv-upgrade__icon {
width: 56px; height: 56px;
margin: 0 auto var(--nv-s4);
border-radius: 50%;
background: var(--nv-teal-light);
display: flex; align-items: center; justify-content: center;
font-size: 24px;
}
/* Accessibilité : respect du reduced-motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}