/* ============================================
   SYSTÈME RESPONSIVE GLOBAL
   Règles réutilisables pour toutes les pages
   ============================================ */

/* ============================================
   ALIGNEMENT DES TITRES DE DASHBOARD
   Assurer que tous les titres h1 sont à la même hauteur
   ============================================ */
.prospection-dashboard-front .wrap,
.prospection-contacts-front .wrap,
.prospection-sms-history-front .wrap,
.prospection-sms-replies-front .wrap,
.prospection-send-sms-front .wrap,
.prospection-bulk-sms-front .wrap,
.prospection-automation-front .wrap,
.prospection-exclusions-front .wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Supprimer le padding-top du wrapper pour éviter l'espace supplémentaire */
.prospection-dashboard-front,
.prospection-contacts-front,
.prospection-sms-history-front,
.prospection-sms-replies-front,
.prospection-send-sms-front,
.prospection-bulk-sms-front,
.prospection-automation-front,
.prospection-exclusions-front {
    padding-top: 0 !important;
}

.prospection-content-inner .prospection-dashboard-front,
.prospection-content-inner .prospection-contacts-front,
.prospection-content-inner .prospection-sms-history-front,
.prospection-content-inner .prospection-sms-replies-front,
.prospection-content-inner .prospection-send-sms-front,
.prospection-content-inner .prospection-bulk-sms-front,
.prospection-content-inner .prospection-automation-front,
.prospection-content-inner .prospection-exclusions-front {
    padding-top: 0 !important;
}

.prospection-dashboard-front .wrap > div:first-child,
.prospection-contacts-front .wrap > div:first-child,
.prospection-sms-history-front .wrap > div:first-child,
.prospection-sms-replies-front .wrap > div:first-child,
.prospection-send-sms-front .wrap > div:first-child,
.prospection-bulk-sms-front .wrap > div:first-child,
.prospection-automation-front .wrap > div:first-child,
.prospection-exclusions-front .wrap > div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 20px !important;
}

.prospection-dashboard-front .wrap h1,
.prospection-contacts-front .wrap h1,
.prospection-sms-history-front .wrap h1,
.prospection-sms-replies-front .wrap h1,
.prospection-send-sms-front .wrap h1,
.prospection-bulk-sms-front .wrap h1,
.prospection-automation-front .wrap h1,
.prospection-exclusions-front .wrap h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    vertical-align: top !important;
    /* Forcer les valeurs réelles pour surcharger les variables CSS du thème Blocksy */
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    --theme-font-size: 2.5rem !important;
    --theme-font-weight: 700 !important;
    --theme-line-height: 1.2 !important;
}

/* Forcer l'alignement vertical des conteneurs flex pour les titres */
.prospection-dashboard-front .wrap > div:first-child[style*="display: flex"],
.prospection-contacts-front .wrap > div:first-child[style*="display: flex"] {
    align-items: flex-start !important;
    min-height: auto !important;
}

/* S'assurer que les h1 dans les conteneurs flex sont alignés */
.prospection-dashboard-front .wrap > div:first-child[style*="display: flex"] h1,
.prospection-contacts-front .wrap > div:first-child[style*="display: flex"] h1 {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: top !important;
    line-height: 1.2 !important;
    /* Forcer les valeurs réelles pour surcharger les variables CSS du thème Blocksy */
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    --theme-font-size: 2.5rem !important;
    --theme-font-weight: 700 !important;
    --theme-line-height: 1.2 !important;
}

