/* ================================================================
   Senxuel Ads Carousel v2.0 — sxc-carousel.css
   Flamme SVG animée, badges positionnables indépendamment,
   flamme positionnée indépendamment des badges.
   ================================================================ */

/* ── Variables globales ─────────────────────────────────────────── */
:root {
    --sxc-accent:        #ff1700;
    --sxc-dark:          #11151c;
    --sxc-gold:          #ffc220;
    --sxc-surface:       #ffffff;
    --sxc-text:          #1e293b;
    --sxc-text-muted:    #64748b;
    --sxc-border:        #e2e8f0;
    --sxc-online:        #22c55e;
    --sxc-offline:       #94a3b8;
    --sxc-font:          'Quicksand', system-ui, -apple-system, sans-serif;
    /* Injectées par le widget inline */
    --sxc-cols-d:        3;
    --sxc-cols-m:        1;
    --sxc-gap:           16px;
    --sxc-radius:        12px;
    --sxc-ratio-pt:      75%;
    --sxc-peek-amount:   18%;
    --sxc-peek-opacity:  0.5;
    --sxc-peek-scale:    0.94;
    --sxc-flame-size:    32px;
    --sxc-flame-offset:  8px;
}

/* ── Widget ─────────────────────────────────────────────────────── */
.sxc-widget {
    font-family: var(--sxc-font);
    position:    relative;
    width:       100%;
}

/* ── Track wrap ─────────────────────────────────────────────────── */
.sxc-track-wrap {
    width:    100%;
    overflow: hidden;
}

.sxc-peek--both      .sxc-track-wrap,
.sxc-peek--desktop   .sxc-track-wrap {
    overflow:  visible;
    clip-path: inset(0 0 0 0);
}

@media (max-width: 768px) {
    .sxc-peek--both    .sxc-track-wrap,
    .sxc-peek--mobile  .sxc-track-wrap {
        overflow:  visible;
        clip-path: inset(0 0 0 0);
    }
}

/* ── Track ──────────────────────────────────────────────────────── */
.sxc-track {
    display:          flex;
    flex-wrap:        nowrap;
    align-items:      stretch;
    gap:              var(--sxc-gap);
    overflow-x:       scroll;
    overflow-y:       visible;
    scroll-snap-type: x mandatory;
    scroll-behavior:  auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:  none;
    -ms-overflow-style: none;
    padding-bottom:   4px;
}
.sxc-track::-webkit-scrollbar { display: none; }

/* ── Largeur cards ──────────────────────────────────────────────── */
.sxc-track > .sxc-card {
    flex:      0 0 calc((100% - (var(--sxc-cols-d) - 1) * var(--sxc-gap)) / var(--sxc-cols-d));
    min-width: 0;
    max-width: calc((100% - (var(--sxc-cols-d) - 1) * var(--sxc-gap)) / var(--sxc-cols-d));
}

.sxc-peek--both    .sxc-track > .sxc-card,
.sxc-peek--desktop .sxc-track > .sxc-card {
    flex:      0 0 calc((100% - (var(--sxc-cols-d) - 1) * var(--sxc-gap)) / var(--sxc-cols-d) - var(--sxc-gap) - 12px);
    max-width: calc((100% - (var(--sxc-cols-d) - 1) * var(--sxc-gap)) / var(--sxc-cols-d) - var(--sxc-gap) - 12px);
}

@media (max-width: 768px) {
    .sxc-track > .sxc-card {
        flex:      0 0 calc((100% - (var(--sxc-cols-m) - 1) * var(--sxc-gap)) / var(--sxc-cols-m));
        max-width: calc((100% - (var(--sxc-cols-m) - 1) * var(--sxc-gap)) / var(--sxc-cols-m));
    }
    .sxc-peek--both    .sxc-track > .sxc-card,
    .sxc-peek--mobile  .sxc-track > .sxc-card {
        flex:      0 0 calc((100% - (var(--sxc-cols-m) - 1) * var(--sxc-gap)) / var(--sxc-cols-m) - var(--sxc-gap) - 12px);
        max-width: calc((100% - (var(--sxc-cols-m) - 1) * var(--sxc-gap)) / var(--sxc-cols-m) - var(--sxc-gap) - 12px);
    }
}

/* ── Card base ──────────────────────────────────────────────────── */
.sxc-card {
    scroll-snap-align: start;
    background:        transparent;
    border-radius:     var(--sxc-radius);
    overflow:          visible;
    display:           flex;
    flex-direction:    column;
    transition:        box-shadow .22s ease;
    position:          relative;
}

