/*
 * Stunning Carousel — Layout slider
 *
 * Carousel à défilement horizontal avec peek (~35 % de la card suivante).
 * Skin dark/light piloté par l'attribut `[data-skin]` sur le wrapper :
 * un seul fichier CSS, deux palettes via vars CSS scopées par sélecteur
 * d'attribut. Tout est scopé sous `.sc-layout-slider` pour rester strict
 * vis-à-vis du thème hôte et des autres layouts du plugin.
 *
 * Stage A (squelette statique) :
 *  - Layout grid sur le wrapper : viewport en haut pleine largeur,
 *    contrôles (dots + nav) en bas. Modifier `--no-dots` rebascule la nav
 *    en pleine largeur.
 *  - Track horizontal flex avec largeur de slide calculée intégrant le
 *    peek (constante CSS `--sc-slider-peek`, alignée sur `peek_ratio = 0.35`
 *    du JS). Pas encore de `transform: translateX(...)` — le track déborde
 *    à droite et le viewport masque l'overflow.
 *  - Reveal panel CSS posé en placeholder (transform initial, transitions
 *    désactivées) ; le câblage interaction arrive en stage D.
 *  - Flèches et dots stylés mais non interactifs (handlers en stage B).
 *  - Skin light : visibilité des flèches conservée à des valeurs d'amorce
 *    (rgba 0.08), à raffiner empiriquement en stage F (cf. SPEC §5.3).
 *
 * Vars CSS communes consommées (cf. helper `build_wrapper_attrs`) :
 *   --sc-gold, --sc-gap, --sc-radius, --sc-wrapper-padding, --sc-text-scale
 *   et les *_scale individuels, --sc-gradient-opacity, --sc-border-width.
 */

/* --------------------------------------------------------------
 * Skin dark/light — palette via attribut [data-skin]
 * --------------------------------------------------------------
 * Vars privées au layout (`--sc-slider-*`) pour ne pas entrer en conflit
 * avec les vars globales du plugin. Les fallbacks dans les `var(...)`
 * ci-dessous reflètent le skin dark, mais en pratique l'une des deux
 * blocs ci-dessous est toujours actif (l'option `skin` a un default).
 */
