/* Custom CSS - Remplacement des couleurs bleues par le bleu nuit #14183e */

/* Bootstrap primary color override */
:root {
    --bs-primary: #14183e;
    --bs-primary-rgb: 20, 24, 62;
}

/* Background primary */
.bg-primary {
    background-color: #14183e !important;
}

/* Text primary */
.text-primary {
    color: #14183e !important;
}

/* Border primary */
.border-primary {
    border-color: #14183e !important;
}

/* Button primary */
.btn-primary {
    background: linear-gradient(135deg, #0a0e27 0%, #1a237e 50%, #667eea 100%) !important;
    border: none !important;
    color: white !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3) !important;
}

.btn-primary:focus, .btn-primary.focus {
    background: linear-gradient(135deg, #0a0e27 0%, #1a237e 50%, #667eea 100%) !important;
    border: none !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.4) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background: linear-gradient(135deg, #0a0e27 0%, #1a237e 50%, #667eea 100%) !important;
    border: none !important;
}

/* Spinner primary */
.spinner-grow.text-primary {
    color: #14183e !important;
}

/* Links */
a.text-primary:hover,
a.text-primary:focus {
    color: #0f1230 !important;
}

/* Alert primary */
.alert-primary {
    color: #0c0e25;
    background-color: #d6d8e5;
    border-color: #c1c4d6;
}

.alert-primary .alert-link {
    color: #080a1d;
}

/* Badge primary */
.badge-primary {
    background-color: #14183e !important;
}

/* Progress bar primary */
.progress-bar {
    background-color: #14183e !important;
}

/* Custom button styles with the new blue */
.btn-outline-primary {
    color: #1a237e !important;
    border: 1.5px solid #1a237e !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #0a0e27 0%, #1a237e 50%, #667eea 100%) !important;
    border-color: transparent !important;
}

/* Navigation - tous les liens en blanc */
.navbar-nav .nav-link {
    color: white !important;
}

/* Navigation active states */
.navbar-nav .nav-link.active {
    color: white !important;
}

/* Navigation hover states */
.navbar-nav .nav-link:hover {
    color: white !important;
}

/* Navigation active states for dark navbar */
.navbar-dark .navbar-nav .nav-link {
    color: white !important;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: white !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: white !important;
}

/* Form controls focus */
.form-control:focus {
    border-color: #14183e !important;
    box-shadow: 0 0 0 0.2rem rgba(20, 24, 62, 0.25) !important;
}

/* Custom elements with primary color */
.hero-header {
    background-color: #14183e !important;
}

.feature {
    background-color: #14183e !important;
}

.newsletter {
    background-color: #14183e !important;
}

/* Service icons styling */
.service-icon {
    background-color: #14183e !important;
    color: white !important;
}

.service-icon i {
    color: white !important;
}

/* Service cards/boxes styling - fond blanc avec accents bleus */
.service-item,
.service-item.bg-primary {
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px;
    transition: all 0.3s ease;
    height: 300px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
}

.service-item .service-icon,
.service-item .btn-lg-square {
    background-color: #667eea !important;
    color: white !important;
    margin-bottom: 20px;
    align-self: center;
}

.service-item .btn-lg-square i {
    color: white !important;
}

.service-item h4,
.service-item h5,
.service-item .text-white,
.service-item .fw-bold {
    color: #14183e !important;
    margin-bottom: 15px;
    text-align: center;
}

.service-item p,
.service-item .text-white-50 {
    color: #6c757d !important;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item .btn-light {
    background: linear-gradient(135deg, #0a0e27 0%, #1a237e 50%, #667eea 100%) !important;
    color: white !important;
    border: none !important;
}

.service-item .btn-light:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3) !important;
}

/* Force equal height for service columns */
.service-item {
    width: 100%;
    box-sizing: border-box;
}

/* Fix vertical alignment - remove Bootstrap padding-top offset */
.col-md-6.pt-md-4 {
    padding-top: 0 !important;
}

/* Ensure all service columns are aligned */
.service-item {
    margin-bottom: 1.5rem;
}

/* Transitions désactivées */

/* Sidebar logo — compact header uniform across all pages */
.sidebar-header {
    padding: 0.75rem 1.5rem !important;
}

.sidebar-logo {
    height: 28px;
    margin-bottom: 0.25rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Navbar brand text */
.navbar-brand-name {
    color: #fff;
    font-family: Audiowide, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.03em;
    margin-left: 0.75rem;
}
.navbar-brand-name .brand-slash { color: #e91e8c; }

/* ── MOBILE RESPONSIVE GLOBAL ── */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 992px) {
    /* Désactiver les animations qui causent overflow horizontal */
    .animated, .wow {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
    /* Empêcher tout débordement horizontal */
    img { max-width: 100% !important; }
    .navbar-logo img { max-width: 180px !important; height: auto !important; }
    .container-fluid, .container, .row { overflow-x: hidden !important; }
}

/* Fond sombre sur la navbar sur mobile (la vidéo est cachée sur mobile) */
@media (max-width: 992px) {
    .container-fluid.sticky-top {
        background: #0a0d24 !important;
    }
}

/* Navbar mobile — position fixed pour apparaître au-dessus de tout */
@media (max-width: 992px) {
    .sticky-top {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        overflow: visible !important;
    }
    /* Décaler le hero pour ne pas se cacher derrière la navbar fixe */
    .hero-header {
        margin-top: 75px !important;
    }
    /* Menu déroulant visible avec fond sombre */
    .navbar-collapse {
        background: #14183e !important;
        padding: 0.75rem 1rem !important;
        margin-top: 0.5rem !important;
        border-radius: 0 0 14px 14px !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.9) !important;
    }
    .navbar-collapse .nav-link {
        padding: 0.7rem 0.75rem !important;
        border-radius: 8px !important;
        color: white !important;
        display: block !important;
    }
    .navbar-collapse .nav-link:hover {
        background: rgba(255,255,255,0.1) !important;
    }
}