/* ========================================
   SLIDER DE CATÉGORIES - RESPONSIVE MOBILE & DESKTOP
   ======================================== */

/* ========== MOBILE (max-width: 768px) ========== */
@media (max-width: 768px) {
    .categories-slider-section {
        position: relative;
        width: 100%;
        background:
            linear-gradient(135deg, rgba(245, 241, 232, 0.72) 0%, rgba(237, 231, 217, 0.72) 30%, rgba(245, 241, 232, 0.72) 70%, rgba(237, 231, 217, 0.72) 100%),
            url('../images/slider.webp') center center / cover no-repeat;
        padding: 0.8rem 0;
        overflow: hidden; /* Empêche le scroll horizontal de la page */
        margin: 0;
    }

    .categories-slider-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }

    .categories-slider-header {
        text-align: center;
        margin-bottom: 0.6rem;
        padding-bottom: 0.3rem;
        position: relative;
    }
    
    /* Soulignement élégant SOUS LE HEADER - Mobile */
    .categories-slider-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 3px;
        background: var(--accent);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(247, 184, 1, 0.3);
    }

    .categories-slider-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--secondary);
        margin-bottom: 0;
    }

    /* Wrapper Mobile - overflow hidden strict, pas de padding */
    .categories-slider-wrapper {
        position: relative;
        width: 100%;
        padding: 0;
        overflow: hidden;
    }

    /* Track Mobile - pas de padding-left, le centrage est géré par JS via translateX */
    .categories-slider-track {
        display: flex;
        gap: 12px;
        padding: 0.5rem 0 1.5rem 0;
        transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
        will-change: transform;
    }

    /* Carte Mobile - largeur réduite pour laisser des marges visibles de chaque côté */
    .category-card {
        position: relative !important;
        flex: 0 0 calc(100vw - 2.5rem); /* laisse ~1.25rem de chaque côté */
        width: calc(100vw - 2.5rem);
        min-width: calc(100vw - 2.5rem);
        max-width: calc(100vw - 2.5rem);
        height: 150px;
        margin: 0;
        background: white;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        text-decoration: none;
    }

    .category-card-image {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: #f0f0f0 !important;
    }

    .category-card-image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        z-index: 0 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .category-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, 
            transparent 0%, 
            transparent 40%, 
            rgba(0, 0, 0, 0.5) 70%,
            rgba(0, 0, 0, 0.85) 100%);
        z-index: 1 !important;
        pointer-events: none;
    }

    .category-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: var(--accent);
        color: var(--secondary);
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 700;
        z-index: 2;
    }

    /* Contenu Mobile - en overlay */
    .category-card-content {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 1rem !important;
        z-index: 10 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* REMETTRE LE TITRE - Mobile */
    .category-card-title {
        display: block !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-shadow:
            -1px -1px 0 #000,
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000 !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }

    /* Masquer la description sur mobile */
    .category-card-description {
        display: none !important;
    }

    .category-card-stats {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        padding-top: 0 !important;
        border-top: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .category-stat {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        font-size: 0.9rem !important;
        color: white !important;
        font-weight: 600 !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .category-stat span {
        color: white !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .category-stat-icon {
        width: 18px !important;
        height: 18px !important;
        color: var(--accent) !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* AFFICHER les boutons de navigation sur mobile - STYLE MOBILE */
    /* Boutons de navigation Mobile - overlay sur les bords de la carte */
    .slider-nav-btn {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-70%);
        width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, 0.40) !important;
        border: none !important;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 20;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
        transition: background 0.2s ease !important;
    }

    .slider-nav-btn:active {
        transform: translateY(-70%) scale(0.88) !important;
        background: rgba(0, 78, 137, 0.85) !important;
    }

    .slider-nav-btn svg {
        width: 14px;
        height: 14px;
        color: white !important;
        stroke-width: 3;
    }

    .slider-nav-btn.prev { left: 4px; }
    .slider-nav-btn.next { right: 4px; }

    /* Dots Mobile - Plus visibles et tactiles */
    .slider-progress-dots {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 0.5rem;
        padding-bottom: 0.3rem;
    }

    .progress-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #d1d5db;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 6px;
        margin: -6px;
    }

    .progress-dot:active {
        background: #F7B801;
        transform: scale(1.2);
    }

    .progress-dot.active {
        background: #F7B801;
        width: 28px;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(247, 184, 1, 0.4);
    }

    /* CTA masqué sur mobile */
    .categories-cta {
        display: none !important;
    }
}

/* ========== DESKTOP (min-width: 769px) ========== */
@media (min-width: 769px) {
    .categories-slider-section {
        position: relative;
        width: 100%;
        background:
            linear-gradient(135deg, rgba(245, 241, 232, 0.72) 0%, rgba(237, 231, 217, 0.72) 30%, rgba(245, 241, 232, 0.72) 70%, rgba(237, 231, 217, 0.72) 100%),
            url('../images/slider.webp') center center / cover no-repeat;
        padding: 0.8rem 0;
        overflow: hidden;
        margin: 0;
    }

    .categories-slider-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .categories-slider-header {
        text-align: center;
        margin-bottom: 0.7rem;
        padding-bottom: 0.5rem;
        position: relative;
    }
    
    /* Soulignement élégant SOUS LE HEADER - Desktop */
    .categories-slider-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
        height: 3px;
        background: var(--accent);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(247, 184, 1, 0.3);
    }

    .categories-slider-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--secondary);
        margin-bottom: 0;
    }

    /* Wrapper - LARGEUR MAXIMALE jusqu'aux limites du body */
    .categories-slider-wrapper {
        position: relative;
        max-width: calc(100vw - 2rem);
        margin: 0 auto;
        padding: 0 60px;
        overflow: hidden;
    }

    /* Track - LARGEUR AUTO pour contenir toutes les cartes */
    .categories-slider-track {
        display: flex;
        gap: 15px;
        padding: 0.8rem 0;
        transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
        will-change: transform;
    }

    /* Carte - LARGEUR STRICTEMENT FIXE - COMPACTE */
    .category-card {
        position: relative !important;
        flex: 0 0 220px;
        width: 220px;
        min-width: 220px;
        max-width: 220px;
        height: 130px;
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        text-decoration: none;
    }

    .category-card:hover {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
    }

    .category-card-image {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: #f0f0f0 !important;
    }

    .category-card-image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        z-index: 0 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .category-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, 
            transparent 0%, 
            transparent 50%, 
            rgba(0, 0, 0, 0.5) 75%,
            rgba(0, 0, 0, 0.85) 100%);
        z-index: 1 !important;
        pointer-events: none;
    }

    .category-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: var(--accent);
        color: var(--secondary);
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        z-index: 2;
    }

    /* Contenu en overlay sur l'image - TOUJOURS VISIBLE */
    .category-card-content {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 1rem 1rem !important;
        z-index: 10 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* REMETTRE LE TITRE - Desktop */
    .category-card-title {
        display: block !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        text-shadow:
            -1px -1px 0 #000,
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000,
             0    0   4px rgba(0,0,0,0.5) !important;
        margin-bottom: 0.4rem !important;
        line-height: 1.3 !important;
        letter-spacing: 0.3px !important;
    }

    /* Masquer la description */
    .category-card-description {
        display: none !important;
    }

    .category-card-stats {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        padding-top: 0 !important;
        border-top: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .category-stat {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        font-size: 0.85rem !important;
        color: white !important;
        font-weight: 600 !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .category-stat span {
        color: white !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .category-stat-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--accent) !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ========================================
       BOUTONS DE NAVIGATION DESKTOP - STYLE TRANSPARENT
       ======================================== */
    .slider-nav-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 45px !important;
        height: 45px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 2px solid rgba(0, 78, 137, 0.2) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        z-index: 10 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .slider-nav-btn:hover {
        background: rgba(255, 255, 255, 1) !important;
        border-color: var(--primary) !important;
        transform: translateY(-50%) scale(1.1) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    }

    .slider-nav-btn:active {
        transform: translateY(-50%) scale(0.95) !important;
        background: var(--primary) !important;
    }

    .slider-nav-btn:active svg {
        color: white !important;
    }

    .slider-nav-btn svg {
        width: 20px !important;
        height: 20px !important;
        color: var(--primary) !important;
        transition: color 0.3s ease !important;
    }

    .slider-nav-btn:hover svg {
        color: var(--primary) !important;
    }

    .slider-nav-btn.prev { 
        left: 0 !important; 
    }
    
    .slider-nav-btn.next { 
        right: 0 !important; 
    }

    .slider-nav-btn:disabled {
        opacity: 0.3 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

    /* Dots */
    .slider-progress-dots {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 0.7rem;
    }

    .progress-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #d1d5db;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .progress-dot:hover {
        background: #F7B801;
        transform: scale(1.1);
    }

    .progress-dot.active {
        background: #F7B801;
        width: 30px;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(247, 184, 1, 0.4);
    }

    /* CTA masqué */
    .categories-cta {
        display: none !important;
    }
}