/* ============================================
   CORRECTION COMPLÈTE DE L'ACCORDÉON DE SERVICES
   Affichage complet sans scrollbar ni déformation
   ============================================ */

/* ============================================
   1. SUPPRESSION DES SCROLLBARS
   ============================================ */

/* Supprimer toutes les scrollbars dans l'accordéon */
.service-category-accordion,
.service-category-content,
.services-grid-enhanced,
.service-card-enhanced,
.service-card-body {
    overflow: hidden !important; /* Pas de scrollbar */
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE et Edge */
}

/* Masquer les scrollbars WebKit (Chrome, Safari) */
.service-category-content::-webkit-scrollbar,
.services-grid-enhanced::-webkit-scrollbar,
.service-card-enhanced::-webkit-scrollbar,
.service-card-body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ============================================
   2. SUPPRESSION DES LIMITES DE HAUTEUR
   ============================================ */

/* Permettre l'affichage complet du contenu de l'accordéon */
.service-category-content {
    height: auto !important; /* Hauteur automatique selon le contenu */
    display: block !important; /* Affichage normal */
    padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg) !important; /* Padding top et sides, pas de padding-bottom */
    padding-bottom: 0 !important; /* Pas de padding en bas pour éviter l'espace vide */
    margin-bottom: 0 !important; /* Pas de marge en bas */
    margin-top: 0 !important; /* Pas de marge en haut */
    /* Transition pour l'animation d'ouverture/fermeture */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out !important;
    overflow: hidden !important; /* Pas de scrollbar */
    /* Ne pas forcer max-height par défaut - laisser le JS gérer */
    /* Supprimer tout espace inutile en bas */
    box-sizing: border-box !important;
}

/* Quand l'accordéon est ouvert (après l'animation), permettre l'expansion complète */
.service-category-content[style*="max-height: none"] {
    max-height: none !important; /* Pas de limite de hauteur quand ouvert */
}

/* Supprimer l'animation CSS qui peut interférer */
.service-category-content[style*="display: block"] {
    animation: none !important; /* Pas d'animation CSS, on utilise JS */
}

/* IMPORTANT : Les styles inline du JS ont toujours la priorité sur le CSS */
/* Le JS va définir max-height via style inline, donc cette valeur sera utilisée */

/* Désactiver l'animation slideDown du CSS principal qui peut interférer */
.service-category-content {
    animation: none !important; /* Pas d'animation CSS, on utilise JS */
}

/* Surcharger l'animation slideDown du fichier principal */
@keyframes slideDown {
    /* Désactivé - on utilise le JS pour l'animation */
}

/* ============================================
   3. RÉDUCTION DES TAILLES POUR TOUT AFFICHER
   ============================================ */

/* Réduire le padding de la grille */
.services-grid-enhanced {
    gap: 0.75rem !important; /* Espacement réduit entre les cartes (de 1rem à 0.75rem) */
    padding: 0 !important; /* Pas de padding supplémentaire */
    padding-bottom: var(--spacing-lg) !important; /* Padding uniquement en bas pour l'espacement avec la bordure */
    margin-bottom: 0 !important; /* Pas de marge en bas */
    margin-top: 0 !important; /* Pas de marge en haut */
}

/* Réduire le padding des cartes */
.service-card-enhanced {
    padding: 0.75rem !important; /* Padding réduit */
    min-height: auto !important; /* Hauteur minimale automatique */
    height: auto !important; /* Hauteur automatique */
}

/* Réduire le padding du corps de la carte */
.service-card-body {
    padding: 0.75rem !important; /* Padding réduit */
    gap: 0.4rem !important; /* Espacement réduit entre les éléments */
    min-height: auto !important; /* Hauteur minimale automatique */
}

/* Réduire la taille du titre */
.service-card-title {
    font-size: 1rem !important; /* Taille réduite */
    margin-bottom: 0.3rem !important; /* Marge réduite */
    line-height: 1.2 !important; /* Hauteur de ligne réduite */
}

