/* ============================================================
   INDEX.HTML - CORRECTIONS MOBILE & TABLETTE
   ============================================================ */

/* ============================================================
   1. CARROUSEL - "Assistance Administrative" sur une ligne
   ============================================================ */

@media (max-width: 1024px) {
    /* Forcer le titre "Assistance Administrative" sur une seule ligne en mobile/tablette */
    .slide-content h2 {
        white-space: nowrap; /* Empêche le retour à la ligne */
        overflow: hidden;
        text-overflow: ellipsis; /* Ajoute "..." si trop long (optionnel) */
    }

    /* Alternative : réduire la taille de police si nécessaire */
    .slider-container .slide:first-child .slide-content h2 {
        font-size: clamp(1.5rem, 4vw, 2.5rem); /* Taille adaptative */
    }
}

/* Version tablette uniquement */
@media (min-width: 768px) and (max-width: 1024px) {
    .slide-content h2 {
        white-space: normal; /* Autoriser retour ligne sur tablette si besoin */
        font-size: 2.2rem;
    }
}

/* Version mobile strict */
@media (max-width: 767px) {
    .slide-content h2 {
        white-space: nowrap !important;
        font-size: 1.8rem;
    }
}

/* ============================================================
   2. SECTIONS SERVICES & CLIENTS - Icônes alignées avec H3
   ============================================================ */

@media (max-width: 1024px) {

    /* SECTION SERVICES */
    .services-section .service-card {
        display: flex;
        flex-direction: column;
    }

    /* Container pour icône + titre */
    .services-section .service-card .service-icon,
    .services-section .service-card h3 {
        display: inline-block;
        vertical-align: middle;
    }

    /* Créer un wrapper virtuel avec flexbox */
    .services-section .service-card {
        position: relative;
    }

    .services-section .service-card .service-icon {
        float: left;
        margin-right: 15px;
        margin-top: 5px; /* Ajustement vertical */
    }

    .services-section .service-card h3 {
        display: inline-block;
        margin-top: 0;
        line-height: 1.3;
        padding-top: 8px; /* Alignement avec l'icône */
    }

    /* Forcer le clear après le titre pour que le paragraphe passe en dessous */
    .services-section .service-card h3::after {
        content: "";
        display: block;
        clear: both;
    }

    /* SECTION CLIENTS */
    .clients-section .client-content {
        position: relative;
    }

    .clients-section .client-content .client-icon {
        float: left;
        margin-right: 15px;
        margin-top: 5px;
    }

    .clients-section .client-content h3 {
        display: inline-block;
        margin-top: 0;
        line-height: 1.3;
        padding-top: 8px;
    }

    .clients-section .client-content h3::after {
        content: "";
        display: block;
        clear: both;
    }
}

/* ============================================================
   3. PARTENAIRES - Défilement Infini (Toutes versions)
   ============================================================ */

/* Animation de défilement continu de droite à gauche */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Défile de 50% car on duplique les logos */
    }
}

/* Container du slider */
.logos-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    background: #fff;
    padding: 40px 0;
}

/* Track qui contient les logos */
.logos-slide-track {
    display: flex;
    gap: 60px; /* Espacement entre les logos */
    animation: scroll-left 20s linear infinite; /* 20 secondes pour un tour complet */
    width: fit-content;
}

/* Pause au hover (optionnel) */
.logos-slider:hover .logos-slide-track {
    animation-play-state: paused;
}

/* Items individuels */
.logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 80px;
}

.logo-item img {
    max-width: 150px;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .logos-slide-track {
        gap: 40px;
        animation-duration: 15s; /* Plus rapide sur mobile */
    }

    .logo-item {
        min-width: 120px;
        height: 60px;
    }

    .logo-item img {
        max-width: 120px;
        max-height: 60px;
    }
}

/* Responsive pour tablette */
@media (min-width: 769px) and (max-width: 1024px) {
    .logos-slide-track {
        gap: 50px;
        animation-duration: 18s;
    }

    .logo-item {
        min-width: 140px;
        height: 70px;
    }

    .logo-item img {
        max-width: 140px;
        max-height: 70px;
    }
}

/* ============================================================
   CORRECTIONS SUPPLÉMENTAIRES
   ============================================================ */

@media (max-width: 1024px) {
    /* S'assurer que le contenu après icône+titre commence bien en dessous */
    .services-section .service-card p,
    .services-section .service-card ul,
    .services-section .service-card .service-link {
        clear: both;
        margin-top: 15px;
    }

    .clients-section .client-content p,
    .clients-section .client-content ul {
        clear: both;
        margin-top: 15px;
    }
}