/* =============================================================================
Validon UI Kit — implémentation CSS de DESIGN.md (la source de vérité visuelle).
-----------------------------------------------------------------------------
But : une SEULE source pour les couleurs, la typo, les formes et les composants
→ cohérence sur toutes les surfaces + correction « une fois, partout ».
Adoption SANS RISQUE : toutes les classes sont préfixées `vui-` → elles ne
peuvent PAS entrer en conflit avec le CSS existant d'une page. On migre une
page quand on y touche déjà ; pas de « big bang ».
Prérequis dans le de la page (cf. DESIGN.md §3) :
Thèmes : CLAIR par défaut (marketing). Ajouter `class="theme-dark"` sur un
conteneur (ou ) pour la surface APPLICATION (Espace Pro).
Accent secteur : `class="brand-artisan|brand-praticien|brand-expert"`.
============================================================================= */
:root {
/* — Couleurs de marque (DESIGN.md §2.1) — */
--vui-primary: #0f766e; /* teal : action sur fond clair (WCAG) */
--vui-primary-dark: #115e59; /* survol teal */
--vui-primary-grad-end: #0d9488;
--vui-emerald: #10b981; /* émeraude : action sur fond sombre */
--vui-emerald-dark: #059669;
--vui-secondary: #4f46e5; /* indigo : accent secondaire */
/* Accent actif (par défaut teal ; surchargé par thème sombre & .brand-*) */
--vui-accent: var(--vui-primary);
--vui-accent-grad-end: var(--vui-primary-grad-end);
--vui-accent-hover: var(--vui-primary-dark);
/* — Surfaces : thème CLAIR par défaut (DESIGN.md §2.3) — */
--vui-bg: #f8fafc;
--vui-surface: #ffffff;
--vui-border: rgba(0, 0, 0, 0.06);
--vui-text: #0f172a;
--vui-muted: #475569;
/* — Sémantique (DESIGN.md §2.4) — */
--vui-success: #16a34a;
--vui-warning: #f59e0b;
--vui-error: #dc2626;
/* — Typographie (DESIGN.md §3) — */
--vui-font: 'Outfit', system-ui, -apple-system, sans-serif;
--vui-font-serif: 'Libre Baskerville', Georgia, serif;
/* — Rayons (DESIGN.md §4) — */
--vui-r-pill: 99px;
--vui-r-field: 12px;
--vui-r-card: 16px;
--vui-r-lg: 24px;
/* — Ombres douces (DESIGN.md §4) — */
--vui-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
--vui-shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--vui-shadow-cta: 0 4px 15px rgba(13, 148, 136, 0.2);
--vui-shadow-cta-hover: 0 6px 20px rgba(13, 148, 136, 0.35);
/* — Espacement — */
--vui-space-1: 0.5rem;
--vui-space-2: 1rem;
--vui-space-3: 1.5rem;
--vui-space-4: 2rem;
/* — Mouvement (DESIGN.md §6) — */
--vui-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* — Thème SOMBRE : surface application / Espace Pro (DESIGN.md §0) — */
.theme-dark {
--vui-accent: var(--vui-emerald);
--vui-accent-grad-end: #0d9488;
--vui-accent-hover: var(--vui-emerald-dark);
--vui-bg: #111827;
--vui-surface: rgba(31, 41, 55, 0.7);
--vui-border: rgba(255, 255, 255, 0.1);
--vui-text: #f3f4f6;
--vui-muted: #9ca3af;
}
/* — Accents par secteur (DESIGN.md §2.2) — */
.brand-artisan { --vui-accent: #10b981; --vui-accent-grad-end: #0d9488; --vui-accent-hover: #059669; }
.brand-praticien { --vui-accent: #8b5cf6; --vui-accent-grad-end: #7c3aed; --vui-accent-hover: #6d28d9; }
.brand-expert { --vui-accent: #be123c; --vui-accent-grad-end: #9f1239; --vui-accent-hover: #881337; }
/* =============================================================================
BASE responsive-safe : tout composant `vui-` est responsive PAR CONSTRUCTION
(box-sizing border-box + aucun enfant ne dépasse → plus de débordement mobile).
============================================================================= */
.vui *, .vui *::before, .vui *::after { box-sizing: border-box; }
.vui { font-family: var(--vui-font); color: var(--vui-text); line-height: 1.6; }
.vui img, .vui video, .vui pre, .vui table { max-width: 100%; }
.vui pre { overflow-x: auto; }
/* À poser sur (ou le wrapper racine) pour garantir zéro scroll horizontal. */
.vui-page { overflow-x: hidden; }
/* — Conteneur centré, padding fluide — */
.vui-container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
/* — Titres premium serif (DESIGN.md §3) — */
.vui-title, .font-serif { font-family: var(--vui-font-serif); letter-spacing: -0.01em; }
/* =============================================================================
COMPOSANTS (DESIGN.md §5)
============================================================================= */
/* 5.1 — Bouton d'action principal : pilule à dégradé vert + lift au survol */
.vui-btn {
display: inline-block;
font-family: var(--vui-font);
font-weight: 700;
font-size: 0.95rem;
line-height: 1.2;
padding: 0.7rem 1.6rem;
border: none;
border-radius: var(--vui-r-pill);
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
background: linear-gradient(135deg, var(--vui-accent) 0%, var(--vui-accent-grad-end) 100%);
box-shadow: var(--vui-shadow-cta);
transition: transform 0.3s var(--vui-ease), box-shadow 0.3s var(--vui-ease), background 0.3s var(--vui-ease);
}
.vui-btn:hover { transform: translateY(-2px); box-shadow: var(--vui-shadow-cta-hover); }
.vui-btn:active { transform: translateY(0); }
/* 5.2 — Bouton secondaire (blanc/glass, bordure neutre) */
.vui-btn--ghost {
background: var(--vui-surface);
color: var(--vui-text);
border: 1px solid var(--vui-border);
box-shadow: none;
}
.vui-btn--ghost:hover { border-color: var(--vui-accent); box-shadow: var(--vui-shadow-card); }
/* Pleine largeur (utile sur mobile) */
.vui-btn--block { display: block; width: 100%; }
/* 5.3 — Carte */
.vui-card {
background: var(--vui-surface);
border: 1px solid var(--vui-border);
border-radius: var(--vui-r-card);
padding: 1.5rem;
box-shadow: var(--vui-shadow-card);
transition: transform 0.3s var(--vui-ease), box-shadow 0.3s var(--vui-ease), border-color 0.3s var(--vui-ease);
}
.theme-dark .vui-card { backdrop-filter: blur(12px); }
.vui-card--hover:hover { transform: translateY(-5px); border-color: var(--vui-accent); box-shadow: var(--vui-shadow-card-hover); }
/* 5.4 — Champ de formulaire (rayon 12px, halo vert au focus) */
.vui-label { display: block; margin-bottom: 0.4rem; color: var(--vui-muted); font-size: 0.95rem; }
.vui-input, .vui-field {
width: 100%;
padding: 12px;
border: 1px solid var(--vui-border);
border-radius: var(--vui-r-field);
background: var(--vui-surface);
color: var(--vui-text);
font-family: var(--vui-font);
font-size: 1rem;
}
.theme-dark .vui-input, .theme-dark .vui-field { background: rgba(0, 0, 0, 0.3); }
.vui-input:focus, .vui-field:focus {
outline: none;
border-color: var(--vui-accent);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.vui-input::placeholder, .vui-field::placeholder { color: var(--vui-muted); opacity: 0.8; }
/* Badge / tag (pilule) */
.vui-badge {
display: inline-block;
padding: 0.3rem 0.8rem;
border-radius: var(--vui-r-pill);
background: color-mix(in srgb, var(--vui-accent) 12%, transparent);
color: var(--vui-accent);
border: 1px solid color-mix(in srgb, var(--vui-accent) 25%, transparent);
font-size: 0.8rem;
font-weight: 700;
}
/* Grille de cartes responsive — empile proprement, jamais de débordement */
.vui-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 1.25rem;
}
/* Rangée flex « cartes côte à côte » qui passe en pile sur petit écran */
.vui-row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.vui-row > * { flex: 1 1 240px; min-width: 0; }
/* Utilitaires de texte */
.vui-muted { color: var(--vui-muted); }
.vui-accent { color: var(--vui-accent); }