/* * ACDC Branding - Action Citoyenne Démocratique * Identité visuelle pour la Tournée Souveraineté Populaire 2025-2026 * * Activer le thème : * * Palette principale: * - Bleu minuit (#0F1A2E) : Souveraineté, structure, puissance * - Bleu démocratique (#2243A2) : Confiance, clarté * - Blanc pur (#FFFFFF) : Transparence, vérité * - Or civique (#D4A526) : Valeur, souveraineté, fondations * - Rouge action (#C64141) : Courage, refus du statu quo * * Palette secondaire: * - Gris perle (#E5E5E5) – Neutralité et documentation * - Vert citoyen (#2EA673) – Espoir, vitalité, santé civique * * Choix UI : fond d'app neutre (--acdc-bg), surfaces blanches, bleu minuit pour titres/nav, or civique en accent, rouge action pour CTA fort. */ /* ======================================== ACDC TOKENS — Base stable et complète Activer avec: ======================================== */ html[data-brand="acdc"] { /* Brand core */ --acdc-bleu-minuit: #0F1A2E; --acdc-bleu-democratique: #2243A2; --acdc-blanc-pur: #FFFFFF; --acdc-or-civique: #D4A526; --acdc-rouge-action: #C64141; --acdc-gris-perle: #E5E5E5; --acdc-vert-citoyen: #2EA673; /* Variants (simples et utiles) */ --acdc-bleu-democratique-light: #2F57D6; --acdc-bleu-democratique-dark: #1B3481; --acdc-rouge-action-light: #D35A5A; --acdc-rouge-action-dark: #A53535; --acdc-or-civique-light: #E2BE55; --acdc-or-civique-dark: #B88C1D; --acdc-gris-perle-dark: #D0D0D0; /* Typography */ --acdc-font-paragraph: Inter, Lato, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --acdc-font-title: Montserrat, Oswald, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --acdc-font-official: Merriweather, Georgia, serif; /* Gradients */ --acdc-gradient-primary: linear-gradient( 135deg, var(--acdc-bleu-democratique) 0%, var(--acdc-bleu-minuit) 100% ); /* UI tokens (pro) */ --acdc-bg: #F3F5F8; /* fond d'app (neutre) */ --acdc-surface: #FFFFFF; /* carte / panneau */ --acdc-surface-2: #F8FAFC; /* surface alternative */ --acdc-text: var(--acdc-bleu-minuit); --acdc-text-muted: rgba(15, 26, 46, 0.72); --acdc-border: rgba(15, 26, 46, 0.12); --acdc-border-strong: rgba(15, 26, 46, 0.18); --acdc-radius-sm: 10px; --acdc-radius-md: 14px; --acdc-radius-lg: 18px; --acdc-shadow-sm: 0 6px 18px rgba(15, 26, 46, 0.08); --acdc-shadow-md: 0 10px 30px rgba(15, 26, 46, 0.12); --acdc-ring: 0 0 0 4px rgba(34, 67, 162, 0.14); /* Alias pour intégration avec variables existantes (Bootstrap, etc.) */ --primary-color: var(--acdc-bleu-democratique); --secondary-color: var(--acdc-or-civique); --success-color: var(--acdc-vert-citoyen); --error-color: var(--acdc-rouge-action); --warning-color: var(--acdc-or-civique); --info-color: var(--acdc-bleu-democratique); --danger-color: var(--acdc-rouge-action); --text-color: var(--acdc-text); --background-color: var(--acdc-bg); --surface-color: var(--acdc-surface); --surface-variant: var(--acdc-gris-perle); --border-color: var(--acdc-border-strong); --font-family: var(--acdc-font-paragraph); --heading-font: var(--acdc-font-title); } /* ======================================== ACDC BASE — application globale ======================================== */ html[data-brand="acdc"] body { font-family: var(--acdc-font-paragraph); color: var(--acdc-text); background: var(--acdc-bg); } /* Titres */ html[data-brand="acdc"] h1, html[data-brand="acdc"] h2, html[data-brand="acdc"] h3, html[data-brand="acdc"] h4, html[data-brand="acdc"] h5, html[data-brand="acdc"] h6, html[data-brand="acdc"] .uman-title, html[data-brand="acdc"] .uman-detail-title, html[data-brand="acdc"] .uman-section-title, html[data-brand="acdc"] .uman-card-title, html[data-brand="acdc"] .acdc-title { font-family: var(--acdc-font-title); font-weight: 800; letter-spacing: -0.02em; } /* Texte */ html[data-brand="acdc"] p, html[data-brand="acdc"] .uman-subtitle, html[data-brand="acdc"] .uman-detail-description, html[data-brand="acdc"] .uman-card-description, html[data-brand="acdc"] .acdc-body { font-family: var(--acdc-font-paragraph); font-weight: 400; } html[data-brand="acdc"] .uman-title, html[data-brand="acdc"] .uman-subtitle { color: #fff !important; } html[data-brand="acdc"] .uman-modal-title, html[data-brand="acdc"] .acdc-modal-title { color: #fff !important; } html[data-brand="acdc"] .acdc-muted { color: var(--acdc-text-muted); } /* Documents officiels */ html[data-brand="acdc"] .official-document, html[data-brand="acdc"] .constitution-document, html[data-brand="acdc"] .merriweather-text, html[data-brand="acdc"] .acdc-official { font-family: var(--acdc-font-official); font-weight: 400; color: var(--acdc-text); } /* ======================================== COMPOSANTS PRO — Boutons, cartes, inputs ======================================== */ /* Boutons ACDC */ html[data-brand="acdc"] .acdc-btn-primary { background: var(--acdc-gradient-primary); color: var(--acdc-blanc-pur); border: 1px solid rgba(255, 255, 255, 0.14); padding: 12px 18px; border-radius: var(--acdc-radius-sm); font-family: var(--acdc-font-title); font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; } html[data-brand="acdc"] .acdc-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--acdc-shadow-md); filter: brightness(1.03); } html[data-brand="acdc"] .acdc-btn-action { background: var(--acdc-rouge-action); color: var(--acdc-blanc-pur); border: 1px solid rgba(0, 0, 0, 0.08); padding: 12px 18px; border-radius: var(--acdc-radius-sm); font-family: var(--acdc-font-title); font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } html[data-brand="acdc"] .acdc-btn-action:hover { background: var(--acdc-rouge-action-light); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(198, 65, 65, 0.22); } /* Cartes ACDC */ html[data-brand="acdc"] .acdc-card { background: var(--acdc-surface); border: 1px solid var(--acdc-border); border-radius: var(--acdc-radius-lg); padding: 22px; box-shadow: var(--acdc-shadow-sm); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } html[data-brand="acdc"] .acdc-card:hover { border-color: rgba(34, 67, 162, 0.35); box-shadow: var(--acdc-shadow-md); transform: translateY(-1px); } /* Inputs ACDC */ html[data-brand="acdc"] input, html[data-brand="acdc"] textarea, html[data-brand="acdc"] select { background: var(--acdc-surface); border: 1px solid var(--acdc-border); border-radius: var(--acdc-radius-sm); padding: 10px 12px; color: var(--acdc-text); outline: none; transition: box-shadow 160ms ease, border-color 160ms ease; } html[data-brand="acdc"] input:focus, html[data-brand="acdc"] textarea:focus, html[data-brand="acdc"] select:focus { border-color: rgba(34, 67, 162, 0.6); box-shadow: var(--acdc-ring); } /* ======================================== CLASSES UTILITAIRES ACDC ======================================== */ html[data-brand="acdc"] .acdc-bg-bleu-minuit { background-color: var(--acdc-bleu-minuit); } html[data-brand="acdc"] .acdc-bg-bleu-democratique { background-color: var(--acdc-bleu-democratique); } html[data-brand="acdc"] .acdc-bg-or-civique { background-color: var(--acdc-or-civique); } html[data-brand="acdc"] .acdc-bg-rouge-action { background-color: var(--acdc-rouge-action); } html[data-brand="acdc"] .acdc-bg-vert-citoyen { background-color: var(--acdc-vert-citoyen); } html[data-brand="acdc"] .acdc-bg-gris-perle { background-color: var(--acdc-gris-perle); } html[data-brand="acdc"] .acdc-text-bleu-minuit { color: var(--acdc-bleu-minuit); } html[data-brand="acdc"] .acdc-text-bleu-democratique { color: var(--acdc-bleu-democratique); } html[data-brand="acdc"] .acdc-text-or-civique { color: var(--acdc-or-civique); } html[data-brand="acdc"] .acdc-text-rouge-action { color: var(--acdc-rouge-action); } html[data-brand="acdc"] .acdc-text-vert-citoyen { color: var(--acdc-vert-citoyen); } html[data-brand="acdc"] .acdc-text-blanc-pur { color: var(--acdc-blanc-pur); } /* Badges ACDC */ html[data-brand="acdc"] .acdc-badge-sovereignty { background: var(--acdc-bleu-minuit); color: var(--acdc-blanc-pur); padding: 4px 12px; border-radius: 12px; font-size: 0.875rem; font-weight: 600; } html[data-brand="acdc"] .acdc-badge-action { background: var(--acdc-rouge-action); color: var(--acdc-blanc-pur); padding: 4px 12px; border-radius: 12px; font-size: 0.875rem; font-weight: 600; } html[data-brand="acdc"] .acdc-badge-civic { background: var(--acdc-or-civique); color: var(--acdc-bleu-minuit); padding: 4px 12px; border-radius: 12px; font-size: 0.875rem; font-weight: 600; } /* Hero ACDC */ html[data-brand="acdc"] .acdc-hero { background: var(--acdc-gradient-primary); color: var(--acdc-blanc-pur); padding: 60px 24px; text-align: center; } html[data-brand="acdc"] .acdc-hero-title { font-family: var(--acdc-font-title); font-size: 3.5rem; font-weight: 800; color: var(--acdc-blanc-pur); margin: 0 0 16px 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } html[data-brand="acdc"] .acdc-hero-subtitle { font-family: var(--acdc-font-paragraph); font-size: 1.25rem; color: rgba(255, 255, 255, 0.9); margin: 0; max-width: 800px; margin-left: auto; margin-right: auto; } /* Formule clé ACDC */ html[data-brand="acdc"] .acdc-formula { font-family: var(--acdc-font-official); font-size: 1.125rem; font-weight: 700; color: var(--acdc-bleu-minuit); font-style: italic; text-align: center; padding: 24px; background: var(--acdc-surface-2); border-left: 4px solid var(--acdc-or-civique); border-radius: var(--acdc-radius-sm); margin: 24px 0; } /* ======================================== BOOTSTRAP / COMPOSANTS COMMUNS Surcharges ciblées sous data-brand (sans !important) ======================================== */ html[data-brand="acdc"] .btn-primary, html[data-brand="acdc"] button.btn-primary, html[data-brand="acdc"] input[type="submit"].btn-primary { background: var(--acdc-gradient-primary); border-color: transparent; font-family: var(--acdc-font-title); font-weight: 700; } html[data-brand="acdc"] .btn-primary:hover { background: linear-gradient(135deg, var(--acdc-bleu-democratique-light) 0%, var(--acdc-bleu-democratique) 100%); box-shadow: var(--acdc-shadow-md); } html[data-brand="acdc"] .btn-secondary { background: var(--acdc-surface); color: var(--acdc-bleu-democratique); border-color: rgba(34, 67, 162, 0.5); } html[data-brand="acdc"] .btn-secondary:hover { background: var(--acdc-surface-2); color: var(--acdc-bleu-minuit); } html[data-brand="acdc"] .btn-success { background: var(--acdc-vert-citoyen); color: var(--acdc-blanc-pur); } html[data-brand="acdc"] .btn-danger, html[data-brand="acdc"] .btn-error { background: var(--acdc-rouge-action); color: var(--acdc-blanc-pur); } html[data-brand="acdc"] .btn-warning { background: var(--acdc-or-civique); color: var(--acdc-bleu-minuit); } html[data-brand="acdc"] .card, html[data-brand="acdc"] .modern-card, html[data-brand="acdc"] .stat-card { background: var(--acdc-surface); border-color: var(--acdc-border); } html[data-brand="acdc"] .card:hover, html[data-brand="acdc"] .modern-card:hover { border-color: rgba(34, 67, 162, 0.35); box-shadow: var(--acdc-shadow-md); } html[data-brand="acdc"] a { color: var(--acdc-bleu-democratique); } html[data-brand="acdc"] a:hover { color: var(--acdc-bleu-minuit); } html[data-brand="acdc"] .badge, html[data-brand="acdc"] .status-badge { font-family: var(--acdc-font-paragraph); } html[data-brand="acdc"] .badge-primary, html[data-brand="acdc"] .status-active { background: var(--acdc-bleu-democratique); color: var(--acdc-blanc-pur); } html[data-brand="acdc"] .badge-success { background: var(--acdc-vert-citoyen); color: var(--acdc-blanc-pur); } html[data-brand="acdc"] .badge-danger, html[data-brand="acdc"] .badge-error { background: var(--acdc-rouge-action); color: var(--acdc-blanc-pur); } html[data-brand="acdc"] .badge-warning { background: var(--acdc-or-civique); color: var(--acdc-bleu-minuit); } html[data-brand="acdc"] .hero-section, html[data-brand="acdc"] .hero-content { background: var(--acdc-gradient-primary); color: var(--acdc-blanc-pur); } html[data-brand="acdc"] .nav-link.is-active, html[data-brand="acdc"] .nav-link.active { color: var(--acdc-bleu-democratique); } html[data-brand="acdc"] .nav-link:hover { color: var(--acdc-bleu-democratique); } /* Toasts */ html[data-brand="acdc"] .toast.success { border-left-color: var(--acdc-vert-citoyen); background: linear-gradient(135deg, rgba(46, 166, 115, 0.1) 0%, var(--acdc-surface) 100%); } html[data-brand="acdc"] .toast.error { border-left-color: var(--acdc-rouge-action); background: linear-gradient(135deg, rgba(198, 65, 65, 0.1) 0%, var(--acdc-surface) 100%); } html[data-brand="acdc"] .toast.warning { border-left-color: var(--acdc-or-civique); background: linear-gradient(135deg, rgba(212, 165, 38, 0.1) 0%, var(--acdc-surface) 100%); } html[data-brand="acdc"] .toast.info { border-left-color: var(--acdc-bleu-democratique); background: linear-gradient(135deg, rgba(34, 67, 162, 0.1) 0%, var(--acdc-surface) 100%); } html[data-brand="acdc"] .toast.success .toast-icon { background: var(--acdc-vert-citoyen); } html[data-brand="acdc"] .toast.error .toast-icon { background: var(--acdc-rouge-action); } html[data-brand="acdc"] .toast.warning .toast-icon { background: var(--acdc-or-civique); } html[data-brand="acdc"] .toast.info .toast-icon { background: var(--acdc-bleu-democratique); } /* ======================================== RESPONSIVE ======================================== */ @media (max-width: 768px) { html[data-brand="acdc"] .acdc-hero-title { font-size: 2.5rem; } html[data-brand="acdc"] .acdc-hero-subtitle { font-size: 1.125rem; } }