/* ========================================
   GROUPEMENT ACHAT JANS - CSS CENTRALISÉ
   ======================================== */

/* ========================
   BASE STYLES
   ======================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Calibri Light", 'CalibriLight', sans-serif;
    background-color: #1a2c38;
    color: #e9d9ae;
}

/* ========================
   TYPOGRAPHY
   ======================== */
h1, h2, h3 {
    color: #e9d9ae;
}

h4, h5, h6 {
    color: #d9923e;
}

a {
    color: #d9923e;
}

/* ========================
   SCROLL BUTTONS
   ======================== */
.scrollTop,
.scrollBottom {
    position: fixed;
    left: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    z-index: 999;
}

.scrollTop:hover,
.scrollBottom:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.scrollBottom {
    bottom: 1rem;
}

.scrollTop {
    top: 1rem;
}

/* ========================
   NAVBAR - MEGA MENU
   ======================== */
#megamenu-container {
    width: 100%;
}

#megamenu {
    display: block;
}

#megamenu .mega-menu {
    position: relative;
    list-style: none;
    margin: 0;
}

#megamenu a:hover {
    color: #ead8c2;
}

#megamenu .mega-menu-content {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
    width: 100%;
}

#megamenu:hover .mega-menu-content {
    display: none;
}

#megamenu .mega-menu a.link-menu-header:hover + .mega-menu-content,
#megamenu .mega-menu-content:hover {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    transition-duration: 2s;
}

#megamenu .column {
    padding: 20px;
    background-color: #0c1a26;
    border-radius: 12px;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

@media screen and (max-width: 800px) {
    #megamenu .mega-menu-content {
        flex-direction: column;
    }
    #megamenu .column {
        width: 200px;
    }
}

#megamenu .column h3 {
    margin: 0;
}

#megamenu a.link-menu-header {
    text-decoration: none;
    display: block;
    width: 55px;
}

#icone-header:before {
    content: "\2630";
}

/* ========================
   FIX Z-INDEX MENU MOBILE - SOLUTION COMPLÈTE
   ======================== */

/* S'assurer que le header et la navbar sont au-dessus de tout */
header,
.header,
nav,
.navbar,
.navbar-container {
    position: relative;
    z-index: 2000 !important;
}

/* Navbar et ses éléments - z-index très élevé */
.navbar,
.navbar-collapse,
.navbar-nav {
    z-index: 2050 !important;
}

/* Offcanvas et backdrop - z-index maximum */
.offcanvas,
.offcanvas-start,
.offcanvas-end,
.offcanvas-top,
.offcanvas-bottom {
    z-index: 9999 !important;
}

.offcanvas.show,
.offcanvas.showing {
    z-index: 9999 !important;
}

.offcanvas-backdrop {
    z-index: 9998 !important;
}

.offcanvas-backdrop.show,
.offcanvas-backdrop.fade.show {
    z-index: 9998 !important;
}

/* Menu mobile spécifique */
#megamenu,
#megamenu-container {
    z-index: 9999 !important;
    position: relative;
}

/* Dropdown et sous-menus */
.dropdown-menu,
.mega-menu-content {
    z-index: 9999 !important;
}

/* S'assurer que le contenu principal n'interfère pas */
main,
.container,
.container-fluid,
#main-content,
.content {
    position: relative;
    z-index: 1 !important;
}

/* Images et cartes produits - derrière le menu */
.card,
.carte-produit,
img {
    position: relative;
    z-index: 1 !important;
}

/* Media query spécifique pour mobile */
@media (max-width: 991.98px) {
    .navbar {
        z-index: 2050 !important;
    }

    .navbar-collapse {
        z-index: 9999 !important;
        position: relative;
    }

    .offcanvas {
        z-index: 9999 !important;
    }

    .offcanvas-backdrop {
        z-index: 9998 !important;
    }

    /* Forcer le menu au-dessus de tout sur mobile */
    body.offcanvas-backdrop-show {
        overflow: hidden;
    }
}

