/**
 * ResiPlan - Corrections Bootstrap Layout
 * Corrige les problèmes de mise en page Bootstrap
 */

/* Reset Bootstrap container issues */
.container,
.container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Fix container responsives */
@media (min-width: 576px) {
    .container {
        max-width: 540px !important;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px !important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px !important;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px !important;
    }
}

/* Fix Bootstrap Row/Col System */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative !important;
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    flex-basis: 0 !important;
    flex-grow: 1 !important;
    max-width: 100% !important;
}

/* Fix specific column widths */
.col-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
.col-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
.col-3 { flex: 0 0 25% !important; max-width: 25% !important; }
.col-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
.col-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
.col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
.col-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
.col-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
.col-9 { flex: 0 0 75% !important; max-width: 75% !important; }
.col-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
.col-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
.col-12 { flex: 0 0 100% !important; max-width: 100% !important; }

/* Fix Navigation */
.navbar {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 1rem !important;
}

.navbar-expand-lg .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    margin-bottom: 0 !important;
    list-style: none !important;
}

.navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
}

.navbar-toggler {
    display: none !important;
}

@media (max-width: 991.98px) {
    .navbar-toggler {
        display: block !important;
    }
    
    .navbar-expand-lg .navbar-nav {
        flex-direction: column !important;
    }
    
    .navbar-expand-lg .navbar-collapse {
        display: none !important;
    }
    
    .navbar-expand-lg .navbar-collapse.show {
        display: block !important;
    }
}

/* Fix Dropdown */
.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    display: none !important;
    float: left !important;
    min-width: 10rem !important;
    padding: 0.5rem 0 !important;
    margin: 0.125rem 0 0 !important;
    font-size: 1rem !important;
    color: #212529 !important;
    text-align: left !important;
    list-style: none !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 0.375rem !important;
}

.dropdown-menu.show {
    display: block !important;
}

/* Fix Utilities */
.d-flex {
    display: flex !important;
}

.d-block {
    display: block !important;
}

