/**
 * ============================================================================
 * CAROUSEL CLIENT — Bande défilante de logos (styles)
 * ============================================================================
 *
 * Styles autonomes pour le carousel de logos clients piloté par
 * carousel-client.js.
 *
 *
 * ----------------------------------------------------------------------------
 * Réglages DES LOGOS
 * ----------------------------------------------------------------------------
 *
 *   Réglage via 3 variables — UN SEUL endroit selon le design utilisé :
 *     design A (section dédiée)
 *     design B (inline en colonne)
 *     surcharge mobile
 *
 *     --clc-logo-h      hauteur uniforme de tous les logos (pilote la bande)
 *     --clc-logo-min-w  évite les logos trop étroits
 *     --clc-logo-max-w  évite les logos trop larges
 *
 *   Règle de calcul pour les valeurs en dur :
 *     max-height = --clc-logo-h + 20px   (padding wrapper 10px × 2)
 *     height     = --clc-logo-h          (anti-FOUC image pré-init)
 *   Ces valeurs doivent être mises à jour partout si --clc-logo-h change.
 *
 *
 * @package Carousels
 * @version 1.4.0 (anti-FOUC mobile corrigé — max-height/height cohérents en responsive)
 * @author  fideip
 */

/* =============================================================================
   1. ITEMS LOGOS — hauteur fixe, largeur libre selon ratio  (cœur)
   -----------------------------------------------------------------------------
   NE PAS modifier les valeurs ici.
   Source unique de réglage : zone 2 (design A) et zone 10 (design B).
   ============================================================================= */
.et-db #page-container #et-boc .et-l .client-logo-item {
    flex: 0 0 auto;
    width: auto;
    height: var(--clc-logo-h);
    min-width: var(--clc-logo-min-w);
    max-width: var(--clc-logo-max-w);
    margin: inherit;
    transition: transform 0.25s ease, opacity 0.25s ease;
    will-change: transform;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Wrappers Divi internes : transmettent la hauteur, centrent l'image */
.et-db #page-container #et-boc .et-l .client-logo-item .et_pb_image_wrap,
.et-db #page-container #et-boc .et-l .client-logo-item picture,
.et-db #page-container #et-boc .et-l .client-logo-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* L'image prend toute la hauteur, largeur auto = ratio préservé */
.et-db #page-container #et-boc .et-l .client-logo-item img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain; 
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.et-db #page-container #et-boc .et-l .client-logo-item a {
    pointer-events: none;
}

/* =============================================================================
   2. CONTAINER SCROLLABLE + VARIABLES DESIGN A  (cœur)
   -----------------------------------------------------------------------------
   ┌─ RÉGLAGE LOGOS DESIGN A ────────────────────────────────────────────────┐
   │  Modifier UNIQUEMENT ces trois valeurs pour ajuster les logos.           │
   │  Après modification, mettre à jour les valeurs en dur en zones 7 et 8 : │
   │    max-height = --clc-logo-h + 20px                                      │
   │    height     = --clc-logo-h                                             │
   └─────────────────────────────────────────────────────────────────────────┘
   ============================================================================= */
.et-db #page-container #et-boc .et-l .client-logo-carousel-container {
    --clc-logo-h:     60px;
    --clc-logo-min-w: 80px;
    --clc-logo-max-w: 160px;

    overflow-x: scroll;
    overflow-y: hidden;
    cursor: grab;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;
    user-select: none;
}

.et-db #page-container #et-boc .et-l .client-logo-carousel-container::-webkit-scrollbar {
    display: none;
}

.et-db #page-container #et-boc .et-l .client-logo-carousel-container.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* =============================================================================
   3. WRAPPER FLEX  (cœur)
   ============================================================================= */
.et-db #page-container #et-boc .et-l .client-logo-carousel-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 2.5rem;
    padding: 10px 0;
    width: max-content;
    justify-content: flex-start;
    align-items: center;
}

/* =============================================================================
   4. ANTI-FOUC (container)  (cœur)
   ============================================================================= */
.et-db #page-container #et-boc .et-l .client-logo-carousel-container.carousel-not-ready {
    opacity: 0;
}

.et-db #page-container #et-boc .et-l .client-logo-carousel-container.carousel-not-ready .client-logo-item {
    transition: none;
}

/* =============================================================================
   5. MODE FIXE (« static »)  (cœur)
   -----------------------------------------------------------------------------
   Activé quand les logos tiennent dans la colonne (scrollWidth <= clientWidth).
   Pas de clone, pas de scroll : les logos sont centrés.
   ============================================================================= */
.et-db #page-container #et-boc .et-l .client-logo-carousel-container.is-static-mode {
    overflow: hidden;
    cursor: default;
}

.et-db #page-container #et-boc .et-l .client-logo-carousel-container.is-static-mode .client-logo-carousel-wrapper {
    width: 100%;
    justify-content: center;
}