/* Aligner tous les titres h1 à la même hauteur absolue - Règles très spécifiques pour surcharger Blocksy */
.prospection-dashboard-front .wrap > div:first-child[style*="display: flex"] h1,
.prospection-contacts-front .wrap > div:first-child[style*="display: flex"] h1,
.prospection-dashboard-front .wrap h1:first-child,
.prospection-contacts-front .wrap h1:first-child,
.prospection-layout-wrapper .prospection-dashboard-front .wrap h1,
.prospection-layout-wrapper .prospection-contacts-front .wrap h1,
.prospection-content-inner .prospection-dashboard-front .wrap h1,
.prospection-content-inner .prospection-contacts-front .wrap h1,
.entry-content .prospection-dashboard-front .wrap h1,
.entry-content .prospection-contacts-front .wrap h1,
.ct-container .prospection-dashboard-front .wrap h1,
.ct-container .prospection-contacts-front .wrap h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: auto !important;
    /* Forcer les valeurs réelles pour surcharger les variables CSS du thème Blocksy */
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    --theme-font-size: 2.5rem !important;
    --theme-font-weight: 700 !important;
    --theme-line-height: 1.2 !important;
}

/* Réduire les marges du paragraphe après le titre pour ne pas affecter l'alignement */
.prospection-contacts-front .wrap > div:first-child + p {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* ============================================
   TAILLE DES TITRES H2 ET H3 DANS LES DASHBOARDS
   Réduire la taille pour une meilleure cohérence
   ============================================ */
.prospection-dashboard-front .wrap h2,
.prospection-contacts-front .wrap h2,
.prospection-dashboard-front h2,
.prospection-contacts-front h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

.prospection-dashboard-front .wrap h3,
.prospection-contacts-front .wrap h3,
.prospection-dashboard-front h3,
.prospection-contacts-front h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}

/* ============================================
   ALIGNEMENT DES TITRES WORDPRESS PAR DÉFAUT
   Pour les pages qui utilisent le titre WordPress (comme gestion-contact)
   ============================================ */
.prospection-layout-wrapper .entry-header,
.prospection-layout-wrapper .page-header,
.prospection-layout-wrapper .entry-title,
.prospection-layout-wrapper h1.entry-title,
.prospection-layout-wrapper .ct-single-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
    font-size: 2.5rem !important;
}

/* Masquer le titre WordPress par défaut si un shortcode génère son propre titre */
.prospection-layout-wrapper .prospection-contacts-front ~ .entry-header,
.prospection-layout-wrapper .prospection-dashboard-front ~ .entry-header,
.prospection-layout-wrapper .prospection-contacts-front ~ .page-header,
.prospection-layout-wrapper .prospection-dashboard-front ~ .page-header {
    display: none !important;
}

/* ============================================
   1. TABLES RESPONSIVE
   Transformation en cartes sur mobile
   ============================================ */

/* Wrapper pour tables scrollables (optionnel) */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    width: 100%;
}

.table-responsive-wrapper table {
    min-width: 100%;
}

/* Tables WordPress Admin */
.wp-list-table,
.widefat {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Force le respect des largeurs définies */
}

/* Styles pour les colonnes du tableau */
.wp-list-table th,
.widefat th {
    font-weight: 600;
    text-align: left;
    padding: 10px;
    background: #f9f9f9;
    border-bottom: 2px solid #ddd;
}

.wp-list-table td,
.widefat td {
    padding: 10px;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

.wp-list-table tbody tr:hover,
.widefat tbody tr:hover {
    background-color: #f9f9f9;
}

/* Colonnes avec largeur fixe - empêcher le retour à la ligne (sauf Message) */
.wp-list-table th[style*="width"]:not(:nth-child(5)):not(:nth-child(4)),
.wp-list-table td[style*="width"]:not(:nth-child(5)):not(:nth-child(4)) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Table spécifique contacts - Style admin WordPress */
#contacts-table-all,
#contacts-table,
#contacts-table-saved,
#prospection-sms-history-table,
#prospection-sms-replies-table {
    table-layout: fixed !important;
    width: 100%;
    font-size: 13px; /* Taille de police comme dans l'admin WordPress */
}

/* En-têtes */
#contacts-table-all th,
#contacts-table th,
#contacts-table-saved th,
#prospection-sms-history-table th,
#prospection-sms-replies-table th {
    font-weight: 600;
    font-size: 13px;
    padding: 8px 10px;
    vertical-align: top;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

