/* =============================================================
   Auto Slider Galleries v2.9
============================================================= */

:root {
    --asg-primary:    var(--ast-global-color-0, #2271b1);
    --asg-radius:     12px;
    --asg-transition: .28s cubic-bezier(.4,0,.2,1);
    --asg-shadow:     0 8px 30px rgba(0,0,0,.18);
    --asg-zindex:     999999;

    /* Vars de style boutons — ecrasees par asg_inject_vars() */
    --asg-btn-bg:       rgba(0,0,0,.52);
    --asg-btn-border:   none;
    --asg-btn-radius:   50%;
    --asg-btn-shadow:   0 4px 15px rgba(0,0,0,.35);
    --asg-btn-backdrop: blur(10px);
    --asg-btn-color:    #fff;
    --asg-btn-bg-hover: rgba(0,0,0,.78);
}

/* =============================================================
   CARROUSEL INLINE
============================================================= */

div.asg-carousel {
    position:  relative;
    width:     100%;
    max-width: 100%;
    margin:    0 auto 1.5em;
    user-select: none;
}

.asg-slide {
    position:        relative;
    width:           100%;
    overflow:        hidden;
    border-radius:   var(--asg-radius);
    background:      #111;
    aspect-ratio:    4 / 3;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.asg-slide-img {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    display:       block;
    border-radius: var(--asg-radius);
    opacity:       1;
    transition:    opacity .16s ease;
    cursor:        zoom-in;
}

.asg-slide-caption {
    position:      absolute;
    bottom: 0; left: 0; right: 0;
    padding:       10px 16px;
    background:    linear-gradient(transparent, rgba(0,0,0,.6));
    color:         #fff;
    font-size:     .82rem;
    line-height:   1.4;
    border-radius: 0 0 var(--asg-radius) var(--asg-radius);
    pointer-events: none;
}

/* Boutons prev/next du carrousel — utilisent les vars de style */
.asg-car-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           42px;
    height:          42px;
    border:          var(--asg-btn-border);
    border-radius:   var(--asg-btn-radius);
    background:      var(--asg-btn-bg);
    color:           var(--asg-btn-color);
    box-shadow:      var(--asg-btn-shadow);
    backdrop-filter: var(--asg-btn-backdrop);
    font-size:       1.9rem;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      var(--asg-transition);
    z-index:         5;
}

.asg-car-btn:hover {
    background: var(--asg-btn-bg-hover);
    transform:  translateY(-50%) scale(1.1);
}

.asg-car-prev { left:  10px; }
.asg-car-next { right: 10px; }

.asg-car-counter {
    text-align:     center;
    margin-top:     7px;
    font-size:      .78rem;
    color:          #888;
    letter-spacing: .04em;
}

.asg-car-dots {
    display:         flex;
    justify-content: center;
    gap:             6px;
    margin-top:      6px;
}

.asg-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    border:        none;
    background:    #ccc;
    padding:       0;
    cursor:        pointer;
    transition:    background .2s, transform .2s;
}

.asg-dot-active {
    background: var(--asg-primary);
    transform:  scale(1.35);
}

/* =============================================================
   LIGHTBOX
============================================================= */

#asg-lightbox {
    position:        fixed;
    inset:           0;
    display:         none;
    justify-content: center;
    align-items:     center;
    flex-direction:  column;
    background:      rgba(0,0,0,.90);
    z-index:         var(--asg-zindex);
    padding:         20px;
    box-sizing:      border-box;
    touch-action:    pan-y;
}

#asg-container {
    position:   relative;
    max-width:  95vw;
    max-height: 90vh;
    text-align: center;
}

#asg-bg-blur {
    position:            absolute;
    inset:               0;
    background-position: center;
    background-size:     cover;
    filter:              blur(24px) brightness(.5);
    opacity:             .8;
    border-radius:       var(--asg-radius);
    pointer-events:      none;
    z-index:             1;
}