.sxc-card__img-wrap {
    border-radius: var(--sxc-radius) var(--sxc-radius) 0 0;
    overflow:      hidden;
    position:      relative;
    flex-shrink:   0;
}

.sxc-card__link {
    display:         flex;
    flex-direction:  column;
    text-decoration: none;
    color:           inherit;
    flex:            1;
}

@media (hover: hover) and (pointer: fine) {
    .sxc-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.12); }
}

/* ── Peek card suivante ─────────────────────────────────────────── */
.sxc-card.sxc-card--peek {
    opacity:         var(--sxc-peek-opacity);
    transform:       scale(var(--sxc-peek-scale));
    transform-origin: left center;
}
.sxc-card:not(.sxc-card--peek) {
    opacity:   1;
    transform: scale(1);
}

@media (max-width: 768px) {
    .sxc-card.sxc-card--peek,
    .sxc-card:not(.sxc-card--peek) {
        opacity:   1 !important;
        transform: none !important;
    }
}

/* ── Image ratio ────────────────────────────────────────────────── */
.sxc-card__img-ratio {
    position:    relative;
    width:       100%;
    padding-top: var(--sxc-ratio-pt);
    overflow:    hidden;
}

.sxc-card__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ================================================================
   BADGES — positionnables indépendamment (h: left/right, v: top/bottom/middle)
   ================================================================ */

.sxc-card__badges {
    position:       absolute;
    display:        flex;
    flex-direction: column;
    gap:            4px;
    z-index:        4;
    pointer-events: none;
}

/* Alignement horizontal */
.sxc-card__badges--h-left {
    left:       var(--sxc-flame-offset, 8px);
    right:      auto;
    align-items: flex-start;
}
.sxc-card__badges--h-right {
    right:      var(--sxc-flame-offset, 8px);
    left:       auto;
    align-items: flex-end;
}

/* Alignement vertical */
.sxc-card__badges--v-top {
    top:     10px;
    bottom:  auto;
    transform: none;
}
.sxc-card__badges--v-bottom {
    bottom:  10px;
    top:     auto;
    transform: none;
}
.sxc-card__badges--v-middle {
    top:       50%;
    bottom:    auto;
    transform: translateY(-50%);
}

/* ── Badge base ─────────────────────────────────────────────────── */
.sxc-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       3px 8px;
    border-radius: 999px;
    font-family:   var(--sxc-font);
    font-size:     10px;
    font-weight:   700;
    line-height:   1.4;
    white-space:   nowrap;
    pointer-events: auto;
}

.sxc-badge--featured {
    background: var(--sxc-accent);
    color:      #fff;
    box-shadow: 0 2px 6px rgba(255,23,0,.3);
}

.sxc-badge--cat {
    background:      rgba(17,21,28,.68);
    color:           #fff;
    backdrop-filter: blur(4px);
}

/* ── Badge Online / Offline ─────────────────────────────────────── */
.sxc-status {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 8px;
    border-radius:  999px;
    font-family:    var(--sxc-font);
    font-size:      10px;
    font-weight:    700;
    white-space:    nowrap;
    backdrop-filter: blur(4px);
}

.sxc-status__dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    flex-shrink:   0;
}

.sxc-online {
    background: rgba(34,197,94,.14);
    color:      #15803d;
    border:     1px solid rgba(34,197,94,.28);
}
.sxc-online .sxc-status__dot {
    background: var(--sxc-online);
    animation:  sxc-pulse 2s ease infinite;
}

.sxc-offline {
    background: rgba(148,163,184,.12);
    color:      var(--sxc-text-muted);
    border:     1px solid rgba(148,163,184,.2);
}
.sxc-offline .sxc-status__dot { background: var(--sxc-offline); }

@keyframes sxc-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(34,197,94,.4); }
    50%       { box-shadow: 0 0 0 4px rgba(34,197,94,.0); }
}

/* ================================================================
   FLAMME LOTTIE — conteneur positionné, indépendant des badges
   Le rendu est assuré par <dotlottie-wc> (officiel LottieFiles)
   ================================================================ */

.sxc-card__flame {
    position:       absolute;
    z-index:        5;
    pointer-events: none;
    width:          var(--sxc-flame-size);
    height:         var(--sxc-flame-size);
    /* overflow visible pour que le glow ne soit pas coupé */
    overflow:       visible;
}

/* Position horizontale */
.sxc-card__flame--h-right { right: var(--sxc-flame-offset); left:  auto; }
.sxc-card__flame--h-left  { left:  var(--sxc-flame-offset); right: auto; }

