/**
 * Optimisations mobiles pour les templates de pages GrapeTrack
 * Ce fichier contient des styles qui améliorent l'affichage mobile
 * pour toutes les pages de contenu spécifiques au vin, laboratoires, etc.
 */

/* Styles de base pour toutes les pages de contenu */
.highlighted-text {
    display: inline-block;
    background-color: #E20775;
    color: #ffffff;
    padding: 5px 15px;
}

/* Styles pour les logos de reconnaissance et partenaires */
.recognition-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin: 30px 0;
}

.recognition-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 300px;
}

.recognition-logo {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.recognition-logo img {
    max-width: 100%;
    max-height: 100px;
    width: auto;
    object-fit: contain;
}

/* Fix spécifique pour le logo Bernard Magrez */
.recognition-logo img[alt="Incubateur Bernard Magrez"] {
    max-width: 250px;
    max-height: 80px;
}

/* Optimisations pour les tableaux sur mobile */
@media (max-width: 768px) {
    /* Titres et textes */
    .vignerons-title,
    .labo-title,
    .nutrition-title,
    .transparence-title,
    .grapetrack-title,
    .reglementation-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 20px !important;
    }
    
    /* Tableaux responsive */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-collapse: collapse;
        margin: 20px 0;
    }
    
    th, td {
        white-space: nowrap;
        padding: 8px !important;
    }
    
    /* Cartes et grilles */
    .benefits-grid,
    .testimonials-container,
    .numbers-grid,
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Témoignages */
    .testimonial-card, 
    .testimonial,
    .benefit-card,
    .feature-card {
        margin-bottom: 15px;
        padding: 15px !important;
    }
    
    /* Boutons CTA */
    .btn {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
        text-align: center !important;
        background-color: #E20775 !important;
        color: white !important;
        text-decoration: none !important;
        border-radius: 4px !important;
        margin: 10px 0 !important;
    }
    
    /* Espacement pour les sections */
    section {
        margin-bottom: 25px !important;
    }
    
    /* Listes */
    ul, ol {
        padding-left: 20px !important;
    }
    
    li {
        margin-bottom: 8px !important;
    }
    
    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Optimisation des logos de reconnaissance sur mobile */
    .recognition-list {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    
    .recognition-item {
        width: 100%;
        max-width: 280px;
    }
    
    .recognition-logo {
        height: 100px;
    }
    
    /* Fix spécifique pour le logo Bernard Magrez sur mobile */
    .recognition-logo img[alt="Incubateur Bernard Magrez"] {
        max-width: 220px;
        max-height: 60px;
    }
}

/* Styles spécifiques pour les pages de solutions */
@media (max-width: 768px) {
    .benefit-name {
        font-weight: bold;
        color: #E20775;
    }
    
    /* Espacement des sections sur les pages de solutions */
    .vignerons-content section,
    .labo-content section,
    .transparence-content section,
    .grapetrack-content section,
    .reglementation-content section {
        padding: 15px 0 !important;
    }
}