/* Réduire la taille de la description */
.service-card-description {
    font-size: 0.8rem !important; /* Taille réduite */
    margin-bottom: 0.3rem !important; /* Marge réduite */
    line-height: 1.3 !important; /* Hauteur de ligne réduite */
    -webkit-line-clamp: 2 !important; /* Limiter à 2 lignes */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important; /* Masquer le texte en trop */
    text-overflow: ellipsis !important;
}

/* Réduire la taille du prix */
.service-card-price {
    font-size: 1.2rem !important; /* Taille réduite */
    margin: 0.3rem 0 !important; /* Marge réduite */
    line-height: 1.2 !important; /* Hauteur de ligne réduite */
}

/* Réduire la taille du bouton */
.service-card-enhanced .btn,
.service-card-enhanced .btn-primary,
.service-card-enhanced .btn-enhanced,
.service-card-enhanced .btn-primary-enhanced,
.service-card-enhanced button {
    padding: 0.5rem 0.75rem !important; /* Padding réduit */
    font-size: 0.85rem !important; /* Taille de police réduite */
    min-height: 36px !important; /* Hauteur minimale réduite */
    margin-top: 0.3rem !important; /* Marge supérieure réduite */
}

/* ============================================
   4. RESPONSIVE - ADAPTATION PAR ÉCRAN
   ============================================ */

