mais enfants du meme ). On les declare donc sur : - .cms-front-route main -> contenu public CMS uniquement. Le header/footer Salient, hors

, n'y a jamais acces. - .cms-admin-route, .cms-admin -> pages admin standalone. Pas de chrome Salient a isoler : portee large volontaire, ces jetons servent au design de l'admin. Specificite faible (une/deux classes) : ne prime jamais sur un reglage Salient en dur. Aucune regle !important ici. ============================================================ */ /* --- Contenu public CMS (confine a main, hors header/footer Salient) --- */ .cms-front-route main { --color-primary: #000; --color-primary-dark: #1b1b1b; --color-secondary: #fff; --color-tertiary: #d3d3d3; --color-success: #28a745; --color-success-dark: #1f7d35; --color-danger: #dc3545; --color-danger-dark: #b32635; --color-warning: #ffc107; --color-info: #17a2b8; --color-gray-100: #f8f8f8; --color-gray-200: #efefef; --color-gray-300: #d9d9d9; --color-gray-400: #c0c0c0; --color-gray-500: #8f8f8f; --color-gray-600: #6f6f6f; --color-gray-700: #4a4a4a; --color-gray-800: #2f2f2f; --color-gray-900: #111; --color-text: #111; --color-text-light: rgba(0, 0, 0, 0.62); --color-text-dark: #000; --color-bg: #f5f5f5; --color-bg-white: #fff; /* ---- AJOUT : fond sombre et textes inversés ---- */ --color-bg-dark: #000; --color-text-invert: #fff; --color-text-invert-muted: rgba(255, 255, 255, 0.68); --color-border-invert: rgba(255, 255, 255, 0.14); --color-overlay-dark: rgba(0, 0, 0, 0.5); --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-xxl: 60px; /* ---- AJOUT : gouttières fluides ---- */ --gutter-row: clamp(16px, 1.6vw, 28px); --gutter-block: clamp(12px, 1.1vw, 20px); --gutter-page: clamp(16px, 3vw, 48px); --radius-sm: 3px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-circle: 50%; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.14); --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.2); --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; --font-primary: "DM Sans", sans-serif; --font-accent: "Gloock", serif; --font-family: var(--font-primary); --font-family-mono: "Courier New", monospace; --font-size-xs: clamp(12px, 0.6vw, 14px); --font-size-sm: clamp(14px, 0.75vw, 16px); --font-size-md: clamp(16px, 0.95vw, 20px); --font-size-lg: clamp(18px, 1.08vw, 22px); --font-size-xl: clamp(24px, 2.35vw, 30px); --font-size-2xl: clamp(36px, 2.9vw, 44px); --font-size-3xl: clamp(44px, 3.4vw, 60px); --font-size-display: clamp(56px, 6.7vw, 120px); --line-height-tight: 1.1; --line-height-base: 1.6; --line-height-relaxed: 1.8; --max-width-container: 1600px; --max-width-content: 1200px; --max-width-wide: 1600px;} /* --- Admin CMS standalone (portee large, sert au design admin) --- */ .cms-admin-route, .cms-admin, .cms-admin-route main, .cms-admin main { --color-primary: #000; --color-primary-dark: #1b1b1b; --color-secondary: #fff; --color-tertiary: #d3d3d3; --color-success: #28a745; --color-success-dark: #1f7d35; --color-danger: #dc3545; --color-danger-dark: #b32635; --color-warning: #ffc107; --color-info: #17a2b8; --color-gray-100: #f8f8f8; --color-gray-200: #efefef; --color-gray-300: #d9d9d9; --color-gray-400: #c0c0c0; --color-gray-500: #8f8f8f; --color-gray-600: #6f6f6f; --color-gray-700: #4a4a4a; --color-gray-800: #2f2f2f; --color-gray-900: #111; --color-text: #111; --color-text-light: rgba(0, 0, 0, 0.62); --color-text-dark: #000; --color-bg: #f5f5f5; --color-bg-white: #fff; /* ---- AJOUT : fond sombre et textes inversés ---- */ --color-bg-dark: #000; --color-text-invert: #fff; --color-text-invert-muted: rgba(255, 255, 255, 0.68); --color-border-invert: rgba(255, 255, 255, 0.14); --color-overlay-dark: rgba(0, 0, 0, 0.5); --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-xxl: 60px; /* ---- AJOUT : gouttières fluides ---- */ --gutter-row: clamp(16px, 1.6vw, 28px); --gutter-block: clamp(12px, 1.1vw, 20px); --gutter-page: clamp(16px, 3vw, 48px); --radius-sm: 3px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-circle: 50%; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.14); --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.2); --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; --font-primary: "DM Sans", sans-serif; --font-accent: "Gloock", serif; --font-family: var(--font-primary); --font-family-mono: "Courier New", monospace; --font-size-xs: clamp(12px, 0.6vw, 14px); --font-size-sm: clamp(14px, 0.75vw, 16px); --font-size-md: clamp(16px, 0.95vw, 20px); --font-size-lg: clamp(18px, 1.08vw, 22px); --font-size-xl: clamp(24px, 2.35vw, 30px); --font-size-2xl: clamp(36px, 2.9vw, 44px); --font-size-3xl: clamp(44px, 3.4vw, 60px); --font-size-display: clamp(56px, 6.7vw, 120px); --line-height-tight: 1.1; --line-height-base: 1.6; --line-height-relaxed: 1.8; --max-width-container: 1600px; --max-width-content: 1200px; --max-width-wide: 1600px;}