/* Cellules - style de base */
#contacts-table-all td,
#contacts-table td,
#contacts-table-saved td,
#prospection-sms-history-table td,
#prospection-sms-replies-table td {
    padding: 8px 10px;
    vertical-align: top;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
}

/* Colonnes avec largeur fixe - empêcher le retour à la ligne */
#contacts-table-all th[style*="width"],
#contacts-table-all td[style*="width"],
#contacts-table th[style*="width"],
#contacts-table td[style*="width"],
#contacts-table-saved th[style*="width"],
#contacts-table-saved td[style*="width"] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Colonne Message - limiter la largeur */
#contacts-table-all th:nth-child(5), /* Message (avec checkbox) */
#contacts-table th:nth-child(4), /* Message (sans checkbox) */
#contacts-table-saved th:nth-child(4), /* Message */
#contacts-table-all td:nth-child(5),
#contacts-table td:nth-child(4),
#contacts-table-saved td:nth-child(4) {
    max-width: 400px !important;
    width: 400px !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* Le div dans la colonne Message - exactement comme dans l'admin */
#contacts-table-all td:nth-child(5) > div,
#contacts-table td:nth-child(4) > div,
#contacts-table-saved td:nth-child(4) > div {
    max-height: 100px !important;
    overflow: auto !important;
    word-wrap: break-word;
    font-size: 13px;
    line-height: 1.5;
    max-width: 100%;
}

/* =========================================================
   Version mobile : forcer le scroll horizontal des tableaux
   de contacts (Gestion contact & co) au lieu de couper
   les colonnes sur petit écran
   ========================================================= */
@media (max-width: 768px) {
    /* Le wrapper gère le scroll horizontal */
    .prospection-contacts-front .table-responsive-wrapper {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* On garde une largeur minimale suffisante pour voir toutes les colonnes
       et obliger le scroll horizontal dans le wrapper */
    .prospection-contacts-front #contacts-table,
    .prospection-contacts-front #contacts-table-all,
    .prospection-contacts-front #contacts-table-saved {
        min-width: 900px;
        table-layout: auto;
    }

    /* ========== Historique SMS : tableau scrollable (pas de vue carte) ========== */
    .prospection-sms-history-front {
        min-width: 0; /* permettre au wrapper de scroller dans un flex/grid */
    }
    .prospection-sms-history-front .table-responsive-wrapper {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .prospection-sms-history-front .table-responsive-wrapper table {
        min-width: 800px !important;
        width: 100% !important;
        table-layout: auto !important;
        display: table !important;
    }
}

/* Colonnes spécifiques - largeurs fixes */
#contacts-table-all th:nth-child(1),
#contacts-table-all td:nth-child(1) {
    width: 40px !important;
    text-align: center;
}

#contacts-table-all th:nth-child(2),
#contacts-table-all td:nth-child(2),
#contacts-table th:nth-child(1),
#contacts-table td:nth-child(1),
#contacts-table-saved th:nth-child(1),
#contacts-table-saved td:nth-child(1) {
    width: 120px !important;
}

#contacts-table-all th:nth-child(3),
#contacts-table-all td:nth-child(3),
#contacts-table th:nth-child(2),
#contacts-table td:nth-child(2),
#contacts-table-saved th:nth-child(2),
#contacts-table-saved td:nth-child(2) {
    width: 150px !important;
}

#contacts-table-all th:nth-child(4),
#contacts-table-all td:nth-child(4),
#contacts-table th:nth-child(3),
#contacts-table td:nth-child(3),
#contacts-table-saved th:nth-child(3),
#contacts-table-saved td:nth-child(3) {
    width: 100px !important;
}

#contacts-table-all th:nth-child(6),
#contacts-table-all td:nth-child(6),
#contacts-table th:nth-child(5),
#contacts-table td:nth-child(5),
#contacts-table-saved th:nth-child(5),
#contacts-table-saved td:nth-child(5) {
    width: 200px !important;
}

