/* Fichier hotfix.css - Corrections CSS d'urgence */
/* Ce fichier est chargé en dernier pour permettre des corrections rapides */

/* ==========================================================================
   Bootstrap 3 to 4 Migration - Grid System Fix
   Problem: Custom CSS files were written for Bootstrap 3 which used floats.
   Bootstrap 4 uses flexbox. We need to ensure the grid system works.
   ========================================================================== */

/* Force proper flexbox on .row - some custom CSS may have overridden this */
.row {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

/* Fix: Ensure columns are not set to width:100% by other CSS */
/* Using !important to override any conflicting styles from custom CSS */
/* IMPORTANT: Order must be mobile-first (sm -> md -> lg) so larger breakpoints win */
@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
    .col-sm-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
    .col-sm-3 { flex: 0 0 25% !important; max-width: 25% !important; }
    .col-sm-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-sm-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
    .col-sm-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-sm-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
    .col-sm-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
    .col-sm-9 { flex: 0 0 75% !important; max-width: 75% !important; }
    .col-sm-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
    .col-sm-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
    .col-sm-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
    .col-md-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
    .col-md-3 { flex: 0 0 25% !important; max-width: 25% !important; }
    .col-md-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-md-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
    .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-md-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
    .col-md-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
    .col-md-9 { flex: 0 0 75% !important; max-width: 75% !important; }
    .col-md-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
    .col-md-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
    .col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}

@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
    .col-lg-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
    .col-lg-3 { flex: 0 0 25% !important; max-width: 25% !important; }
    .col-lg-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-lg-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
    .col-lg-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-lg-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
    .col-lg-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
    .col-lg-9 { flex: 0 0 75% !important; max-width: 75% !important; }
    .col-lg-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
    .col-lg-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
    .col-lg-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* Specific fixes for profile page grid layout */
