@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');

/* ============================================================
   Featured Carousel Widget
   ============================================================ */

.elementor-widget-featured_carousel .featured-carousel {
    display: flex;
    width: 100%;
}

/* ---- Image Area (left column, desktop only) ---- */

.elementor-widget-featured_carousel .fc-image-area {
    position: relative;
    width: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

/* Ratio 1:1 par défaut – surchargé via control Elementor */
.elementor-widget-featured_carousel .fc-image-area::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.elementor-widget-featured_carousel .fc-image-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: block;
}

.elementor-widget-featured_carousel .fc-image-slide.active {
    opacity: 1;
    z-index: 1;
}

.elementor-widget-featured_carousel .fc-image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Navigation (right column) ---- */

.elementor-widget-featured_carousel .fc-nav {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 3rem;
    gap: 0.25rem;
}

/* ---- Nav item ---- */

.elementor-widget-featured_carousel .fc-nav-item {
    cursor: pointer;
    padding-left: 0;
    transition: padding 0.6s cubic-bezier(.4, .9, .3, 1);
}

@media (min-width: 48rem) {
    .elementor-widget-featured_carousel .fc-nav-item.active,
    .elementor-widget-featured_carousel .fc-nav-item:hover {
        padding-left: 1rem;
    }
}

.elementor-widget-featured_carousel .fc-nav-item-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---- Arrow (desktop only, visible uniquement sur l'item actif/hover) ---- */

.elementor-widget-featured_carousel .fc-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #000;
    transition: color 0.3s ease, opacity 0.3s ease;
    opacity: 0; /* caché par défaut */
}

.elementor-widget-featured_carousel .fc-arrow svg {
    width: 20px;  /* valeur par défaut, surchargée par le control Elementor */
    height: 20px;
    display: block;
}

/* Flèche visible sur item actif ou hover */
.elementor-widget-featured_carousel .fc-nav-item.active .fc-arrow,
.elementor-widget-featured_carousel .fc-nav-item:hover .fc-arrow {
    opacity: 1;
}

/* ---- Nav Text (stroke effect) ---- */

.elementor-widget-featured_carousel .fc-nav-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    text-decoration: none;
    /* Le stroke dessine moitié dedans / moitié dehors.
       Le ::after recouvre l'intérieur avec la couleur de fond → contour propre. */
    color: transparent;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: #000;
    display: inline-block;
    position: relative;
}

/* ::after : recouvre l'intérieur du stroke avec la couleur de fond */
.elementor-widget-featured_carousel .fc-nav-text::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    color: #fff;                /* couleur de fond — à ajuster via le control Elementor */
    -webkit-text-stroke: 0;
    font: inherit;
    text-transform: inherit;
    white-space: nowrap;
    pointer-events: none;      /* le ::after ne capte pas les clics → le lien parent reste cliquable */
    transition: color 0.3s ease;
}

/* Active & hover : ::after prend la couleur de la charte */
.elementor-widget-featured_carousel .fc-nav-item.active .fc-nav-text::after,
.elementor-widget-featured_carousel .fc-nav-item:hover .fc-nav-text::after {
    color: var(--fc-brand-color, #0033CC);
}

/* Le stroke actif/hover change aussi */
.elementor-widget-featured_carousel .fc-nav-item.active .fc-nav-text,
.elementor-widget-featured_carousel .fc-nav-item:hover .fc-nav-text {
    -webkit-text-stroke-color: var(--fc-brand-color, #0033CC);
}

.elementor-widget-featured_carousel .fc-nav-item.active .fc-arrow {
    color: var(--fc-brand-color, #0033CC);
    opacity: 1;
}

.elementor-widget-featured_carousel .fc-nav-item:hover .fc-arrow {
    color: var(--fc-brand-color, #0033CC);
    opacity: 1;
}

/* ---- Grille mobile (cachée sur desktop) ---- */

.elementor-widget-featured_carousel .fc-mobile-grid {
    display: none;
}

/* ============================================================
   Mobile (≤ 767px) – grille 2 colonnes style Converse
   ============================================================ */

@media (max-width: 767px) {

    /* Cache le carousel desktop */
    .elementor-widget-featured_carousel .featured-carousel {
        display: none;
    }

    /* Affiche la grille mobile */
    .elementor-widget-featured_carousel .fc-mobile-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    /* Tile */
    .elementor-widget-featured_carousel .fc-mobile-tile {
        overflow: hidden;
    }

    .elementor-widget-featured_carousel .fc-mobile-tile a {
        display: flex;
        flex-direction: column;
        gap: 0; /* surchargé par le control Elementor */
        text-decoration: none;
    }

    /* Label fond blanc au-dessus de l'image (flux normal) */
    .elementor-widget-featured_carousel .fc-mobile-tile-label {
        background: #fff;
        padding: 0.5rem 0.6rem;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
        color: #000;
        line-height: 1.2;
        flex-shrink: 0;
    }

    /* Image */
    .elementor-widget-featured_carousel .fc-mobile-tile-img {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        flex: 1;
    }

    .elementor-widget-featured_carousel .fc-mobile-tile-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}