/* Position verticale */
.sxc-card__flame--v-top    { top: var(--sxc-flame-offset); bottom: auto; }
.sxc-card__flame--v-bottom { bottom: var(--sxc-flame-offset); top: auto; }
.sxc-card__flame--v-middle { top: 50%; bottom: auto; transform: translateY(-50%); }

/* dotlottie-wc : forcer les dimensions via CSS (le web component respecte width/height) */
.sxc-card__flame dotlottie-wc {
    display: block;
    width:   var(--sxc-flame-size) !important;
    height:  var(--sxc-flame-size) !important;
}

/* ================================================================
   BODY, TITRE, LOCALISATION, FOOTER
   ================================================================ */

.sxc-card__body {
    padding:        10px 12px 10px;
    display:        flex;
    flex-direction: column;
    gap:            5px;
    flex:           1;
}

.sxc-card__title {
    font-size:           13px;
    font-weight:         700;
    color:               var(--sxc-text);
    margin:              0;
    line-height:         1.35;
    display:             -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
    word-break:          break-word;
}

.sxc-card__location {
    display:       flex;
    align-items:   center;
    gap:           4px;
    font-size:     11px;
    font-weight:   600;
    color:         var(--sxc-text-muted);
    margin:        0;
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
    max-width:     100%;
}

.sxc-card__location-text {
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
    display:       block;
    flex:          1;
    min-width:     0;
}

.sxc-icon-pin {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            12px;
    height:           12px;
    flex-shrink:      0;
    background-color: var(--sxc-text-muted);
    -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask:             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sxc-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             6px;
    margin-top:      auto;
    flex-wrap:       nowrap;
}

