/*
 * Stunning Carousel — Layout : accordion-light
 * Variante éditoriale premium. Styles strictement scopés sous
 * .sc-layout-accordion-light.
 *
 * Notes 0.5.0 :
 *  - Mêmes principes que accordion-dark concernant les vars de scale et
 *    les options ignored. Cf. en-tête de accordion-dark.css pour le détail.
 *  - Le badge porte un préfixe `// ` au CSS de base (style éditorial natif).
 *    Le modifier `sc-badge-style--outline` doit retirer ce préfixe.
 */

.sc-layout-accordion-light {
    --sc-gold: #C8A84B;
    --sc-ink: #0D0D0D;
    --sc-text-light: #F5F0E8;

    width: 100%;
    color: var(--sc-text-light);
    font-family: inherit;
    box-sizing: border-box;
    padding: var(--sc-wrapper-padding, 0);
}
.sc-layout-accordion-light *,
.sc-layout-accordion-light *::before,
.sc-layout-accordion-light *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------
 * Desktop — track horizontal
 * -------------------------------------------------------------- */
.sc-layout-accordion-light .sc-track {
    display: flex;
    width: 100%;
    height: 560px;
    overflow: hidden;
    border-bottom: 1px solid rgba(13, 13, 13, 0.1);
}

.sc-layout-accordion-light .sc-card {
    position: relative;
    flex: 0 0 72px;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    background: var(--sc-ink);
    transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-layout-accordion-light .sc-card.is-active {
    flex: 1 1 auto;
}
.sc-layout-accordion-light .sc-card:focus-visible {
    box-shadow: inset 0 0 0 2px var(--sc-gold);
}

/* Image de fond — rendu éditorial : légère saturation, contraste renforcé */
.sc-layout-accordion-light .sc-card__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.82) contrast(1.02) saturate(1.1);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.55s ease;
    will-change: transform;
}
.sc-layout-accordion-light .sc-card.is-active .sc-card__bg {
    transform: scale(1.04);
}

/* Voile très léger sur les cards inactives — image mise en avant */
.sc-layout-accordion-light .sc-card__shade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to top,
        rgba(13, 13, 13, 0.45) 0%,
        rgba(13, 13, 13, 0.15) 50%,
        transparent 100%
    );
    pointer-events: none;
    transition: background 0.35s ease;
}
/* La card active n'a plus de voile : le panneau blanc prend le relais */
.sc-layout-accordion-light .sc-card.is-active .sc-card__shade {
    background: transparent;
}

/* Libellé vertical (visible uniquement quand la card est inactive) */
.sc-layout-accordion-light .sc-card__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    white-space: nowrap;
    color: rgba(245, 240, 232, 0.9);
    font-size: calc(10px * var(--sc-text-scale, 1));
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 1;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.sc-layout-accordion-light .sc-card.is-active .sc-card__label {
    opacity: 0;
}

/* Panneau blanc givré qui remonte depuis le bas sur la card active.
 * Occupe 48% de la hauteur et apparaît après l'extension flex. */
.sc-layout-accordion-light .sc-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48%;
    padding: 24px 28px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    transition-delay: 0s;
}
.sc-layout-accordion-light .sc-card.is-active .sc-card__content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0.45s;
}