/* These address the Bootstrap 3 to 4 migration issues on the profile/shop pages */
.profile-header-section .row,
.profile-tab-section .row,
.parc-materiel .row,
.annonces-section .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Ensure columns with additional classes like .left, .right still respect grid */
@media (min-width: 992px) {
    .profile-header-section .col-lg-6.left,
    .profile-header-section .col-lg-6.right,
    .profile-tab-section .col-lg-6,
    .parc-materiel .col-lg-3.left,
    .parc-materiel .col-lg-9.right {
        flex: initial;
        max-width: initial;
    }
    .profile-header-section .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .profile-tab-section .col-lg-6.statistiques,
    .profile-tab-section .col-lg-6.services {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .parc-materiel .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .parc-materiel .col-lg-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    /* Product boxes - 4 per row on large screens */
    .annonces-section .col-lg-3.product-box-area,
    .product-box-area.col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    /* Product boxes - 3 per row when col-lg-4 */
    .product-box-area.col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .profile-header-section .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .parc-materiel .col-md-4.left {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    .parc-materiel .col-md-8.right {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    .product-box-area.col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .product-box-area.col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    .product-box-area.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Nested row inside parc-materiel needs flex as well */
.parc-materiel .annonces.row,
.parc-materiel .right .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Reset any width:100% that might be set on .left and .right classes */
@media (min-width: 768px) {
    .profile-header-section .left,
    .profile-header-section .right,
    .parc-materiel .left,
    .parc-materiel .right,
    .profile-tab-section .statistiques,
    .profile-tab-section .services {
        width: auto !important;
    }
}

/* ==========================================================================
   Footer Grid Fix
   The footer has a nested row structure: .row > .col-12 > .row > .col-lg-3
   We need to ensure the inner columns display correctly as 4 columns
   ========================================================================== */
footer .row,
footer.desktop-only .row,
footer .container .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Force 4 columns on large screens */
@media (min-width: 992px) {
    footer .col-lg-3,
    footer.desktop-only .col-lg-3,
    footer .container .row .col-lg-3,
    footer .row .row .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* Force 2 columns on medium screens */
@media (min-width: 768px) and (max-width: 991.98px) {
    footer .col-md-6,
    footer.desktop-only .col-md-6,
    footer .container .row .col-md-6,
    footer .row .row .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* Post-footer layout fix */
.post-footer .row,
section.post-footer .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

@media (min-width: 768px) {
    .post-footer .col-md-3,
    section.post-footer .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
    .post-footer .col-md-6,
    section.post-footer .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* ==========================================================================
   Homepage - Notre sélection (Featured Products)
   Template: featured-product-block.twig uses col-md-3 col-sm-6
   Expected: 4 per row on desktop (md+), 2 on tablet (sm), 1 on mobile
   ========================================================================== */
.page-section .row > .col-md-3:has(.featured-product-block),
.page-section .row > div.col-md-3.col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .page-section .row > .col-md-3:has(.featured-product-block),
    .page-section .row > div.col-md-3.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 768px) {
    .page-section .row > .col-md-3:has(.featured-product-block),
    .page-section .row > div.col-md-3.col-sm-6 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* ==========================================================================
   Favorites Page - Boutiques favorites
   Template: favorite-profile-block.twig uses col-md-3 col-sm-6 py-3
   Expected: 4 per row on desktop (md+), 2 on tablet (sm), 1 on mobile
   ========================================================================== */
.page-section .row > .col-md-3:has(.featured-store-block),
.page-section .row > div.col-md-3.col-sm-6.py-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ==========================================================================
   jQuery UI accessibility live-region
   Prevent screen-reader helper text from being visually rendered at page bottom
   ========================================================================== */
.ui-helper-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (min-width: 576px) {
    .page-section .row > .col-md-3:has(.featured-store-block),
    .page-section .row > div.col-md-3.col-sm-6.py-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 768px) {
    .page-section .row > .col-md-3:has(.featured-store-block),
    .page-section .row > div.col-md-3.col-sm-6.py-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* ==========================================================================
   Homepage - Derniers articles (Blog)
   Template: latest-blog-block.twig uses col-md-4 col-sm-12
   Expected: 3 per row on desktop, 1 on mobile
   ========================================================================== */
.blog-block.col-md-4.col-sm-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .blog-block.col-md-4.col-sm-12 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* ==========================================================================
   Messagerie / Chat Page - Desktop Layout Fix
   Ensure 3-column layout on desktop regardless of open-message/close-message state
   ========================================================================== */
@media (min-width: 993px) {
  /* Forcer l'affichage des colonnes même quand open-message/close-message sont présents */
  .massage-list-box,
  #messagerie-container.open-message .massage-list-box,
  #messagerie-container.close-message .massage-list-box {
    display: block !important;
  }

  .chat-box-area,
  #messagerie-container.open-message .chat-box-area,
  #messagerie-container.close-message .chat-box-area {
    display: flex !important;
    flex-direction: column;
  }

  .chat-right-box,
  #messagerie-container.open-message .chat-right-box,
  #messagerie-container.close-message .chat-right-box {
    display: block !important;
  }
}

/* ==========================================================================
   Location Materiel & Trust Security - Number blocks (Comment ça marche)
   Uses col-12 col-sm-6 col-md-4
   Expected: 3 aligned blocks on desktop, 2 on tablet, 1 on mobile
   ========================================================================== */
.page-section .row > .col-12.col-sm-6.col-md-4,
.page-section .row > div.col-md-4:has(.number-blocks) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .page-section .row > .col-12.col-sm-6.col-md-4,
    .page-section .row > div.col-md-4:has(.number-blocks) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 768px) {
    .page-section .row > .col-12.col-sm-6.col-md-4,
    .page-section .row > div.col-md-4:has(.number-blocks) {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* ==========================================================================
   Location Materiel - Témoignage (Verbatim section)
   Image col-md-6 + Text col-md-6 should be side by side
   ========================================================================== */
.verbatim-section {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-section .row > .col-12.col-md-6:has(img),
.page-section .row > .col-12.col-md-6:has(.verbatim-section),
.page-section .row > div.col-md-6.col-lg-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .page-section .row > .col-12.col-md-6:has(img),
    .page-section .row > .col-12.col-md-6:has(.verbatim-section) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .page-section .row > div.col-md-6.col-lg-5 {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
        width: 41.666667% !important;
    }
}

/* ==========================================================================
   Trust Security - Protection blocks (6 blocks in 2 rows of 3)
   Uses col-md-4 mb-4
   ========================================================================== */
.page-section .row > .col-md-4.mb-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .page-section .row > .col-md-4.mb-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}