/* ==========================================================================
   Civilo Design System - Pure CSS (Zero Build)
   Charge APRES Bootstrap 5.3 CDN pour override via cascade
   ========================================================================== */

/* Google Fonts - Bricolage Grotesque (display) + DM Sans (body) */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ==========================================================================
   1. CSS Variables - Theme Soleil (defaut)
   ========================================================================== */

:root {
    /* Theme-aware palette (Soleil = defaut) */
    --civilo-primary: #f59e0b;
    --civilo-primary-rgb: 245, 158, 11;
    --civilo-primary-hover: #d97706;
    --civilo-primary-active: #b45309;
    --civilo-secondary: #fbbf24;
    --civilo-secondary-rgb: 251, 191, 36;
    --civilo-secondary-hover: #f59e0b;
    --civilo-secondary-active: #d97706;
    --civilo-header-dark: #78350f;
    --civilo-background: #f9fafb;
    --civilo-gradient-primary: linear-gradient(135deg, #f59e0b, #fbbf24);

    /* Fixed colors (identiques sur tous les themes) */
    --civilo-success: #0ab39c;
    --civilo-danger: #f06548;
    --civilo-warning: #f7b84b;
    --civilo-info: #299cdb;
    --civilo-event: #405189;
    --civilo-event-light: #3577f1;
    --civilo-volunteering: #0ab39c;
    --civilo-volunteering-light: #02a8b5;
    --civilo-gradient-event: linear-gradient(135deg, #405189, #3577f1);
    --civilo-gradient-volunteering: linear-gradient(135deg, #0ab39c, #02a8b5);
    --civilo-gradient-info: linear-gradient(135deg, #3577f1, #299cdb);

    /* Layout */
    --civilo-navbar-bg: #fff;
    --civilo-navbar-shadow: 0 2px 4px rgba(0,0,0,0.08);
    --civilo-text-muted: #878a99;
    --civilo-text-light: #adb5bd;
    --civilo-border: #e9ebec;
    --civilo-border-light: #f3f6f9;

    /* Shadows */
    --civilo-shadow-sm: 0 1px 2px rgba(56, 65, 74, 0.15);
    --civilo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --civilo-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    --civilo-shadow-event: 0 0.5rem 1rem rgba(64, 81, 137, 0.3);
    --civilo-shadow-volunteering: 0 0.5rem 1rem rgba(10, 179, 156, 0.3);

    /* Overlays */
    --civilo-overlay-dark: rgba(0, 0, 0, 0.5);
    --civilo-overlay-light: rgba(255, 255, 255, 0.9);
    --civilo-overlay-event: rgba(64, 81, 137, 0.1);
    --civilo-overlay-volunteering: rgba(10, 179, 156, 0.1);

    /* Bootstrap theme overrides */
    --bs-primary: #f59e0b;
    --bs-primary-rgb: 245, 158, 11;
    --bs-secondary: #fbbf24;
    --bs-secondary-rgb: 251, 191, 36;
    --bs-success: #0ab39c;
    --bs-success-rgb: 10, 179, 156;
    --bs-danger: #f06548;
    --bs-danger-rgb: 240, 101, 72;
    --bs-warning: #f7b84b;
    --bs-warning-rgb: 247, 184, 75;
    --bs-info: #299cdb;
    --bs-info-rgb: 41, 156, 219;
    --bs-light: #f3f6f9;
    --bs-light-rgb: 243, 246, 249;
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;
    --bs-body-font-family: 'DM Sans', sans-serif;
    --civilo-font-display: 'Bricolage Grotesque', sans-serif;
    --bs-body-color: #495057;
    --bs-body-bg: #f9fafb;
    --bs-link-color: #d97706;
    --bs-link-hover-color: #b45309;
    --bs-primary-bg-subtle: #fef3c7;
    --bs-primary-text-emphasis: #92400e;
    --bs-primary-border-subtle: #fcd34d;
    --bs-secondary-bg-subtle: #fef9c3;
    --bs-secondary-text-emphasis: #854d0e;
    --bs-secondary-border-subtle: #fde047;
    --bs-success-bg-subtle: #cef0eb;
    --bs-success-text-emphasis: #04483e;
    --bs-success-border-subtle: #9de1d5;
    --bs-danger-bg-subtle: #fcddd6;
    --bs-danger-text-emphasis: #60291d;
    --bs-danger-border-subtle: #f9bbae;
    --bs-warning-bg-subtle: #fdf0d9;
    --bs-warning-text-emphasis: #634a1e;
    --bs-warning-border-subtle: #fbe2b3;
    --bs-info-bg-subtle: #d5ecf8;
    --bs-info-text-emphasis: #113e58;
    --bs-info-border-subtle: #aad9f1;

    /* Design system love-app */
    --civilo-radius-input: 10px;
    --civilo-radius-card: 16px;
    --civilo-radius-modal: 24px;
    --civilo-radius-pill: 50px;
    --civilo-shadow-primary-sm: 0 2px 8px rgba(var(--civilo-primary-rgb), 0.15);
    --civilo-shadow-primary-md: 0 4px 16px rgba(var(--civilo-primary-rgb), 0.2);
    --civilo-shadow-primary-lg: 0 8px 30px rgba(var(--civilo-primary-rgb), 0.25);
    --civilo-navbar-blur: blur(20px);
    --civilo-navbar-opacity: 0.85;
    --civilo-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --civilo-transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --civilo-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --bs-body-bg-rgb: 249, 250, 251;
}

/* ==========================================================================
   2. Theme Marine (Pro - Navy)
   ========================================================================== */

[data-theme="marine"] {
    --civilo-primary: #1e40af;
    --civilo-primary-rgb: 30, 64, 175;
    --civilo-primary-hover: #1e3a8a;
    --civilo-primary-active: #172554;
    --civilo-secondary: #3b82f6;
    --civilo-secondary-rgb: 59, 130, 246;
    --civilo-secondary-hover: #2563eb;
    --civilo-secondary-active: #1d4ed8;
    --civilo-header-dark: #172554;
    --civilo-background: #f9fafb;
    --civilo-gradient-primary: linear-gradient(135deg, #1e40af, #3b82f6);
    --bs-primary: #1e40af;
    --bs-primary-rgb: 30, 64, 175;
    --bs-secondary: #3b82f6;
    --bs-secondary-rgb: 59, 130, 246;
    --bs-body-bg: #f9fafb;
    --bs-link-color: #1e40af;
    --bs-link-hover-color: #172554;
    --bs-primary-bg-subtle: #dbeafe;
    --bs-primary-text-emphasis: #172554;
    --bs-primary-border-subtle: #93c5fd;
    --bs-secondary-bg-subtle: #dbeafe;
    --bs-secondary-text-emphasis: #1e40af;
    --bs-secondary-border-subtle: #93c5fd;
}

/* ==========================================================================
   4. Dark Mode (via data-bs-theme="dark" de Bootstrap 5.3)
   ========================================================================== */

[data-bs-theme="dark"] {
    --civilo-navbar-bg: #1e1e1e;
    --civilo-navbar-shadow: 0 2px 4px rgba(0,0,0,0.4);
    --civilo-text-muted: #a1a1aa;
    --civilo-border: #3f3f46;
    --civilo-border-light: #27272a;
    --civilo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --civilo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --civilo-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4);
    --bs-body-bg: #18181b;
    --bs-body-color: #e4e4e7;
    --bs-card-bg: #27272a;
    --bs-border-color: #3f3f46;
    --civilo-navbar-opacity: 0.8;
    --civilo-shadow-primary-sm: 0 2px 8px rgba(var(--civilo-primary-rgb), 0.3);
    --civilo-shadow-primary-md: 0 4px 16px rgba(var(--civilo-primary-rgb), 0.35);
    --civilo-shadow-primary-lg: 0 8px 30px rgba(var(--civilo-primary-rgb), 0.4);
    --bs-body-bg-rgb: 24, 24, 27;
}

[data-theme="soleil"][data-bs-theme="dark"] {
    --civilo-primary: #fbbf24;
    --civilo-primary-rgb: 251, 191, 36;
    --civilo-primary-hover: #f59e0b;
    --civilo-primary-active: #d97706;
    --civilo-secondary: #fcd34d;
    --civilo-secondary-rgb: 252, 211, 77;
    --civilo-secondary-hover: #fbbf24;
    --civilo-secondary-active: #f59e0b;
    --civilo-header-dark: #451a03;
    --civilo-background: #18181b;
    --civilo-gradient-primary: linear-gradient(135deg, #fbbf24, #fcd34d);
    --bs-primary: #fbbf24;
    --bs-primary-rgb: 251, 191, 36;
    --bs-secondary: #fcd34d;
    --bs-secondary-rgb: 252, 211, 77;
    --bs-link-color: #fbbf24;
    --bs-link-hover-color: #fcd34d;
}

[data-theme="marine"][data-bs-theme="dark"] {
    --civilo-primary: #60a5fa;
    --civilo-primary-rgb: 96, 165, 250;
    --civilo-primary-hover: #3b82f6;
    --civilo-primary-active: #2563eb;
    --civilo-secondary: #93c5fd;
    --civilo-secondary-rgb: 147, 197, 253;
    --civilo-secondary-hover: #60a5fa;
    --civilo-secondary-active: #3b82f6;
    --civilo-header-dark: #0c1a3a;
    --civilo-background: #18181b;
    --civilo-gradient-primary: linear-gradient(135deg, #60a5fa, #93c5fd);
    --bs-primary: #60a5fa;
    --bs-primary-rgb: 96, 165, 250;
    --bs-secondary: #93c5fd;
    --bs-secondary-rgb: 147, 197, 253;
    --bs-link-color: #60a5fa;
    --bs-link-hover-color: #93c5fd;
}

/* ==========================================================================
   5. Bootstrap Component Color Overrides (var() pour suivre le theme)
   ========================================================================== */

.btn-primary { --bs-btn-bg: var(--civilo-primary); --bs-btn-border-color: var(--civilo-primary); --bs-btn-hover-bg: var(--civilo-primary-hover); --bs-btn-hover-border-color: var(--civilo-primary-hover); --bs-btn-active-bg: var(--civilo-primary-active); --bs-btn-active-border-color: var(--civilo-primary-active); --bs-btn-disabled-bg: var(--civilo-primary); --bs-btn-disabled-border-color: var(--civilo-primary); }
.btn-secondary { --bs-btn-bg: var(--civilo-secondary); --bs-btn-border-color: var(--civilo-secondary); --bs-btn-hover-bg: var(--civilo-secondary-hover); --bs-btn-hover-border-color: var(--civilo-secondary-hover); --bs-btn-active-bg: var(--civilo-secondary-active); --bs-btn-active-border-color: var(--civilo-secondary-active); --bs-btn-disabled-bg: var(--civilo-secondary); --bs-btn-disabled-border-color: var(--civilo-secondary); }
.btn-success { --bs-btn-bg: #0ab39c; --bs-btn-border-color: #0ab39c; --bs-btn-hover-bg: #098f7d; --bs-btn-hover-border-color: #088575; --bs-btn-active-bg: #088575; --bs-btn-active-border-color: #087a6c; --bs-btn-disabled-bg: #0ab39c; --bs-btn-disabled-border-color: #0ab39c; }
.btn-danger { --bs-btn-bg: #f06548; --bs-btn-border-color: #f06548; --bs-btn-hover-bg: #d9553b; --bs-btn-hover-border-color: #cc4e36; --bs-btn-active-bg: #cc4e36; --bs-btn-active-border-color: #bf4832; --bs-btn-disabled-bg: #f06548; --bs-btn-disabled-border-color: #f06548; }
.btn-warning { --bs-btn-bg: #f7b84b; --bs-btn-border-color: #f7b84b; --bs-btn-hover-bg: #dea443; --bs-btn-hover-border-color: #d19b3f; --bs-btn-active-bg: #d19b3f; --bs-btn-active-border-color: #c4923b; --bs-btn-disabled-bg: #f7b84b; --bs-btn-disabled-border-color: #f7b84b; }
.btn-info { --bs-btn-bg: #299cdb; --bs-btn-border-color: #299cdb; --bs-btn-hover-bg: #2388c2; --bs-btn-hover-border-color: #207fb6; --bs-btn-active-bg: #207fb6; --bs-btn-active-border-color: #1e76aa; --bs-btn-disabled-bg: #299cdb; --bs-btn-disabled-border-color: #299cdb; }

.btn-outline-primary { --bs-btn-color: var(--civilo-primary); --bs-btn-border-color: var(--civilo-primary); --bs-btn-hover-bg: var(--civilo-primary); --bs-btn-hover-border-color: var(--civilo-primary); --bs-btn-active-bg: var(--civilo-primary); --bs-btn-active-border-color: var(--civilo-primary); }
.btn-outline-secondary { --bs-btn-color: var(--civilo-secondary); --bs-btn-border-color: var(--civilo-secondary); --bs-btn-hover-bg: var(--civilo-secondary); --bs-btn-hover-border-color: var(--civilo-secondary); --bs-btn-active-bg: var(--civilo-secondary); --bs-btn-active-border-color: var(--civilo-secondary); }
.btn-outline-success { --bs-btn-color: #0ab39c; --bs-btn-border-color: #0ab39c; --bs-btn-hover-bg: #0ab39c; --bs-btn-hover-border-color: #0ab39c; --bs-btn-active-bg: #0ab39c; --bs-btn-active-border-color: #0ab39c; }
.btn-outline-danger { --bs-btn-color: #f06548; --bs-btn-border-color: #f06548; --bs-btn-hover-bg: #f06548; --bs-btn-hover-border-color: #f06548; --bs-btn-active-bg: #f06548; --bs-btn-active-border-color: #f06548; }
.btn-outline-warning { --bs-btn-color: #f7b84b; --bs-btn-border-color: #f7b84b; --bs-btn-hover-bg: #f7b84b; --bs-btn-hover-border-color: #f7b84b; --bs-btn-active-bg: #f7b84b; --bs-btn-active-border-color: #f7b84b; }
.btn-outline-info { --bs-btn-color: #299cdb; --bs-btn-border-color: #299cdb; --bs-btn-hover-bg: #299cdb; --bs-btn-hover-border-color: #299cdb; --bs-btn-active-bg: #299cdb; --bs-btn-active-border-color: #299cdb; }

.text-primary { color: var(--civilo-primary) !important; }
.text-secondary { color: var(--civilo-secondary) !important; }
.text-success { color: #0ab39c !important; }
.text-danger { color: #f06548 !important; }
.text-warning { color: #f7b84b !important; }
.text-info { color: #299cdb !important; }

.bg-primary { background-color: var(--civilo-primary) !important; }
.bg-secondary { background-color: var(--civilo-secondary) !important; }
.bg-success { background-color: #0ab39c !important; }
.bg-danger { background-color: #f06548 !important; }
.bg-warning { background-color: #f7b84b !important; }
.bg-info { background-color: #299cdb !important; }

.border-primary { border-color: var(--civilo-primary) !important; }
.border-secondary { border-color: var(--civilo-secondary) !important; }
.border-success { border-color: #0ab39c !important; }
.border-danger { border-color: #f06548 !important; }
.border-warning { border-color: #f7b84b !important; }

.alert-success { --bs-alert-color: #04483e; --bs-alert-bg: #cef0eb; --bs-alert-border-color: #9de1d5; --bs-alert-link-color: #04483e; }
.alert-danger { --bs-alert-color: #60291d; --bs-alert-bg: #fcddd6; --bs-alert-border-color: #f9bbae; --bs-alert-link-color: #60291d; }
.alert-warning { --bs-alert-color: #634a1e; --bs-alert-bg: #fdf0d9; --bs-alert-border-color: #fbe2b3; --bs-alert-link-color: #634a1e; }
.alert-info { --bs-alert-color: #113e58; --bs-alert-bg: #d5ecf8; --bs-alert-border-color: #aad9f1; --bs-alert-link-color: #113e58; }

.form-control:focus, .form-select:focus { border-color: var(--civilo-primary); box-shadow: 0 0 0 0.25rem rgba(var(--civilo-primary-rgb), 0.15); outline: 0; }
.form-check-input:checked { background-color: var(--civilo-primary); border-color: var(--civilo-primary); }
.form-check-input:focus { border-color: var(--civilo-primary); box-shadow: 0 0 0 0.25rem rgba(var(--civilo-primary-rgb), 0.25); }

.page-link { color: var(--civilo-primary); }
.page-link:hover { color: var(--civilo-primary-hover); }
.page-item.active .page-link { background-color: var(--civilo-primary); border-color: var(--civilo-primary); }

/* ==========================================================================
   6. Typography - Bricolage Grotesque (display) + DM Sans (body)
   ========================================================================== */

body {
    font-family: 'DM Sans', sans-serif !important;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--civilo-font-display) !important;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--civilo-font-display) !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.section-title,
.hero h1,
.page-header h1,
.modal-title,
.card-title {
    font-family: var(--civilo-font-display) !important;
}

.btn,
.nav-link,
.dropdown-item,
.badge {
    font-family: 'DM Sans', sans-serif !important;
}

.form-control,
.form-select,
.card-body,
.table,
input,
textarea,
select {
    font-family: inherit !important;
}

/* ==========================================================================
   7. Civilo Logo
   ========================================================================== */

.civilo-logo {
    height: 70px;
    width: auto;
    display: block;
}

.auth-logo-wrapper {
    display: inline-block;
}

.navbar-logo .civilo-logo {
    height: 55px;
    transition: height var(--civilo-transition-base);
}

.footer-logo .civilo-logo {
    height: 50px;
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   8. Auth Pages
   ========================================================================== */

.auth-header {
    background: var(--civilo-gradient-primary);
}

.auth-content {
    background: var(--civilo-background);
}

.auth-footer {
    background: var(--civilo-background);
}

.form-check.card {
    cursor: pointer;
    transition: border-color 0.2s;
}

.form-check.card:has(input:checked) {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.form-check.card .form-check-input {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ==========================================================================
   9. Welcome Page (Hero)
   ========================================================================== */

.hero {
    background: var(--civilo-gradient-primary);
    color: white;
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,154.7C384,149,480,107,576,90.7C672,75,768,85,864,112C960,139,1056,181,1152,181.3C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: bottom;
}

.hero-subtitle {
    max-width: 700px;
    margin: 0 auto;
}

.hero-cards {
    margin-top: -40px;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   10. Public Pages (Header + Content)
   ========================================================================== */

.page-header {
    background: var(--civilo-gradient-primary);
    color: white;
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,154.7C384,149,480,107,576,90.7C672,75,768,85,864,112C960,139,1056,181,1152,181.3C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: bottom;
}

.page-content {
    padding: 60px 0;
}

.public-navbar {
    background: rgba(var(--bs-body-bg-rgb), var(--civilo-navbar-opacity)) !important;
    backdrop-filter: var(--civilo-navbar-blur);
    -webkit-backdrop-filter: var(--civilo-navbar-blur);
    box-shadow: var(--civilo-navbar-shadow);
    padding: 1rem 0;
    transition: all var(--civilo-transition-base);
}

@supports not (backdrop-filter: blur(20px)) {
    .public-navbar {
        background: var(--civilo-navbar-bg) !important;
    }
}

.public-navbar .navbar-logo {
    display: inline-block;
}

/* ==========================================================================
   11. Section Components
   ========================================================================== */

.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--civilo-gradient-primary);
    border-radius: 2px;
}

.feature-icon {
    width: 64px;
    height: 64px;
    background: var(--civilo-gradient-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    margin-bottom: 1.5rem;
}

.cta-section {
    background: var(--civilo-background);
    padding: 80px 0;
    margin-top: 80px;
}

.cta-subtitle {
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================================================
   12. Cards
   ========================================================================== */

/* ==========================================================================
   13. Dashboard
   ========================================================================== */

.dashboard-stat-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 0 !important;
}

.dashboard-stat-card:hover {
    transform: translateY(-2px);
}

.dashboard-stat-card.stat-events {
    background: var(--civilo-gradient-event);
}

.dashboard-stat-card.stat-volunteering {
    background: var(--civilo-gradient-volunteering);
}

.dashboard-stat-card.stat-info {
    background: var(--civilo-gradient-info);
}

.dashboard-stat-number {
    font-size: 3rem;
}

.dashboard-stat-icon {
    font-size: 3rem;
}

.dashboard-stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.dashboard-stat-divider {
    height: 60px;
    width: 1px;
    background: currentColor;
}

.dashboard-select-radius {
    width: auto;
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.social-link-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   15. Unread Messages Badge
   ========================================================================== */

#unread-messages-badge {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    font-size: 0.65rem !important;
    padding: 0.25em 0.5em !important;
    margin-left: 0.5rem !important;
    vertical-align: middle !important;
    animation: badgePulse 2s ease-in-out infinite;
}

#unread-messages-badge[style*="display:none"],
#unread-messages-badge[style*="display: none"] {
    animation: none;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 101, 72, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(240, 101, 72, 0); }
}

/* ==========================================================================
   16. Flash Messages
   ========================================================================== */

.flash-message {
    border-radius: var(--civilo-radius-card);
    border: none;
    box-shadow: var(--civilo-shadow-md);
    animation: slideInFromTop var(--civilo-transition-smooth) ease-out;
}

@keyframes slideInFromTop {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   17. Layout Overrides
   ========================================================================== */

.page-content {
    padding: 24px 0;
    min-height: calc(100vh - 200px);
}

.public-navbar {
    z-index: 1030;
}

.public-navbar .dropdown-menu {
    max-height: 80vh;
    overflow-y: auto;
}

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

@media (max-width: 991.98px) {
    .public-navbar .navbar-collapse {
        padding: 1rem 0;
    }
    .public-navbar .navbar-nav .nav-item {
        padding: 0.25rem 0;
    }
}

/* ==========================================================================
   19. Avatar System
   ========================================================================== */

.avatar-xxs { height: 1.5rem; width: 1.5rem; position: relative; display: inline-block; }
.avatar-xs { height: 2rem; width: 2rem; position: relative; display: inline-block; }
.avatar-sm { height: 2.5rem; width: 2.5rem; position: relative; display: inline-block; }
.avatar-md { height: 3.5rem; width: 3.5rem; position: relative; display: inline-block; }
.avatar-lg { height: 4.5rem; width: 4.5rem; position: relative; display: inline-block; }
.avatar-xl { height: 6rem; width: 6rem; position: relative; display: inline-block; }

.avatar-title {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
    color: #fff;
    font-weight: 500;
}

.avatar-xxs img, .avatar-xs img, .avatar-sm img, .avatar-md img, .avatar-lg img, .avatar-xl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   20. Soft Button Variants (btn-soft-*)
   ========================================================================== */

.btn-soft-primary { background-color: rgba(var(--civilo-primary-rgb), .1); color: var(--civilo-primary); border-color: transparent; }
.btn-soft-primary:hover, .btn-soft-primary:focus { background-color: var(--civilo-primary); color: #fff; }
.btn-soft-secondary { background-color: rgba(var(--civilo-secondary-rgb), .1); color: var(--civilo-secondary); border-color: transparent; }
.btn-soft-secondary:hover, .btn-soft-secondary:focus { background-color: var(--civilo-secondary); color: #fff; }
.btn-soft-success { background-color: rgba(10,179,156,.1); color: #0ab39c; border-color: transparent; }
.btn-soft-success:hover, .btn-soft-success:focus { background-color: #0ab39c; color: #fff; }
.btn-soft-danger { background-color: rgba(240,101,72,.1); color: #f06548; border-color: transparent; }
.btn-soft-danger:hover, .btn-soft-danger:focus { background-color: #f06548; color: #fff; }
.btn-soft-warning { background-color: rgba(247,184,75,.1); color: #f7b84b; border-color: transparent; }
.btn-soft-warning:hover, .btn-soft-warning:focus { background-color: #f7b84b; color: #fff; }
.btn-soft-info { background-color: rgba(41,156,219,.1); color: #299cdb; border-color: transparent; }
.btn-soft-info:hover, .btn-soft-info:focus { background-color: #299cdb; color: #fff; }

/* ==========================================================================
   21. Soft Background Variants (bg-soft-*)
   ========================================================================== */

.bg-soft-primary { background-color: rgba(var(--civilo-primary-rgb), .1) !important; }
.bg-soft-secondary { background-color: rgba(var(--civilo-secondary-rgb), .1) !important; }
.bg-soft-success { background-color: rgba(10,179,156,.1) !important; }
.bg-soft-danger { background-color: rgba(240,101,72,.1) !important; }
.bg-soft-warning { background-color: rgba(247,184,75,.1) !important; }
.bg-soft-info { background-color: rgba(41,156,219,.1) !important; }
.bg-soft-dark { background-color: rgba(33,37,41,.1) !important; }
.bg-soft-light { background-color: rgba(243,246,249,.75) !important; }

/* ==========================================================================
   22. Custom Font Sizes (fs-*)
   ========================================================================== */

.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }

/* ==========================================================================
   23. Error Pages (auth-one-bg pattern)
   ========================================================================== */

.auth-page-wrapper {
    position: relative;
}

.auth-one-bg-position {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.auth-one-bg {
    background: var(--civilo-header-dark);
    padding-bottom: 200px;
}

.bg-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, rgba(var(--civilo-primary-rgb), 0.9), rgba(10, 179, 156, 0.6));
}

.shape {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

.shape svg {
    fill: var(--bs-body-bg, #fdf8f0);
}

.auth-page-content {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   24. Page Title & Breadcrumb
   ========================================================================== */

.page-title-box {
    padding: 10px 0;
}

.page-title-right {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   25. Miscellaneous Components
   ========================================================================== */

.btn-ghost-secondary {
    color: var(--civilo-text-muted);
    background: transparent;
    border: none;
}
.btn-ghost-secondary:hover {
    color: var(--civilo-primary);
    background: rgba(var(--civilo-primary-rgb), .1);
}

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.alert-borderless { border: none !important; }
.alert-border-left { border-left: 3px solid !important; }
.alert-border-left.alert-info { border-left-color: var(--bs-info) !important; }
.alert-border-left.alert-warning { border-left-color: var(--bs-warning) !important; }
.alert-border-left.alert-danger { border-left-color: var(--bs-danger) !important; }
.alert-border-left.alert-success { border-left-color: var(--bs-success) !important; }

.error-basic-img { max-width: 100%; height: auto; }

.move-animation { animation: moveAnimation 3s ease-in-out infinite; }
@keyframes moveAnimation {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.footer {
    padding: 20px 0;
    background: transparent;
}

/* ==========================================================================
   26. Color Mode Toggle
   ========================================================================== */

.color-mode-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.1rem;
    border-radius: 50%;
    color: var(--civilo-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.color-mode-btn:hover {
    color: var(--civilo-primary);
    background: rgba(var(--civilo-primary-rgb), .1);
}

/* ==========================================================================
   27. Message Bubbles (Chat)
   ========================================================================== */

.chat-container-bg {
    background: var(--bs-tertiary-bg, #f3f3f9) !important;
}

.msg-bubble {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    max-width: 80%;
    word-wrap: break-word;
}

.msg-bubble-own {
    background: var(--civilo-primary) !important;
    color: #fff !important;
}
.msg-bubble-own .msg-sender { color: rgba(255,255,255,0.85) !important; }
.msg-bubble-own .msg-content { color: #fff !important; }
.msg-bubble-own .msg-time { color: rgba(255,255,255,0.7) !important; }
.msg-bubble-own .msg-read { color: rgba(255,255,255,0.5); }
.msg-bubble-own .msg-read-seen { color: #93c5fd; }

.msg-bubble-other {
    background: var(--bs-card-bg, #fff) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
}
.msg-bubble-other .msg-sender { color: var(--bs-body-color) !important; font-weight: 600; }
.msg-bubble-other .msg-content { color: var(--bs-body-color) !important; }
.msg-bubble-other .msg-time { color: var(--civilo-text-muted) !important; }

.msg-bubble-announcement {
    background: var(--bs-warning-bg-subtle) !important;
    color: var(--bs-warning-text-emphasis) !important;
    border: 1px solid var(--bs-warning-border-subtle) !important;
}
.msg-bubble-announcement .msg-sender { color: var(--bs-warning-text-emphasis) !important; }
.msg-bubble-announcement .msg-content { color: var(--bs-warning-text-emphasis) !important; }
.msg-bubble-announcement .msg-time { color: var(--bs-warning-text-emphasis) !important; opacity: 0.7; }
.msg-bubble-announcement .msg-read { color: var(--bs-warning-text-emphasis); opacity: 0.5; }

/* ==========================================================================
   28. Love-app Style - Visual Polish
   ========================================================================== */

/* --- Pill Buttons --- */

.btn {
    border-radius: var(--civilo-radius-pill) !important;
    transition: all var(--civilo-transition-base);
}

.btn:active:not(:disabled) {
    transform: scale(0.95);
}

.btn-primary {
    box-shadow: var(--civilo-shadow-primary-sm);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: var(--civilo-shadow-primary-md);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
    transform: scale(0.95);
    box-shadow: var(--civilo-shadow-primary-sm);
}

.btn-icon {
    border-radius: 50% !important;
}

.color-mode-btn {
    border-radius: 50% !important;
}

.navbar-toggler {
    border-radius: var(--civilo-radius-pill) !important;
}

.btn-close {
    border-radius: 50% !important;
}

/* --- Cards --- */

.card {
    border-radius: var(--civilo-radius-card) !important;
    transition: all var(--civilo-transition-base);
}

.card[onclick],
.event-card,
.offer-card,
.activity-card {
    cursor: pointer;
}

.card[onclick]:hover,
.event-card:hover,
.offer-card:hover,
.activity-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--civilo-shadow-md);
}

.card[onclick]:active,
.event-card:active,
.offer-card:active,
.activity-card:active {
    transform: scale(0.985);
}

.dashboard-stat-card {
    position: relative;
    overflow: hidden;
}

.dashboard-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.8), rgba(255,255,255,0.3));
    opacity: 0;
    transition: opacity var(--civilo-transition-base);
}

.dashboard-stat-card:hover {
    box-shadow: var(--civilo-shadow-primary-md) !important;
}

.dashboard-stat-card:hover::before {
    opacity: 1;
}

/* --- Inputs --- */

.form-control,
.form-select {
    border-radius: var(--civilo-radius-input) !important;
    transition: all var(--civilo-transition-base);
}

textarea.form-control {
    border-radius: var(--civilo-radius-input) !important;
}

/* --- Bottom-Sheet Modals --- */

.modal.fade {
    display: flex !important;
    align-items: flex-end;
    padding: 0 !important;
}

.modal.fade:not(.show) {
    visibility: hidden;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    width: 100%;
    max-width: 100%;
    margin: 0;
    transition: transform var(--civilo-transition-smooth) ease;
    transform: translateY(100%);
}

.modal.show .modal-dialog {
    transform: translateY(0);
}

.modal-content {
    border-radius: var(--civilo-radius-modal) var(--civilo-radius-modal) 0 0 !important;
    border: none;
    box-shadow: var(--civilo-shadow-lg);
}

.modal-header {
    border-radius: var(--civilo-radius-modal) var(--civilo-radius-modal) 0 0 !important;
}

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.modal-drag-handle {
    width: 40px;
    height: 4px;
    background: var(--bs-border-color);
    border-radius: 2px;
    margin: 0 auto 0.5rem;
    opacity: 0.5;
}

@media (min-width: 576px) {
    .modal.fade {
        align-items: flex-end;
        justify-content: center;
    }
    .modal.fade .modal-dialog {
        max-width: 500px;
    }
}

/* --- Page Animations --- */

.page-content {
    animation: pageContentFadeIn var(--civilo-transition-smooth) ease-out;
}

@keyframes pageContentFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.tab-content > .tab-pane.active {
    animation: fadeIn var(--civilo-transition-base) ease-out;
}

/* --- Badges & Alerts & Pagination --- */

.badge {
    border-radius: var(--civilo-radius-pill) !important;
    font-weight: 600;
}

.alert {
    border-radius: var(--civilo-radius-card) !important;
}

.page-link {
    border-radius: var(--civilo-radius-pill) !important;
    margin: 0 0.125rem;
    transition: all var(--civilo-transition-base);
}

.page-item.active .page-link {
    box-shadow: var(--civilo-shadow-primary-sm);
}

.dropdown-menu {
    border-radius: var(--civilo-radius-card) !important;
    box-shadow: var(--civilo-shadow-md);
    border: 1px solid var(--civilo-border-light);
}

.dropdown-item {
    border-radius: var(--civilo-radius-input);
    transition: all var(--civilo-transition-fast);
}

/* --- FAB (Floating Action Button) --- */

.fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1020;
    width: 56px;
    height: 56px;
    border-radius: 50% !important;
    background: var(--civilo-gradient-primary) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: var(--civilo-shadow-primary-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all var(--civilo-transition-base);
    text-decoration: none;
}

.fab:hover {
    transform: scale(1.1);
    box-shadow: var(--civilo-shadow-primary-lg);
    color: #fff !important;
}

.fab:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .fab {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
}

/* --- Empty States --- */

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    background: var(--civilo-gradient-primary);
    border-radius: var(--civilo-radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
    color: white;
    animation: fadeIn 0.4s ease-out;
}

/* --- Message Bubbles radius --- */

.msg-bubble {
    border-radius: var(--civilo-radius-card);
}

/* --- Form: Location Map & Image Preview --- */

#location-map {
    height: 200px;
    border-radius: var(--civilo-radius-input);
    border: 1px solid var(--bs-border-color);
}

#image-preview {
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--civilo-radius-input);
}

/* --- Navbar Scroll State --- */

.public-navbar.navbar-scrolled {
    padding: 0.5rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.public-navbar.navbar-scrolled .navbar-logo .civilo-logo {
    height: 42px;
    transition: height var(--civilo-transition-base);
}

/* --- Table Polish --- */

.table {
    --bs-table-hover-bg: rgba(var(--civilo-primary-rgb), 0.04);
    border-radius: var(--civilo-radius-card);
    overflow: hidden;
}

.table > thead > tr > th {
    font-family: var(--civilo-font-display) !important;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--civilo-text-muted);
    border-bottom-width: 2px;
    padding: 0.875rem 0.75rem;
}

.table > tbody > tr {
    transition: background-color var(--civilo-transition-fast);
}

.table > tbody > tr > td {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: rgba(var(--civilo-primary-rgb), 0.04);
}

/* --- Footer Depth --- */

.public-footer {
    position: relative;
    overflow: hidden;
}

.public-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--civilo-primary-rgb), 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(var(--civilo-primary-rgb), 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* --- Responsive + Accessibilité --- */

@media (hover: none) {
    .card[onclick]:hover,
    .event-card:hover,
    .offer-card:hover,
    .activity-card:hover {
        transform: none;
        box-shadow: var(--civilo-shadow-sm);
    }

    .btn-primary:hover:not(:disabled) {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}