#asg-img {
    position:      relative;
    z-index:       2;
    max-width:     100%;
    max-height:    82vh;
    border-radius: var(--asg-radius);
    box-shadow:    var(--asg-shadow);
    opacity:       1;
    transition:    opacity .13s ease;
    display:       block;
    margin:        0 auto;
}

#asg-caption {
    margin-top:  12px;
    color:       rgba(255,255,255,.85);
    font-size:   clamp(.85rem, 2vw, 1.1rem);
    max-width:   800px;
    user-select: none;
}

#asg-counter-lb {
    position:        fixed;
    bottom:          20px;
    left:            50%;
    transform:       translateX(-50%);
    padding:         5px 13px;
    border-radius:   30px;
    background:      rgba(0,0,0,.55);
    color:           #fff;
    font-size:       .82rem;
    backdrop-filter: blur(8px);
    z-index:         var(--asg-zindex);
}

/* Boutons lightbox — utilisent les memes vars de style */
#asg-close,
#asg-prev,
#asg-next {
    position:        fixed;
    width:           56px;
    height:          56px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          var(--asg-btn-border);
    border-radius:   var(--asg-btn-radius);
    cursor:          pointer;
    color:           var(--asg-btn-color);
    background:      var(--asg-btn-bg);
    backdrop-filter: var(--asg-btn-backdrop);
    box-shadow:      var(--asg-btn-shadow);
    transition:      var(--asg-transition);
    z-index:         var(--asg-zindex);
}

#asg-close:hover { transform: scale(1.1);                    background: var(--asg-btn-bg-hover); }
#asg-prev:hover  { transform: translateY(-50%) scale(1.1);   background: var(--asg-btn-bg-hover); }
#asg-next:hover  { transform: translateY(-50%) scale(1.1);   background: var(--asg-btn-bg-hover); }

#asg-close { top: 18px; right: 18px; font-size: 2rem; }
#asg-prev  { left: 18px;  top: 50%; transform: translateY(-50%); font-size: 2.4rem; }
#asg-next  { right: 18px; top: 50%; transform: translateY(-50%); font-size: 2.4rem; }

/* Barre autoplay */
#asg-autoplay-bar {
    display:       none;
    position:      fixed;
    bottom: 0; left: 0;
    height:        4px;
    width:         0%;
    background:    var(--asg-primary);
    z-index:       calc(var(--asg-zindex) + 1);
    border-radius: 0 2px 0 0;
}

/* =============================================================
   MOBILE
============================================================= */

@media (max-width: 600px) {
    .asg-car-btn  { width: 36px; height: 36px; font-size: 1.5rem; }
    .asg-car-prev { left: 6px; }
    .asg-car-next { right: 6px; }
    #asg-close, #asg-prev, #asg-next { width: 46px; height: 46px; }
    #asg-close { top: 10px; right: 10px; font-size: 1.6rem; }
    #asg-prev  { left: 10px; }
    #asg-next  { right: 10px; }
}

/* =============================================================
   ACCESSIBILITE
============================================================= */

@media (prefers-reduced-motion: reduce) {
    *, #asg-autoplay-bar { transition: none !important; animation: none !important; }
}

/* =============================================================
   AJOUT v3.0 — barre autoplay carrousel + taille boutons variable
============================================================= */

/* Taille des boutons pilotee par --asg-btn-size (JS) */
.asg-car-btn {
    width:     var(--asg-btn-size, 44px) !important;
    height:    var(--asg-btn-size, 44px) !important;
    font-size: var(--asg-btn-font, 23px) !important;
}

#asg-close,
#asg-prev,
#asg-next {
    width:     var(--asg-btn-size, 56px) !important;
    height:    var(--asg-btn-size, 56px) !important;
    font-size: var(--asg-btn-font, 29px) !important;
}

/* Barre de progression autoplay du carrousel */
.asg-car-bar {
    display:       none;
    position:      absolute;
    bottom:        0;
    left:          0;
    height:        4px;
    width:         0%;
    background:    var(--asg-primary);
    border-radius: 0 2px 0 0;
    z-index:       6;
}