.d-none {
    display: none !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-center {
    justify-content: center !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.me-auto {
    margin-right: auto !important;
}

.ms-auto {
    margin-left: auto !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

/* Fix Text utilities */
.text-center {
    text-align: center !important;
}

.text-end {
    text-align: right !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fs-3 {
    font-size: 1.75rem !important;
}

.fs-4 {
    font-size: 1.5rem !important;
}

/* Fix Background utilities */
.bg-light {
    background-color: #f8f9fa !important;
}

.bg-primary {
    background-color: var(--rp-primary, #0d6efd) !important;
}

/* Fix Button */
.btn {
    display: inline-block !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    text-align: center !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    user-select: none !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    border-radius: 0.375rem !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Fix Card */
.card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    background-color: #fff !important;
    background-clip: border-box !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-radius: 0.375rem !important;
}

.card-body {
    flex: 1 1 auto !important;
    padding: 1rem !important;
}

.card-header {
    padding: 0.5rem 1rem !important;
    margin-bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
}

/* Fix Body layout - use traditional block layout to prevent column footer issue */
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    display: block !important; /* Changed from flex to block to fix footer column issue */
    font-family: var(--bs-body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-size: var(--bs-body-font-size, 1rem) !important;
    font-weight: var(--bs-body-font-weight, 400) !important;
    line-height: var(--bs-body-line-height, 1.5) !important;
    color: var(--bs-body-color, #212529) !important;
    text-align: var(--bs-body-text-align, left) !important;
    background-color: var(--bs-body-bg, #fff) !important;
    -webkit-text-size-adjust: 100% !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Ensure proper box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* Fix main content - use block layout */
main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    min-height: 60vh !important;
}

/* Force header to stay at top */
header {
    display: block !important;
    width: 100% !important;
    position: relative !important;
}

/* Force footer to stay at bottom - absolute positioning to prevent column layout */
footer {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    clear: both !important;
    margin-top: 50px !important;
    background-color: #212529 !important;
    color: white !important;
    padding: 40px 0 !important;
}

/* Fix Footer styles */
.footer-link {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: color 0.15s ease-in-out !important;
}

.footer-link:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

.footer-icon {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: color 0.15s ease-in-out !important;
}

.footer-icon:hover {
    color: #fff !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-warning {
    color: #ffc107 !important;
}

/* Amélioration du footer */
footer h5, footer h6 {
    color: white !important;
    margin-bottom: 1rem !important;
}

footer .container {
    max-width: 1200px !important;
}

footer ul {
    margin-bottom: 0 !important;
}

footer ul li {
    margin-bottom: 0.5rem !important;
}

footer hr {
    border-color: rgba(255, 255, 255, 0.2) !important;
    margin: 2rem 0 1rem 0 !important;
}

footer .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

footer .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: white !important;
    color: white !important;
}

/* Effets visuels pour les cartes modules */
.rp-module-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    position: relative !important;
    overflow: hidden !important;
}

.rp-module-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #007bff, #6f42c1, #e83e8c, #fd7e14) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.rp-hover-lift:hover {
    transform: translateY(-15px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.rp-hover-lift:hover::before {
    opacity: 1 !important;
}

.rp-module-header {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(111, 66, 193, 0.1)) !important;
    padding: 2rem 1.5rem !important;
    text-align: center !important;
    border-radius: 20px 20px 0 0 !important;
}

.rp-module-icon i {
    background: linear-gradient(135deg, #007bff, #6f42c1) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
    transition: transform 0.3s ease !important;
}

.rp-hover-lift:hover .rp-module-icon i {
    transform: scale(1.1) rotate(5deg) !important;
}

.rp-module-card .card-body {
    padding: 2rem !important;
}

.rp-module-card .card-title {
    color: #2c3e50 !important;
    margin-bottom: 1rem !important;
}

.rp-module-card .card-text {
    color: #6c757d !important;
    line-height: 1.6 !important;
}

.rp-module-card .list-unstyled li {
    padding: 0.3rem 0 !important;
    transition: transform 0.2s ease !important;
}

.rp-hover-lift:hover .list-unstyled li {
    transform: translateX(5px) !important;
}

.rp-btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0.75rem 2rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.rp-btn-primary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

.rp-btn-primary:hover::before {
    left: 100% !important;
}

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

/* Animation de défilement */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rp-animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards !important;
}

.rp-animate-delay-1 { animation-delay: 0.1s !important; }
.rp-animate-delay-2 { animation-delay: 0.2s !important; }
.rp-animate-delay-3 { animation-delay: 0.3s !important; }
.rp-animate-delay-4 { animation-delay: 0.4s !important; }
.rp-animate-delay-5 { animation-delay: 0.5s !important; }
.rp-animate-delay-6 { animation-delay: 0.6s !important; }

.bg-dark {
    background-color: #212529 !important;
}

.text-white {
    color: #fff !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.gy-4 > * {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.list-unstyled {
    padding-left: 0 !important;
    list-style: none !important;
}

.small {
    font-size: 0.875em !important;
}

.border-secondary {
    border-color: #6c757d !important;
}

.btn-outline-light {
    color: #f8f9fa !important;
    border-color: #f8f9fa !important;
}

.btn-outline-light:hover {
    color: #000 !important;
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
}

.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.25rem !important;
}

/* Fix responsive spacing */
@media (max-width: 576px) {
    .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    
    .row {
        margin-right: -10px !important;
        margin-left: -10px !important;
    }
    
    [class*="col-"] {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    
    .text-md-end {
        text-align: left !important;
    }
    
    .justify-content-md-end {
        justify-content: flex-start !important;
    }
    
    .flex-md-row {
        flex-direction: column !important;
    }
    
    .mt-md-0 {
        margin-top: 0.5rem !important;
    }
}

@media (min-width: 768px) {
    .text-md-end {
        text-align: right !important;
    }
    
    .justify-content-md-end {
        justify-content: flex-end !important;
    }
    
    .flex-md-row {
        flex-direction: row !important;
    }
    
    .mt-md-0 {
        margin-top: 0 !important;
    }
}