/**
 * WP Image Ticker Styles
 */

/* * 1. Wrapper : Cache le débordement et définit la hauteur.
 * Utilise des variables CSS pour la hauteur et l'espacement,
 * définies en ligne par le shortcode PHP.
 */
.wpit-ticker-wrap {
    width: 100%;
    overflow: hidden; /* C'est la magie : cache tout ce qui dépasse */
    position: relative;
    /* Utilise la variable CSS --wpit-img-height (définie par PHP) */
    height: var(--wpit-img-height, 60px); /* Hauteur par défaut si la variable échoue */
    padding: 10px 0;
    box-sizing: content-box;
    /* AJOUT : Couleur de fond avec fallback transparent */
    background-color: var(--wpit-bg-color, transparent);
}

/* * 2. Track : Contient tous les logos.
 * Utilise flex pour aligner les éléments horizontalement.
 * La transformation (transform) sera appliquée par JavaScript.
 */
.wpit-ticker-track {
    display: flex;
    align-items: center; /* Centre verticalement les items */
    position: absolute;
    left: 0;
    
    /* MODIFICATION : Centrage vertical robuste */
    /* Assure que la piste prend toute la hauteur du wrapper */
    top: 0;
    bottom: 0;
    /* Remplacé : 
       top: 50%;
       transform: translateY(-50%); 
    */
    
    will-change: transform; /* Indication de performance pour le navigateur */
}

/* * 3. Item : Chaque logo individuel.
 */
.wpit-ticker-item {
    flex-shrink: 0; /* Empêche les images de se réduire */
    /* Utilise la variable CSS --wpit-img-spacing (définie par PHP) */
    padding: 0 var(--wpit-img-spacing, 40px); /* Espacement entre les images */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* * 4. Image : L'image du logo elle-même.
 */
.wpit-ticker-item img {
    /* Utilise la variable CSS --wpit-img-height (définie par PHP) */
    max-height: var(--wpit-img-height, 60px);
    width: auto;
    display: block;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Effet au survol d'un item (optionnel) */
.wpit-ticker-item:hover img {
    opacity: 1;
}

/* * 5. Responsive : Mobile
 * Utilise les variables --wpit-img-height-mobile et --wpit-img-spacing-mobile
 * sur les écrans de 768px ou moins.
 */
@media (max-width: 768px) {
    .wpit-ticker-wrap {
        /* Utilise la variable mobile, avec fallback si non définie */
        height: var(--wpit-img-height-mobile, 40px);
        padding: 5px 0; /* Réduire le padding vertical */
    }

    .wpit-ticker-item {
        /* Utilise la variable mobile, avec fallback si non définie */
        padding: 0 var(--wpit-img-spacing-mobile, 20px);
    }

    .wpit-ticker-item img {
        /* Utilise la variable mobile, avec fallback si non définie */
        max-height: var(--wpit-img-height-mobile, 40px);
    }
}