Elementor editor not reflecting custom widget styles

Question

I've developed a custom carousel widget for Elementor using the Slick slider. On the website's front end, everything looks and works as expected; the styling of the carousel is precisely how I want it. However, I'm encountering an issue when viewing and editing this widget within the Elementor editor. The styles applied to the front end are not reflected in the Elementor editor. This isn't very clear from a design consistency standpoint and limits the user's ability to see their modifications in real-time as they insert content into the widget's input fields.

linked-carouselle.php:

function linked_carouselle_widget($widget_manager) {
    require_once(__DIR__ . '/widgets/carouselle-widget.php');
    $widget_manager->register(new \Elementor_Linked_Carouselle());
}
add_action('elementor/widgets/register', 'linked_carouselle_widget');


function enqueue_carouselle_widget_resources() {
    // // Enqueue custom CSS
    wp_enqueue_style('carouselle-widget-style', plugin_dir_url(__FILE__) . 'widgets/carouselle.css');
    
    // Enqueue Slick Js & CSS
    wp_enqueue_script('slick-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js', ['jquery'], '1.8.1', true);
    wp_enqueue_style('slick-carousel-style', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css');

    // // Enqueue custom JS
    wp_enqueue_script('carouselle-widget-script', plugin_dir_url(__FILE__) . 'widgets/carouselle.js', ['jquery', 'slick-carousel'], null, true); 

}
add_action('wp_enqueue_scripts', 'enqueue_carouselle_widget_resources');

// Custom editor style
function enqueue_carouselle_widget_editor_styles() {

    wp_enqueue_style('carouselle-widget-editor-style', plugin_dir_url(__FILE__) . 'widgets/carouselle.css');

}
add_action('elementor/editor/before_enqueue_scripts', 'enqueue_carouselle_widget_editor_styles');

// // Custom editor script
function enqueue_carouselle_widget_editor_scripts() {

    wp_enqueue_script('carouselle-widget-editor-script', plugin_dir_url(__FILE__) . 'widgets/carouselle.js', ['jquery'], null, true);
   
}
add_action('elementor/editor/after_enqueue_scripts', 'enqueue_carouselle_widget_editor_scripts');

widgets\carouselle-widget.php:

<?php

class Elementor_Linked_Carouselle extends \Elementor\Widget_Base {

    public function __construct($data = [], $args = null) {
        parent::__construct($data, $args);
    }


    public function get_name() {
        return 'linked_carouselle_widget';
    }

    public function get_title() {
        return esc_html__( 'Linked Carouselle', 'elementor-addon' );
    }

    public function get_icon() {
        return 'eicon-slider-3d';
    }

    public function get_categories() {
        return [ 'basic' ];
    }

    public function get_keywords() {
        return [ 'costum', 'linked', 'carouselle' ];
    }

    protected function _register_controls() {

        $this->start_controls_section (
            'content_section',
            [
                'label' => esc_html__( 'Content', 'elementor-addon'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new \Elementor\Repeater();

        // Controle pour le champs 'Logo'
        $repeater->add_control (
            'logo', [
                'label' => esc_html__('Choisir logo', 'elementor-addon'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control (
            'link', [
                'label' => esc_html__('Insérer l\'url', 'elementor-addon'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('', 'elementor-addon'),
                'label_block' => true,
            ]
        );

        $this->add_control(
            'slide_duration', [
                'label' => esc_html__('Slide Duration (seconds)', 'elementor-addon'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 10000, 
                'description' => esc_html__('Durée de chaque diapositive en millisecondes.', 'elementor-addon'),
            ]
        );

       

        $this->add_control(
            'list',
            [
                'label' => esc_html__( 'Logo List', 'elementor-addon' ),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'title_field' => '{{{ name }}}',
            ]
        );

        $this->add_control(
            'slides_to_show',
            [
                'label' => esc_html__('Diapositives à afficher', 'elementor-addon'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => [
                    '5' => '5',
                    '6' => '6',
                    '7' => '7',
                    '8' => '8',
                    '9' => '9',
                    '10' => '10',
                ],
                'default' => '5',
                'description' => esc_html__('Select the number of slides to display at once.', 'elementor-addon'),
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $slide_duration = $settings['slide_duration'];
    
        if (!empty($settings['list'])) {
            echo '<div class="my-custom-carousel-wrapper" data-slide-duration="' . esc_attr($slide_duration) . '">';
            echo '<div class="my-custom-carousel">';
    
            foreach ($settings['list'] as $item) {
                $logoUrl = $item['logo']['url'];
                $link = $item['link'];
                echo "<div class='my-carousel-slide'>";
                if (!empty($link)) {
                    echo "<a href='{$link}' target='_blank'>"; // Open in new tab
                }
                echo "<img src='{$logoUrl}' alt='carousel image'>";
                if (!empty($link)) {
                    echo "</a>";
                }
                echo "</div>";
            }
    
            echo '</div>'; // custom-carousel
            echo '</div>'; // carousel-wrapper
        }
    }
}