#contacts-table-all th:nth-child(7),
#contacts-table-all td:nth-child(7),
#contacts-table th:nth-child(6),
#contacts-table td:nth-child(6),
#contacts-table-saved th:nth-child(6),
#contacts-table-saved td:nth-child(6) {
    width: 180px !important;
}

#contacts-table-all th:nth-child(8),
#contacts-table-all td:nth-child(8),
#contacts-table th:nth-child(7),
#contacts-table td:nth-child(7),
#contacts-table-saved th:nth-child(7),
#contacts-table-saved td:nth-child(7) {
    width: 140px !important;
}

#contacts-table-all th:nth-child(9),
#contacts-table-all td:nth-child(9),
#contacts-table th:nth-child(8),
#contacts-table td:nth-child(8),
#contacts-table-saved th:nth-child(8),
#contacts-table-saved td:nth-child(8) {
    width: 180px !important;
    min-width: 180px !important;
    text-align: left;
    white-space: normal;
    overflow: visible !important;
    padding: 8px 5px !important;
}

/* Boutons dans la colonne Actions - empilés verticalement avec espacement */
#contacts-table-all td:nth-child(9),
#contacts-table td:nth-child(8),
#contacts-table-saved td:nth-child(8) {
    text-align: center;
    padding: 8px 5px !important;
}

#contacts-table-all td:nth-child(9) .button,
#contacts-table-all td:nth-child(9) a.button,
#contacts-table td:nth-child(8) .button,
#contacts-table td:nth-child(8) a.button,
#contacts-table-saved td:nth-child(8) .button,
#contacts-table-saved td:nth-child(8) a.button {
    display: block;
    margin: 4px auto;
    padding: 5px 8px;
    font-size: 11px;
    white-space: nowrap;
    text-decoration: none;
    width: auto;
    min-width: 70px;
    text-align: center;
    line-height: 1.3;
    height: auto;
    min-height: auto;
}

/* Boutons button-small - un peu plus hauts */
#contacts-table-all td:nth-child(9) .button-small,
#contacts-table-all td:nth-child(9) a.button-small,
#contacts-table td:nth-child(8) .button-small,
#contacts-table td:nth-child(8) a.button-small,
#contacts-table-saved td:nth-child(8) .button-small,
#contacts-table-saved td:nth-child(8) a.button-small {
    padding: 4px 6px;
    font-size: 11px;
    line-height: 1.2;
    min-width: 60px;
}

/* Sur mobile : masquer les tables contacts (remplacées par vue carte) ;
   NE PAS cacher #prospection-sms-history-table : pas de vue carte, on garde le scroll horizontal */
@media (max-width: 768px) {
    #contacts-table-all,
    #contacts-table,
    #contacts-table-saved {
        display: none !important;
    }
    
    /* S'assurer que la vue carte est visible */
    #contacts-table-all-card-view,
    #contacts-table-card-view,
    #contacts-table-saved-card-view {
        display: block !important;
    }
}

