/**
 * SWR Stacking Cards — styles front + éditeur.
 *
 * Couleurs thème consommées directement :
 *   --col_3                              accent corail (eyebrow, filet)
 *   --wp--preset--color--kb-palette-10   fond de carte (#f5f5f5 dans papir-V2)
 *   --wp--preset--color--kb-palette-1    titre sur fond de carte (#000 dans papir-V2)
 *
 * Custom properties internes (cascade attribut → CSS) :
 *   --swr-card-radius        → de l'attribut borderRadius      (card inline)
 *   --swr-card-border-width  → de l'attribut borderWidth       (card inline)
 *   --swr-card-pad-y         → paddingVertical desktop         (card inline)
 *   --swr-card-pad-x         → paddingHorizontal desktop       (card inline)
 *   --swr-card-pad-y-tablet  → paddingVerticalTablet           (card inline)
 *   --swr-card-pad-x-tablet  → paddingHorizontalTablet         (card inline)
 *   --swr-card-pad-y-mobile  → paddingVerticalMobile           (card inline)
 *   --swr-card-pad-x-mobile  → paddingHorizontalMobile         (card inline)
 *   --swr-offset-top         → offsetTopDesktop                (parent inline, info CSS)
 *
 * Chaîne de fallback padding : mobile → tablet → desktop → valeur dur.
 *
 * Règle : la var inline n'est émise que si l'attribut est réglé (≠ 0).
 * Si absente → le fallback du var() s'applique.
 *
 * Stratégie double-état :
 *   - Statique (défaut)  : cards en flux, lisibles — éditeur, mobile, no-JS.
 *   - Animé [data-swr-stacking-ready="1"] : CSS sticky + scale GSAP actifs.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ÉTAT STATIQUE — flux normal
   ═══════════════════════════════════════════════════════════════════════════ */

.swr-stacking {
    position: relative;
    width: 100%;
	background:#022e5f;
}

.swr-stacking__track {
    position: relative;
}

.swr-stacking__label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.45;
    margin-bottom: 3rem;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.swr-stacking-card {
    position: relative;
    width: 90%;
    /*max-width: calc(var(--papir-wide-width, 1600px) * 0.9);*/
	max-width:1250px;

    margin-inline: auto;
    margin-bottom: 1.5rem;
    border-radius: var(--swr-card-radius, 20px);
    border: var(--swr-card-border-width, 1.5px) solid rgba(0, 0, 0, 0.08);
    background-color: var(--wp--preset--color--kb-palette-10, #f5f5f5);
    overflow: hidden;
}

/* ── Head — bande visible quand la card est enfouie ─────────────────────── */

.swr-card__head {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: var(--swr-card-pad-y, 2rem) var(--swr-card-pad-x, 2.5rem) 1.75rem;
}

.swr-card__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--col_3, #ff5e32);
}

.swr-card__title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.1;
    color: var(--wp--preset--color--kb-palette-1, #111);
}

.swr-card__accent {
    display: none;
    width: 2.5rem;
    height: 3px;
    border-radius: 2px;
    background-color: var(--col_3, #ff5e32);
    margin-top: 0.5rem;
    flex-shrink: 0;
}

/* ── Body — contenu libre ────────────────────────────────────────────────── */

.swr-card__body {
    padding: 0 var(--swr-card-pad-x, 2.5rem) var(--swr-card-pad-y, 2.5rem);
}

.swr-card__body > *:first-child {
    margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ÉTAT ANIMÉ — CSS sticky + GSAP scale actifs [data-swr-stacking-ready="1"]
   ═══════════════════════════════════════════════════════════════════════════ */

[data-swr-stacking-ready="1"] .swr-stacking-card {
    margin-bottom: 0 !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACKER LATÉRAL
   ═══════════════════════════════════════════════════════════════════════════ */

.swr-stacking__tracker {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.swr-stacking__tracker.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.swr-stacking__tracker-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.swr-stacking__tracker-dot:hover {
    background: rgba(0, 0, 0, 0.4);
}

.swr-stacking__tracker-dot.is-active {
    background: var(--col_3, #ff5e32);
    transform: scale(1.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   APERÇU ÉDITEUR WP 6.9 (iframe) — piège #1
   ═══════════════════════════════════════════════════════════════════════════ */

:where(.editor-styles-wrapper) .swr-stacking--editor {
    position: static !important;
    height: auto !important;
}

:where(.editor-styles-wrapper) .swr-stacking__track {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
}

:where(.editor-styles-wrapper) .swr-stacking-card--editor {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-bottom: 1.5rem;
    min-height: auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

:where(.editor-styles-wrapper) .swr-card__body {
    min-height: 4rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet (1024px) et mobile (767px)
   Chaîne de fallback : breakpoint-spécifique → desktop → valeur dur.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .swr-card__head {
        padding:
            var(--swr-card-pad-y-tablet, var(--swr-card-pad-y, 1.75rem))
            var(--swr-card-pad-x-tablet, var(--swr-card-pad-x, 2rem))
            1.5rem;
    }

    .swr-card__body {
        padding:
            0
            var(--swr-card-pad-x-tablet, var(--swr-card-pad-x, 2rem))
            var(--swr-card-pad-y-tablet, var(--swr-card-pad-y, 2rem));
    }

    /* Tracker masqué sur tablet étroit (optionnel — à ajuster selon design) */
    .swr-stacking__tracker {
        right: 0.75rem;
    }
}

@media (max-width: 767px) {
    .swr-stacking-card {
        width: 95%;
        border-radius: var(--swr-card-radius, 14px);
    }

    .swr-card__head {
        padding:
            var(--swr-card-pad-y-mobile, var(--swr-card-pad-y-tablet, var(--swr-card-pad-y, 1.5rem)))
            var(--swr-card-pad-x-mobile, var(--swr-card-pad-x-tablet, var(--swr-card-pad-x, 1.25rem)))
            1.25rem;
    }

    .swr-card__title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .swr-card__body {
        padding:
            0
            var(--swr-card-pad-x-mobile, var(--swr-card-pad-x-tablet, var(--swr-card-pad-x, 1.25rem)))
            var(--swr-card-pad-y-mobile, var(--swr-card-pad-y-tablet, var(--swr-card-pad-y, 1.5rem)));
    }

    /* Tracker masqué sur mobile (sticky désactivé) */
    .swr-stacking__tracker {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .swr-stacking-card {
        transition: none !important;
        animation: none !important;
    }

    [data-swr-stacking-ready="1"] .swr-stacking-card {
        transform: none !important;
    }

    .swr-stacking__tracker,
    .swr-stacking__tracker-dot {
        transition: none !important;
    }
}