/* ========================================
   CSS Dynamique - Branding
   Généré dynamiquement avec support preview
   ======================================== */

/* Variables CSS racine */
:root {
    /* Couleurs principales */
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --accent-color: #28a745;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    
    /* Typographie */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-size-base: 16px;
    --line-height: 1.6;
    --letter-spacing: normal;
    --paragraph-spacing: 1.5rem;
    
    /* Tailles des titres */
    --h1-size: 2.5rem;
    --h2-size: 2rem;
    --h3-size: 1.75rem;
    --h4-size: 1.5rem;
    
    /* Poids des polices */
    --heading-weight: 700;
    --body-weight: 400;
    --heading-transform: none;
    
    /* Navbar */
    --navbar-height: 65px;
    --navbar-bg: #343a40;
    --navbar-text: #ffffff;
    --navbar-brand-color: #ffffff;
    --navbar-link-color: #ffffff;
    --navbar-link-hover-color: #007bff;
    --navbar-active-color: #007bff;
    
    /* Footer */
    --footer-bg: #343a40;
    --footer-text: #ffffff;
    --footer-heading-color: #ffffff;
    --footer-link-color: #ffffff;
    --footer-link-hover-color: #894343;
    
    /* Cards */
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --card-hover-shadow: 0 4px 8px rgba(0,0,0,0.15);
    
    /* Boutons */
    --button-border-radius: 0.25rem;
    --button-padding: 0.375rem 0.75rem;
    
    /* Submenu */
    --submenu-bg: #f8f9fa;
    --submenu-text: #495057;
    --submenu-hover-bg: #e9ecef;
    --submenu-active-bg: #dee2e6;
    
    /* Login */
    --login-bg: #f8f9fa;
    --login-card-bg: #ffffff;
    --login-button-bg: #007bff;
    --login-button-hover-bg: #0056b3;
    
    /* Sections */
    --content-bg: #3a6f8f;
    --content-text: #ffffff;
    --sidebar-left-bg: #035b51;
    --sidebar-right-bg: #c05827;
}

/* Application de la typographie */
body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--body-weight);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    color: var(--content-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    text-transform: var(--heading-transform);
    line-height: 1.2;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

p {
    margin-bottom: var(--paragraph-spacing);
}

/* Couleurs des boutons */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: var(--button-border-radius);
    padding: var(--button-padding);
}

.btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    border-radius: var(--button-border-radius);
    padding: var(--button-padding);
}

.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

.btn-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
}

/* Navbar */
.navbar {
    background-color: var(--navbar-bg) !important;
    min-height: var(--navbar-height);
    height: var(--navbar-height);
}

.navbar-brand {
    color: var(--navbar-brand-color) !important;
}

.navbar .nav-link {
    color: var(--navbar-link-color) !important;
}

.navbar .nav-link:hover {
    color: var(--navbar-link-hover-color) !important;
}

.navbar .nav-link.active {
    color: var(--navbar-active-color) !important;
}

/* Footer */
footer,
.footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text) !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
    color: var(--footer-heading-color) !important;
}

footer a,
.footer a {
    color: var(--footer-link-color) !important;
}

footer a:hover,
.footer a:hover {
    color: var(--footer-link-hover-color) !important;
}

/* Cards */
.card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--card-shadow);
}

.card:hover {
    box-shadow: var(--card-hover-shadow);
}

/* Submenu */
.submenu,
.sub-menu {
    background-color: var(--submenu-bg) !important;
}

.submenu a,
.sub-menu a {
    color: var(--submenu-text) !important;
}

.submenu a:hover,
.sub-menu a:hover {
    background-color: var(--submenu-hover-bg);
}

.submenu a.active,
.sub-menu a.active {
    background-color: var(--submenu-active-bg);
}

/* Login page */
.login-page {
    background-color: var(--login-bg);
}

.login-card {
    background-color: var(--login-card-bg);
}

.login-button {
    background-color: var(--login-button-bg);
}

.login-button:hover {
    background-color: var(--login-button-hover-bg);
}

/* Sections */
.content-main {
    background-color: var(--content-bg) !important;
    color: var(--content-text) !important;
}

.sidebar-left {
    background-color: var(--sidebar-left-bg) !important;
}

.sidebar-right {
    background-color: var(--sidebar-right-bg) !important;
}

/* Liens généraux */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-color);
    opacity: 0.8;
}

/* Alertes */
.alert-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.alert-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

.alert-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}

.alert-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: white;
}