/**
 * Sidebar Wrapper Styles
 * Layout flex avec sidebar sticky ~300px à GAUCHE, responsive mobile
 */

/* Container principal */
.mpc-sidebar-wrapper {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* Sidebar à GAUCHE */
.mpc-sidebar-wrapper__sidebar {
    flex: 0 0 300px;
    width: 300px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 40px);
    order: 1; /* Sidebar en premier (gauche) */
}

/* Zone de contenu principal à DROITE */
.mpc-sidebar-wrapper__content {
    flex: 1;
    min-width: 0; /* Permet au flex-item de shrink correctement */
    width: 100%;
    order: 2; /* Contenu en second (droite) */
}

/* Breadcrumbs dans le wrapper de contenu */
.mpc-sidebar-wrapper__content > .breadcrumb-wrap {
    margin-bottom: 20px;
    width: 100%;
}

/* S'assurer que #content vient après les breadcrumbs */
.mpc-sidebar-wrapper__content > #content {
    width: 100%;
}

/* Scrollbar personnalisée pour la sidebar */
.mpc-sidebar-wrapper__sidebar::-webkit-scrollbar {
    width: 6px;
}

.mpc-sidebar-wrapper__sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.mpc-sidebar-wrapper__sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.mpc-sidebar-wrapper__sidebar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive Tablet */
@media (max-width: 1024px) {
    .mpc-sidebar-wrapper {
        gap: 20px;
    }

    .mpc-sidebar-wrapper__sidebar {
        flex: 0 0 250px;
        width: 250px;
    }
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .mpc-sidebar-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .mpc-sidebar-wrapper__sidebar {
        position: relative;
        top: 0;
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
        max-height: none;
        order: 1; /* Sidebar en haut sur mobile */
    }

    .mpc-sidebar-wrapper__content {
        width: 100%;
        order: 2; /* Contenu en bas sur mobile */
    }
}

/* Petits mobiles */
@media (max-width: 480px) {
    .mpc-sidebar-wrapper {
        gap: 20px;
    }
}

/* Assurer que le contenu de la sidebar ne déborde pas */
.mpc-sidebar-wrapper__sidebar > * {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Compatibilité avec les images dans la sidebar */
.mpc-sidebar-wrapper__sidebar img {
    max-width: 100%;
    height: auto;
}

/* Animation smooth pour le scroll sticky */
.mpc-sidebar-wrapper__sidebar {
    transition: top 0.3s ease;
}

/* Support pour les contenus Elementor dans la sidebar */
.mpc-sidebar-wrapper__sidebar .elementor-widget-wrap {
    overflow-wrap: break-word;
}

/* Marges pour les widgets dans la sidebar */
.mpc-sidebar-wrapper__sidebar .elementor-widget:not(:last-child) {
    margin-bottom: 20px;
}

/* Assurer que le wrapper ne casse pas les layouts existants */
.mpc-sidebar-wrapper .col-full {
    max-width: 100%;
}

/* Fix pour éviter les conflits avec WooCommerce sidebar native */
.mpc-sidebar-wrapper .woocommerce-breadcrumb {
    /* Les breadcrumbs restent dans le flux normal du contenu */
    margin-bottom: 20px;
}

/* Ne pas affecter la sidebar WooCommerce par défaut si elle existe */
.woocommerce-page #secondary,
.woocommerce #secondary {
    /* La sidebar WooCommerce native garde son comportement */
    position: relative;
}