/* ============================================================================= ACCA Organisation — Tokens de design (brief de direction artistique, §4) ----------------------------------------------------------------------------- Fichier UNIQUE de tokens, partagé par l'espace admin et l'espace client. Aucune couleur, police ou rayon ne doit diverger entre les deux espaces : seule la densité change (voir acca-theme.css, classes .espace-admin / .espace-client posées sur ). ============================================================================= */ :root { /* ---- Couleurs de marque (une seule couleur de marque : le brun) ---- */ --brun-profond: #3E2020; /* en-têtes de tableau, bandeaux, nav */ --brun-signature: #5A2E2E; /* couleur de marque, boutons primaires */ --brun-clair: #8A6A62; /* titres de section, icônes actives */ --brun-hover: #4A2525; /* survol des actions primaires */ --brun-8: rgba(90, 46, 46, 0.08); /* fond des badges de rôle */ --brun-12: rgba(90, 46, 46, 0.12); --brun-20: rgba(90, 46, 46, 0.20); --brun-rgb: 90, 46, 46; /* ---- Neutres chauds ---- */ --taupe: #6B5B54; /* texte secondaire */ --encre: #2F2B29; /* texte principal */ --gris-texte: #6E6763; /* texte tertiaire, libellés */ --fond: #FFFFFF; /* fond des cartes et tableaux */ --fond-page: #F7F5F3; /* fond général, teinte chaude */ --fond-doux: #F1ECE9; /* fond de survol, zones secondaires */ --bordure: #E8E3DF; /* bordures, séparateurs */ --bordure-claire: #F0ECE8; /* ---- Sémantiques, sourdes et non saturées ---- */ --succes: #4A6B4F; --succes-texte: #3F5C43; /* AA sur fond clair pour du texte courant */ --succes-fond: #E3EBE4; --alerte: #A8762C; --alerte-texte: #7F581F; /* AA sur fond clair */ --alerte-fond: #F5EDDF; --danger: #9B3D34; --danger-texte: #86342C; --danger-fond: #F2E3E1; --neutre-fond: #ECE8E5; /* état inactif / brouillon */ /* ---- Typographie ---- */ --font-titre: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fs-page: 30px; /* titre de page, 700 */ --fs-section: 20px; /* titre de section, 600 */ --fs-kpi: 36px; /* chiffre clé, 700 */ --fs-body: 15px; /* corps, 400 — 14px (brief) jugé trop petit à l'usage, 01/09 */ --fs-label: 12px; /* libellé, 500, casse normale */ --fs-small: 12px; /* ---- Formes et espacements ---- */ --radius: 4px; /* uniforme et discret, pas de pilules */ --radius-btn: 4px; --ombre: 0 1px 2px rgba(62, 32, 32, 0.06); /* très légère, teintée brun */ --ombre-forte: 0 2px 6px rgba(62, 32, 32, 0.10); --barre: 3px solid var(--brun-signature); /* signature : barre verticale */ --esp-1: 8px; --esp-2: 16px; --esp-3: 24px; --esp-4: 32px; --esp-6: 48px; /* ---- Densité (valeurs admin par défaut ; l'espace client les surcharge) ---- */ --card-padding: 20px; --section-gap: 24px; --fs-page-effective: var(--fs-page); /* ---- Rétro-compatibilité : anciennes variables des feuilles existantes ---- */ --acca-red: var(--brun-signature); --acca-red-hover: var(--brun-hover); --acca-red-dark: var(--brun-profond); --acca-red-darker: var(--brun-profond); --acca-red-light: var(--brun-clair); --acca-red-soft: var(--brun-clair); --acca-primary: var(--brun-signature); --acca-primary-hover: var(--brun-hover); --acca-primary-dark: var(--brun-profond); --acca-primary-darker: var(--brun-profond); --acca-primary-light: var(--brun-clair); --acca-primary-soft: var(--brun-clair); --acca-primary-subtle: var(--brun-8); --acca-gray: var(--gris-texte); --acca-secondary: var(--gris-texte); --acca-gray-light: var(--bordure); --acca-gray-dark: var(--taupe); --acca-light-gray: var(--fond-page); --acca-light: var(--fond-page); --acca-dark-gray: var(--encre); --acca-black: var(--encre); --acca-black-soft: var(--taupe); --acca-white: var(--fond); --acca-green: var(--succes); --acca-green-hover: var(--succes-texte); --acca-green-dark: var(--succes-texte); --acca-green-light: var(--succes); --acca-success: var(--succes); --acca-warning: var(--alerte-texte); --acca-danger: var(--danger); --acca-info: var(--taupe); --acca-border: var(--bordure); --acca-shadow: var(--ombre); --acca-shadow-lg: var(--ombre-forte); --acca-radius-sm: var(--radius); --acca-radius: var(--radius); --acca-radius-lg: var(--radius); /* ---- Bootstrap 5.3 : recâblage des variables globales ---- */ --bs-primary: var(--brun-signature); --bs-primary-rgb: 90, 46, 46; --bs-secondary: var(--taupe); --bs-secondary-rgb: 107, 91, 84; --bs-success: var(--succes); --bs-success-rgb: 74, 107, 79; --bs-info: var(--brun-clair); /* plus de bleu : l'info devient brun clair */ --bs-info-rgb: 138, 106, 98; --bs-warning: var(--alerte); --bs-warning-rgb: 168, 118, 44; --bs-danger: var(--danger); --bs-danger-rgb: 155, 61, 52; --bs-light: var(--fond-page); --bs-light-rgb: 247, 245, 243; --bs-dark: var(--brun-profond); --bs-dark-rgb: 62, 32, 32; --bs-primary-text-emphasis: var(--brun-profond); --bs-secondary-text-emphasis: var(--taupe); --bs-success-text-emphasis: var(--succes-texte); --bs-info-text-emphasis: var(--brun-profond); --bs-warning-text-emphasis: var(--alerte-texte); --bs-danger-text-emphasis: var(--danger-texte); --bs-light-text-emphasis: var(--taupe); --bs-dark-text-emphasis: var(--encre); --bs-primary-bg-subtle: var(--brun-8); --bs-secondary-bg-subtle: var(--neutre-fond); --bs-success-bg-subtle: var(--succes-fond); --bs-info-bg-subtle: var(--fond-doux); --bs-warning-bg-subtle: var(--alerte-fond); --bs-danger-bg-subtle: var(--danger-fond); --bs-light-bg-subtle: var(--fond); --bs-dark-bg-subtle: var(--bordure); --bs-primary-border-subtle: var(--brun-20); --bs-secondary-border-subtle: var(--bordure); --bs-success-border-subtle: #C9D8CB; --bs-info-border-subtle: var(--bordure); --bs-warning-border-subtle: #E6D3B0; --bs-danger-border-subtle: #E0C2BE; --bs-light-border-subtle: var(--bordure); --bs-dark-border-subtle: var(--taupe); --bs-body-font-family: var(--font-texte); --bs-body-font-size: var(--fs-body); --bs-body-line-height: 1.5; --bs-body-color: var(--encre); --bs-body-color-rgb: 47, 43, 41; /* NB : Bootstrap 5.3 fait dépendre cartes, modales, tableaux et champs de --bs-body-bg ; on le laisse BLANC et le fond de page beige est posé directement sur dans acca-theme.css. */ --bs-body-bg: var(--fond); --bs-body-bg-rgb: 255, 255, 255; --bs-emphasis-color: var(--encre); --bs-secondary-color: var(--taupe); --bs-secondary-color-rgb: 107, 91, 84; --bs-secondary-bg: var(--fond-doux); --bs-secondary-bg-rgb: 241, 236, 233; --bs-tertiary-color: var(--gris-texte); --bs-tertiary-color-rgb: 110, 103, 99; --bs-tertiary-bg: var(--fond-page); --bs-tertiary-bg-rgb: 247, 245, 243; --bs-heading-color: inherit; /* les titres héritent : blanc sur bandeau sombre, encre ailleurs */ --bs-link-color: var(--brun-signature); --bs-link-color-rgb: 90, 46, 46; --bs-link-hover-color: var(--brun-hover); --bs-link-hover-color-rgb: 74, 37, 37; --bs-code-color: var(--brun-signature); --bs-highlight-bg: var(--alerte-fond); --bs-border-color: var(--bordure); --bs-border-color-translucent: rgba(62, 32, 32, 0.10); --bs-border-radius: var(--radius); --bs-border-radius-sm: var(--radius); --bs-border-radius-lg: var(--radius); --bs-border-radius-xl: var(--radius); --bs-border-radius-xxl: var(--radius); --bs-border-radius-2xl: var(--radius); --bs-border-radius-pill: var(--radius); /* plus de pilules */ --bs-box-shadow: var(--ombre); --bs-box-shadow-sm: var(--ombre); --bs-box-shadow-lg: var(--ombre-forte); --bs-focus-ring-color: rgba(90, 46, 46, 0.25); --bs-form-valid-color: var(--succes); --bs-form-valid-border-color: var(--succes); --bs-form-invalid-color: var(--danger); --bs-form-invalid-border-color: var(--danger); }