@media (max-width: 767.98px) {
    .navbar,
    .navbar-collapse,
    .offcanvas {
        z-index: 9999 !important;
    }
}

/* ========================
   HEADER
   ======================== */
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-title {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
    margin-bottom: 15px;
}

#logo {
    margin-left: 30px;
}

.header-logo a {
    text-decoration: none;
    color: #e9d9ae;
}

.icone-panier {
    background-color: black;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.icone-panier:hover {
    background-color: #ead8c2;
    color: black;
}

.icone-panier i {
    margin-right: 10px;
}

.text-white {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 1.1em;
    font-weight: bolder;
}

.text-depot {
    color: #1a2c38;
    text-decoration: none;
}

.text-depot:hover {
    color: #b36b19;
}

#profil-header ul.sous {
    column-count: 2;
    column-gap: 20px;
    column-width: 60px;
}

#profil-header a:hover {
    color: #ead8c2;
}

.header-bottom {
    background-color: #ead8c2;
    border-radius: 50px;
}

.header-bottom h1 {
    color: #1a2c38;
}

.header-bottom h2 {
    color: #b36b19;
}

.date {
    color: #1a2c38;
}

#compte_a_rebours {
    color: #1a2c38;
}

#compte_a_rebours_ouverture {
    color: #1a2c38;
}

/* ========================
   FOOTER
   ======================== */
.footer-container {
    text-align: center;
}

.links-footer {
    text-align: center;
    margin-left: 10px;
}

.links-footer ul li {
    padding-right: 10px;
    display: inline-block;
}

/* ========================
   BUTTONS
   ======================== */
.btn-action {
    padding: 15px 15px;
    font-size: 60px;
}

.back-to-home {
    background-color: beige;
    color: black;
    font-family: 'Roboto', sans-serif;
    position: static;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: 1.5em;
    padding: 0.5em;
}

.back-to-home:hover {
    background-color: #F5CBA7;
}

.site-web-button {
    background-color: beige;
    color: black;
    font-family: 'Roboto', sans-serif;
}

.site-web-button:hover {
    background-color: #F5CBA7;
}

.facebook-button {
    background-color: beige;
    color: black;
    font-family: 'Roboto', sans-serif;
}

.facebook-button:hover {
    background-color: #F5CBA7;
}

.email-button {
    background-color: beige;
    color: black;
    font-family: 'Roboto', sans-serif;
}

.email-button:hover {
    background-color: #F5CBA7;
}

.btn-preparation {
    background-color: beige;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: x-large;
}

.btn-preparation:hover {
    background-color: white;
    color: black;
}

.btn-height-10 {
    height: 40px;
}

.btn-marge-10 {
    margin: 10px;
}

.btn-marge-top-10 {
    margin-top: 10px;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================
   CARDS
   ======================== */
.card {
    position: relative;
    max-width: 300px;
    min-height: 480px;
    max-height: 480px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    z-index: 1 !important;
}

.card:hover {
    transform: scale(1.05) translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 204, 204, 0.1);
    z-index: 2 !important;
}

.card:before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    filter: blur(20px);
    z-index: -1;
    transition: transform 0.3s ease-out;
}

.card:hover:before {
    transform: scale(1.2);
    border-color: rgba(217, 146, 62, 0.1);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-body {
    min-height: 470px;
}

.card-content {
    padding: 20px;
}

.card-content h2 {
    margin-bottom: 10px;
}

.card-content p {
    margin-bottom: 20px;
    color: #666;
}

.card-text-prix {
    text-align: right;
    color: #D9923E;
    font-weight: bold;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease-out;
}

.button:hover {
    background-color: #0056b3;
}

#carte-produit {
    min-height: 480px;
}

#carte-fournisseur {
    min-height: 480px;
}

#image-produit-show {
    height: 400px;
    width: 400px;
    margin-top: 10px;
}

/* ========================
   FOURNISSEURS / SUPPLIERS
   ======================== */
.list-group-item {
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 1.1em;
    padding: 0.75em 1.25em;
    background-color: beige;
}

