/*
 * Stunning Carousel — Layout : accordion-dark
 * Styles strictement scopés sous .sc-layout-accordion-dark.
 *
 * Notes 0.5.0 :
 *  - Les `font-size` consomment `var(--sc-text-scale, 1)` (multiplicateur global)
 *    et, pour les éléments avec override individuel, `var(--sc-X-scale, var(--sc-text-scale, 1))`.
 *    Si la var n'est pas injectée par le helper PHP (= valeur courante = default
 *    effectif du layout), le fallback préserve l'apparence pré-0.5.0.
 *  - Les options `gap`, `border_radius`, `gradient_intensity`, `card_border`
 *    sont marquées `common_options_ignored` pour ce layout (cf. config) — leurs
 *    vars CSS ne sont jamais consommées ici (cards contiguës, pas de gradient
 *    bas, etc.). `wrapper_padding` reste actif (utile pour aérer le carousel).
 */

.sc-layout-accordion-dark {
    --sc-gold: #C8A84B;
    --sc-ink: rgba(13, 13, 13, 0.85);
    --sc-text-light: #F5F0E8;

    width: 100%;
    color: var(--sc-text-light);
    font-family: inherit;
    box-sizing: border-box;
    /* Marge interne du carousel — pilotée par l'option commune `wrapper_padding`.
       Fallback `0` = état pré-0.5.0 strictement préservé. */
    padding: var(--sc-wrapper-padding, 0);
}
.sc-layout-accordion-dark *,
.sc-layout-accordion-dark *::before,
.sc-layout-accordion-dark *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------
 * Desktop — track horizontal
 * -------------------------------------------------------------- */
.sc-layout-accordion-dark .sc-track {
    display: flex;
    width: 100%;
    height: 520px;
    overflow: hidden;
    background: #0d0d0d;
    border-radius: 4px;
}

.sc-layout-accordion-dark .sc-card {
    position: relative;
    flex: 0 0 72px;
    overflow: hidden;
    cursor: pointer;
    background: #0d0d0d;
    outline: none;
    transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-layout-accordion-dark .sc-card + .sc-card {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.sc-layout-accordion-dark .sc-card.is-active {
    flex: 1 1 auto;
}
.sc-layout-accordion-dark .sc-card:focus-visible {
    box-shadow: inset 0 0 0 2px var(--sc-gold);
}

/* Image de fond — légère mise à l'échelle quand active */
.sc-layout-accordion-dark .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.78);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.55s ease;
    will-change: transform;
}
.sc-layout-accordion-dark .sc-card.is-active .sc-card__bg {
    transform: scale(1.04);
    filter: brightness(0.82);
}

/* Ombre dégradée du bas pour la lisibilité du texte */
.sc-layout-accordion-dark .sc-card__shade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.35) 55%,
        rgba(0, 0, 0, 0.85) 100%
    );
    pointer-events: none;
}

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

/* Contenu textuel — animation séquencée : apparition après l'extension flex */
.sc-layout-accordion-dark .sc-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.sc-layout-accordion-dark .sc-card.is-active .sc-card__content {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease 0.45s, visibility 0s linear 0.45s;
}

.sc-layout-accordion-dark .sc-card__badge {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--sc-gold);
    font-size: calc(11px * var(--sc-text-scale, 1));
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

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

.sc-layout-accordion-dark .sc-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.sc-layout-accordion-dark .sc-card__pills li {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: calc(10px * var(--sc-pills-scale, var(--sc-text-scale, 1)));
    letter-spacing: 0.5px;
    border-radius: 20px;
}

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

.sc-layout-accordion-dark .sc-card__duration {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    font-size: calc(11px * var(--sc-text-scale, 1));
}

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

/* `pills_uppercase = 1` → casse forcée + petit letter-spacing pour la lisibilité.
   Default = 0 → classe absente → règle non appliquée → état pré-0.5.0 préservé. */
.sc-layout-accordion-dark.sc-pills--uppercase .sc-card__pills li {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* `badge_style = outline` : remplace le badge text-only par un contour pillulé.
   Border et color en var(--sc-gold) pour rester cohérent avec l'accent. */
.sc-layout-accordion-dark.sc-badge-style--outline .sc-card__badge {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--sc-gold);
    border-radius: 999px;
}

/* `badge_style = editorial` : préfixe `// ` discret, calque accordion-light. */
.sc-layout-accordion-dark.sc-badge-style--editorial .sc-card__badge::before {
    content: '// ';
    opacity: 0.5;
}

/* `pills_style = squared` : pills carrées au lieu d'arrondies. */
.sc-layout-accordion-dark.sc-pills-style--squared .sc-card__pills li {
    border-radius: 0;
}

/* `pills_style = minimal` : pills sans fond, sans border, juste le texte.
   Les pills se transforment en mini-tags inline plus discrets. */
.sc-layout-accordion-dark.sc-pills-style--minimal .sc-card__pills li {
    background: transparent;
    padding: 4px 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

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

@media (max-width: 767px) {
    .sc-layout-accordion-dark .sc-track {
        display: none;
    }
    .sc-layout-accordion-dark .sc-mobile-accordion {
        display: block;
        background: #0d0d0d;
        border-radius: 4px;
        overflow: hidden;
    }

    .sc-layout-accordion-dark .sc-m-item {
        position: relative;
        background: #0d0d0d;
    }
    .sc-layout-accordion-dark .sc-m-item + .sc-m-item {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .sc-layout-accordion-dark .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-dark .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);
    }
    .sc-layout-accordion-dark .sc-m-item__shade {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.85) 100%
        );
        pointer-events: none;
    }
    .sc-layout-accordion-dark .sc-m-item__title {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 18px;
        color: #fff;
        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-dark .sc-m-item__body {
        max-height: 0;
        overflow: hidden;
        padding: 0 22px;
        background: var(--sc-ink);
        color: var(--sc-text-light);
        transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.55s ease;
    }
    .sc-layout-accordion-dark .sc-m-item.is-open .sc-m-item__body {
        max-height: 600px;
        padding: 20px 22px 22px;
    }

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