/* =============================================================================
   6. MODE ANIMATION CSS  (.carousel-infinite + .carousel-autoplay — cœur)
   ============================================================================= */
@keyframes carousel-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.et-db #page-container #et-boc .et-l .client-logo-carousel-container.is-animation-mode {
    overflow: hidden;
    cursor: default;
}

.et-db #page-container #et-boc .et-l .client-logo-carousel-container.is-animation-mode.is-dragging {
    cursor: default;
}

.et-db #page-container #et-boc .et-l .client-logo-carousel-wrapper.is-auto-animating {
    animation: carousel-logos-scroll var(--carousel-anim-duration, 20s) linear infinite;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
}

.et-db #page-container #et-boc .et-l .client-logo-carousel-wrapper.is-auto-animating.animation-paused {
    animation-play-state: paused;
}

/* Pause hover — desktop uniquement */
@media (hover: hover) and (pointer: fine) {
    .et-db #page-container #et-boc .et-l .client-logo-carousel-container.is-animation-mode:hover
    .client-logo-carousel-wrapper.is-auto-animating:not(.animation-paused) {
        animation-play-state: paused;
    }
}

/* Hover scale — uniquement hors mode animation */
@media (hover: hover) and (pointer: fine) {
    .et-db #page-container #et-boc .et-l .carousel-client:not(.is-animation-mode) .client-logo-item:hover {
        transform: scale(1.05);
    }
}

/* =============================================================================
   7. COLONNE DES LOGOS + ANTI-FOUC PRÉ-INIT  (cœur — placements A et B)
   -----------------------------------------------------------------------------
   Placement A (row) : masque toute la colonne logos (que des images) jusqu'à
     l'init. overflow visible pour que le hover scale ne soit pas rogné.
   Placement B (colonne) : masque uniquement les .et_pb_image brutes (pas le
     texte ni les boutons autour).
   ============================================================================= */

/* — Placement A — */
.et-db #page-container #et-boc .et-l .carousel-client .et_pb_column:has(.client-logo-carousel-container) {
    overflow: visible;
}

.et-db #page-container #et-boc .et-l .carousel-client .et_pb_column:has(.et_pb_image):not(:has(.client-logo-carousel-container)) {
    display: flex;
    flex-wrap: nowrap;
    gap: 2.5rem;
    overflow: hidden;
    align-items: center;
    max-height: 80px; 
    opacity: 0;
}

.carousel-client .et_pb_column:has(.et_pb_image):not(:has(.client-logo-carousel-container)) {
    opacity: 0 !important;
}

.et-db #page-container #et-boc .et-l .carousel-client .et_pb_column:has(.et_pb_image):not(:has(.client-logo-carousel-container)) .et_pb_image {
    flex: 0 0 auto;
    height: 60px; 
    width: auto;
}

.et-db #page-container #et-boc .et-l .et_pb_column.carousel-client {
    overflow: visible;
}

.et-db #page-container #et-boc .et-l .et_pb_column.carousel-client .et_pb_image:not(.client-logo-item) {
    opacity: 0;
}

.et_pb_column.carousel-client .et_pb_image:not(.client-logo-item) {
    opacity: 0 !important;
}

/* =============================================================================
   8. DESIGN A — LAYOUT DE SECTION 
   ============================================================================= */
.et-db #page-container #et-boc .et-l .et_pb_section.section_client-carousel {
    padding: 0;
}

.et-db #et-boc .et-l .section_client-carousel .et_pb_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    max-height: 80px; 
}

.et-db #page-container #et-boc .et-l .section_client-carousel .et_pb_column:has(.et_pb_text_inner) {
    width: 30%;
}

.et-db #page-container #et-boc .et-l .carousel-client .et_pb_column:has(h2) {
    width: inherit !important;
    flex: 1;
}

.et-db #page-container #et-boc .et-l .carousel-client .et_pb_column:has(h2) h2 {
    margin-bottom: inherit;
}

.et-db #page-container #et-boc .et-l .section_client-carousel .et_pb_column:has(.client-logo-carousel-container) {
    flex: 2.5;
    overflow: visible;
}

.et-db #page-container #et-boc .et-l .section_client-carousel.slim .et_pb_column:has(h2) h2 {
    margin-bottom: inherit;
    font-weight: 400;
}

/* =============================================================================
   9. DESIGN A — VARIANTE .colonne (titre AU-DESSUS des logos — optionnel)
   ============================================================================= */
.et-db #page-container #et-boc .et-l .carousel-client.colonne {
    flex-direction: column;
}

.et-db #page-container #et-boc .et-l .carousel-client.colonne .et_pb_column:has(h2) {
    margin-right: 0;
    width: 100% !important;
}