/* Petits téléphones (jusqu'à 480px) */
@media (max-width: 480px) {
    .service-category-content {
        padding: 0.75rem 0.75rem 0 0.75rem !important; /* Padding top et sides, pas de bottom */
        padding-bottom: 0 !important;
    }
    
    .services-grid-enhanced {
        gap: 0.5rem !important; /* Espacement très réduit sur petits écrans */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; /* Colonnes plus petites */
        padding-bottom: 0.75rem !important; /* Padding uniquement en bas */
    }
    
    .service-card-enhanced {
        padding: 0.6rem !important; /* Padding minimal */
    }
    
    .service-card-body {
        padding: 0.6rem !important;
        gap: 0.3rem !important;
    }
    
    .service-card-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    .service-card-description {
        font-size: 0.75rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    .service-card-price {
        font-size: 1.1rem !important;
        margin: 0.2rem 0 !important;
    }
    
    .service-card-enhanced .btn,
    .service-card-enhanced .btn-primary,
    .service-card-enhanced .btn-enhanced,
    .service-card-enhanced .btn-primary-enhanced {
        padding: 0.45rem 0.65rem !important;
        font-size: 0.8rem !important;
        min-height: 32px !important;
    }
}

/* Téléphones moyens (481px à 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .service-category-content {
        padding: 1rem 1rem 0 1rem !important; /* Padding top et sides, pas de bottom */
        padding-bottom: 0 !important;
    }
    
    .services-grid-enhanced {
        padding-bottom: 1rem !important; /* Padding uniquement en bas */
    }
    
    .services-grid-enhanced {
        gap: 0.65rem !important; /* Espacement réduit sur téléphones moyens */
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
    
    .service-card-enhanced {
        padding: 0.7rem !important;
    }
    
    .service-card-body {
        padding: 0.7rem !important;
        gap: 0.35rem !important;
    }
    
    .service-card-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .service-card-description {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .service-card-price {
        font-size: 1.15rem !important;
        margin: 0.25rem 0 !important;
    }
    
    .service-card-enhanced .btn,
    .service-card-enhanced .btn-primary,
    .service-card-enhanced .btn-enhanced,
    .service-card-enhanced .btn-primary-enhanced {
        padding: 0.5rem 0.7rem !important;
        font-size: 0.825rem !important;
        min-height: 34px !important;
    }
}

/* Tablettes (769px à 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .service-category-content {
        padding: 1.25rem 1.25rem 0 1.25rem !important; /* Padding top et sides, pas de bottom */
        padding-bottom: 0 !important;
    }
    
    .services-grid-enhanced {
        padding-bottom: 1.25rem !important; /* Padding uniquement en bas */
    }
    
    .services-grid-enhanced {
        gap: 0.7rem !important; /* Espacement réduit sur tablettes */
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }
    
    .service-card-enhanced {
        padding: 0.85rem !important;
    }
    
    .service-card-body {
        padding: 0.85rem !important;
        gap: 0.45rem !important;
    }
    
    .service-card-title {
        font-size: 1.05rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .service-card-description {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .service-card-price {
        font-size: 1.3rem !important;
        margin: 0.3rem 0 !important;
    }
    
    .service-card-enhanced .btn,
    .service-card-enhanced .btn-primary,
    .service-card-enhanced .btn-enhanced,
    .service-card-enhanced .btn-primary-enhanced {
        padding: 0.55rem 0.8rem !important;
        font-size: 0.875rem !important;
        min-height: 38px !important;
    }
}

/* Desktop (1025px et plus) */
@media (min-width: 1025px) {
    .service-category-content {
        padding: 1.5rem 1.5rem 0 1.5rem !important; /* Padding top et sides, pas de bottom */
        padding-bottom: 0 !important;
    }
    
    .services-grid-enhanced {
        padding-bottom: 1.5rem !important; /* Padding uniquement en bas */
    }
    
    .services-grid-enhanced {
        gap: 0.75rem !important; /* Espacement réduit sur desktop */
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    }
    
    .service-card-enhanced {
        padding: 1rem !important; /* Padding normal sur desktop */
    }
    
    .service-card-body {
        padding: 1rem !important;
        gap: 0.5rem !important;
    }
    
    .service-card-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    .service-card-description {
        font-size: 0.9rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    .service-card-price {
        font-size: 1.4rem !important;
        margin: 0.4rem 0 !important;
    }
    
    .service-card-enhanced .btn,
    .service-card-enhanced .btn-primary,
    .service-card-enhanced .btn-enhanced,
    .service-card-enhanced .btn-primary-enhanced {
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
        min-height: 40px !important;
    }
}

/* ============================================
   5. PRÉSERVER LES PROPORTIONS DES IMAGES
   ============================================ */

/* Les images doivent garder leurs proportions */
.service-card-enhanced .service-image,
.service-card-enhanced .service-image-container,
.service-card-enhanced .service-image-wrapper {
    overflow: hidden !important; /* Les images restent dans leurs conteneurs */
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important; /* Pas de déformation */
}

/* ============================================
   6. ALIGNEMENT DES CARTES DANS LA GRILLE
   ============================================ */

/* Aligner les cartes en haut pour éviter qu'elles soient coupées */
.services-grid-enhanced {
    align-items: start !important; /* Aligner en haut */
}

/* ============================================
   7. SUPPRESSION DE L'ESPACE VIDE EN BAS
   ============================================ */

/* S'assurer qu'il n'y a pas d'espace vide sous la bordure */
.service-category-accordion {
    margin-bottom: 0.5rem !important; /* Marge réduite entre les accordéons (de var(--spacing-lg) à 0.5rem) */
    padding-bottom: 0 !important; /* Pas de padding en bas */
}

/* ============================================
   9. RAPPROCHEMENT DES CARTES DU TEXTE ET ENTRE ELLES
   ============================================ */

/* Réduire l'espace entre le texte et les accordéons */
#services .section-header {
    margin-bottom: 1rem !important; /* Marge réduite sous le texte (de var(--spacing-2xl) à 1rem) */
}

/* Réduire le padding-top de la section accordéons */
.services-accordion {
    padding-top: 0.5rem !important; /* Padding-top réduit (de var(--spacing-lg) à 0.5rem) */
    padding-bottom: var(--spacing-lg) !important; /* Garder le padding-bottom */
}

/* Media queries pour la responsivité */
@media (max-width: 480px) {
    #services .section-header {
        margin-bottom: 0.75rem !important; /* Marge encore plus réduite sur mobile */
    }
    
    .services-accordion {
        padding-top: 0.4rem !important;
    }
    
    .service-category-accordion {
        margin-bottom: 0.4rem !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #services .section-header {
        margin-bottom: 0.875rem !important;
    }
    
    .services-accordion {
        padding-top: 0.45rem !important;
    }
    
    .service-category-accordion {
        margin-bottom: 0.45rem !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #services .section-header {
        margin-bottom: 0.95rem !important;
    }
    
    .services-accordion {
        padding-top: 0.5rem !important;
    }
    
    .service-category-accordion {
        margin-bottom: 0.5rem !important;
    }
}