.sxc-card__date {
    font-size:   10px;
    font-weight: 600;
    color:       var(--sxc-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.sxc-badge--cat-top {
    align-self:    flex-start;
    margin-bottom: 1px;
}

/* ── VRX Réactions ──────────────────────────────────────────────── */
.sxc-card__reactions {
    padding:     0 12px 10px;
    min-height:  0;
    display:     flex;
    align-items: center;
}

.sxc-card__reactions .vrx-trigger {
    font-size: 11px;
    padding:   3px 8px 3px 6px;
}

.sxc-card__reactions .vrx-trigger__emoji { font-size: 13px; }

/* ================================================================
   MODÈLE ATLAS
   ================================================================ */
.sxc-model--atlas .sxc-card {
    border:     1px solid var(--sxc-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ================================================================
   MODÈLE HALO
   ================================================================ */
.sxc-model--halo .sxc-card {
    background: var(--sxc-dark);
    box-shadow: 0 4px 16px rgba(17,21,28,.2);
}

.sxc-model--halo .sxc-card__body { gap: 5px; }

.sxc-model--halo .sxc-card__title {
    color:       #f1f5f9;
    font-size:   14px;
    font-weight: 800;
}

.sxc-model--halo .sxc-card__location { color: rgba(241,245,249,.45); }
.sxc-model--halo .sxc-icon-pin       { background-color: rgba(241,245,249,.45); }
.sxc-model--halo .sxc-card__date     { color: rgba(241,245,249,.3); }

.sxc-model--halo .sxc-badge--cat {
    background: rgba(255,255,255,.1);
    border:     1px solid rgba(255,255,255,.08);
}

.sxc-model--halo .sxc-card__body::before {
    content:       '';
    display:       block;
    height:        2px;
    width:         28px;
    background:    linear-gradient(90deg, var(--sxc-accent), var(--sxc-gold));
    border-radius: 999px;
}

.sxc-model--halo .sxc-card__reactions { padding-top: 0; }
.sxc-model--halo .vrx-trigger {
    border-color: rgba(255,255,255,.15);
    background:   rgba(255,255,255,.06);
    color:        rgba(241,245,249,.6);
}
.sxc-model--halo .vrx-trigger.vrx-is-active {
    border-color: var(--sxc-accent);
    color:        var(--sxc-accent);
    background:   rgba(255,23,0,.1);
}

/* ================================================================
   MODÈLE ORBIT
   ================================================================ */
.sxc-model--orbit .sxc-card {
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    border:     1px solid var(--sxc-border);
}

.sxc-model--orbit .sxc-card__img-wrap {
    border-radius: var(--sxc-radius) var(--sxc-radius) 0 0;
}

.sxc-card__orbit-gradient {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    height:         48%;
    background:     linear-gradient(to top, rgba(17,21,28,.85) 0%, transparent 100%);
    pointer-events: none;
}

.sxc-card__orbit-title {
    position: absolute;
    bottom:   11px;
    left:     11px;
    right:    11px;
    z-index:  2;
}

.sxc-card__title--orbit {
    color:               #fff;
    font-family:         var(--sxc-font);
    font-size:           13px;
    font-weight:         700;
    margin:              0;
    line-height:         1.3;
    display:             -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
    text-shadow:         0 1px 3px rgba(0,0,0,.5);
}

.sxc-card__body--orbit {
    padding:       9px 12px 11px;
    background:    transparent;
    border-radius: 0 0 var(--sxc-radius) var(--sxc-radius);
    gap:           0;
    flex:          0;
}

.sxc-model--orbit .sxc-card__footer {
    margin-top: 0;
    flex-wrap:  nowrap;
    gap:        4px;
}

.sxc-card__location--orbit {
    display:       flex;
    align-items:   center;
    gap:           4px;
    font-size:     11px;
    font-weight:   600;
    color:         var(--sxc-text-muted);
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
    flex:          1;
    min-width:     0;
}
.sxc-card__location--orbit .sxc-card__location-text {
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
    flex:          1;
    min-width:     0;
}

/* ================================================================
   DOTS
   ================================================================ */
.sxc-dots {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             6px;
    margin-top:      14px;
    min-height:      14px;
}

.sxc-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--sxc-border);
    border:        none;
    padding:       0;
    cursor:        pointer;
    transition:    none;
    flex-shrink:   0;
}

.sxc-dot.sxc-dot--active { background: var(--sxc-accent); }

.sxc-model--halo .sxc-dot         { background: rgba(255,255,255,.22); }
.sxc-model--halo .sxc-dot--active { background: var(--sxc-accent); }

/* ================================================================
   FLÈCHES NAVIGATION — desktop uniquement
   ================================================================ */
.sxc-arrow {
    display:         none;
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    border:          1.5px solid var(--sxc-border);
    background:      var(--sxc-surface);
    box-shadow:      0 2px 10px rgba(0,0,0,.10);
    cursor:          pointer;
    align-items:     center;
    justify-content: center;
    color:           var(--sxc-text);
    transition:      box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
    padding:         0;
}

@media (min-width: 769px) {
    .sxc-arrow { display: flex; }
}

.sxc-arrow--prev { left:  -18px; }
.sxc-arrow--next { right: -18px; }

.sxc-arrow:hover {
    background:   var(--sxc-dark);
    border-color: var(--sxc-dark);
    color:        #fff;
    box-shadow:   0 4px 16px rgba(0,0,0,.18);
}

.sxc-arrow:active { transform: translateY(-50%) scale(.93); }

.sxc-arrow.sxc-arrow--hidden {
    opacity:        0;
    pointer-events: none;
}

.sxc-model--halo .sxc-arrow {
    border-color: rgba(255,255,255,.15);
    background:   rgba(255,255,255,.08);
    color:        #f1f5f9;
}
.sxc-model--halo .sxc-arrow:hover {
    background:   var(--sxc-accent);
    border-color: var(--sxc-accent);
}

/* ================================================================
   MINI-SLIDER IMAGES (galerie par card)
   ================================================================ */
.sxc-gallery {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
}

.sxc-gallery__track {
    display:          flex;
    width:            100%;
    height:           100%;
    overflow-x:       scroll;
    overflow-y:       hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior:  auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:  none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    touch-action:     pan-x;
}
.sxc-gallery__track::-webkit-scrollbar { display: none; }

.sxc-gallery__slide {
    flex:              0 0 100%;
    width:             100%;
    height:            100%;
    scroll-snap-align: start;
    scroll-snap-stop:  always;
    position:          relative;
}

.sxc-gallery__slide .sxc-card__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.sxc-gallery__dots {
    position:        absolute;
    bottom:          7px;
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    z-index:         3;
    pointer-events:  none;
}

.sxc-gallery__dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    rgba(255,255,255,.55);
    border:        none;
    padding:       0;
    transition:    none;
    flex-shrink:   0;
}

.sxc-gallery__dot.sxc-gallery__dot--active { background: #fff; }

.sxc-gallery[data-count="1"] .sxc-gallery__dots { display: none; }

/* ── Aucune annonce ─────────────────────────────────────────────── */
.sxc-no-ads {
    text-align:  center;
    color:       var(--sxc-text-muted);
    font-family: var(--sxc-font);
    padding:     32px;
    font-size:   14px;
}