.et-db #page-container #et-boc .et-l .carousel-client.colonne .et_pb_column:has(h2) h2 {
    margin-bottom: 2rem;
    width: fit-content;
}

.et-db #page-container #et-boc .et-l .carousel-client.colonne .et_pb_column:has(.client-logo-carousel-container) {
    width: 100%;
}

.et-db #et-boc .et-l .section_client-carousel .colonne.et_pb_row {
    max-height: initial;
    padding: 1rem 0 4.8rem 0;
}

/* =============================================================================
   10. DESIGN B — VARIANTE .inline (intégré dans une colonne, bande ~100px)
   -----------------------------------------------------------------------------
   ┌─ RÉGLAGE LOGOS DESIGN B ────────────────────────────────────────────────┐
   │  Modifier UNIQUEMENT ces trois valeurs pour ajuster les logos.           │
   │  Hauteur de bande = 1px + padding(20px) + --clc-logo-h + 20px + 1px    │
   │  → pour 100px de bande : --clc-logo-h: 58px                             │
   └─────────────────────────────────────────────────────────────────────────┘
   ============================================================================= */
.et-db #page-container #et-boc .et-l .carousel-client.inline .client-logo-carousel-container {
    --clc-logo-h:     58px;
    --clc-logo-min-w: 60px;
    --clc-logo-max-w: 130px;

    border-top: 1px solid #E4E8EC;
    border-bottom: 1px solid #E4E8EC;
    margin-top: 10px;
    margin-bottom: 5.82%;
}

.et-db #page-container #et-boc .et-l .carousel-client.inline .et_pb_module {
    margin-bottom: inherit;
}

.et-db #page-container #et-boc .et-l .carousel-client.inline .client-logo-carousel-wrapper {
    gap: 2.5rem;
    padding: 1.25rem 0; 
}

/* =============================================================================
   11. RESPONSIVE — surcharge variables + valeurs en dur anti-FOUC
   -----------------------------------------------------------------------------
   Règle : à chaque breakpoint où --clc-logo-h change, mettre à jour :
     - les variables (zones container)
     - les valeurs en dur anti-FOUC (max-height et height)
   Calcul : max-height = --clc-logo-h + 20px / height = --clc-logo-h
   ============================================================================= */
@media (max-width: 980px) {
    /* DESIGN A — layout de section */
    .et-db #page-container #et-boc .et-l .section_client-carousel .et_pb_column:has(.et_pb_text_inner) {
        width: 100% !important;
    }

    .et-db #et-boc .et-l .section_client-carousel .et_pb_row {
        max-height: inherit;
    }

    /* DESIGN A — variante .colonne */
    .et-db #page-container #et-boc .et-l .carousel-client.colonne .et_pb_column:has(h2) h2 {
        text-align: left;
        margin-bottom: 1rem;
    }
}

@media (max-width: 650px) {
    /* ── Variables logos mobile (design A) ── */        
    .et-db #page-container #et-boc .et-l .client-logo-carousel-container {
        --clc-logo-h:     80px;
        --clc-logo-min-w: 60px;
        --clc-logo-max-w: 120px;
    }

    .et-db #page-container #et-boc .et-l .client-logo-carousel-wrapper {
        gap: 1rem;
    }

    /* Anti-FOUC pré-init mobile — valeurs en dur alignées sur --clc-logo-h mobile */
    .et-db #page-container #et-boc .et-l .carousel-client .et_pb_column:has(.et_pb_image):not(:has(.client-logo-carousel-container)) {
        max-height: 100px; 
    }

    .et-db #page-container #et-boc .et-l .carousel-client .et_pb_column:has(.et_pb_image):not(:has(.client-logo-carousel-container)) .et_pb_image {
        height: 80px; /* = --clc-logo-h mobile */
    }

    /* Layout de section mobile (si .section_client-carousel utilisé) */
    .et-db #et-boc .et-l .section_client-carousel .et_pb_row {
        max-height: 100px; 
    }

    /* ── Variables logos mobile (design B .inline) ── */
    /* --clc-logo-h: 40px → bande = 1 + 20 + 40 + 20 + 1 = 82px          */
    .et-db #page-container #et-boc .et-l .carousel-client.inline .client-logo-carousel-container {
        --clc-logo-h:     40px;
        --clc-logo-min-w: 55px;
        --clc-logo-max-w: 110px;
    }

    .et-db #page-container #et-boc .et-l .carousel-client.inline .client-logo-carousel-wrapper {
        gap: 1.25rem;
    }

    .et-db #page-container #et-boc .et_pb_section.section_client-carousel .et_pb_column:has(h2) {
        margin-bottom: 0;
    }
}

@media (max-width: 550px) {
    /* DESIGN A — variante .colonne */
    .et-db #et-boc .et-l .section_client-carousel .colonne.et_pb_row {
        padding: 1rem 0;
    }
}