/**
 * ============================================================================
 * CAROUSEL CLIENT — Bande défilante de logos (styles)
 * ============================================================================
 *
 * Styles autonomes pour le carousel de logos clients piloté par
 * carousel-client.js.
 *
 * Les sélecteurs conservent le préfixe Divi `.et-db #page-container #et-boc
 * .et-l` pour gagner en spécificité et passer devant les styles par défaut du
 * thème Divi.
 *
 * ----------------------------------------------------------------------------
 * NORMALISATION DES LOGOS — meilleure pratique
 * ----------------------------------------------------------------------------
 *   On fixe la HAUTEUR, on laisse la LARGEUR s'adapter au ratio natif du logo.
 *   C'est la bonne pratique pour une bande de logos hétérogènes : l'œil aligne
 *   sur la hauteur, pas sur la largeur. Un logo large (Hutchinson) occupera
 *   plus d'espace horizontal qu'un logo carré (Ariane Group), c'est attendu.
 *
 *   Réglage via 3 variables sur le container (zones 2 et 10) :
 *     --clc-logo-h      hauteur des logos              → pilote la bande
 *     --clc-logo-min-w  largeur minimum (évite trop étroit)
 *     --clc-logo-max-w  largeur maximum (évite trop large)
 *
 *   Recommandations :
 *     • Logos PNG/JPG  : --clc-logo-h entre 40px et 60px (lisibilité)
 *     • Logos SVG      : peut descendre à 32px (vectoriel, net à toute taille)
 *     • Pour viser 100px de bande .inline :
 *         1px + padding(20px) + --clc-logo-h + padding(20px) + 1px = 100px
 *         → --clc-logo-h: 58px
 *
 * ----------------------------------------------------------------------------
 * ORGANISATION DU FICHIER
 * ----------------------------------------------------------------------------
 *    1. Items logos (hauteur fixe + ratio libre)       (cœur)
 *    2. Container scrollable + variables                (cœur)
 *    3. Wrapper flex                                    (cœur)
 *    4. Anti-FOUC (container)                           (cœur)
 *    5. Mode fixe (« static »)                         (cœur)
 *    6. Mode animation CSS                              (cœur)
 *    7. Colonne + anti-FOUC pré-init                    (cœur — placements A et B)
 *    8. DESIGN A — Layout de section                    (optionnel, à adapter)
 *    9. DESIGN A — Variante .colonne                    (optionnel)
 *   10. DESIGN B — Variante .inline (~100px)            (intégré en colonne)
 *   11. Responsive                                      (cœur + designs)
 *
 * @package Carousels
 * @version 1.2.0 (hauteur fixe / largeur auto — meilleure pratique logo)
 * @author  Antoine
 */

/* =============================================================================
   1. ITEMS LOGOS — hauteur fixe, largeur libre selon ratio  (cœur)
   -----------------------------------------------------------------------------
   L'item a une hauteur fixe (--clc-logo-h) et une largeur auto bornée par
   min/max-width. L'image prend toute la hauteur et sa largeur naturelle → le
   ratio est préservé sans object-fit ni distorsion.
   Les wrappers Divi internes (.et_pb_image_wrap, picture, a) sont mis en flex
   pour centrer l'image et transmettre les contraintes de hauteur.
   ============================================================================= */
.et-db #page-container #et-boc .et-l .client-logo-item {
    flex: 0 0 auto;
    width: auto;
    height: var(--clc-logo-h, 45px);
    min-width: var(--clc-logo-min-w, 80px);
    max-width: var(--clc-logo-max-w, 160px);
    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; /* filet de sécurité */
    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  (cœur)
   -----------------------------------------------------------------------------
   Les variables sont déclarées ici et héritées par les items.
   Pour ajuster les logos, ne modifier QUE ces variables :
     --clc-logo-h      hauteur uniforme de tous les logos (pilote la bande)
     --clc-logo-min-w  plancher de largeur (évite les logos trop étroits)
     --clc-logo-max-w  plafond de largeur  (évite les logos trop larges)
   ============================================================================= */
