/* ========================================
   BOOTSTRAP 5.3 - SURCHARGE COMPLÈTE
   ========================================

   Définissez vos couleurs principales ici :
   --primary-color: couleur principale (hex)
   --secondary-color: couleur secondaire (hex)

   Ce fichier surcharge TOUTES les classes Bootstrap 5.3
   pour s'adapter à vos couleurs personnalisées.

   ⚠️ IMPORTANT : Chargez ce fichier APRÈS Bootstrap !
======================================== */

:root {
    /* Variables RGB (mises à jour automatiquement par JS) */
    --primary-color-rgb: 112, 48, 159;
    --secondary-color-rgb: 108, 117, 125;
    /* Variables Bootstrap globales */
    --bs-primary: var(--primary-color);
    --bs-secondary: var(--secondary-color);
    --bs-primary-rgb: var(--primary-color-rgb);
    --bs-secondary-rgb: var(--secondary-color-rgb);
    /* Liens */
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: color-mix(in srgb, var(--primary-color) 85%, black);
}
.container-fluid {
    --bs-gutter-x: 4px;
}
/* ===== BOUTONS PRIMARY ===== */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary-color) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--primary-color) 75%, black);
    --bs-btn-focus-shadow-rgb: var(--primary-color-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--primary-color) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--primary-color) 70%, black);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

/* ===== BOUTONS SECONDARY ===== */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--secondary-color);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--secondary-color) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--secondary-color) 75%, black);
    --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--secondary-color) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--secondary-color) 70%, black);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--secondary-color);
    --bs-btn-disabled-border-color: var(--secondary-color);
}

/* ===== BOUTONS OUTLINE PRIMARY ===== */
.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: var(--primary-color-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-color);
}

/* ===== BOUTONS OUTLINE SECONDARY ===== */
.btn-outline-secondary {
    --bs-btn-color: var(--secondary-color);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--secondary-color);
    --bs-btn-hover-border-color: var(--secondary-color);
    --bs-btn-focus-shadow-rgb: var(--secondary-color-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--secondary-color);
    --bs-btn-active-border-color: var(--secondary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--secondary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--secondary-color);
}

