/**
* OptiGest360 Design System v1.0
* BUNDLED VERSION - Auto-generated
*
* This file is automatically generated. Do not edit directly.
* To rebuild: python3 /tmp/build_ds.py
*
* Generated: 2026-03-15 15:27:02
*/
/* === Imported from: ./index.css === */
/**
* Design System OptiGest360 v1.0
* Main entry point
*
* Architecture:
* 1. Tokens - Design tokens (colors, spacing, typography)
* 2. Primitives - Base styles and resets
* 3. Components - UI components (buttons, badges, tabs)
* 4. Patterns - Business patterns (entity-card, data-table)
* 5. Layouts - Layout structures (app-layout, sidebar)
* 6. Utilities - Utility classes
* 7. Compatibility - Legacy classes support
*/
/* ============================================
CORE SYSTEM
============================================ */
/* === Imported from: ./tokens/index.css === */
/**
* Design System OptiGest360
* Tokens: Index
*
* Import de tous les tokens
*/
/* === Imported from: ./tokens/colors.css === */
/**
* Design System OptiGest360
* Tokens: Colors
*
* Système de couleurs complet pour ERP
* Basé sur des scales de 50 à 900
*/
:root {
/* ============================================
PRIMARY - Vert profond OptiGest (#06352c)
============================================ */
--ds-primary-50: #f0f5f3;
--ds-primary-100: #d7e6e1;
--ds-primary-200: #afccc3;
--ds-primary-300: #7ea99c;
--ds-primary-400: #4e8573;
--ds-primary-500: #1f6351;
--ds-primary-600: #0f4a3b;
--ds-primary-700: #06352c; /* Main brand color */
--ds-primary-800: #042a23;
--ds-primary-900: #03201a;
/* SECONDARY - Or/Sable OptiGest (#a5956e) */
--ds-secondary-50: #f9f7f2;
--ds-secondary-100: #ebe6d8;
--ds-secondary-200: #d7cdb1;
--ds-secondary-300: #c3b38a;
--ds-secondary-400: #b4a37c;
--ds-secondary-500: #a5956e;
--ds-secondary-600: #8a7b57;
--ds-secondary-700: #6e6244;
--ds-secondary-800: #534931;
--ds-secondary-900: #37301f;
--ds-secondary: #a5956e;
--ds-secondary-hover: #8a7b57;
--ds-secondary-light: #ebe6d8;
/* ============================================
SEMANTIC COLORS
============================================ */
/* Success - Green */
--ds-success-50: #f0fdf4;
--ds-success-100: #dcfce7;
--ds-success-200: #bbf7d0;
--ds-success-300: #86efac;
--ds-success-400: #4ade80;
--ds-success-500: #22c55e;
--ds-success-600: #16a34a;
--ds-success-700: #15803d;
--ds-success-800: #166534;
--ds-success-900: #14532d;
/* Warning - Orange/Yellow */
--ds-warning-50: #fffbeb;
--ds-warning-100: #fef3c7;
--ds-warning-200: #fde68a;
--ds-warning-300: #fcd34d;
--ds-warning-400: #fbbf24;
--ds-warning-500: #f59e0b;
--ds-warning-600: #d97706;
--ds-warning-700: #b45309;
--ds-warning-800: #92400e;
--ds-warning-900: #78350f;
/* Danger - Red */
--ds-danger-50: #fef2f2;
--ds-danger-100: #fee2e2;
--ds-danger-200: #fecaca;
--ds-danger-300: #fca5a5;
--ds-danger-400: #f87171;
--ds-danger-500: #ef4444;
--ds-danger-600: #dc2626;
--ds-danger-700: #b91c1c;
--ds-danger-800: #991b1b;
--ds-danger-900: #7f1d1d;
/* Info - Blue */
--ds-info-50: #eff6ff;
--ds-info-100: #dbeafe;
--ds-info-200: #bfdbfe;
--ds-info-300: #93c5fd;
--ds-info-400: #60a5fa;
--ds-info-500: #3b82f6;
--ds-info-600: #2563eb;
--ds-info-700: #1d4ed8;
--ds-info-800: #1e40af;
--ds-info-900: #1e3a8a;
/* Extended palette */
--ds-purple-500: #8b5cf6;
--ds-purple-600: #7c3aed;
--ds-pink-500: #ec4899;
--ds-orange-200: #fed7aa;
--ds-orange-500: #f97316;
--ds-orange-800: #9a3412;
--ds-indigo-500: #6366f1;
--ds-indigo-600: #4f46e5;
/* ============================================
NEUTRAL SCALE - Gray
============================================ */
--ds-gray-50: #f9fafb;
--ds-gray-100: #f3f4f6;
--ds-gray-200: #e5e7eb;
--ds-gray-300: #d1d5db;
--ds-gray-400: #9ca3af;
--ds-gray-500: #6b7280;
--ds-gray-600: #4b5563;
--ds-gray-700: #374151;
--ds-gray-800: #1f2937;
--ds-gray-900: #111827;
/* ============================================
ABSOLUTE COLORS
============================================ */
--ds-white: #ffffff;
--ds-black: #000000;
/* ============================================
SEMANTIC ALIASES (Pour facilité d'usage)
============================================ */
/* Primary */
--ds-primary: var(--ds-primary-700);
--ds-primary-hover: var(--ds-primary-800);
--ds-primary-active: var(--ds-primary-900);
--ds-primary-light: var(--ds-primary-100);
/* Success */
--ds-success: var(--ds-success-500);
--ds-success-hover: var(--ds-success-600);
--ds-success-light: var(--ds-success-100);
/* Warning */
--ds-warning: var(--ds-warning-500);
--ds-warning-hover: var(--ds-warning-600);
--ds-warning-light: var(--ds-warning-100);
/* Danger */
--ds-danger: var(--ds-danger-500);
--ds-danger-hover: var(--ds-danger-600);
--ds-danger-light: var(--ds-danger-100);
/* Info */
--ds-info: var(--ds-info-500);
--ds-info-hover: var(--ds-info-600);
--ds-info-light: var(--ds-info-100);
/* ============================================
TEXT COLORS
============================================ */
--ds-text-primary: var(--ds-gray-900);
--ds-text-secondary: var(--ds-gray-600);
--ds-text-tertiary: var(--ds-gray-500);
--ds-text-muted: var(--ds-gray-400);
--ds-text-disabled: var(--ds-gray-300);
--ds-text-inverse: var(--ds-white);
/* ============================================
BACKGROUND COLORS
============================================ */
--ds-bg-primary: var(--ds-white);
--ds-bg-secondary: var(--ds-gray-50);
--ds-bg-tertiary: var(--ds-gray-100);
--ds-bg-inverse: var(--ds-gray-900);
--ds-bg-overlay: rgba(0, 0, 0, 0.5);
/* ============================================
BORDER COLORS
============================================ */
--ds-border-default: var(--ds-gray-200);
--ds-border-strong: var(--ds-gray-300);
--ds-border-subtle: var(--ds-gray-100);
--ds-border-light: var(--ds-gray-100);
--ds-border-inverse: var(--ds-white);
/* ============================================
STATUS COLORS (ERP Specific)
============================================ */
--ds-status-draft: var(--ds-gray-500);
--ds-status-pending: var(--ds-warning-500);
--ds-status-approved: var(--ds-success-500);
--ds-status-rejected: var(--ds-danger-500);
--ds-status-archived: var(--ds-gray-400);
--ds-status-active: var(--ds-info-500);
}
/* === Imported from: ./tokens/spacing.css === */
/**
* Design System OptiGest360
* Tokens: Spacing
*
* Système d'espacement basé sur 4px (0.25rem)
* Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64
*/
:root {
/* ============================================
BASE SPACING SCALE (4px base)
============================================ */
--ds-space-0: 0;
--ds-space-1: 0.25rem; /* 4px */
--ds-space-2: 0.5rem; /* 8px */
--ds-space-3: 0.75rem; /* 12px */
--ds-space-4: 1rem; /* 16px */
--ds-space-5: 1.25rem; /* 20px */
--ds-space-6: 1.5rem; /* 24px */
--ds-space-8: 2rem; /* 32px */
--ds-space-10: 2.5rem; /* 40px */
--ds-space-12: 3rem; /* 48px */
--ds-space-16: 4rem; /* 64px */
--ds-space-20: 5rem; /* 80px */
--ds-space-24: 6rem; /* 96px */
--ds-space-32: 8rem; /* 128px */
--ds-space-40: 10rem; /* 160px */
--ds-space-48: 12rem; /* 192px */
--ds-space-64: 16rem; /* 256px */
/* ============================================
SEMANTIC ALIASES (Noms parlants)
============================================ */
--ds-spacing-xs: var(--ds-space-2); /* 8px */
--ds-spacing-sm: var(--ds-space-3); /* 12px */
--ds-spacing-md: var(--ds-space-4); /* 16px */
--ds-spacing-lg: var(--ds-space-6); /* 24px */
--ds-spacing-xl: var(--ds-space-8); /* 32px */
--ds-spacing-2xl: var(--ds-space-12); /* 48px */
--ds-spacing-3xl: var(--ds-space-16); /* 64px */
/* ============================================
COMPONENT SPACING (Usage spécifique)
============================================ */
/* Padding internes composants */
--ds-padding-button-sm: var(--ds-space-2) var(--ds-space-3);
--ds-padding-button: var(--ds-space-3) var(--ds-space-4);
--ds-padding-button-lg: var(--ds-space-4) var(--ds-space-6);
--ds-padding-input-sm: var(--ds-space-2) var(--ds-space-3);
--ds-padding-input: var(--ds-space-3) var(--ds-space-4);
--ds-padding-input-lg: var(--ds-space-4) var(--ds-space-5);
--ds-padding-card: var(--ds-space-6);
--ds-padding-card-sm: var(--ds-space-4);
--ds-padding-card-lg: var(--ds-space-8);
--ds-padding-modal: var(--ds-space-8);
--ds-padding-modal-sm: var(--ds-space-6);
/* Gaps entre éléments */
--ds-gap-xs: var(--ds-space-2);
--ds-gap-sm: var(--ds-space-3);
--ds-gap-md: var(--ds-space-4);
--ds-gap-lg: var(--ds-space-6);
--ds-gap-xl: var(--ds-space-8);
/* Marges sections */
--ds-section-gap: var(--ds-space-8);
--ds-section-gap-lg: var(--ds-space-12);
/* Layout spacing */
--ds-container-padding: var(--ds-space-6);
--ds-page-padding: var(--ds-space-8);
}
/* === Imported from: ./tokens/typography.css === */
/**
* Design System OptiGest360
* Tokens: Typography
*
* Système typographique complet
* Font families, sizes, weights, line-heights, letter-spacing
*/
:root {
/* ============================================
FONT FAMILIES
============================================ */
--ds-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
--ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco,
"Cascadia Code", "Roboto Mono", Menlo, Consolas,
"Courier New", monospace;
--ds-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
/* Default font */
--ds-font-family: var(--ds-font-sans);
/* ============================================
FONT SIZES (Système fluide)
============================================ */
--ds-text-xs: 0.75rem; /* 12px */
--ds-text-sm: 0.875rem; /* 14px */
--ds-text-base: 1rem; /* 16px */
--ds-text-lg: 1.125rem; /* 18px */
--ds-text-xl: 1.25rem; /* 20px */
--ds-text-2xl: 1.5rem; /* 24px */
--ds-text-3xl: 1.875rem; /* 30px */
--ds-text-4xl: 2.25rem; /* 36px */
--ds-text-5xl: 3rem; /* 48px */
--ds-text-6xl: 3.75rem; /* 60px */
--ds-text-7xl: 4.5rem; /* 72px */
/* ============================================
FONT WEIGHTS
============================================ */
--ds-font-thin: 100;
--ds-font-extralight: 200;
--ds-font-light: 300;
--ds-font-normal: 400;
--ds-font-medium: 500;
--ds-font-semibold: 600;
--ds-font-bold: 700;
--ds-font-extrabold: 800;
--ds-font-black: 900;
/* ============================================
LINE HEIGHTS
============================================ */
--ds-leading-none: 1;
--ds-leading-tight: 1.25;
--ds-leading-snug: 1.375;
--ds-leading-normal: 1.5;
--ds-leading-relaxed: 1.625;
--ds-leading-loose: 2;
/* ============================================
LETTER SPACING
============================================ */
--ds-tracking-tighter: -0.05em;
--ds-tracking-tight: -0.025em;
--ds-tracking-normal: 0;
--ds-tracking-wide: 0.025em;
--ds-tracking-wider: 0.05em;
--ds-tracking-widest: 0.1em;
/* ============================================
SEMANTIC ALIASES (Headings, Body, etc.)
============================================ */
/* Headings */
--ds-heading-1-size: var(--ds-text-4xl); /* 36px */
--ds-heading-1-weight: var(--ds-font-bold);
--ds-heading-1-leading: var(--ds-leading-tight);
--ds-heading-2-size: var(--ds-text-3xl); /* 30px */
--ds-heading-2-weight: var(--ds-font-bold);
--ds-heading-2-leading: var(--ds-leading-tight);
--ds-heading-3-size: var(--ds-text-2xl); /* 24px */
--ds-heading-3-weight: var(--ds-font-semibold);
--ds-heading-3-leading: var(--ds-leading-snug);
--ds-heading-4-size: var(--ds-text-xl); /* 20px */
--ds-heading-4-weight: var(--ds-font-semibold);
--ds-heading-4-leading: var(--ds-leading-snug);
--ds-heading-5-size: var(--ds-text-lg); /* 18px */
--ds-heading-5-weight: var(--ds-font-semibold);
--ds-heading-5-leading: var(--ds-leading-normal);
--ds-heading-6-size: var(--ds-text-base); /* 16px */
--ds-heading-6-weight: var(--ds-font-semibold);
--ds-heading-6-leading: var(--ds-leading-normal);
/* Body text */
--ds-body-size: var(--ds-text-base); /* 16px */
--ds-body-weight: var(--ds-font-normal);
--ds-body-leading: var(--ds-leading-normal);
--ds-body-sm-size: var(--ds-text-sm); /* 14px */
--ds-body-sm-weight: var(--ds-font-normal);
--ds-body-sm-leading: var(--ds-leading-normal);
/* Label/Caption */
--ds-label-size: var(--ds-text-sm); /* 14px */
--ds-label-weight: var(--ds-font-medium);
--ds-label-leading: var(--ds-leading-normal);
--ds-caption-size: var(--ds-text-xs); /* 12px */
--ds-caption-weight: var(--ds-font-normal);
--ds-caption-leading: var(--ds-leading-normal);
/* Code/Monospace */
--ds-code-size: var(--ds-text-sm);
--ds-code-weight: var(--ds-font-normal);
--ds-code-family: var(--ds-font-mono);
}
/* === Imported from: ./tokens/radius.css === */
/**
* Design System OptiGest360
* Tokens: Border Radius
*
* Système de border-radius pour cohérence visuelle
*/
:root {
/* ============================================
BORDER RADIUS SCALE
============================================ */
--ds-radius-none: 0;
--ds-radius-sm: 0.125rem; /* 2px */
--ds-radius-base: 0.25rem; /* 4px */
--ds-radius-md: 0.375rem; /* 6px */
--ds-radius-lg: 0.5rem; /* 8px */
--ds-radius-xl: 0.75rem; /* 12px */
--ds-radius-2xl: 1rem; /* 16px */
--ds-radius-3xl: 1.5rem; /* 24px */
--ds-radius-full: 9999px; /* Pill/Circle */
/* ============================================
SEMANTIC ALIASES
============================================ */
--ds-radius-button: var(--ds-radius-md);
--ds-radius-input: var(--ds-radius-md);
--ds-radius-card: var(--ds-radius-lg);
--ds-radius-modal: var(--ds-radius-xl);
--ds-radius-badge: var(--ds-radius-full);
--ds-radius-avatar: var(--ds-radius-full);
}
/* === Imported from: ./tokens/shadows.css === */
/**
* Design System OptiGest360
* Tokens: Shadows
*
* Système d'ombres pour profondeur et hiérarchie
*/
:root {
/* ============================================
BOX SHADOWS (Élévation)
============================================ */
--ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06);
--ds-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--ds-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--ds-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
--ds-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ds-shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
/* Inner shadow */
--ds-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
/* No shadow */
--ds-shadow-none: none;
/* ============================================
FOCUS RING
============================================ */
--ds-focus-ring: 0 0 0 3px rgba(6, 53, 44, 0.1);
--ds-focus-ring-offset: 0 0 0 2px var(--ds-white);
/* ============================================
SEMANTIC SHADOWS (Composants)
============================================ */
--ds-shadow-button: var(--ds-shadow-xs);
--ds-shadow-button-hover: var(--ds-shadow-sm);
--ds-shadow-card: var(--ds-shadow-sm);
--ds-shadow-card-hover: var(--ds-shadow-md);
--ds-shadow-dropdown: var(--ds-shadow-lg);
--ds-shadow-modal: var(--ds-shadow-xl);
--ds-shadow-toast: var(--ds-shadow-lg);
/* ============================================
TEXT SHADOWS (Rarement utilisé)
============================================ */
--ds-text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--ds-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* === Imported from: ./tokens/transitions.css === */
/**
* Design System OptiGest360
* Tokens: Transitions & Animations
*
* Système de transitions pour interactions fluides
*/
:root {
/* ============================================
TIMING FUNCTIONS (Easing)
============================================ */
--ds-ease-linear: linear;
--ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
--ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
--ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Easings avancés */
--ds-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ds-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
/* ============================================
DURATIONS
============================================ */
--ds-duration-instant: 0ms;
--ds-duration-fast: 150ms;
--ds-duration-base: 200ms;
--ds-duration-slow: 300ms;
--ds-duration-slower: 500ms;
/* ============================================
TRANSITIONS COMPLÈTES
============================================ */
--ds-transition-fast: all var(--ds-duration-fast) var(--ds-ease-out);
--ds-transition-base: all var(--ds-duration-base) var(--ds-ease-out);
--ds-transition-slow: all var(--ds-duration-slow) var(--ds-ease-out);
/* Transitions spécifiques propriétés */
--ds-transition-color: color var(--ds-duration-base) var(--ds-ease-out);
--ds-transition-bg: background-color var(--ds-duration-base) var(--ds-ease-out);
--ds-transition-border: border-color var(--ds-duration-base) var(--ds-ease-out);
--ds-transition-shadow: box-shadow var(--ds-duration-base) var(--ds-ease-out);
--ds-transition-transform: transform var(--ds-duration-base) var(--ds-ease-out);
--ds-transition-opacity: opacity var(--ds-duration-base) var(--ds-ease-out);
/* ============================================
ANIMATIONS
============================================ */
--ds-animation-spin: spin 1s linear infinite;
--ds-animation-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
--ds-animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--ds-animation-bounce: bounce 1s infinite;
}
/* ============================================
KEYFRAMES
============================================ */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes slideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes scaleIn {
from {
transform: scale(0.95);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* === Imported from: ./tokens/breakpoints.css === */
/**
* Design System OptiGest360
* Tokens: Breakpoints
*
* Système de breakpoints responsive
* Mobile-first approach
*/
:root {
/* ============================================
BREAKPOINTS (px values for reference)
============================================ */
--ds-screen-xs: 475px; /* Extra small devices */
--ds-screen-sm: 640px; /* Small devices (phones) */
--ds-screen-md: 768px; /* Medium devices (tablets) */
--ds-screen-lg: 1024px; /* Large devices (desktops) */
--ds-screen-xl: 1280px; /* Extra large devices */
--ds-screen-2xl: 1536px; /* 2XL devices */
/* ============================================
CONTAINER MAX WIDTHS
============================================ */
--ds-container-sm: 640px;
--ds-container-md: 768px;
--ds-container-lg: 1024px;
--ds-container-xl: 1280px;
--ds-container-2xl: 1536px;
}
/* ============================================
MEDIA QUERIES (Mobile-first)
============================================ */
/* Usage dans les composants:
@media (min-width: 640px) { ... } // sm and up
@media (min-width: 768px) { ... } // md and up
@media (min-width: 1024px) { ... } // lg and up
*/
/*
Breakpoints Strategy:
Mobile (default) : < 640px
Tablet (sm) : >= 640px
Tablet L (md) : >= 768px
Desktop (lg) : >= 1024px
Desktop L (xl) : >= 1280px
Wide (2xl) : >= 1536px
*/
/* === Imported from: ./primitives/index.css === */
/**
* Design System OptiGest360
* Primitives: Index
*/
/* === Imported from: ./primitives/button.css === */
/**
* Design System OptiGest360
* Primitive: Button
*
* Composant bouton avec toutes ses variantes
* Usage:
*/
/* ============================================
BASE BUTTON
============================================ */
.ds-btn {
/* Reset */
all: unset;
box-sizing: border-box;
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
/* Sizing */
padding: 0.5rem 1rem;
min-height: 36px;
/* Typography */
font-family: var(--ds-font-family);
font-size: 0.8rem;
font-weight: 500;
line-height: 1.4;
text-align: center;
white-space: nowrap;
letter-spacing: -0.005em;
/* Visual */
background-color: var(--ds-white);
border: 1px solid var(--ds-border-default);
border-radius: var(--ds-radius-button);
color: var(--ds-text-primary);
/* Interaction */
cursor: pointer;
user-select: none;
transition: var(--ds-transition-base);
/* Shadow */
box-shadow: var(--ds-shadow-button);
}
.ds-btn:hover {
background-color: var(--ds-gray-50);
border-color: var(--ds-border-strong);
box-shadow: var(--ds-shadow-button-hover);
}
.ds-btn:active {
transform: translateY(1px);
box-shadow: var(--ds-shadow-xs);
}
.ds-btn:focus-visible {
outline: none;
box-shadow: var(--ds-focus-ring);
}
.ds-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================
BUTTON VARIANTS (Colors)
============================================ */
/* Primary */
.ds-btn--primary {
background-color: var(--ds-primary);
border-color: var(--ds-primary);
color: var(--ds-white);
}
.ds-btn--primary:hover {
background-color: var(--ds-primary-hover);
border-color: var(--ds-primary-hover);
}
/* Secondary (gray outline) */
.ds-btn--secondary {
background-color: var(--ds-white);
border-color: var(--ds-gray-300);
color: var(--ds-text-primary);
}
.ds-btn--secondary:hover {
background-color: var(--ds-gray-50);
border-color: var(--ds-gray-400);
}
/* Success */
.ds-btn--success {
background-color: var(--ds-success);
border-color: var(--ds-success);
color: var(--ds-white);
}
.ds-btn--success:hover {
background-color: var(--ds-success-hover);
border-color: var(--ds-success-hover);
}
/* Warning */
.ds-btn--warning {
background-color: var(--ds-warning);
border-color: var(--ds-warning);
color: var(--ds-white);
}
.ds-btn--warning:hover {
background-color: var(--ds-warning-hover);
border-color: var(--ds-warning-hover);
}
/* Danger */
.ds-btn--danger {
background-color: transparent;
border-color: var(--ds-danger);
color: var(--ds-danger);
}
.ds-btn--danger:hover {
background-color: var(--ds-danger);
border-color: var(--ds-danger);
color: var(--ds-white);
}
/* Info */
.ds-btn--info {
background-color: var(--ds-info);
border-color: var(--ds-info);
color: var(--ds-white);
}
.ds-btn--info:hover {
background-color: var(--ds-info-hover);
border-color: var(--ds-info-hover);
}
/* Ghost (transparent) */
.ds-btn--ghost {
background-color: transparent;
border-color: transparent;
color: var(--ds-text-secondary);
box-shadow: none;
}
.ds-btn--ghost:hover {
background-color: var(--ds-gray-100);
border-color: transparent;
color: var(--ds-text-primary);
}
/* Link style */
.ds-btn--link {
background-color: transparent;
border-color: transparent;
color: var(--ds-primary);
box-shadow: none;
padding: 0;
min-height: auto;
}
.ds-btn--link:hover {
background-color: transparent;
border-color: transparent;
color: var(--ds-primary-hover);
text-decoration: underline;
}
/* ============================================
BUTTON SIZES
============================================ */
/* Small */
.ds-btn--sm {
padding: var(--ds-space-2) var(--ds-space-3);
min-height: 32px;
font-size: var(--ds-text-xs);
}
/* Large */
.ds-btn--lg {
padding: var(--ds-space-4) var(--ds-space-6);
min-height: 48px;
font-size: var(--ds-text-base);
}
/* Full width */
.ds-btn--block {
width: 100%;
}
/* ============================================
BUTTON WITH ICON
============================================ */
.ds-btn__icon {
display: inline-flex;
flex-shrink: 0;
}
.ds-btn__icon--left {
margin-right: var(--ds-space-2);
margin-left: calc(var(--ds-space-1) * -1);
}
.ds-btn__icon--right {
margin-left: var(--ds-space-2);
margin-right: calc(var(--ds-space-1) * -1);
}
/* Icon only button */
.ds-btn--icon-only {
padding: var(--ds-space-3);
min-width: 40px;
}
.ds-btn--icon-only.ds-btn--sm {
padding: var(--ds-space-2);
min-width: 32px;
}
.ds-btn--icon-only.ds-btn--lg {
padding: var(--ds-space-4);
min-width: 48px;
}
/* ============================================
BUTTON GROUPS
============================================ */
.ds-btn-group {
display: inline-flex;
gap: 0;
}
.ds-btn-group .ds-btn {
border-radius: 0;
}
.ds-btn-group .ds-btn:first-child {
border-top-left-radius: var(--ds-radius-button);
border-bottom-left-radius: var(--ds-radius-button);
}
.ds-btn-group .ds-btn:last-child {
border-top-right-radius: var(--ds-radius-button);
border-bottom-right-radius: var(--ds-radius-button);
}
.ds-btn-group .ds-btn:not(:first-child) {
border-left-width: 0;
}
.ds-btn-group .ds-btn:hover {
z-index: 1;
}
/* ============================================
LOADING STATE
============================================ */
.ds-btn--loading {
position: relative;
color: transparent;
pointer-events: none;
}
.ds-btn--loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: transparent;
animation: var(--ds-animation-spin);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 640px) {
.ds-btn--sm-block {
width: 100%;
}
}
/* === Imported from: ./primitives/link.css === */
/**
* Design System OptiGest360
* Primitive: Link
*
* Styles pour les liens de navigation et d'action
*/
/* ============================================
BASE LINK
============================================ */
.ds-link {
color: var(--ds-primary);
text-decoration: none;
font-weight: var(--ds-font-medium);
font-size: var(--ds-text-sm);
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
transition: var(--ds-transition-base);
cursor: pointer;
}
.ds-link:hover {
color: var(--ds-primary-dark);
text-decoration: underline;
}
.ds-link:active {
color: var(--ds-primary-darker);
}
.ds-link:focus {
outline: 2px solid var(--ds-primary-light);
outline-offset: 2px;
border-radius: var(--ds-radius-sm);
}
/* Link avec icône */
.ds-link i {
font-size: 0.875em;
transition: transform 0.2s ease;
}
.ds-link:hover i {
transform: translateX(2px);
}
/* ============================================
LINK VARIANTS
============================================ */
/* Link avec icône à gauche */
.ds-link--icon-left {
flex-direction: row-reverse;
}
.ds-link--icon-left:hover i {
transform: translateX(-2px);
}
/* Link subtle (moins prononcé) */
.ds-link--subtle {
color: var(--ds-text-secondary);
font-weight: var(--ds-font-normal);
}
.ds-link--subtle:hover {
color: var(--ds-primary);
}
/* Link danger */
.ds-link--danger {
color: var(--ds-danger);
}
.ds-link--danger:hover {
color: var(--ds-danger-dark);
}
/* Link success */
.ds-link--success {
color: var(--ds-success);
}
.ds-link--success:hover {
color: var(--ds-success-dark);
}
/* Link muted (désactivé visuellement mais cliquable) */
.ds-link--muted {
color: var(--ds-text-tertiary);
cursor: default;
}
.ds-link--muted:hover {
color: var(--ds-text-tertiary);
text-decoration: none;
}
/* ============================================
LINK SIZES
============================================ */
.ds-link--xs {
font-size: var(--ds-text-xs);
}
.ds-link--sm {
font-size: var(--ds-text-sm);
}
.ds-link--base {
font-size: var(--ds-text-base);
}
.ds-link--lg {
font-size: var(--ds-text-lg);
}
/* ============================================
CARD LINK (lien dans header de carte)
============================================ */
.ds-card__link {
color: var(--ds-primary);
text-decoration: none;
font-weight: var(--ds-font-medium);
font-size: var(--ds-text-sm);
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
transition: var(--ds-transition-base);
}
.ds-card__link:hover {
color: var(--ds-primary-dark);
}
.ds-card__link i {
font-size: 0.875em;
transition: transform 0.2s ease;
}
.ds-card__link:hover i {
transform: translateX(2px);
}
/* ============================================
BREADCRUMB LINKS
============================================ */
.ds-breadcrumb-link {
color: var(--ds-text-secondary);
text-decoration: none;
font-size: var(--ds-text-sm);
transition: var(--ds-transition-base);
}
.ds-breadcrumb-link:hover {
color: var(--ds-primary);
}
.ds-breadcrumb-link::after {
content: '/';
margin: 0 var(--ds-space-2);
color: var(--ds-text-tertiary);
}
.ds-breadcrumb-link:last-child::after {
content: '';
}
/* ============================================
UNDERLINE LINK (lien souligné permanent)
============================================ */
.ds-link--underline {
text-decoration: underline;
}
.ds-link--underline:hover {
text-decoration: none;
}
/* ============================================
EXTERNAL LINK (lien externe avec icône)
============================================ */
.ds-link--external::after {
content: '\f35d'; /* fa-external-link-alt */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 0.75em;
margin-left: var(--ds-space-1);
}
/* ============================================
DISABLED STATE
============================================ */
.ds-link[disabled],
.ds-link.disabled {
color: var(--ds-text-disabled);
cursor: not-allowed;
pointer-events: none;
opacity: 0.5;
}
/* ============================================
LINK GROUPS
============================================ */
.ds-link-group {
display: flex;
gap: var(--ds-space-4);
align-items: center;
}
.ds-link-group--vertical {
flex-direction: column;
align-items: flex-start;
gap: var(--ds-space-2);
}
/* ============================================
ACTION LINK (lien d'action avec background)
============================================ */
.ds-action-link {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
padding: var(--ds-space-2) var(--ds-space-4);
border-radius: var(--ds-radius);
color: var(--ds-primary);
text-decoration: none;
font-weight: var(--ds-font-medium);
font-size: var(--ds-text-sm);
background-color: var(--ds-primary-light);
transition: var(--ds-transition-base);
}
.ds-action-link:hover {
background-color: var(--ds-primary);
color: var(--ds-white);
}
.ds-action-link i {
font-size: 1em;
}
/* ============================================
NAVIGATION LINK (pour sidebars, menus)
============================================ */
.ds-nav-link {
display: flex;
align-items: center;
gap: var(--ds-space-3);
padding: var(--ds-space-3) var(--ds-space-4);
color: var(--ds-text-secondary);
text-decoration: none;
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-medium);
border-radius: var(--ds-radius);
transition: var(--ds-transition-base);
}
.ds-nav-link:hover {
background-color: var(--ds-bg-secondary);
color: var(--ds-text-primary);
}
.ds-nav-link.active {
background-color: var(--ds-primary-light);
color: var(--ds-primary);
}
.ds-nav-link i {
font-size: 1.125em;
width: 20px;
text-align: center;
}
/* ============================================
COMPATIBILITY
============================================ */
/* Alias pour card-link (ancien nom) */
.card-link {
color: var(--ds-primary);
text-decoration: none;
font-weight: var(--ds-font-medium);
font-size: var(--ds-text-sm);
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
transition: var(--ds-transition-base);
}
.card-link:hover {
color: var(--ds-primary-dark);
}
.card-link i {
font-size: 0.875em;
transition: transform 0.2s ease;
}
.card-link:hover i {
transform: translateX(2px);
}
/* === Imported from: ./primitives/input.css === */
/**
* Design System OptiGest360
* Primitive: Input
*
* Champs de saisie texte
* Usage:
*/
/* ============================================
BASE INPUT
============================================ */
.ds-input {
/* Reset */
all: unset;
box-sizing: border-box;
/* Layout */
display: block;
width: 100%;
/* Sizing */
padding: var(--ds-space-3) var(--ds-space-4);
min-height: 40px;
/* Typography */
font-family: var(--ds-font-family);
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-normal);
line-height: var(--ds-leading-normal);
color: var(--ds-text-primary);
/* Visual */
background-color: var(--ds-white);
border: 1px solid var(--ds-border-default);
border-radius: var(--ds-radius-input);
/* Interaction */
transition: var(--ds-transition-border), var(--ds-transition-shadow);
}
.ds-input::placeholder {
color: var(--ds-text-muted);
}
.ds-input:hover {
border-color: var(--ds-border-strong);
}
.ds-input:focus {
outline: none;
border-color: var(--ds-primary);
box-shadow: var(--ds-focus-ring);
}
.ds-input:disabled {
background-color: var(--ds-bg-secondary);
color: var(--ds-text-disabled);
cursor: not-allowed;
opacity: 0.6;
}
.ds-input:read-only {
background-color: var(--ds-bg-secondary);
cursor: default;
}
/* ============================================
INPUT STATES
============================================ */
/* Error */
.ds-input--error {
border-color: var(--ds-danger);
}
.ds-input--error:focus {
border-color: var(--ds-danger);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
/* Success */
.ds-input--success {
border-color: var(--ds-success);
}
.ds-input--success:focus {
border-color: var(--ds-success);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
/* ============================================
INPUT SIZES
============================================ */
/* Small */
.ds-input--sm {
padding: var(--ds-space-2) var(--ds-space-3);
min-height: 32px;
font-size: var(--ds-text-xs);
}
/* Large */
.ds-input--lg {
padding: var(--ds-space-4) var(--ds-space-5);
min-height: 48px;
font-size: var(--ds-text-base);
}
/* ============================================
INPUT GROUP (avec icons/addons)
============================================ */
.ds-input-group {
position: relative;
display: flex;
width: 100%;
}
.ds-input-group .ds-input {
flex: 1;
}
/* Icon left */
.ds-input-group--icon-left .ds-input {
padding-left: var(--ds-space-10);
}
.ds-input-group__icon-left {
position: absolute;
left: var(--ds-space-3);
top: 50%;
transform: translateY(-50%);
color: var(--ds-text-secondary);
pointer-events: none;
}
/* Icon right */
.ds-input-group--icon-right .ds-input {
padding-right: var(--ds-space-10);
}
.ds-input-group__icon-right {
position: absolute;
right: var(--ds-space-3);
top: 50%;
transform: translateY(-50%);
color: var(--ds-text-secondary);
pointer-events: none;
}
/* Addon (button/text à droite ou gauche) */
.ds-input-group__addon {
display: inline-flex;
align-items: center;
padding: var(--ds-space-3) var(--ds-space-4);
background-color: var(--ds-bg-secondary);
border: 1px solid var(--ds-border-default);
color: var(--ds-text-secondary);
font-size: var(--ds-text-sm);
white-space: nowrap;
}
.ds-input-group__addon:first-child {
border-right: 0;
border-top-left-radius: var(--ds-radius-input);
border-bottom-left-radius: var(--ds-radius-input);
}
.ds-input-group__addon:first-child + .ds-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ds-input-group__addon:last-child {
border-left: 0;
border-top-right-radius: var(--ds-radius-input);
border-bottom-right-radius: var(--ds-radius-input);
}
.ds-input-group .ds-input:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* ============================================
FORM FIELD (Label + Input + Helper)
============================================ */
.ds-form-field {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
}
.ds-form-label {
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-medium);
color: var(--ds-text-primary);
}
.ds-form-label--required::after {
content: '*';
color: var(--ds-danger);
margin-left: var(--ds-space-1);
}
.ds-form-helper {
font-size: var(--ds-text-xs);
color: var(--ds-text-secondary);
}
.ds-form-error {
font-size: var(--ds-text-xs);
color: var(--ds-danger);
display: flex;
align-items: center;
gap: var(--ds-space-1);
}
.ds-form-success {
font-size: var(--ds-text-xs);
color: var(--ds-success);
display: flex;
align-items: center;
gap: var(--ds-space-1);
}
/* === Imported from: ./primitives/select.css === */
/**
* Design System OptiGest360
* Primitive: Select
*/
.ds-select {
all: unset;
box-sizing: border-box;
display: block;
width: 100%;
padding: var(--ds-space-3) var(--ds-space-10) var(--ds-space-3) var(--ds-space-4);
min-height: 40px;
font-family: var(--ds-font-family);
font-size: var(--ds-text-sm);
line-height: var(--ds-leading-normal);
color: var(--ds-text-primary);
background-color: var(--ds-white);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
background-position: right var(--ds-space-3) center;
background-repeat: no-repeat;
background-size: 1.25rem;
border: 1px solid var(--ds-border-default);
border-radius: var(--ds-radius-input);
cursor: pointer;
transition: var(--ds-transition-border);
}
.ds-select:hover {
border-color: var(--ds-border-strong);
}
.ds-select:focus {
outline: none;
border-color: var(--ds-primary);
box-shadow: var(--ds-focus-ring);
}
.ds-select:disabled {
background-color: var(--ds-bg-secondary);
cursor: not-allowed;
opacity: 0.6;
}
.ds-select--sm {
padding: var(--ds-space-2) var(--ds-space-8) var(--ds-space-2) var(--ds-space-3);
min-height: 32px;
font-size: var(--ds-text-xs);
}
.ds-select--lg {
padding: var(--ds-space-4) var(--ds-space-12) var(--ds-space-4) var(--ds-space-5);
min-height: 48px;
font-size: var(--ds-text-base);
}
.ds-select--error {
border-color: var(--ds-danger);
}
.ds-select--error:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
/* === Imported from: ./primitives/textarea.css === */
/**
* Design System OptiGest360
* Primitive: Textarea
*/
.ds-textarea {
all: unset;
box-sizing: border-box;
display: block;
width: 100%;
padding: var(--ds-space-3) var(--ds-space-4);
min-height: 80px;
font-family: var(--ds-font-family);
font-size: var(--ds-text-sm);
line-height: var(--ds-leading-normal);
color: var(--ds-text-primary);
background-color: var(--ds-white);
border: 1px solid var(--ds-border-default);
border-radius: var(--ds-radius-input);
resize: vertical;
transition: var(--ds-transition-border);
}
.ds-textarea::placeholder {
color: var(--ds-text-muted);
}
.ds-textarea:hover {
border-color: var(--ds-border-strong);
}
.ds-textarea:focus {
outline: none;
border-color: var(--ds-primary);
box-shadow: var(--ds-focus-ring);
}
.ds-textarea:disabled {
background-color: var(--ds-bg-secondary);
cursor: not-allowed;
opacity: 0.6;
}
.ds-textarea--error {
border-color: var(--ds-danger);
}
.ds-textarea--error:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.ds-textarea--sm {
min-height: 60px;
font-size: var(--ds-text-xs);
}
.ds-textarea--lg {
min-height: 120px;
font-size: var(--ds-text-base);
}
/* === Imported from: ./primitives/checkbox.css === */
/**
* Design System OptiGest360
* Primitive: Checkbox
*/
.ds-checkbox {
all: unset;
appearance: none;
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid var(--ds-border-default);
border-radius: var(--ds-radius-sm);
background-color: var(--ds-white);
cursor: pointer;
transition: var(--ds-transition-base);
flex-shrink: 0;
}
.ds-checkbox:hover {
border-color: var(--ds-primary);
}
.ds-checkbox:checked {
background-color: var(--ds-primary);
border-color: var(--ds-primary);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}
.ds-checkbox:focus-visible {
box-shadow: var(--ds-focus-ring);
}
.ds-checkbox:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ds-checkbox-label {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
cursor: pointer;
font-size: var(--ds-text-sm);
color: var(--ds-text-primary);
}
/* === Imported from: ./primitives/radio.css === */
/**
* Design System OptiGest360
* Primitive: Radio
*/
.ds-radio {
all: unset;
appearance: none;
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid var(--ds-border-default);
border-radius: 50%;
background-color: var(--ds-white);
cursor: pointer;
transition: var(--ds-transition-base);
flex-shrink: 0;
}
.ds-radio:hover {
border-color: var(--ds-primary);
}
.ds-radio:checked {
border-color: var(--ds-primary);
background-color: var(--ds-white);
box-shadow: inset 0 0 0 4px var(--ds-primary);
}
.ds-radio:focus-visible {
box-shadow: var(--ds-focus-ring);
}
.ds-radio:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ds-radio-label {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
cursor: pointer;
font-size: var(--ds-text-sm);
color: var(--ds-text-primary);
}
/* ============================================
COMPONENTS
============================================ */
/* === Imported from: ./components/index.css === */
/**
* Design System OptiGest360
* Components: Index
*/
/* === Imported from: ./components/card.css === */
/**
* Design System OptiGest360
* Component: Card
*
* Composant carte - LE composant le plus réutilisé dans un ERP
* Structure: card > card-header + card-body + card-footer
*/
/* ============================================
BASE CARD
============================================ */
.ds-card {
background-color: var(--ds-white);
border: 1px solid var(--ds-border-subtle, #f3f4f6);
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.ds-card:hover {
box-shadow: var(--ds-shadow-card-hover);
}
/* ============================================
CARD PARTS
============================================ */
.ds-card-header {
padding: var(--ds-space-6);
border-bottom: 1px solid var(--ds-border-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
}
.ds-card-body {
padding: var(--ds-space-6);
}
.ds-card-footer {
padding: var(--ds-space-6);
background-color: var(--ds-bg-secondary);
border-top: 1px solid var(--ds-border-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
}
/* ============================================
CARD TITLE & SUBTITLE
============================================ */
.ds-card-title {
font-size: var(--ds-text-lg);
font-weight: var(--ds-font-semibold);
color: var(--ds-text-primary);
margin: 0;
display: flex;
align-items: center;
gap: var(--ds-space-2);
}
.ds-card-subtitle {
font-size: var(--ds-text-sm);
color: var(--ds-text-secondary);
margin: var(--ds-space-2) 0 0 0;
}
/* ============================================
CARD VARIANTS
============================================ */
/* Card sans ombre */
.ds-card--flat {
box-shadow: none;
}
/* Card sans bordure */
.ds-card--borderless {
border: none;
}
/* Card clickable */
.ds-card--clickable {
cursor: pointer;
transition: var(--ds-transition-base);
}
.ds-card--clickable:hover {
border-color: var(--ds-primary);
transform: translateY(-2px);
}
/* Card avec accent coloré */
.ds-card--accent-top {
border-top: 4px solid var(--ds-primary);
}
.ds-card--accent-left {
border-left: 4px solid var(--ds-primary);
}
.ds-card--accent-top.ds-card--success {
border-top-color: var(--ds-success);
}
.ds-card--accent-top.ds-card--warning {
border-top-color: var(--ds-warning);
}
.ds-card--accent-top.ds-card--danger {
border-top-color: var(--ds-danger);
}
/* ============================================
CARD SIZES
============================================ */
.ds-card--sm .ds-card-header,
.ds-card--sm .ds-card-body,
.ds-card--sm .ds-card-footer {
padding: var(--ds-space-4);
}
.ds-card--lg .ds-card-header,
.ds-card--lg .ds-card-body,
.ds-card--lg .ds-card-footer {
padding: var(--ds-space-8);
}
/* ============================================
CARD GRID (Container pour plusieurs cards)
============================================ */
.ds-card-grid {
display: grid;
gap: var(--ds-space-6);
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ds-card-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.ds-card-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.ds-card-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
.ds-card-grid--3,
.ds-card-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.ds-card-grid,
.ds-card-grid--2,
.ds-card-grid--3,
.ds-card-grid--4 {
grid-template-columns: 1fr;
}
}
/* ============================================
GRID LAYOUT UTILITIES
============================================ */
.ds-grid { display: grid !important; }
.ds-grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.ds-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.ds-grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
/* Detail layout: 2/3 main + 1/3 sidebar */
.ds-detail-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--ds-space-6);
}
.ds-detail-layout__main { min-width: 0; }
.ds-detail-layout__sidebar { min-width: 0; }
@media (max-width: 1024px) {
.ds-grid-cols-3,
.ds-grid-cols-4,
.ds-grid-cols-5 {
grid-template-columns: repeat(2, 1fr) !important;
}
.ds-detail-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.ds-grid-cols-2,
.ds-grid-cols-3,
.ds-grid-cols-4,
.ds-grid-cols-5 {
grid-template-columns: 1fr !important;
}
}
/* Column spans */
.ds-col-span-1 { grid-column: span 1 !important; }
.ds-col-span-2 { grid-column: span 2 !important; }
.ds-col-span-3 { grid-column: span 3 !important; }
.ds-col-span-full { grid-column: 1 / -1 !important; }
/* Form grid */
.ds-form-grid { display: grid; gap: var(--ds-space-4); }
.ds-form-grid--2-cols { grid-template-columns: repeat(2, 1fr); }
.ds-form-grid--3-cols { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
.ds-form-grid--2-cols,
.ds-form-grid--3-cols {
grid-template-columns: 1fr;
}
}
/* ============================================
BEM NOTATION ALIASES (double underscore)
============================================ */
/* Aliases pour compatibilité avec notation BEM */
.ds-card__header {
padding: var(--ds-space-6);
border-bottom: 1px solid var(--ds-border-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
}
.ds-card__body {
padding: var(--ds-space-6);
}
.ds-card__footer {
padding: var(--ds-space-6);
background-color: var(--ds-bg-secondary);
border-top: 1px solid var(--ds-border-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
}
.ds-card__title {
font-size: var(--ds-text-lg);
font-weight: var(--ds-font-semibold);
color: var(--ds-text-primary);
margin: 0;
display: flex;
align-items: center;
gap: var(--ds-space-2);
}
.ds-card__subtitle {
font-size: var(--ds-text-sm);
color: var(--ds-text-secondary);
margin: var(--ds-space-2) 0 0 0;
}
/* === Imported from: ./components/stat-card.css === */
/**
* Design System OptiGest360
* Component: StatCard
*
* LE composant statistique UNIFIÉ pour tout l'ERP
* Remplace: stat-card, kpi-card, quick-stat, finance-kpi, etc.
*
* Usage:
*
*
*
125M
*
Chiffre d'Affaires
*