.sc-layout-slider[data-skin="dark"] {
    --sc-slider-card-bg:        #0D0D0D;
    --sc-slider-text:           var(--sc-text-light, #F5F0E8);
    --sc-slider-text-muted:     rgba(245, 240, 232, 0.65);
    --sc-slider-panel:          rgba(13, 13, 13, 0.92);
    --sc-slider-panel-blur:     blur(8px);
    --sc-slider-rest-grad:      linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, var(--sc-gradient-opacity, 0.7)) 100%);
    --sc-slider-badge-rest-bg:  rgba(255, 255, 255, 0.15);
    --sc-slider-badge-rest-fg:  var(--sc-text-light, #F5F0E8);
    /* Flèches : équilibre fond translucide ancré au card-bg (ink) + bordure
       cream nette + icône cream. Ce triplé garantit la lisibilité sur n'importe
       quelle couleur de page (le fond ink reste visible sur fonds clairs/beiges,
       la bordure cream prend le relais sur fonds très sombres). Cf. itération
       post-A : §5.3 partiellement traité avec les valeurs ci-dessous. */
    --sc-slider-arrow-bg:       rgba(13, 13, 13, 0.5);
    --sc-slider-arrow-bg-hover: rgba(13, 13, 13, 0.7);
    --sc-slider-arrow-border:   rgba(245, 240, 232, 0.55);
    --sc-slider-arrow-fg:       var(--sc-text-light, #F5F0E8);
    /* Dots inactifs : même stratégie que les flèches — ancrage au card-bg
       (ink) plutôt qu'au texte (cream). Le précédent set rgba(255,255,255,0.5)
       blendait totalement sur les pages blanches/beiges qui sont le cas
       majoritaire d'embed d'un skin dark (un skin dark sur page très sombre
       produirait un carousel quasi indissociable du fond — typologie rare).
       L'actif reste sur --sc-gold, dominant visuellement quel que soit le
       contexte. */
    --sc-slider-dot-bg:         rgba(13, 13, 13, 0.45);
    --sc-slider-dot-bg-active:  var(--sc-gold, #C8A84B);
    --sc-slider-scrollbar-bg:   rgba(255, 255, 255, 0.05);
    --sc-slider-scrollbar-fg:   rgba(255, 255, 255, 0.25);
    --sc-slider-pill-bg:        rgba(255, 255, 255, 0.15);
    --sc-slider-pill-fg:        var(--sc-text-light, #F5F0E8);
}

.sc-layout-slider[data-skin="light"] {
    --sc-slider-card-bg:        #F5F0E8;
    --sc-slider-text:           var(--sc-ink, #0D0D0D);
    --sc-slider-text-muted:     rgba(13, 13, 13, 0.6);
    --sc-slider-panel:          rgba(255, 255, 255, 0.94);
    --sc-slider-panel-blur:     blur(10px);
    --sc-slider-rest-grad:      linear-gradient(180deg, transparent 50%, rgba(255, 255, 255, var(--sc-gradient-opacity, 0.6)) 100%);
    --sc-slider-badge-rest-bg:  rgba(255, 255, 255, 0.85);
    --sc-slider-badge-rest-fg:  var(--sc-ink, #0D0D0D);
    /* Flèches : miroir du skin dark — fond white translucide ancré au
       card-bg (cream/blanc) + bordure ink nette + icône ink. Les valeurs
       sont calées plus haut côté bg (0.8) que le miroir parfait du dark
       car blanc-translucide se confond plus facilement qu'ink-translucide
       avec une page beige/blanche typique des sites skincare. À raffiner
       éventuellement en stage F si tests sandbox font remonter d'autres cas. */
    --sc-slider-arrow-bg:       rgba(255, 255, 255, 0.8);
    --sc-slider-arrow-bg-hover: rgba(255, 255, 255, 0.96);
    --sc-slider-arrow-border:   rgba(13, 13, 13, 0.35);
    --sc-slider-arrow-fg:       var(--sc-ink, #0D0D0D);
    /* Dots inactifs : opacité bumpée (0.25 → 0.4). */
    --sc-slider-dot-bg:         rgba(13, 13, 13, 0.4);
    --sc-slider-dot-bg-active:  var(--sc-gold, #C8A84B);
    --sc-slider-scrollbar-bg:   rgba(0, 0, 0, 0.05);
    --sc-slider-scrollbar-fg:   rgba(0, 0, 0, 0.25);
    --sc-slider-pill-bg:        #ffffff;
    --sc-slider-pill-fg:        var(--sc-ink, #0D0D0D);
}

/* --------------------------------------------------------------
 * Conteneur racine + layout général
 * -------------------------------------------------------------- */

/* Constante interne au layout — fraction visible de la (N+1)-ème slide.
   Doit rester en sync avec la valeur lue par `slider.js` en stage B+.
   Définie ici pour permettre le calcul CSS-only en stage A (avant que le
   JS ne prenne le relais sur la mesure dynamique du viewport). */
.sc-layout-slider {
    --sc-slider-peek: 0.35;

    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    /* Garantit l'héritage de la police du thème hôte, même face à un thème
       qui imposerait font-family sur un sélecteur générique. */
    font-family: inherit;
    padding: var(--sc-wrapper-padding, 0);

    /* Grid 2 colonnes : viewport pleine largeur en row 1, dots+nav en row 2.
       row-gap aligné sur le `gap` commun pour cohérence visuelle. */
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    row-gap: var(--sc-gap, 16px);
}

.sc-layout-slider .sc-slider-viewport {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
}

.sc-layout-slider .sc-slider-dots {
    grid-column: 1;
    align-self: center;
    justify-self: center;
}

.sc-layout-slider .sc-slider-nav {
    grid-column: 2;
    align-self: center;
}

/* Quand aucun dot n'est rendu (option `show_dots=0` ou un seul slide visible),
   la nav prend la pleine largeur et s'aligne à droite. */
.sc-layout-slider--no-dots .sc-slider-nav {
    grid-column: 1 / -1;
    justify-self: end;
}

/* --------------------------------------------------------------
 * Track horizontal + calcul largeur slide (avec peek)
 * --------------------------------------------------------------
 * `slide_w = (100% - N * gap) / (N + peek_ratio)`
 *
 * On exprime ce calc en CSS via `calc(...)` consommant `--sc-gap` (option
 * commune) et `--sc-slider-peek` (interne layout). Pour chaque valeur de
 * `slides_per_view`, une règle dédiée fixe la largeur des slides de
 * l'instance correspondante.
 */

.sc-layout-slider .sc-slider-track {
    display: flex;
    gap: var(--sc-gap, 16px);
    /* `transform` posée par le JS à partir du stage B. Le `will-change`
       prépare le compositing même si la valeur initiale est `none`. */
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sc-layout-slider .sc-slider-slide {
    flex: 0 0 auto;
    /* Largeur de slide définie par les modifiers `--spv-N` ci-dessous.
       Fallback (sans modifier) : largeur 3 cards + peek. */
    width: calc((100% - 3 * var(--sc-gap, 16px)) / (3 + var(--sc-slider-peek)));
}

.sc-layout-slider--spv-1 .sc-slider-slide {
    width: calc((100% - 1 * var(--sc-gap, 16px)) / (1 + var(--sc-slider-peek)));
}
.sc-layout-slider--spv-2 .sc-slider-slide {
    width: calc((100% - 2 * var(--sc-gap, 16px)) / (2 + var(--sc-slider-peek)));
}
.sc-layout-slider--spv-3 .sc-slider-slide {
    width: calc((100% - 3 * var(--sc-gap, 16px)) / (3 + var(--sc-slider-peek)));
}
.sc-layout-slider--spv-4 .sc-slider-slide {
    width: calc((100% - 4 * var(--sc-gap, 16px)) / (4 + var(--sc-slider-peek)));
}

/* Tablette : cap à 2 cards visibles pour les choix 3 et 4 (SPEC §6.1). */
@media (max-width: 1023px) {
    .sc-layout-slider--spv-3 .sc-slider-slide,
    .sc-layout-slider--spv-4 .sc-slider-slide {
        width: calc((100% - 2 * var(--sc-gap, 16px)) / (2 + var(--sc-slider-peek)));
    }
}

/* Mobile : 1 card visible quel que soit le choix desktop, peek toujours là. */
@media (max-width: 599px) {
    .sc-layout-slider .sc-slider-slide,
    .sc-layout-slider--spv-1 .sc-slider-slide,
    .sc-layout-slider--spv-2 .sc-slider-slide,
    .sc-layout-slider--spv-3 .sc-slider-slide,
    .sc-layout-slider--spv-4 .sc-slider-slide {
        width: calc((100% - 1 * var(--sc-gap, 12px)) / (1 + var(--sc-slider-peek)));
    }
    .sc-layout-slider .sc-slider-track {
        gap: var(--sc-gap, 12px);
    }
}

/* --------------------------------------------------------------
 * Cards — état repos (calque grid)
 * -------------------------------------------------------------- */

.sc-layout-slider .sc-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--sc-radius, 8px);
    cursor: pointer;
    isolation: isolate;
    background: var(--sc-slider-card-bg);
    /* Bordure pilotée par `card_border` (commune) — couleur skin-aware
       déclarée par les classes modifier en bas du fichier. */
    border: var(--sc-border-width, 0) solid var(--sc-border-color, transparent);
}

.sc-layout-slider .sc-card:focus-visible {
    outline: 2px solid var(--sc-gold, #C8A84B);
    outline-offset: 2px;
}

/* Aspect ratio piloté par les modifiers du wrapper. */
.sc-layout-slider--ratio-4-5 .sc-card  { aspect-ratio: 4 / 5; }
.sc-layout-slider--ratio-1-1 .sc-card  { aspect-ratio: 1 / 1; }
.sc-layout-slider--ratio-3-4 .sc-card  { aspect-ratio: 3 / 4; }
.sc-layout-slider--ratio-16-9 .sc-card { aspect-ratio: 16 / 9; }

/* Image de fond + transition pour le micro-zoom hover. */
.sc-layout-slider .sc-card__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

/* Gradient de lisibilité au repos. Skin-aware via `--sc-slider-rest-grad`. */
.sc-layout-slider .sc-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sc-slider-rest-grad);
    pointer-events: none;
}

/* Cas extrême : aucun élément au repos → image pure, sans dégradé. */
.sc-layout-slider--no-rest .sc-card__image::after {
    display: none;
}

/* État repos — badge top-left. */
.sc-layout-slider .sc-card__badge-rest {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    padding: 4px 10px;
    font-size: calc(11px * var(--sc-text-scale, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--sc-slider-badge-rest-bg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--sc-slider-badge-rest-fg);
    border-radius: 999px;
}

/* État repos — titre en bas. */
.sc-layout-slider .sc-card__rest-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 16px;
}

.sc-layout-slider .sc-card__title-rest {
    color: var(--sc-slider-text);
    font-size: calc(clamp(18px, 1.4vw, 22px) * var(--sc-title-scale, var(--sc-text-scale, 1)));
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

/* En skin light, on aligne le poids des titres au repos sur grid-light
   pour une cohérence visuelle (light = 500, dark = 600). */
.sc-layout-slider[data-skin="light"] .sc-card__title-rest {
    font-weight: 500;
}

/* --------------------------------------------------------------
 * Reveal panel — placeholder stage A (interaction en stage D)
 * --------------------------------------------------------------
 * Le panneau est posé dans le DOM mais reste hors écran (translateY 100%)
 * et non interactif. Les transitions et la classe `is-active` seront
 * câblées par le JS en stage D.
 */

.sc-layout-slider .sc-card__reveal {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--sc-slider-panel);
    -webkit-backdrop-filter: var(--sc-slider-panel-blur);
    backdrop-filter: var(--sc-slider-panel-blur);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: 0.15s;
    will-change: transform;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    pointer-events: none;
}

.sc-layout-slider .sc-card.is-active .sc-card__reveal {
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: 0s;
    pointer-events: auto;
}

.sc-layout-slider .sc-card__reveal-inner {
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    transition-delay: 0s;
    /* Scrollbar custom skin-aware — couleurs en var, pour rester relatives
       au fond du panneau, theme-agnostic. */
    scrollbar-width: thin;
    scrollbar-color: var(--sc-slider-scrollbar-fg) var(--sc-slider-scrollbar-bg);
}

.sc-layout-slider .sc-card__reveal-inner::-webkit-scrollbar {
    width: 6px;
}
.sc-layout-slider .sc-card__reveal-inner::-webkit-scrollbar-track {
    background: var(--sc-slider-scrollbar-bg);
    border-radius: 3px;
}
.sc-layout-slider .sc-card__reveal-inner::-webkit-scrollbar-thumb {
    background: var(--sc-slider-scrollbar-fg);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.sc-layout-slider .sc-card.is-active .sc-card__reveal-inner {
    opacity: 1;
    transition: opacity 0.25s ease;
    transition-delay: 0.35s;
}

/* --------------------------------------------------------------
 * Contenu du reveal — calque skin
 * -------------------------------------------------------------- */

.sc-layout-slider .sc-card__title {
    color: var(--sc-slider-text);
    font-size: calc(clamp(20px, 1.6vw, 26px) * var(--sc-title-scale, var(--sc-text-scale, 1)));
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}

.sc-layout-slider[data-skin="light"] .sc-card__title {
    font-weight: 500;
    line-height: 1.2;
}

.sc-layout-slider .sc-card__pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Pills skin dark : pillulées translucides (calque grid-dark). */
.sc-layout-slider[data-skin="dark"] .sc-card__pills li {
    font-size: calc(12px * var(--sc-pills-scale, var(--sc-text-scale, 1)));
    padding: 4px 10px;
    background: var(--sc-slider-pill-bg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--sc-slider-pill-fg);
    border-radius: 999px;
}

/* Pills skin light : carrées éditoriales (calque grid-light / accordion-light). */
.sc-layout-slider[data-skin="light"] .sc-card__pills li {
    padding: 4px 12px;
    background: var(--sc-slider-pill-bg);
    border: 1px solid rgba(13, 13, 13, 0.12);
    color: var(--sc-slider-pill-fg);
    font-size: calc(11px * var(--sc-pills-scale, var(--sc-text-scale, 1)));
    font-weight: 500;
    border-radius: 0;
}

.sc-layout-slider .sc-card__desc {
    color: var(--sc-slider-text);
    font-size: calc(14px * var(--sc-desc-scale, var(--sc-text-scale, 1)));
    line-height: 1.5;
    margin: 0;
    opacity: 0.92;
}

.sc-layout-slider[data-skin="light"] .sc-card__desc {
    color: var(--sc-slider-text-muted);
    font-size: calc(12.5px * var(--sc-desc-scale, var(--sc-text-scale, 1)));
    line-height: 1.65;
    opacity: 1;
}

/* Badge du panneau de reveal — calque skin. */
.sc-layout-slider[data-skin="dark"] .sc-card__badge {
    align-self: flex-start;
    padding: 4px 10px;
    font-size: calc(11px * var(--sc-text-scale, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--sc-text-light, #F5F0E8);
    border-radius: 999px;
}

/* Skin light : badge éditorial avec préfixe `// `. */
.sc-layout-slider[data-skin="light"] .sc-card__badge {
    align-self: flex-start;
    color: var(--sc-gold, #C8A84B);
    font-size: calc(9px * var(--sc-text-scale, 1));
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.sc-layout-slider[data-skin="light"] .sc-card__badge::before {
    content: '// ';
    opacity: 0.5;
}

/* Durée — calque skin. */
.sc-layout-slider[data-skin="dark"] .sc-card__duration {
    position: relative;
    padding-left: 18px;
    color: var(--sc-gold, #C8A84B);
    font-size: calc(12px * var(--sc-text-scale, 1));
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sc-layout-slider[data-skin="dark"] .sc-card__duration::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--sc-gold, #C8A84B);
}

/* Skin light : durée à liseré doré + barre décorative (calque accordion-light). */
.sc-layout-slider[data-skin="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, #C8A84B);
    font-size: calc(10px * var(--sc-text-scale, 1));
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.sc-layout-slider[data-skin="light"] .sc-card__duration::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 1px;
    background: var(--sc-gold, #C8A84B);
}

/* Hover micro-zoom : devices avec hover réel uniquement.
   L'ouverture du panneau au hover viendra en stage D (JS hover-intent). */
@media (hover: hover) {
    .sc-layout-slider .sc-card:hover .sc-card__image {
        transform: scale(1.02);
    }
}

/* --------------------------------------------------------------
 * Flèches de navigation
 * --------------------------------------------------------------
 * Cercles skinables, posés sous le viewport à droite (avec dots à gauche).
 * État `disabled` réduit l'opacité et coupe pointer-events.
 */

.sc-layout-slider .sc-slider-nav {
    display: flex;
    gap: 8px;
}

.sc-layout-slider .sc-slider-arrow {
    /* Reset bouton — neutralise les styles génériques imposés par certains
       thèmes (Divi, GeneratePress…) sur tous les <button>. */
    appearance: none;
    -webkit-appearance: none;
    background: var(--sc-slider-arrow-bg);
    border: 1px solid var(--sc-slider-arrow-border);
    color: var(--sc-slider-arrow-fg);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.sc-layout-slider .sc-slider-arrow:hover {
    background: var(--sc-slider-arrow-bg-hover);
}

.sc-layout-slider .sc-slider-arrow:focus-visible {
    outline: 2px solid var(--sc-gold, #C8A84B);
    outline-offset: 2px;
}

.sc-layout-slider .sc-slider-arrow[disabled],
.sc-layout-slider .sc-slider-arrow[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sc-layout-slider .sc-slider-arrow__icon {
    font-size: 22px;
    /* Chevrons en weight 500 : la lecture des chevrons unicode au weight 400
       est faible. Le 500 donne une silhouette nette sans alourdir
       visuellement la flèche, cohérent avec l'esprit minimal demandé. */
    font-weight: 500;
    /* Léger décalage optique pour centrer les chevrons unicode. */
    transform: translateY(-1px);
}

@media (max-width: 599px) {
    .sc-layout-slider .sc-slider-arrow {
        width: 32px;
        height: 32px;
    }
    .sc-layout-slider .sc-slider-arrow__icon {
        font-size: 20px;
    }
}

/* --------------------------------------------------------------
 * Dots de navigation
 * -------------------------------------------------------------- */

.sc-layout-slider .sc-slider-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sc-layout-slider .sc-slider-dot {
    appearance: none;
    -webkit-appearance: none;
    background: var(--sc-slider-dot-bg);
    border: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sc-layout-slider .sc-slider-dot:hover {
    transform: scale(1.2);
}

.sc-layout-slider .sc-slider-dot.is-active,
.sc-layout-slider .sc-slider-dot[aria-current="true"] {
    background: var(--sc-slider-dot-bg-active);
    transform: scale(1.2);
}

.sc-layout-slider .sc-slider-dot:focus-visible {
    outline: 2px solid var(--sc-gold, #C8A84B);
    outline-offset: 3px;
}

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

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

/* `badge_style = outline` */
.sc-layout-slider.sc-badge-style--outline .sc-card__badge,
.sc-layout-slider.sc-badge-style--outline .sc-card__badge-rest {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.sc-layout-slider[data-skin="dark"].sc-badge-style--outline .sc-card__badge,
.sc-layout-slider[data-skin="dark"].sc-badge-style--outline .sc-card__badge-rest {
    border: 1px solid var(--sc-text-light, #F5F0E8);
}
.sc-layout-slider[data-skin="light"].sc-badge-style--outline .sc-card__badge-rest {
    border: 1px solid var(--sc-ink, #0D0D0D);
}
.sc-layout-slider[data-skin="light"].sc-badge-style--outline .sc-card__badge {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--sc-gold, #C8A84B);
    border-radius: 999px;
    letter-spacing: 0.08em;
}
.sc-layout-slider[data-skin="light"].sc-badge-style--outline .sc-card__badge::before {
    content: none;
}

/* `badge_style = editorial` : préfixe `// `, fond/padding minimaux. */
.sc-layout-slider.sc-badge-style--editorial .sc-card__badge,
.sc-layout-slider.sc-badge-style--editorial .sc-card__badge-rest {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    color: var(--sc-gold, #C8A84B);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.sc-layout-slider.sc-badge-style--editorial .sc-card__badge::before,
.sc-layout-slider.sc-badge-style--editorial .sc-card__badge-rest::before {
    content: '// ';
    opacity: 0.5;
}

/* `pills_style = squared` */
.sc-layout-slider.sc-pills-style--squared .sc-card__pills li {
    border-radius: 0;
}

/* `pills_style = minimal` */
.sc-layout-slider.sc-pills-style--minimal .sc-card__pills li {
    background: transparent;
    border: none;
    padding: 4px 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* `card_border = subtle/pronounced` — couleurs skin-aware. */
.sc-layout-slider[data-skin="dark"].sc-card-border--subtle {
    --sc-border-color: rgba(255, 255, 255, 0.08);
}
.sc-layout-slider[data-skin="dark"].sc-card-border--pronounced {
    --sc-border-color: rgba(255, 255, 255, 0.2);
}
.sc-layout-slider[data-skin="light"].sc-card-border--subtle {
    --sc-border-color: rgba(0, 0, 0, 0.08);
}
.sc-layout-slider[data-skin="light"].sc-card-border--pronounced {
    --sc-border-color: rgba(0, 0, 0, 0.2);
}