/*
 * theme-dynamic.css — OVERRIDE TOTAL DU THÈME UTILISATEUR
 * =========================================================
 * Chargé après Bootstrap (CDN ou local) via navbar_user.php / navbar_admin.php.
 * Utilise UNIQUEMENT des règles directes !important pour ne jamais être battu
 * par les CSS custom properties Bootstrap (--bs-btn-bg, etc.) dont la cascade
 * est difficile à contrôler quand Bootstrap vient d'un CDN.
 *
 * Dépend des variables injectées par PHP en début de page :
 *   --mcmp-primary       ex: #6f42c1
 *   --mcmp-primary-600   ex: #5a32a3
 *   --mcmp-primary-rgb   ex: 111, 66, 193
 */

/* ═══════════════════════════════════════════════════════
   RACINE — surcharge immédiate de TOUTES les variables BS
═══════════════════════════════════════════════════════ */
:root {
    /* Variables Bootstrap */
    --bs-primary:           var(--mcmp-primary, #f4623a) !important;
    --bs-primary-rgb:       var(--mcmp-primary-rgb, 244, 98, 58) !important;
    --bs-link-color:        var(--mcmp-primary, #f4623a) !important;
    --bs-link-hover-color:  var(--mcmp-primary-600, #e04f2a) !important;
    --bs-orange:            var(--mcmp-primary, #f4623a) !important;
    /* Variables composants bouton */
    --bs-btn-bg:              var(--mcmp-primary, #f4623a);
    --bs-btn-border-color:    var(--mcmp-primary, #f4623a);
    --bs-btn-hover-bg:        var(--mcmp-primary-600, #e04f2a);
    --bs-btn-hover-border-color: var(--mcmp-primary-600, #e04f2a);
    --bs-btn-active-bg:       var(--mcmp-primary-600, #e04f2a);
    --bs-btn-active-border-color: var(--mcmp-primary-600, #e04f2a);
    --bs-btn-focus-shadow-rgb: var(--mcmp-primary-rgb, 244, 98, 58);
    /* Variables composants divers */
    --bs-nav-pills-link-active-bg:   var(--mcmp-primary, #f4623a);
    --bs-dropdown-link-active-bg:    var(--mcmp-primary, #f4623a);
    --bs-pagination-active-bg:       var(--mcmp-primary, #f4623a);
    --bs-pagination-active-border-color: var(--mcmp-primary, #f4623a);
    --bs-progress-bar-bg:            var(--mcmp-primary, #f4623a);
    --bs-list-group-active-bg:       var(--mcmp-primary, #f4623a);
    --bs-list-group-active-border-color: var(--mcmp-primary, #f4623a);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.25);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.25);
}

/* ═══════════════════════════════════════════════════════
   1. BOUTON PRIMAIRE — toutes variantes, tous états
═══════════════════════════════════════════════════════ */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary {
    background-color: var(--mcmp-primary, #f4623a) !important;
    border-color:     var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
button.btn-primary:hover,
a.btn-primary:hover {
    background-color: var(--mcmp-primary-600, #e04f2a) !important;
    border-color:     var(--mcmp-primary-600, #e04f2a) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.35) !important;
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--mcmp-primary-600, #e04f2a) !important;
    border-color:     var(--mcmp-primary-600, #e04f2a) !important;
    color: #fff !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--mcmp-primary, #f4623a) !important;
    border-color:     var(--mcmp-primary, #f4623a) !important;
    opacity: 0.65;
}

/* ═══════════════════════════════════════════════════════
   2. BOUTON OUTLINE-PRIMARY — toutes variantes, tous états
═══════════════════════════════════════════════════════ */
.btn-outline-primary,
button.btn-outline-primary,
a.btn-outline-primary {
    color:        var(--mcmp-primary, #f4623a) !important;
    border-color: var(--mcmp-primary, #f4623a) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--mcmp-primary, #f4623a) !important;
    border-color:     var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.35) !important;
}

/* ═══════════════════════════════════════════════════════
   3. FOCUS GÉNÉRAL — tous boutons, inputs, links
═══════════════════════════════════════════════════════ */
.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.35) !important;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--mcmp-primary, #f4623a) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.25) !important;
    outline: none !important;
}
:focus-visible {
    outline: 3px solid var(--mcmp-primary, #f4623a) !important;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   4. LIENS
═══════════════════════════════════════════════════════ */
a:not(.btn):not([class*="nav-"]):not([class*="dropdown-"]):not([class*="mcmp-"]):not([class*="text-"]):not(.accordion-button):not(.page-link) {
    color: var(--mcmp-primary, #f4623a);
}
a:not(.btn):not([class*="nav-"]):not([class*="dropdown-"]):not([class*="mcmp-"]):not([class*="text-"]):not(.accordion-button):not(.page-link):hover,
a:not(.btn):not([class*="nav-"]):not([class*="dropdown-"]):not([class*="mcmp-"]):not([class*="text-"]):not(.accordion-button):not(.page-link):focus {
    color: var(--mcmp-primary-600, #e04f2a);
}
.text-primary { color: var(--mcmp-primary, #f4623a) !important; }
.link-primary { color: var(--mcmp-primary, #f4623a) !important; }
.link-primary:hover,
.link-primary:focus { color: var(--mcmp-primary-600, #e04f2a) !important; }

/* ═══════════════════════════════════════════════════════
   5. FORMULAIRES — checkboxes, radios, range
═══════════════════════════════════════════════════════ */
.form-check-input:checked {
    background-color: var(--mcmp-primary, #f4623a) !important;
    border-color:     var(--mcmp-primary, #f4623a) !important;
}
.form-range::-webkit-slider-thumb { background-color: var(--mcmp-primary, #f4623a) !important; }
.form-range::-moz-range-thumb     { background-color: var(--mcmp-primary, #f4623a) !important; }
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.25) !important;
}

/* ═══════════════════════════════════════════════════════
   6. NAV PILLS / TABS
═══════════════════════════════════════════════════════ */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
}
.nav-pills .nav-link:not(.active):hover,
.nav-pills .nav-link:not(.active):focus {
    color: var(--mcmp-primary, #f4623a) !important;
}

/* ═══════════════════════════════════════════════════════
   7. DROPDOWN
═══════════════════════════════════════════════════════ */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.08) !important;
}

/* ═══════════════════════════════════════════════════════
   8. PAGINATION
═══════════════════════════════════════════════════════ */
.page-item.active .page-link {
    background-color: var(--mcmp-primary, #f4623a) !important;
    border-color:     var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
}
.page-link { color: var(--mcmp-primary, #f4623a) !important; }
.page-link:hover { color: var(--mcmp-primary-600, #e04f2a) !important; }
.page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.25) !important;
}

/* ═══════════════════════════════════════════════════════
   9. ACCORDÉON
═══════════════════════════════════════════════════════ */
.accordion-button:not(.collapsed) {
    background-color: var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125) !important;
}
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1) !important;
}
.accordion-button:not(.collapsed) .badge {
    color: var(--mcmp-primary, #f4623a) !important;
    background: #fff !important;
}
.accordion-button:focus {
    border-color: var(--mcmp-primary, #f4623a) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.25) !important;
}

/* ═══════════════════════════════════════════════════════
   10. BADGES, PROGRESS, LIST-GROUP
═══════════════════════════════════════════════════════ */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--mcmp-primary, #f4623a) !important;
}
.progress-bar {
    background-color: var(--mcmp-primary, #f4623a) !important;
}
.list-group-item.active {
    background-color: var(--mcmp-primary, #f4623a) !important;
    border-color:     var(--mcmp-primary, #f4623a) !important;
}

/* ═══════════════════════════════════════════════════════
   11. NAVBAR — liens hover/actif, dividers
═══════════════════════════════════════════════════════ */
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:active,
#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover,
#mainNav.navbar-shrink .navbar-brand:hover {
    color: var(--mcmp-primary, #f4623a) !important;
}
hr.divider {
    background-color: var(--mcmp-primary, #f4623a) !important;
}

/* ═══════════════════════════════════════════════════════
   12. PORTFOLIO (tuiles réservation)
═══════════════════════════════════════════════════════ */
.portfolio-box .portfolio-box-caption {
    background: rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.9) !important;
}
.portfolio-box:hover .portfolio-box-caption {
    background: rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.97) !important;
}

/* ═══════════════════════════════════════════════════════
   13. CHAT (desktop + mobile)
═══════════════════════════════════════════════════════ */
.message.own .message-bubble,
.message.own .message-bubble * {
    background-color: var(--mcmp-primary, #f4623a) !important;
}
.message.own .message-bubble {
    border-color: transparent !important;
    color: #fff !important;
}
.conversation-item.active {
    background-color: rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.13) !important;
}
.message-status:hover,
.group-info-btn:hover {
    color: var(--mcmp-primary, #f4623a) !important;
}

/* ═══════════════════════════════════════════════════════
   14. ASSISTANT IA
═══════════════════════════════════════════════════════ */
.ai-message.user .ai-bubble {
    background-color: var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
}
.ai-avatar .ai-user-initial {
    background: var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
}
.ai-web-btn.active {
    background:   var(--mcmp-primary, #f4623a) !important;
    border-color: var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.28) !important;
}
.ai-web-btn:hover {
    color:        var(--mcmp-primary, #f4623a) !important;
    border-color: rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.5) !important;
}
.ai-send-btn,
.btn-primary.ai-send-btn {
    background-color: var(--mcmp-primary, #f4623a) !important;
    border-color:     var(--mcmp-primary, #f4623a) !important;
    box-shadow: 0 6px 18px rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.28) !important;
    color: #fff !important;
}
.ai-send-btn:hover {
    background-color: var(--mcmp-primary-600, #e04f2a) !important;
    border-color:     var(--mcmp-primary-600, #e04f2a) !important;
}

/* ═══════════════════════════════════════════════════════
   15. ADMIN — tableau de bord, compétences, formations, vidéos
═══════════════════════════════════════════════════════ */
.column-header {
    background-color: var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
}
.dog-card:hover { border-color: var(--mcmp-primary, #f4623a) !important; }
.dog-card.active {
    border-color:     var(--mcmp-primary, #f4623a) !important;
    background-color: rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.10) !important;
}
.section-card {
    border-left-color: var(--mcmp-primary, #f4623a) !important;
}
/* Accordéon videos admin niveau 2 (services) */
.accordion-item .accordion .accordion-item > .accordion-header > .accordion-button:not(.collapsed) {
    background-color: var(--mcmp-primary, #f4623a) !important;
    color: #fff !important;
}
.accordion-item .accordion .accordion-item > .accordion-header > .accordion-button:not(.collapsed) .badge {
    color: var(--mcmp-primary, #f4623a) !important;
}

/* ═══════════════════════════════════════════════════════
   16. RÉSEAUX SOCIAUX
═══════════════════════════════════════════════════════ */
.social-theme-icon {
    color: var(--mcmp-primary, #f4623a) !important;
    transition: color 180ms ease, transform 180ms ease;
}
a:hover .social-theme-icon,
a:focus .social-theme-icon {
    color: var(--mcmp-primary-600, #e04f2a) !important;
    transform: translateY(-1px) scale(1.05);
}

/* ═══════════════════════════════════════════════════════
   17. MCMP ICON ORANGE (menu dropdown)
═══════════════════════════════════════════════════════ */
.mcmp-icon-orange {
    background: rgba(var(--mcmp-primary-rgb, 244, 98, 58), 0.12) !important;
    color: var(--mcmp-primary, #f4623a) !important;
}