.et-db #page-container #et-boc .et-l .client-logo-carousel-container {
    /* ── Réglage logos design A ── modifier uniquement ces valeurs ── */
    --clc-logo-h:     45px;
    --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: 5rem;
    padding: 10px 0;
    width: max-content;
    justify-content: flex-start;
    align-items: center;
}

/* =============================================================================
   4. ANTI-FOUC (container)  (cœur)
   -----------------------------------------------------------------------------
   .carousel-not-ready masque le container jusqu'à ce que le JS ait terminé
   son init (layout stable). Retiré par le JS dans tous les modes.
   Les transitions sont coupées le temps de l'init pour éviter les animations
   parasites à l'apparition.
   ============================================================================= */
.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 translateX(0 → -50%) sur le wrapper (2 copies = boucle parfaite).
   Durée calculée en JS depuis la largeur réelle du set et injectée via
   --carousel-anim-duration. Pause hover en CSS pur ; pause programmatique
   via .animation-paused (onglet masqué, drag).
   ============================================================================= */
@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: 30px;
    overflow: hidden;
    align-items: center;
    max-height: 80px; /* ≥ --clc-logo-h + padding wrapper */
    opacity: 0;
}

/* Safety net anti-FOUC placement A */
.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: 45px; /* = --clc-logo-h par défaut */
    width: auto;
}

/* — Placement B — */
.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;
}

/* Safety net anti-FOUC placement B */
.et_pb_column.carousel-client .et_pb_image:not(.client-logo-item) {
    opacity: 0 !important;
}

/* =============================================================================
   8. DESIGN A — LAYOUT DE SECTION (optionnel, à adapter)
   -----------------------------------------------------------------------------
   À n'utiliser QUE si .section_client-carousel est posé sur la section.
   ============================================================================= */
.et-db #page-container #et-boc .et-l .et_pb_section.section_client-carousel {
    padding: 4.31rem 0;
    background: #F4F4F6;
    margin-bottom: 0;
}

.et-db #page-container #et-boc .et-l .et_pb_section:has(.carousel-client.colonne) .et_pb_column:not(.titre){
    padding: 3rem 0 0 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; /* ≥ --clc-logo-h + padding wrapper */
}

.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;
    margin-bottom: 0;
}

.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 des logos : modifier uniquement --clc-logo-h ici.
   Hauteur de bande = 1px + padding(20px) + --clc-logo-h + padding(20px) + 1px
   → pour 100px : --clc-logo-h: 58px.
   ============================================================================= */
.et-db #page-container #et-boc .et-l .carousel-client.inline .client-logo-carousel-container {
    /* ── Réglage logos design B ── modifier uniquement ces valeurs ── */
    --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; /* 20px haut/bas → bande = 1 + 20 + 58 + 20 + 1 = 100px */
}

/* =============================================================================
   11. DESIGN C adapté a l'ancienne secton carousel client en page d'accuei - .et_pb_section.ep_clients.slim.bg-dark
   ============================================================================= */
.et-db #page-container #et-boc .et_pb_section.ep_clients.slim[class*="bg-"]:has(.carousel-client){
    display: flex;
    align-items: center;
}

/* =============================================================================
   12. RESPONSIVE
   -----------------------------------------------------------------------------
   On ne surcharge QUE les variables — rien d'autre à toucher.
   L'override .inline est répété ici pour sa spécificité supérieure.
   ============================================================================= */
@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) {
    /* Cœur — logos plus compacts sur mobile */
    .et-db #page-container #et-boc .et-l .client-logo-carousel-container {
        --clc-logo-h:     36px;
        --clc-logo-min-w: 60px;
        --clc-logo-max-w: 120px;
    }

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

    /* DESIGN B — .inline mobile */
    .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;
    }

    /* DESIGN A — layout de section */
    .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;
    }
}