/* Pile de cartes */
.sqelm-pile {
    --sqelm-pile-h: 640px;
    --sqelm-pile-carte: 420px;
    --sqelm-pile-fx: 14px;
    --sqelm-pile-fy: 10px;
    --sqelm-pile-fr: 5deg;
    --sqelm-pile-ox: 330px;
    --sqelm-pile-oy: 36px;
    --sqelm-pile-or: 9deg;
    --sqelm-pile-r: 6px;
    --sqelm-pile-ombre: none;
    --sqelm-pile-voile: rgba(20, 30, 30, .7);
    --sqelm-pile-vide: #8A9093;
    --sqelm-pile-texte: #FFFFFF;
    --sqelm-pile-marge: 22px;
    --sqelm-pile-duree: 1400ms;
    --sqelm-pile-decalage: 90ms;
    --sqelm-pile-ease: cubic-bezier(.16, 1, .3, 1);
    display: block;
}
.sqelm-pile__scene { position: relative; height: var(--sqelm-pile-h); margin: 0; padding: 0; list-style: none; }

/* Each place carries the fan-out movement; the card inside carries the hover lift */
.sqelm-pile__place {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--sqelm-pile-carte);
    height: var(--sqelm-pile-carte);
    margin: calc(var(--sqelm-pile-carte) / -2) 0 0 calc(var(--sqelm-pile-carte) / -2);
    padding: 0;
    list-style: none;
    transform:
        translate(calc(var(--k) * var(--sqelm-pile-fx)), calc(var(--ak) * var(--sqelm-pile-fy)))
        rotate(calc(var(--k) * var(--sqelm-pile-fr)));
    transition: transform var(--sqelm-pile-duree) var(--sqelm-pile-ease);
    transition-delay: calc((2 - var(--ak)) * var(--sqelm-pile-decalage) / 2);
    will-change: transform;
}
.sqelm-pile.is-ouverte .sqelm-pile__place {
    transform:
        translate(calc(var(--k) * var(--sqelm-pile-ox)), calc(var(--ak) * var(--sqelm-pile-oy)))
        rotate(calc(var(--k) * var(--sqelm-pile-or)));
    transition-delay: calc(var(--ak) * var(--sqelm-pile-decalage));
}

.sqelm-pile__carte {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--sqelm-pile-r);
    overflow: hidden;
    background: var(--sqelm-pile-vide);
    color: var(--sqelm-pile-texte);
    text-decoration: none;
    box-shadow: var(--sqelm-pile-ombre);
    transition: transform .7s var(--sqelm-pile-ease), box-shadow .7s var(--sqelm-pile-ease);
}
.sqelm-pile__carte::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, var(--sqelm-pile-voile));
    pointer-events: none;
}
.sqelm-pile__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 0 !important;
    transform: scale(1.04);
    transition: transform 1.2s var(--sqelm-pile-ease);
}
.sqelm-pile.is-ouverte a.sqelm-pile__carte:hover,
.sqelm-pile.is-ouverte a.sqelm-pile__carte:focus-visible { transform: translateY(-10px); color: var(--sqelm-pile-texte); text-decoration: none; }
.sqelm-pile.is-ouverte a.sqelm-pile__carte:hover .sqelm-pile__img { transform: scale(1); }
.sqelm-pile__carte:focus-visible { outline: 2px solid var(--sqelm-pile-texte); outline-offset: -6px; }
.sqelm-pile__carte:hover, .sqelm-pile__carte:focus { color: var(--sqelm-pile-texte); }

.sqelm-pile__bas {
    position: absolute;
    left: var(--sqelm-pile-marge);
    right: var(--sqelm-pile-marge);
    bottom: var(--sqelm-pile-marge);
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}
.sqelm-pile__place.is-droite .sqelm-pile__bas { flex-direction: row-reverse; }
.sqelm-pile__place.is-droite .sqelm-pile__gauche { align-items: flex-end; text-align: right; }
.sqelm-pile__gauche { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sqelm-pile__num { font-size: 12px; opacity: .8; }
.sqelm-pile__titre { font-size: 28px; font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; }
.sqelm-pile__compte { font-size: 13px; white-space: nowrap; }

@media (max-width: 1024px) {
    .sqelm-pile { --sqelm-pile-h: 520px; --sqelm-pile-carte: 320px; --sqelm-pile-ox: 210px; --sqelm-pile-oy: 28px; --sqelm-pile-or: 8deg; }
    .sqelm-pile__titre { font-size: 22px; }
}
@media (max-width: 767px) {
    .sqelm-pile { --sqelm-pile-h: 300px; --sqelm-pile-carte: 160px; --sqelm-pile-fx: 8px; --sqelm-pile-fy: 6px; --sqelm-pile-ox: 108px; --sqelm-pile-oy: 16px; --sqelm-pile-or: 5deg; --sqelm-pile-marge: 14px; }
    .sqelm-pile__titre { font-size: 16px; }
    .sqelm-pile__compte { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .sqelm-pile__place, .sqelm-pile__carte, .sqelm-pile__img { transition: none; }
}

.sqelm-pile__aide { padding: 16px; border: 1px dashed #B9B5A3; font-size: 14px; color: #1B1B1B; background: #FFF; }