.list-group-item a {
    color: black;
    text-decoration: none;
}

.list-group-item a:hover {
    color: #d9923e;
}

.list-group {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* ========================
   IMAGES & ZOOM
   ======================== */
.zoom-checkbox {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.container img {
    transition: transform 0.25s ease;
    cursor: zoom-in;
}

input[type=checkbox]:checked + label > .zoom-wrapper > img {
    transform: scale(4);
    cursor: zoom-out;
}

.zoom-wrapper {
    display: inline-block;
}

/* ========================
   USER
   ======================== */
.user-right {
    text-align: right;
    margin-right: 15px;
}

/* ========================
   PRÉPARATEUR
   ======================== */
.aligneDroite {
    text-align: right;
    width: 99%;
    padding-top: 7px;
}

fieldset {
    border-radius: 20px;
}

.produit-link.clicked {
    color: orangered;
}

.produit-link.produit-ok {
    color: green;
}

.fieldsetFiltreProduit {
    border-radius: 20px;
    border: 1px solid #0f5132 !important;
    padding: 10px;
}
.fieldsetFiltreFactureFournisseur {
    border-radius: 20px;
    border: 1px solid #d9923e !important;
    padding: 10px;
}
/* ========================
   DÉPÔT / MAP
   ======================== */
#map {
    margin-right: 50px;
}

.map {
    align-items: center;
}

/* ========================
   FACTURES
   ======================== */
.total-label-right {
    text-align: right;
    margin-right: 15px;
    font-weight: bold;
}

.total-value {
    font-weight: bold;
}

.img-width-30px {
    width: 50px;
    height: 50px;
}

.show-detail-produit {
    min-height: 320px;
}

.vertical-align-bottom {
    vertical-align: bottom;
}

#message {
    margin-top: 10px;
}

.swal-wide {
    width: 380px;
    margin: auto;
    transform: translateX(-10%);
}

.quantity-input {
    width: 80px;
    text-align: right;
}

.subtotal {
    font-weight: bold;
}

.chiffreDroite {
    text-align: right;
}

.cart-total {
    font-weight: bold;
    text-align: right;
}

/* ========================
   STATISTIQUES
   ======================== */
.canvas-stats {
    width: 300px;
    height: 300px;
}

.canvas-circle-stats {
    width: 600px !important;
    height: 600px !important;
}

.resultatNombreTotalFacture {
    font-weight: bold;
    color: #D9923E;
    font-size: 1.2em;
}

.texte-size-20 {
    font-size: 20px;
    font-weight: bold;
}

/* ========================
   SECTION RECOMMANDATIONS
   ======================== */
#section-recommandations {
    padding-top: 25px;
}

/* ========================
   FACTURES FOURNISSEURS - STYLES SPÉCIFIQUES
   ======================== */