/* Sur mobile : masquer la table et afficher la vue carte (sauf page Historique SMS) */
@media (max-width: 768px) {
    .wp-list-table {
        display: none;
    }
    /* Exception : Historique SMS reste en tableau scrollable horizontalement */
    .prospection-sms-history-front .table-responsive-wrapper .wp-list-table {
        display: table !important;
    }
    
    /* Vue carte pour remplacer la table */
    .table-card-view {
        display: block;
    }
    
    .table-card {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .table-card-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .table-card-row:last-child {
        border-bottom: none;
    }
    
    .table-card-label {
        font-weight: 600;
        color: #666;
        min-width: 120px;
        flex-shrink: 0;
    }
    
    .table-card-value {
        flex: 1;
        text-align: right;
        word-break: break-word;
    }
    
    .table-card-actions {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
}

/* Desktop : masquer la vue carte */
@media (min-width: 769px) {
    .table-card-view {
        display: none;
    }
}

/* Colonnes à masquer sur mobile (optionnel) */
@media (max-width: 768px) {
    .table-mobile-hidden {
        display: none !important;
    }
}

/* ============================================
   2. FORMULAIRES RESPONSIVE
   Grilles adaptatives
   ============================================ */

/* Grille de formulaire responsive */
.form-grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

@media (max-width: 768px) {
    .form-grid-responsive {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Champs de formulaire */
.form-field-responsive {
    width: 100%;
    box-sizing: border-box;
}

/* Groupes de boutons */
.button-group-responsive {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .button-group-responsive {
        flex-direction: column;
    }
    
    .button-group-responsive .button,
    .button-group-responsive .btn {
        width: 100%;
        margin: 0;
    }
}

/* Labels et inputs côte à côte */
.form-row-responsive {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .form-row-responsive {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-row-responsive label {
        margin-bottom: 5px;
    }
}

/* ============================================
   3. GRIDS RESPONSIVE
   Colonnes multiples → colonne unique
   ============================================ */

/* Grid responsive générique */
.grid-responsive {
    display: grid;
    gap: 20px;
}

/* Grid 2 colonnes */
.grid-2-col {
    grid-template-columns: repeat(2, 1fr);
}

/* Grid 3 colonnes */
.grid-3-col {
    grid-template-columns: repeat(3, 1fr);
}

/* Grid 4 colonnes */
.grid-4-col {
    grid-template-columns: repeat(4, 1fr);
}

/* Grid auto-fit */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Sur mobile : toutes les grids passent en 1 colonne */
@media (max-width: 768px) {
    .grid-responsive,
    .grid-2-col,
    .grid-3-col,
    .grid-4-col,
    .grid-auto-fit {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
}

/* Sur tablette : réduire à 2 colonnes max */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-4-col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   4. BOUTONS ET ACTIONS
   ============================================ */

/* Boutons responsive */
.btn-responsive,
.button-responsive {
    width: auto;
    min-width: 120px;
}

@media (max-width: 768px) {
    .btn-responsive,
    .button-responsive {
        width: 100%;
        min-width: auto;
    }
}

/* Groupe d'actions */
.actions-bar-responsive {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .actions-bar-responsive {
        flex-direction: column;
        align-items: stretch;
    }
    
    .actions-bar-responsive > * {
        width: 100%;
    }
}

/* ============================================
   5. TYPOGRAPHIE RESPONSIVE
   ============================================ */

/* Titres */
h1.responsive-title {
    font-size: 2.5rem;
}

h2.responsive-title {
    font-size: 2rem;
}

h3.responsive-title {
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    h1.responsive-title {
        font-size: 2rem;
    }
    
    h2.responsive-title {
        font-size: 1.75rem;
    }
    
    h3.responsive-title {
        font-size: 1.25rem;
    }
}

/* Texte */
@media (max-width: 768px) {
    .prospection-content-inner {
        font-size: 14px;
    }
}

/* ============================================
   6. ESPACEMENTS RESPONSIVE
   ============================================ */

/* Padding adaptatif */
.padding-responsive {
    padding: 30px;
}

@media (max-width: 768px) {
    .padding-responsive {
        padding: 20px 15px;
    }
}

/* Margin adaptatif */
.margin-responsive {
    margin: 20px 0;
}

@media (max-width: 768px) {
    .margin-responsive {
        margin: 15px 0;
    }
}

/* ============================================
   7. CONTENEURS RESPONSIVE
   ============================================ */

.container-responsive {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

@media (max-width: 768px) {
    .container-responsive {
        padding: 15px 10px;
    }
}

/* Cards responsive */
.card-responsive {
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .card-responsive {
        padding: 15px;
        border-radius: 8px;
    }
}

/* ============================================
   8. FLEXBOX RESPONSIVE
   ============================================ */

.flex-responsive {
    display: flex;
    gap: 20px;
    align-items: center;
}

@media (max-width: 768px) {
    .flex-responsive {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
}

/* Flex wrap */
.flex-wrap-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

@media (max-width: 768px) {
    .flex-wrap-responsive {
        flex-direction: column;
    }
    
    .flex-wrap-responsive > * {
        width: 100%;
    }
}

/* ============================================
   9. PAGINATION RESPONSIVE
   ============================================ */

.pagination-responsive {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .pagination-responsive {
        gap: 3px;
    }
    
    .pagination-responsive .button {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ============================================
   10. FILTRES ET RECHERCHE RESPONSIVE
   ============================================ */

.filters-bar-responsive {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin: 20px 0;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .filters-bar-responsive {
        flex-direction: column;
        gap: 10px;
    }
    
    .filters-bar-responsive > * {
        width: 100%;
    }
    
    .filters-bar-responsive input,
    .filters-bar-responsive select {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================
   11. STATS ET CARDS RESPONSIVE
   ============================================ */

.stat-card-responsive {
    padding: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .stat-card-responsive {
        padding: 15px;
    }
    
    .stat-value-responsive {
        font-size: 2rem !important;
    }
}

/* ============================================
   12. OVERFLOW ET SCROLL
   ============================================ */

/* Empêcher le scroll horizontal */
.prospection-content-inner {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Tables scrollables */
@media (max-width: 768px) {
    .table-scrollable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }
}

/* ============================================
   13. UTILITAIRES RESPONSIVE
   ============================================ */

/* Masquer sur mobile */
.hide-mobile {
    display: block;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Afficher uniquement sur mobile */
.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* Masquer sur desktop */
.hide-desktop {
    display: none;
}

@media (max-width: 768px) {
    .hide-desktop {
        display: block !important;
    }
}

/* ============================================
   14. SPÉCIFIQUE PAGES CONTACTS
   ============================================ */

/* Wrapper pour la page contacts */
.prospection-contacts-front {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Table contacts - transformation en cartes */
@media (max-width: 768px) {
    #contacts-table-all,
    #contacts-table,
    #contacts-table-saved {
        display: none;
    }
    
    /* Générer les cartes via JavaScript ou PHP */
    .contact-card {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .contact-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .contact-card-phone {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2271b1;
    }
    
    .contact-card-body {
        display: grid;
        gap: 10px;
    }
    
    .contact-card-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
    }
    
    .contact-card-label {
        font-weight: 600;
        color: #666;
        min-width: 100px;
    }
    
    .contact-card-value {
        flex: 1;
        text-align: right;
        word-break: break-word;
    }
    
    .contact-card-actions {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .contact-card-actions .button {
        flex: 1;
        min-width: 120px;
    }
}

/* ============================================
   15. AMÉLIORATIONS GÉNÉRALES
   ============================================ */

/* Améliorer la lisibilité sur mobile */
@media (max-width: 768px) {
    .prospection-content-inner {
        line-height: 1.6;
    }
    
    /* Augmenter la taille des zones cliquables */
    a, button, .button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Espacement entre les éléments */
    .prospection-content-inner > * {
        margin-bottom: 15px;
    }
}

/* Améliorer les performances sur mobile */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* FORCER le layout et le contenu à prendre toute la largeur sur mobile */
    .prospection-layout-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        overflow-x: hidden !important;
    }
    
    .prospection-content-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }
    
    .prospection-content-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Annuler toutes les contraintes Blocksy/WordPress sur mobile */
    body:has(.prospection-layout-wrapper) .site-content,
    body:has(.prospection-layout-wrapper) .content-area,
    body:has(.prospection-layout-wrapper) .main-content,
    body:has(.prospection-layout-wrapper) .ct-container,
    body:has(.prospection-layout-wrapper) .entry-content,
    body:has(.prospection-layout-wrapper) [class*="container"] {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}