/* ===== ACCORDÉONS ===== */
.accordion-button:not(.collapsed) {
    color: color-mix(in srgb, var(--primary-color) 85%, black);
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:focus {
    z-index: 3;
    border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* ===== ALERTS ===== */
.alert-primary {
    --bs-alert-color: color-mix(in srgb, var(--primary-color) 85%, black);
    --bs-alert-bg: color-mix(in srgb, var(--primary-color) 15%, transparent);
    --bs-alert-border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    --bs-alert-link-color: color-mix(in srgb, var(--primary-color) 90%, black);
}

.alert-secondary {
    --bs-alert-color: color-mix(in srgb, var(--secondary-color) 85%, black);
    --bs-alert-bg: color-mix(in srgb, var(--secondary-color) 15%, transparent);
    --bs-alert-border-color: color-mix(in srgb, var(--secondary-color) 30%, transparent);
    --bs-alert-link-color: color-mix(in srgb, var(--secondary-color) 90%, black);
}

/* ===== BADGES ===== */
.badge.text-bg-primary {
    color: #fff !important;
    background-color: var(--primary-color) !important;
}

.badge.text-bg-secondary {
    color: #fff !important;
    background-color: var(--secondary-color) !important;
}

.badge {
    --bs-badge-padding-x: 0.4em;
    --bs-badge-padding-y: 0.2em;
}

/* ===== FORMULAIRES ===== */
.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus {
    border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

.form-switch .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ===== LIENS ===== */
.link-primary {
    color: RGBA(var(--primary-color-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--primary-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

    .link-primary:hover,
    .link-primary:focus {
        color: RGBA(color-mix(in srgb, var(--primary-color) 85%, black), var(--bs-link-opacity, 1)) !important;
        text-decoration-color: RGBA(color-mix(in srgb, var(--primary-color) 85%, black), var(--bs-link-underline-opacity, 1)) !important;
    }

.link-secondary {
    color: RGBA(var(--secondary-color-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--secondary-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

    .link-secondary:hover,
    .link-secondary:focus {
        color: RGBA(color-mix(in srgb, var(--secondary-color) 85%, black), var(--bs-link-opacity, 1)) !important;
        text-decoration-color: RGBA(color-mix(in srgb, var(--secondary-color) 85%, black), var(--bs-link-underline-opacity, 1)) !important;
    }

/* ===== NAVIGATION ===== */
.nav-link:hover,
.nav-link:focus {
    color: var(--primary-color);
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--primary-color);
}

/* ===== PAGINATION ===== */
.page-link {
    color: var(--primary-color);
}

    .page-link:hover {
        color: color-mix(in srgb, var(--primary-color) 85%, black);
    }

    .page-link:focus {
        color: color-mix(in srgb, var(--primary-color) 85%, black);
        box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
    }

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

/* ===== PROGRESS BARS ===== */
.progress-bar {
    background-color: var(--primary-color);
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

/* ===== DROPDOWNS ===== */
.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--primary-color);
}

/* ===== TABS ===== */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--primary-color);
}

/* ===== MODALS ===== */
.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* ===== TOASTS ===== */
.toast-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* ===== OFFCANVAS ===== */
.offcanvas-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* ===== SPINNERS ===== */
.spinner-border-primary {
    --bs-spinner-border-color: var(--primary-color);
}

.spinner-grow-primary {
    --bs-spinner-color: var(--primary-color);
}

/* ===== FALLBACK POUR NAVIGATEURS ANCIENS ===== */
@supports not (color: color-mix(in srgb, red, blue)) {
    /* Fallback pour --primary-color: #70309F */
    .btn-primary {
        --bs-btn-hover-bg: #5c2680;
        --bs-btn-hover-border-color: #4d1f6b;
        --bs-btn-active-bg: #4d1f6b;
        --bs-btn-active-border-color: #3e1956;
    }

    .btn-outline-primary {
        --bs-btn-hover-bg: #70309F;
        --bs-btn-hover-border-color: #70309F;
        --bs-btn-active-bg: #70309F;
        --bs-btn-active-border-color: #70309F;
    }

    .accordion-button:not(.collapsed) {
        color: #462060;
        background-color: #e8ddf2;
    }

    .accordion-button:focus {
        border-color: #b19cd9;
    }

    .alert-primary {
        --bs-alert-color: #462060;
        --bs-alert-bg: #e8ddf2;
        --bs-alert-border-color: #d1bbe5;
        --bs-alert-link-color: #381a4d;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #b19cd9;
    }

    .nav-link:hover,
    .nav-link:focus,
    .navbar-brand:hover,
    .navbar-brand:focus,
    .page-link {
        color: #70309F;
    }

        .page-link:hover,
        .page-link:focus {
            color: #5c2680;
        }
    /* Fallback pour --secondary-color: #6c757d */
    .btn-secondary {
        --bs-btn-hover-bg: #565e64;
        --bs-btn-hover-border-color: #4a5056;
        --bs-btn-active-bg: #4a5056;
        --bs-btn-active-border-color: #3e444a;
    }

    .alert-secondary {
        --bs-alert-color: #41464b;
        --bs-alert-bg: #e2e3e5;
        --bs-alert-border-color: #c4c8cb;
        --bs-alert-link-color: #34383c;
    }
}

/* ===== SCRIPT JAVASCRIPT REQUIS ===== */
/*
Ajoutez ce script pour la conversion automatique hex → RGB :

<script>
function updateBootstrapColors() {
  const primaryColor = getComputedStyle(document.documentElement)
    .getPropertyValue('--primary-color').trim();
  const secondaryColor = getComputedStyle(document.documentElement)
    .getPropertyValue('--secondary-color').trim();

  function hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }

  const primaryRgb = hexToRgb(primaryColor);
  const secondaryRgb = hexToRgb(secondaryColor);

  if (primaryRgb) {
    const rgbString = `${primaryRgb.r}, ${primaryRgb.g}, ${primaryRgb.b}`;
    document.documentElement.style.setProperty('--primary-color-rgb', rgbString);
    document.documentElement.style.setProperty('--bs-primary-rgb', rgbString);
  }

  if (secondaryRgb) {
    const rgbString = `${secondaryRgb.r}, ${secondaryRgb.g}, ${secondaryRgb.b}`;
    document.documentElement.style.setProperty('--secondary-color-rgb', rgbString);
    document.documentElement.style.setProperty('--bs-secondary-rgb', rgbString);
  }
}

// Exécuter au chargement
document.addEventListener('DOMContentLoaded', updateBootstrapColors);

// Observer les changements de couleurs
const observer = new MutationObserver(updateBootstrapColors);
observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['style']
});
</script>
*/

/* ===== UTILISATION ===== */
/*
1. Incluez ce fichier APRÈS Bootstrap 5.3 :
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="bootstrap-5.3-override.css">

2. Personnalisez vos couleurs :
   :root {
     --primary-color: #70309F;
     --secondary-color: #FF6B35;
   }

3. Ajoutez le script JavaScript pour la conversion RGB

4. Tous vos composants Bootstrap s'adapteront automatiquement !

Composants supportés :
✅ Boutons (primary, secondary, outline)
✅ Accordéons
✅ Alerts
✅ Badges
✅ Formulaires (inputs, checkboxes, switches)
✅ Liens
✅ Navigation
✅ Pagination
✅ Progress bars
✅ Dropdowns
✅ Tabs
✅ Modals
✅ Toasts
✅ Offcanvas
✅ Spinners
*/