/* Supprimer tout padding ou margin inutile sur le dernier élément */
.service-category-content:last-child,
.services-grid-enhanced:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* S'assurer que la bordure suit exactement le contenu */
/* Le padding-bottom est géré par .services-grid-enhanced */
/* pour que la bordure suive exactement le contenu sans espace vide */

/* ============================================
   8. RÉDUCTION DE LA HAUTEUR DES EN-TÊTES D'ACCORDÉON
   ============================================ */

/* Réduire la hauteur des en-têtes pour un rendu plus fin et élégant */
.service-category-header {
    padding: 0.75rem var(--spacing-xl) !important; /* Padding vertical réduit (de var(--spacing-lg) à 0.75rem) */
    min-height: auto !important; /* Pas de hauteur minimale fixe */
    height: auto !important; /* Hauteur automatique selon le contenu */
    line-height: 1.4 !important; /* Hauteur de ligne optimale pour le texte */
    font-size: 1.1rem !important; /* Taille de police légèrement réduite mais lisible */
}

/* S'assurer que le texte reste bien aligné verticalement */
.service-category-header .category-title {
    line-height: 1.4 !important; /* Hauteur de ligne pour éviter la déformation */
    font-size: 1.1rem !important; /* Taille cohérente avec l'en-tête */
}

/* Ajuster la taille du badge de comptage */
.service-category-header .category-count {
    font-size: 0.9rem !important; /* Taille légèrement réduite */
    padding: 0.25rem 0.5rem !important; /* Padding réduit pour un badge plus compact */
    min-width: auto !important; /* Pas de largeur minimale fixe */
    height: auto !important; /* Hauteur automatique */
    line-height: 1.2 !important; /* Hauteur de ligne pour le texte du badge */
}

/* Ajuster la taille de l'icône de chevron */
.service-category-header .accordion-icon {
    font-size: 0.9rem !important; /* Taille légèrement réduite */
    margin-left: var(--spacing-sm) !important; /* Marge réduite */
}

/* Media queries pour la responsivité */
@media (max-width: 480px) {
    .service-category-header {
        padding: 0.6rem var(--spacing-md) !important; /* Padding encore plus réduit sur mobile */
        font-size: 1rem !important; /* Taille de police réduite sur mobile */
        line-height: 1.3 !important;
    }
    
    .service-category-header .category-title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
    
    .service-category-header .category-count {
        font-size: 0.85rem !important;
        padding: 0.2rem 0.45rem !important;
    }
    
    .service-category-header .accordion-icon {
        font-size: 0.85rem !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .service-category-header {
        padding: 0.65rem var(--spacing-lg) !important;
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
    }
    
    .service-category-header .category-title {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
    }
    
    .service-category-header .category-count {
        font-size: 0.875rem !important;
        padding: 0.225rem 0.475rem !important;
    }
    
    .service-category-header .accordion-icon {
        font-size: 0.875rem !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .service-category-header {
        padding: 0.7rem var(--spacing-lg) !important;
        font-size: 1.08rem !important;
        line-height: 1.38 !important;
    }
    
    .service-category-header .category-title {
        font-size: 1.08rem !important;
        line-height: 1.38 !important;
    }
    
    .service-category-header .category-count {
        font-size: 0.9rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .service-category-header .accordion-icon {
        font-size: 0.9rem !important;
    }
}