/* Cartes produits */
.produit-card {
    background-color: #0c1a26;
    border: 1px solid #d9923e;
    border-radius: 10px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.produit-card:hover {
    border-color: #e9d9ae;
    box-shadow: 0 4px 8px rgba(217, 146, 62, 0.3);
}

.produit-header {
    background-color: #d9923e;
    color: #1a2c38;
    padding: 0.75rem 1rem;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
}

.produit-body {
    padding: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #344a5e;
    padding-bottom: 0.25rem;
}

.info-label {
    color: #e9d9ae;
    font-weight: 500;
}

.info-value {
    color: #d9923e;
    font-weight: bold;
    text-align: right;
}

.montant-important {
    background-color: #344a5e;
    padding: 0.5rem;
    border-radius: 5px;
    margin-top: 0.5rem;
}

.month-header {
    background-color: #344a5e;
    border: 2px solid #d9923e;
    color: #e9d9ae;
}

.summary-card {
    background-color: #0c1a26;
    border: 2px solid #d9923e;
    border-radius: 10px;
}

.table-dark-custom {
    background-color: #0c1a26;
    color: #0c1a26;
}

.table-dark-custom th {
    background-color: #d9923e;
    color: #1a2c38;
    border-color: #344a5e;
}

.table-dark-custom td {
    border-color: #344a5e;
    color: #0c1a26;
}

.table-dark-custom .user-right {
    text-align: right;
}

.facture-details {
    font-size: 0.85rem;
    color: #b8c6d0;
}

.badge-status {
    font-size: 0.75rem;
    margin-right: 0.5rem;
}

.factures-list {
    max-height: 400px;
    overflow-y: auto;
}

h1, h2, h3, h4, h5, h6 {
    padding: 10px;
}

.summary-card > .card-body,
.card-body {
    min-height: 0 !important;
    padding: 10px;
}

.month-details {
    display: none;
}

.month-details.show {
    display: block;
}

.btn-toggle-month {
    transition: all 0.3s ease;
}

/* ========================
   PAGE FOURNISSEURS - LISTE
   ======================== */
.fournisseurs-container {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.fournisseurs-column {
    flex: 1;
}

.column-card {
    background-color: #0c1a26;
    border: 1px solid #d9923e;
    border-radius: 8px;
    padding: 1.5rem;
}

.column-card h2 {
    color: #e9d9ae;
    border-bottom: 2px solid #d9923e;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.column-card ul {
    list-style: none;
    padding: 0;
}

.column-card ul li {
    margin-bottom: 0.5rem;
}

.column-card ul li a {
    color: #d9923e;
    text-decoration: none;
    padding: 0.5rem;
    display: block;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.column-card ul li a:hover {
    background-color: #1a2c38;
    color: #e9d9ae;
    padding-left: 1rem;
}

.all-fournisseurs-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.all-fournisseurs-list::-webkit-scrollbar {
    width: 8px;
}

.all-fournisseurs-list::-webkit-scrollbar-track {
    background: #0c1a26;
    border-radius: 4px;
}

.all-fournisseurs-list::-webkit-scrollbar-thumb {
    background: #d9923e;
    border-radius: 4px;
}

.search-box {
    margin-bottom: 1rem;
}

.search-box input {
    background-color: #1a2c38;
    border: 1px solid #d9923e;
    color: #e9d9ae;
    padding: 0.5rem;
    border-radius: 5px;
    width: 100%;
}

.search-box input:focus {
    background-color: #0c1a26;
    border-color: #e9d9ae;
    outline: none;
}

.count-badge {
    background-color: #d9923e;
    color: #0c1a26;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: bold;
    margin-left: 0.5rem;
}

.fournisseur-info {
    color: #b8c6d0;
    font-size: 0.875rem;
    margin-left: 1.5rem;
}
/* Styles pour les actions groupées */
.actions-groupees-container {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.actions-groupees-form {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.checkbox-column {
    width: 40px;
    text-align: center;
}

.checkbox-header {
    cursor: pointer;
    user-select: none;
}

.facture-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

#checkbox-select-all {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

#compteur-selection {
    color: #0d6efd;
    font-weight: 600;
    margin-left: 10px;
}

#action_groupee {
    min-width: 200px;
}

.btn-actions-groupees {
    min-width: 120px;
}

/* Badge pour le statut */
.badge-paye {
    background-color: #28a745;
}

.badge-en-attente {
    background-color: #ffc107;
    color: #000;
}

.badge-archive {
    background-color: #6c757d;
}

/* Effet hover sur les lignes du tableau */
tbody tr:hover {
    background-color: #f8f9fa;
    /*cursor: pointer;*/
}

/* Checkbox indeterminate state */
input[type="checkbox"]:indeterminate {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

input[type="checkbox"]:indeterminate::before {
    content: "−";
    display: block;
    color: white;
    text-align: center;
    line-height: 1;
}

/* Animation pour le bouton */
.btn-actions-groupees:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .actions-groupees-form {
        flex-direction: column;
        align-items: stretch;
    }

    #action_groupee,
    .btn-actions-groupees {
        width: 100%;
    }
}
/* ====================================================================
   FIX POUR L'AFFICHAGE DES CARTES PRODUITS AVEC DES NOMS LONGS
   ==================================================================== */

/* 1. AUGMENTER LA HAUTEUR MINIMALE DES CARTES PRODUITS */
.product-card,
.produit-card,
.card-produit {
    min-height: 480px !important;
    display: flex;
    flex-direction: column;
}

/* 2. S'ASSURER QUE LE CORPS DE LA CARTE UTILISE TOUT L'ESPACE */
.product-card .card-body,
.produit-card .card-body,
.card-produit .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
}

/* 3. ZONE DU NOM DU PRODUIT - PERMET LE DÉBORDEMENT SUR PLUSIEURS LIGNES */
.product-card .card-title,
.produit-card .card-title,
.card-produit .card-title {
    min-height: 4.5em;
    line-height: 1.5em;
    overflow: visible;
    word-wrap: break-word;
    hyphens: auto;
    margin-bottom: 1rem;
}

/* 4. ZONE DES INFORMATIONS (prix, fournisseur, catégorie) */
.product-card .product-info,
.produit-card .produit-info,
.card-produit .produit-info {
    flex: 0 0 auto;
    margin-bottom: 1rem;
}

/* 5. ZONE DES BOUTONS D'ACTION - TOUJOURS VISIBLE EN BAS */
.product-card .card-actions,
.produit-card .card-actions,
.card-produit .card-actions,
.product-card .product-actions,
.produit-card .produit-actions {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* 6. S'ASSURER QUE LES BOUTONS SONT BIEN VISIBLES */
.product-card .btn,
.produit-card .btn,
.card-produit .btn {
    min-height: 38px;
    white-space: nowrap;
}

/* 7. GRILLE DE PRODUITS - ASSURER UNE HAUTEUR UNIFORME */
.products-grid,
.produits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

/* 8. RESPONSIVE - AJUSTER SUR MOBILE */
@media (max-width: 768px) {
    .product-card,
    .produit-card,
    .card-produit {
        min-height: 480px !important;
    }

    .products-grid,
    .produits-grid {
        grid-template-columns: 1fr;
    }
}

/* 9. POUR LES TRÈS LONGS NOMS (4+ lignes) */
@media (min-width: 769px) {
    .product-card .card-title,
    .produit-card .card-title,
    .card-produit .card-title {
        max-height: 6em;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* 10. BOUTON FAVORIS ET PANIER - TOUJOURS ACCESSIBLES */
.btn-favorite,
.btn-add-cart,
.btn-favori,
.btn-panier {
    flex: 1 1 45%;
    min-width: 100px;
}

/* 11. FIX POUR BOOTSTRAP CARDS */
.card.h-100 {
    min-height: 480px !important;
}

.cardstats.h-100 {
    min-height: auto !important;
    max-height: none !important;
    min-width: 0;
}

.cardstats .card-title {
    padding: 0;
    margin-bottom: 0.25rem;
}

.cardstats small {
    display: block;
}




.card .card-body {
    display: flex;
    flex-direction: column;
}

.card .card-body > *:last-child {
    margin-top: auto;
}
/* ===================================
   FIX BOUTONS COUPÉS - CARTE PRODUIT
   (Correction pour overflow et z-index)
   =================================== */

/* Assurer que les cartes produits ont assez d'espace - Hauteur uniforme */
.col-md-3.mb-4,
.col-md-4.mb-4,
.col-12.col-md-6.col-lg-4.col-xl-3.mb-4 {
    min-height: 480px;
}

/* Correction du conteneur de la carte - Maintien de la hauteur uniforme */
.carte-produit,
.card,
[class*="carte-produit"] {
    min-height: 365px ;
    /*max-height: 480px !important;*/
    display: flex;
    flex-direction: column;
}

/* Assurer que le corps de la carte s'adapte */
.carte-produit .card-body,
.card .card-body {
    overflow: visible !important;
    padding-bottom: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Zone des boutons - ne pas couper */
.carte-produit .card-footer,
.card .card-footer,
.carte-produit .bouton-container,
.carte-produit .actions-produit,
.carte-produit .row:last-child {
    overflow: visible !important;
    position: relative;
    z-index: 10;
    margin-top: auto;
    padding-top: 0.75rem;
}

/* Boutons favoris et panier - correction */
.boutonFav,
.btn-success,
button[type="submit"] {
    white-space: nowrap;
    overflow: visible !important;
    position: relative;
    z-index: 20;
}

/* Si les boutons sont dans un formulaire */
form {
    overflow: visible !important;
    margin-bottom: 0;
}

/* Conteneur row contenant les boutons */
.row:has(.boutonFav),
.row:has(.btn-success) {
    overflow: visible !important;
    position: relative;
    z-index: 15;
}

/* Colonnes contenant les boutons */
.col-md-4:has(.boutonFav),
.col-md-5:has(.btn-success),
.col-md-7:has(label[for="quantite"]),
.col-md-8:has(button) {
    overflow: visible !important;
}

/* Section des produits */
#section-recommandations {
    overflow: visible !important;
}

/* Conteneur principal */
.container.mt-5,
.container-fluid.mt-5 {
    overflow: visible !important;
}

/* Fix pour les étoiles de favoris */
.boutonFav i.fa-star {
    pointer-events: none;
    display: inline-block;
}

/* Ajustement du bouton favoris */
.boutonFav {
    min-width: 40px;
    min-height: 38px;
    padding: 0.375rem 0.75rem;
}

/* Fix pour mobile - responsive */
@media (max-width: 768px) {
    .carte-produit,
    .card {
        margin-bottom: 1.5rem;
        min-height: 480px !important;
        max-height: 480px !important;
    }

    .row:has(.boutonFav),
    .row:has(.btn-success) {
        margin-bottom: 0.5rem;
    }
}

/* Fix supplémentaire si les cartes sont dans un grid */
.row > [class*="col-"] {
    overflow: visible !important;
}

/* Assurer la visibilité des tooltips si présents */
.tooltip,
.popover {
    z-index: 9999 !important;
}

/* Fix pour les boutons qui se chevauchent */
.show-detail-produit {
    margin-bottom: 1rem;
    overflow: visible;
}

/* Espacement entre les éléments de la carte */
.carte-produit > *:not(:last-child),
.card > *:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* ========================
   PAGE LE BUREAU
   ======================== */

/* Neutralisation des regles globales .card qui tronquent le contenu */
.bureau-card {
    max-width: none !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(217, 146, 62, 0.3);
    border-radius: 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bureau-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.20rem 1rem rgba(0, 0, 0, 0.4);
}

.bureau-card:before {
    display: none;
}

.bureau-card .card-body {
    min-height: auto !important;
    display: block !important;
    padding: 1.5rem;
    overflow: visible !important;
}

.bureau-card .card-body > *:last-child {
    margin-top: 0;
}

.bureau-card__avatar {
    width: 160px !important;
    height: 160px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #d9923e;
    display: block;
    margin: 1.5rem auto 0;
}

.bureau-card__name {
    color: #e9d9ae;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}

.bureau-card__role {
    color: #d9923e;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.bureau-card__desc {
    color: #c5b896;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}

.bureau-card__desc p {
    margin-bottom: 0.75rem;
}

.bureau-card__desc p:last-child {
    margin-bottom: 0;
}

.bureau-intro {
    max-width: 800px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e9d9ae;
}

/* ========================
   CARTES TABLEAUX - STATISTIQUES FOURNISSEURS
   Neutralisation des règles globales .card (max-width 300px,
   max-height 480px, overflow hidden) qui tronquent les tableaux
   ======================== */

.table-card {
    max-width: none !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    width: 100%;
}

.table-card:hover {
    transform: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    background-color: white;
    z-index: 1 !important;
}

.table-card:before {
    display: none;
}

.table-card .card-body {
    min-height: auto !important;
    display: block !important;
    padding: 0;
    overflow: visible !important;
}

.table-card .card-body > *:last-child {
    margin-top: 0;
}

/* ========================
   TABLEAU COMPTA FOURNISSEURS - TRI DES COLONNES
   ======================== */

#table-fournisseurs-compta thead th {
    cursor: pointer;
    user-select: none;
}

#table-fournisseurs-compta thead th[data-sort="asc"]::after,
#table-fournisseurs-compta thead th[data-sort="desc"]::after {
    content: "";
    display: inline-block;
    margin-left: 0.35em;
    border: 5px solid transparent;
    vertical-align: middle;
}

#table-fournisseurs-compta thead th[data-sort="asc"]::after {
    border-bottom: 6px solid currentColor;
}

#table-fournisseurs-compta thead th[data-sort="desc"]::after {
    border-top: 6px solid currentColor;
}

/* ========================
   TRI GÉNÉRIQUE DES TABLEAUX (classe table-sortable)
   ======================== */

.table-sortable thead th:not(.no-sort) {
    cursor: pointer;
    user-select: none;
}

.table-sortable thead th[data-sort="asc"]::after,
.table-sortable thead th[data-sort="desc"]::after {
    content: "";
    display: inline-block;
    margin-left: 0.35em;
    border: 5px solid transparent;
    vertical-align: middle;
}

.table-sortable thead th[data-sort="asc"]::after {
    border-bottom: 6px solid currentColor;
}

.table-sortable thead th[data-sort="desc"]::after {
    border-top: 6px solid currentColor;
}

/* ========================
   PAGE F.A.Q
   ======================== */
.faq-page {
    max-width: 800px;
    color: #e9d9ae;
}

.faq-subtitle {
    color: #d9923e;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.accordion-faq .accordion-item {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(217, 146, 62, 0.25);
    border-radius: 0.5rem !important;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.accordion-faq .accordion-button {
    background-color: rgba(217, 146, 62, 0.12);
    color: #e9d9ae;
    font-size: 1.1rem;
    font-weight: 600;
}

.accordion-faq .accordion-button:not(.collapsed) {
    background-color: rgba(217, 146, 62, 0.2);
    color: #f0e3c4;
}

.accordion-faq .accordion-button:focus {
    box-shadow: 0 0 0 0.15rem rgba(217, 146, 62, 0.25);
    border-color: rgba(217, 146, 62, 0.5);
}

.accordion-faq .accordion-button::after {
    filter: invert(0.8) sepia(0.3);
}

.accordion-faq .accordion-body {
    color: #c5b896;
    line-height: 1.6;
}

.accordion-faq .accordion-body a {
    color: #d9923e;
}

.accordion-faq .accordion-body hr {
    border-color: rgba(217, 146, 62, 0.2);
    margin: 1.25rem 0;
}

.faq-h5 {
    color: #e9d9ae;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}

.faq-h6 {
    color: #d9923e;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.75rem 0 0.4rem;
}

.accordion-faq .accordion-body ul {
    color: #c5b896;
}

.accordion-faq .accordion-body p {
    margin-bottom: 0.75rem;
}

/* Carte RIB copiable */
.faq-rib {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(217, 146, 62, 0.3);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.faq-rib__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(217, 146, 62, 0.12);
}

.faq-rib__row:last-child {
    border-bottom: none;
}

.faq-rib__label {
    color: #d9923e;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.faq-rib__value {
    color: #e9d9ae;
    font-family: monospace;
    font-size: 0.95rem;
    text-align: right;
    word-break: break-all;
    flex: 1;
    margin: 0 0.5rem;
}

.faq-rib__copy {
    background: none;
    border: none;
    color: #d9923e;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.faq-rib__copy:hover {
    background-color: rgba(217, 146, 62, 0.15);
    color: #f0e3c4;
}

.faq-rib__copy--ok {
    color: #5cb85c !important;
}

@media (max-width: 576px) {
    .faq-rib__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .faq-rib__value {
        text-align: left;
        margin-top: 0.2rem;
    }

    .faq-rib__copy {
        align-self: flex-end;
        margin-top: -1.8rem;
    }
}