/*
 * GDM — Slider "Univers de danse"
 *
 * Slider plein largeur avec peek (~80% slide visible, 10% peek de chaque côté).
 * Boucle infinie via clones first/last. Autoplay paramétrable (data-config).
 *
 * Design transposé du mockup HTML validé en session 2.
 * Variables CSS héritées de gdm-base.css (--gdm-primary, etc.).
 *
 * @since 2.22.0
 */

.gdm-universes {
    --gdm-univ-slide-width: 80%;
    --gdm-univ-gap: 24px;
    --gdm-univ-radius: 28px;
    --gdm-univ-overflow-top: 70px;
    --gdm-univ-figure-overflow: 113%;
    --gdm-univ-transition: 700ms cubic-bezier(0.4, 0, 0.2, 1);
    --gdm-univ-cta-bg: var(--gdm-primary, #FF385C);
    --gdm-univ-cta-bg-hover: #e02a4a;
    --gdm-univ-dot-active-bg: #1a1a1a;
    --gdm-univ-dot-color: #555;

    position: relative;
    width: 100%;
    padding-top: var(--gdm-univ-overflow-top);
    box-sizing: border-box;
}

.gdm-universes *,
.gdm-universes *::before,
.gdm-universes *::after {
    box-sizing: border-box;
}

/* Viewport — clip horizontal, overflow vertical visible pour figure */
.gdm-universes__viewport {
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
}

/* Track — flex row qui translate */
.gdm-universes__track {
    display: flex;
    gap: var(--gdm-univ-gap);
    transition: transform var(--gdm-univ-transition);
    will-change: transform;
}

.gdm-universes__track.is-no-transition {
    transition: none;
}

/* Slide */
.gdm-universes__slide {
    flex: 0 0 var(--gdm-univ-slide-width);
    position: relative;
    margin: 0;
    padding: 0;
    transition: opacity 400ms ease;
    cursor: pointer;
}

.gdm-universes__slide:not(.is-active) {
    opacity: 0.55;
}

.gdm-universes__slide.is-active {
    /* Curseur conserve pointer pour signaler clickable vers page univers */
    cursor: pointer;
}

.gdm-universes__slide.is-active:hover .gdm-universes__rect {
    transform: translateY(-2px);
}

/* Rect — la zone colorée avec coins arrondis */
.gdm-universes__rect {
    aspect-ratio: 2 / 1;
    border-radius: var(--gdm-univ-radius);
    overflow: hidden;
    position: relative;
    width: 100%;
    transition: transform 200ms ease;
}

/* Images */
.gdm-universes__fond,
.gdm-universes__titre {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.gdm-universes__fond {
    z-index: 1;
}

.gdm-universes__titre {
    z-index: 3;
}

/* Fallback texte (si pas d'image titre uploadée) */
.gdm-universes__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-family: var(--gdm-font-family-body, system-ui, -apple-system, sans-serif);
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 700;
    text-align: center;
    padding: 0 5%;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
    pointer-events: none;
    user-select: none;
}

/* Slogan — sous le titre, optionnel */
.gdm-universes__slogan {
    position: absolute;
    bottom: 28%;
    left: 8%;
    z-index: 3;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    font-style: italic;
    opacity: 0.9;
    max-width: 50%;
    pointer-events: none;
}

/* Figure — danseur détouré qui déborde au-dessus du rect */
.gdm-universes__figure {
    position: absolute;
    bottom: 0;
    right: 0;
    height: var(--gdm-univ-figure-overflow);
    width: auto;
    z-index: 5;
    pointer-events: none;
    user-select: none;
}

/* CTAs */
.gdm-universes__ctas {
    position: absolute;
    bottom: 9%;
    left: 8%;
    display: flex;
    gap: 12px;
    z-index: 4;
    flex-wrap: wrap;
}

.gdm-universes__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 20px;
    background: var(--gdm-univ-cta-bg);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
    white-space: nowrap;
    line-height: 1;
}

.gdm-universes__slide:not(.is-active) .gdm-universes__cta {
    pointer-events: none;
}

.gdm-universes__slide.is-active .gdm-universes__cta:hover {
    background: var(--gdm-univ-cta-bg-hover);
    transform: translateY(-1px);
    color: #fff;
}

.gdm-universes__cta-arrow {
    display: inline-block;
    transition: transform 200ms ease;
}

.gdm-universes__slide.is-active .gdm-universes__cta:hover .gdm-universes__cta-arrow {
    transform: translateX(2px);
}

/* Navigation arrows */
.gdm-universes__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 200ms ease, transform 200ms ease;
    color: #1a1a1a;
    padding: 0;
}

.gdm-universes__nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}

.gdm-universes__nav:focus-visible {
    outline: 2px solid var(--gdm-primary, #FF385C);
    outline-offset: 2px;
}

.gdm-universes__nav--prev {
    left: 2%;
}

.gdm-universes__nav--next {
    right: 2%;
}

.gdm-universes__nav svg {
    width: 20px;
    height: 20px;
}

/* Dots — boutons nommés sous le slider */
.gdm-universes__dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 2.5rem;
    flex-wrap: wrap;
    padding: 0 1rem;
}

.gdm-universes__dot {
    border: 1px solid var(--gdm-univ-dot-active-bg);
    background: #fff;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gdm-univ-dot-active-bg);
    cursor: pointer;
    transition: all 200ms ease;
    font-family: inherit;
    line-height: 1;
}

.gdm-universes__dot:hover {
    border-color:var(--gdm-univ-dot-active-bg);
    color: #fff;
    background: var(--gdm-univ-dot-active-bg);
}

.gdm-universes__dot.is-active {
    background: var(--gdm-univ-dot-active-bg);
    color: #fff;
    border-color: var(--gdm-univ-dot-active-bg);
    font-weight: 500;
}

.gdm-universes__dot:focus-visible {
    outline: 2px solid var(--gdm-primary, #FF385C);
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 900px) {
    .gdm-universes {
        --gdm-univ-slide-width: 86%;
        --gdm-univ-gap: 16px;
        --gdm-univ-radius: 20px;
        --gdm-univ-overflow-top: 50px;
    }

    .gdm-universes__nav {
        width: 40px;
        height: 40px;
    }

    .gdm-universes__dot {
        font-size: 12px;
        padding: 6px 12px;
    }
}

@media (max-width: 600px) {
    .gdm-universes {
        --gdm-univ-slide-width: 92%;
        --gdm-univ-overflow-top: 40px;
    }

    .gdm-universes__nav {
        display: none;
    }

    .gdm-universes__cta {
        padding: 8px 14px;
        font-size: 12px;
    }

    .gdm-universes__ctas {
        bottom: 7%;
        gap: 6px;
    }

    .gdm-universes__dots {
        margin-top: 1.5rem;
        gap: 6px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gdm-universes__track,
    .gdm-universes__rect,
    .gdm-universes__cta,
    .gdm-universes__cta-arrow,
    .gdm-universes__nav,
    .gdm-universes__dot {
        transition: none;
    }
}