/* Badge éditorial avec préfixe "// " discret */
.sc-layout-accordion-light .sc-card__badge {
    display: block;
    margin-bottom: 8px;
    color: var(--sc-gold);
    font-size: calc(9px * var(--sc-text-scale, 1));
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.sc-layout-accordion-light .sc-card__badge::before {
    content: '// ';
    opacity: 0.5;
}

.sc-layout-accordion-light .sc-card__title {
    margin: 0 0 12px 0;
    color: #0D0D0D;
    font-size: calc(22px * var(--sc-title-scale, var(--sc-text-scale, 1)));
    font-weight: 500;
    line-height: 1.2;
}

.sc-layout-accordion-light .sc-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.sc-layout-accordion-light .sc-card__pills li {
    padding: 4px 12px;
    background: #ffffff;
    border: 1px solid rgba(13, 13, 13, 0.12);
    color: #0D0D0D;
    font-size: calc(11px * var(--sc-pills-scale, var(--sc-text-scale, 1)));
    font-weight: 500;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.sc-layout-accordion-light .sc-card__desc {
    margin: 10px 0 0;
    color: rgba(13, 13, 13, 0.75);
    font-size: calc(12.5px * var(--sc-desc-scale, var(--sc-text-scale, 1)));
    line-height: 1.65;
}

/* Durée : bloc éditorial avec liseré doré + petite barre décorative */
.sc-layout-accordion-light .sc-card__duration {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(13, 13, 13, 0.1);
    color: var(--sc-gold);
    font-size: calc(10px * var(--sc-text-scale, 1));
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.sc-layout-accordion-light .sc-card__duration::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 1px;
    background: var(--sc-gold);
}

/* --------------------------------------------------------------
 * Modifiers communs (introduits en 0.5.0)
 * -------------------------------------------------------------- */

/* `pills_uppercase = 1` */
.sc-layout-accordion-light.sc-pills--uppercase .sc-card__pills li {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* `badge_style = outline` : pillule à contour, on retire aussi le préfixe `// `
   du CSS de base pour ne pas avoir un mélange visuel. */
.sc-layout-accordion-light.sc-badge-style--outline .sc-card__badge {
    display: inline-block;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--sc-gold);
    border-radius: 999px;
    letter-spacing: 0.08em;
}
.sc-layout-accordion-light.sc-badge-style--outline .sc-card__badge::before {
    content: none;
}

/* `badge_style = editorial` : redéclaré explicitement (idempotent avec
   le CSS de base de light, qui a déjà `// ` par défaut). Permet à
   l'utilisateur de ramener le style éditorial même s'il avait choisi
   `outline` puis veut revenir. */
.sc-layout-accordion-light.sc-badge-style--editorial .sc-card__badge::before {
    content: '// ';
    opacity: 0.5;
}

/* `pills_style = squared` : redondant pour light (pills déjà carrées).
   Déclaré quand même pour cohérence si le défaut light change un jour. */
.sc-layout-accordion-light.sc-pills-style--squared .sc-card__pills li {
    border-radius: 0;
}

/* `pills_style = minimal` : retire fond, border, padding horizontal. */
.sc-layout-accordion-light.sc-pills-style--minimal .sc-card__pills li {
    background: transparent;
    border: none;
    padding: 4px 0;
}

/* --------------------------------------------------------------
 * Mobile — accordéon vertical (généré par JS)
 * -------------------------------------------------------------- */
.sc-layout-accordion-light .sc-mobile-accordion {
    display: none;
}

@media (max-width: 767px) {
    .sc-layout-accordion-light .sc-track {
        display: none;
    }
    .sc-layout-accordion-light .sc-mobile-accordion {
        display: block;
        overflow: hidden;
        background: var(--sc-ink);
    }

    .sc-layout-accordion-light .sc-m-item {
        position: relative;
        background: var(--sc-ink);
    }
    .sc-layout-accordion-light .sc-m-item + .sc-m-item {
        border-top: 1px solid rgba(245, 240, 232, 0.08);
    }

    .sc-layout-accordion-light .sc-m-item__header {
        position: relative;
        display: block;
        width: 100%;
        height: 240px;
        margin: 0;
        padding: 0;
        border: 0;
        background: #000;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
        overflow: hidden;
    }
    .sc-layout-accordion-light .sc-m-item__bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: brightness(0.82) contrast(1.02) saturate(1.1);
    }
    .sc-layout-accordion-light .sc-m-item__shade {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(
            to bottom,
            rgba(13, 13, 13, 0) 40%,
            rgba(13, 13, 13, 0.85) 100%
        );
        pointer-events: none;
    }
    .sc-layout-accordion-light .sc-m-item__title {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 18px;
        color: #F5F0E8;
        font-size: calc(20px * var(--sc-title-scale, var(--sc-text-scale, 1)));
        font-weight: 500;
        letter-spacing: 0.5px;
        line-height: 1.2;
    }

    .sc-layout-accordion-light .sc-m-item__body {
        max-height: 0;
        overflow: hidden;
        padding: 0 22px;
        background: #ffffff;
        color: #0D0D0D;
        transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.55s ease;
    }
    .sc-layout-accordion-light .sc-m-item.is-open .sc-m-item__body {
        max-height: 600px;
        padding: 20px 22px 22px;
    }

    .sc-layout-accordion-light .sc-m-item__body .sc-card__title {
        font-size: calc(20px * var(--sc-title-scale, var(--sc-text-scale, 1)));
        margin: 0 0 10px;
    }
}